function Concept({ onOpenDemo }) {
  return (
    <section className="block" id="como-funciona">
      <div className="page">
        <div className="section-head">
          <div className="kicker">01 · Cómo funciona</div>
          <h2>
            Te vas con tu agente
            <br />
            montado<span className="accent">.</span>
          </h2>
          <div className="aside">
            Cuarenta empresas. Una mañana. Ningún acto de fe.
          </div>
        </div>

        <ol className="steps">
          {STEPS.map((s) => (
            <li className="step" key={s.n}>
              <div className="step-n mono">{s.n}</div>
              <div className="step-body">
                <h3>{s.title}</h3>
                <p>{s.desc}</p>
              </div>
            </li>
          ))}
        </ol>

        <div className="gift">
          <div className="gift-main">
            <div className="gift-tag mono">Plazas limitadas · {EVENT.cupoDemos} empresas</div>
            <h3>Quiero mi SKAI gratis</h3>
            <p>
              Al confirmar tu asistencia puedes pedirlo. Entra todo el que esté interesado y
              elegimos {EVENT.cupoDemos} empresas para montarles su agente antes del evento.
              Si entras, sales de #LaPlaza con <strong>siete días de acceso</strong>: para
              enseñárselo a tu equipo, a tu socio y a quien haga falta.
            </p>
            <p className="gift-fine">
              A los siete días se apaga si no seguimos adelante. Lo decimos ahora para no
              tener que explicarlo después.
            </p>
          </div>
          <div className="gift-cta">
            <button className="btn btn-primary" onClick={onOpenDemo}>
              Pedir mi agente <span className="arrow">→</span>
            </button>
            <div className="gift-note mono">Se pide desde el mismo formulario</div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Concept = Concept;