function Simulador() {
  return (
    <section className="shell simulador-section" id="simulador">
      <SectionLabel num="10 / Simulador" label="Tessa Engine" right="IP propietaria" />

      <div className="simulador-intro">
        <h2 className="h-section" style={{ maxWidth: "18ch", marginBottom: 28 }}>
          Antes de gastar tu pauta,
          <br />
          <span className="italic" style={{ color: "var(--accent)" }}>ya sabemos qué funciona.</span>
        </h2>
        <p className="lede" style={{ maxWidth: "60ch" }}>
          Mientras otras agencias lanzan creativos con corazonadas, <strong style={{ color: "var(--ink)", fontWeight: 500 }}>Tessa
          Engine</strong> simula cada campaña con personas sintéticas — buyer personas IA entrenadas con 2 años
          de data real — antes de invertir un solo dólar de tu presupuesto.
        </p>
      </div>

      <div className="simulador-flow">
        {[
          {
            step: "01",
            label: "Crea",
            title: "Tessa Ads genera el creativo",
            copy: "Variaciones de copy + imagen para tu objetivo, audiencia y formato.",
          },
          {
            step: "02",
            label: "Simula",
            title: "Enjambres de agentes lo prueban",
            copy: "Personas sintéticas evalúan el creativo. Multiplicado por miles de simulaciones en minutos.",
          },
          {
            step: "03",
            label: "Decide",
            title: "Si pasa 70% de aceptación → lanza",
            copy: "Si no llega al threshold, se ajusta y se vuelve a simular. Tu pauta nunca quema dinero en pruebas.",
          },
        ].map((s) => (
          <article key={s.step} className="simulador-step">
            <div className="simulador-step-num">{s.step}</div>
            <div className="simulador-step-label">{s.label}</div>
            <h3 className="simulador-step-title">{s.title}</h3>
            <p>{s.copy}</p>
          </article>
        ))}
      </div>

      <div className="simulador-body">
        <div>
          <p>
            <strong style={{ color: "var(--ink)", fontWeight: 500 }}>Tessa Engine</strong> es el cerebro que entrena
            a Tessa. Ejecuta enjambres de agentes IA que actúan como tu cliente ideal: ven el creativo, lo evalúan,
            reaccionan. Multiplicado por miles de simulaciones en minutos.
          </p>
          <p>
            Cada nueva campaña aprende de las anteriores. El motor se alimenta de los <strong style={{ color: "var(--ink)", fontWeight: 500 }}>últimos
            2 años</strong> operando con marcas reales en LATAM — sabe qué funciona en inmobiliaria, qué falla en
            retail, qué convierte en ecommerce. La data se renueva: las dinámicas de consumo cambian, así que el motor
            también.
          </p>
          <p>
            <strong style={{ color: "var(--ink)", fontWeight: 500 }}>El threshold es 70%.</strong> Si un creativo no
            logra ese score con las personas sintéticas, no se publica. Se ajusta y se vuelve a simular. Eso es lo que
            hace que tu pauta no queme presupuesto en pruebas — los testeos los hacemos antes, en silicio.
          </p>
        </div>

        <div className="simulador-cta-card">
          <div className="simulador-cta-eyebrow">El motor</div>
          <div className="simulador-cta-title">
            Pre-valida creativos
            <br />
            <span className="italic" style={{ color: "var(--accent)" }}>antes de gastar pauta.</span>
          </div>
          <div className="simulador-cta-actions">
            <a href="/simulador" className="btn btn-primary" style={{ width: "100%", justifyContent: "center" }}>
              Probar el simulador <Arrow />
            </a>
            <a href="/simulador#como-funciona" className="btn btn-ghost" style={{ width: "100%", justifyContent: "center" }}>
              Ver cómo funciona
            </a>
          </div>
          <p className="simulador-cta-note">
            Sin tarjeta. Pre-valida tus campañas antes de lanzarlas.
          </p>
        </div>
      </div>
    </section>
  );
}

window.Simulador = Simulador;