// ============================================================================
// La prueba · Territorio D del briefing: "el número es el anuncio".
// Nueve cifras en grande y una línea debajo. Nada más.
// ============================================================================

function Proof() {
  return (
    <section className="block proof" id="pruebalo">
      <div className="page">
        <div className="proof-inner">
          <div className="proof-kicker mono">Antes de venir, compruébalo</div>

          <h2 className="proof-line">{COPY.proofLine}</h2>

          <a className="proof-number" href={`tel:${EVENT.phoneTel}`} aria-label={`Llamar al ${EVENT.phone}`}>
            {EVENT.phone}
          </a>

          <p className="proof-sub">{COPY.proofSub}</p>

          <div className="proof-grid">
            <div className="proof-item">
              <div className="proof-item-h">Se identifica como IA</div>
              <p>Si se lo preguntas, te lo dice. No disimula.</p>
            </div>
            <div className="proof-item">
              <div className="proof-item-h">No improvisa</div>
              <p>Consulta documentos y sistemas antes de responder. Si no lo sabe, lo dice.</p>
            </div>
            <div className="proof-item">
              <div className="proof-item-h">No lo resuelve todo</div>
              <p>
                Cuando hace falta una persona, le pasa la llamada ya presentada: quién llama y
                por qué.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// --- El reto: "trae tu pregunta más difícil" --------------------------------
function Challenge({ onOpenConfirm }) {
  return (
    <section className="block challenge" id="reto">
      <div className="page">
        <div className="challenge-box">
          <div className="challenge-copy">
            <div className="kicker">04 · El reto</div>
            <h2>
              Trae tu pregunta
              <br />
              más difícil<span className="accent">.</span>
            </h2>
            <p>
              La que crees que va a dejar en evidencia a nuestra IA. La responderemos en
              directo, delante de todo el mundo.
            </p>
            <p className="challenge-fine">
              Durante el evento hay un muro de preguntas: escaneas un QR, escribes y entra de
              forma anónima. Se proyectan y se responden en la mesa redonda. También las
              incómodas.
            </p>
            <button className="btn btn-accent-ghost" onClick={onOpenConfirm}>
              Dejar mi pregunta al confirmar
            </button>
          </div>
          <div className="challenge-visual" aria-hidden="true">
            <div className="q-card q-1">«¿Y si le dice una tontería a un cliente mío?»</div>
            <div className="q-card q-2">«¿Cómo sé que no se lo está inventando?»</div>
            <div className="q-card q-3">«¿Cuánto tiempo tengo que dedicarle yo?»</div>
            <div className="q-card q-4">«Mi herramienta no está en vuestra lista.»</div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Proof = Proof;
window.Challenge = Challenge;