function Hero() {
  return (
    <section className="hero shell" id="top">
      <div className="eyebrow" style={{ marginBottom: 32 }}>
        Sistema en 72h · Sin contrato anual · Tracking de ROI en cada dólar
      </div>
      <div className="hero-grid">
        <div>
          <h1>
            Llevas <span className="em">meses pagando ads</span>
            <br />
            sin saber <span className="accent">qué funciona.</span>
          </h1>
          <p className="hero-sub">
            En 72 horas te entregamos el sistema completo — CRM, estrategia, buyer
            personas y campañas activas — para que cada dólar de pauta sea
            trackeable y escalable.
            <br />
            <span style={{ color: "var(--ink)", fontWeight: 500 }}>
              Sin permanencia y sin riesgo — cancelas cuando quieras.
            </span>
          </p>
          <div className="hero-actions">
            <a href="https://agencia.teamsolutionss.com/diagnostico-inbound" target="_blank" rel="noopener" className="btn btn-primary">
              Diagnóstico automático (5 min) <Arrow />
            </a>
            <a href="https://agencia.teamsolutionss.com/book/team/teamsolutions-agencia-evaluacion" target="_blank" rel="noopener" className="btn btn-ghost">
              Demo con el equipo · 30 min
            </a>
          </div>

          <div className="hero-trust" style={{ display: "flex", flexWrap: "wrap", gap: 10, marginTop: 18, marginBottom: 12 }}>
            <span className="hero-trust-chip">⚡ 0 conocimiento técnico</span>
            <span className="hero-trust-chip">↻ Mensual · Cancela cuando quieras</span>
            <span className="hero-trust-chip">∎ Sin markups en pauta</span>
          </div>

          <div className="hero-meta">
            <div className="item">
              <span className="num">72h</span>
              <span className="label">Sistema en marcha</span>
            </div>
            <div className="item">
              <span className="num">9 años</span>
              <span className="label">Operando en LATAM</span>
            </div>
          </div>
        </div>

        <div className="hero-video">
          <video autoPlay muted loop playsInline>
            <source src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/0210-b4sZEvywnVBYDL55MCQbpy1TekKUHZ.mp4" type="video/mp4" />
          </video>
          <div className="hero-video-tag">EN VIVO · TESSA</div>
        </div>
      </div>

      <div className="hero-marquee">
        <div className="marquee-track">
          {Array.from({ length: 2 }).map((_, dup) => (
            <React.Fragment key={dup}>
              <span className="pill">OpenAI</span>
              <span className="pill">Anthropic</span>
              <span className="pill">Google AI</span>
              <span className="pill">Meta AI</span>
              <span className="pill">Perplexity</span>
              <span className="pill">Midjourney</span>
              <span className="pill">Stability AI</span>
              <span className="pill">Cohere</span>
              <span className="pill">Hugging Face</span>
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;