function Hero() {
  return (
    <section className="hero" id="top">
      <div className="container">
        <Reveal>
          <div className="hero-eyebrow">
            <span className="dot" style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--c-green)', boxShadow: '0 0 8px var(--c-green)' }} />
            Automatización con IA para pymes y autónomos en España
          </div>
        </Reveal>

        <Reveal delay={80}>
          <h1>
            Automatiza tu negocio<br/>
            con IA, <span className="gradient-text">sin romper</span><br/>
            normativa.
          </h1>
        </Reveal>

        <Reveal delay={160}>
          <p className="hero-sub">
            Diseño automatizaciones con IA, webs y chatbots para PYMES y autónomos que quieren
            recuperar horas, controlar mejor su operación y dormir tranquilos con
            RGPD y la nueva ley europea de IA.
          </p>
        </Reveal>

        <Reveal delay={240}>
          <div className="hero-ctas">
            <Btn primary href="#contacto">Agendar llamada gratuita</Btn>
            <Btn href="#servicios">Ver servicios y precios</Btn>
          </div>
        </Reveal>

        <Reveal delay={320}>
          <div className="hero-stats">
            <div className="hero-stat">
              <div className="num gradient-text">20<span style={{ fontSize: '1.4rem' }}>años</span></div>
              <div className="lbl">en atención al cliente y procesos</div>
            </div>
            <div className="hero-stat">
              <div className="num">7<span style={{ fontSize: '1.4rem' }}>días</span></div>
              <div className="lbl">de media para una landing</div>
            </div>
            <div className="hero-stat">
              <div className="num">✓</div>
              <div className="lbl">Al día en RGPD y normativa europea de IA</div>
            </div>
            <div className="hero-stat">
              <div className="num">0<span style={{ fontSize: '1.4rem' }}>€</span></div>
              <div className="lbl">la primera consulta y propuesta</div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}
window.Hero = Hero;