const Hero = () => {
  const vidRef = React.useRef(null);

  React.useEffect(() => {
    const v = vidRef.current;
    if (!v) return;

    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
      try { v.pause(); } catch(_) {}
      return;
    }

    v.play().catch(() => {});
  }, []);

  return (
    <section id="top" className="relative w-full min-h-[100svh] flex items-center overflow-hidden">
      <video ref={vidRef}
             className="absolute inset-0 w-full h-full object-cover"
             width="1920" height="1080"
             muted autoPlay loop playsInline preload="auto"
             poster="assets/hero-frame-1.jpg"
             aria-hidden="true">
        <source src="assets/hero-loop.mp4" type="video/mp4" />
      </video>

      {/* Overlay top→bottom */}
      <div className="absolute inset-0 pointer-events-none"
           style={{ background: 'linear-gradient(to bottom, rgba(10,10,10,0.4) 0%, rgba(10,10,10,0.55) 40%, rgba(10,10,10,0.85) 100%)' }} />
      {/* Vignette */}
      <div className="absolute inset-0 pointer-events-none"
           style={{ background: 'radial-gradient(120% 80% at 50% 60%, transparent 40%, rgba(10,10,10,0.55) 100%)' }} />

      <div className="relative z-10 container-x w-full" style={{ paddingTop: 'clamp(120px, 14vw, 200px)', paddingBottom: 'clamp(80px, 10vw, 140px)' }}>
        <div className="max-w-[900px] mx-auto text-center">
          <div className="font-mono text-grad reveal" style={{ fontSize: 12 }}>
            INTELIGENCIA COGNITIVA PARA LA NUEVA ECONOMÍA
          </div>

          <h1 className="font-display text-fg reveal mt-6"
              style={{ fontSize: 'clamp(40px, 5vw, 72px)', fontWeight: 500, textWrap: 'balance' }}>
            Aprende, integra y escala con <span className="text-grad">Inteligencia Artificial</span>.
          </h1>

          <p className="reveal mt-6 mx-auto" style={{ color: 'var(--muted)', maxWidth: 640, textWrap: 'pretty' }}>
            Formamos personas, equipos y empresas para operar con criterio estratégico en la nueva economía de la IA.
          </p>

          <div className="reveal mt-10 flex flex-col sm:flex-row items-center justify-center gap-3">
            <a href="#programas"
               className="btn-grad rounded-full px-6 py-3.5 text-[15px] font-medium text-white inline-flex items-center gap-2 hover:opacity-95 transition">
              Quiero formarme en IA
              <IconArrow size={16} />
            </a>
            <a href="#empresas"
               className="rounded-full px-6 py-3.5 text-[15px] font-medium text-white inline-flex items-center gap-2 hover:bg-white/5 transition"
               style={{ border: '1px solid rgba(230,234,240,0.2)' }}>
              ECOOIA para empresas
            </a>
          </div>
        </div>
      </div>

      {/* Scroll cue */}
      <div className="absolute bottom-7 left-1/2 -translate-x-1/2 z-10 font-mono text-[10px]" style={{ color: 'var(--muted)' }}>
        ↓ DESPLÁZATE
      </div>
    </section>
  );
};

window.Hero = Hero;