/* Hero — video foreground, minimal overlay */
function Hero({ variantIdx, overlay, accentVar, accentMode }) {
  const variants = window.LB_DATA.heroVariants;
  const v = variants[variantIdx] || variants[0];
  const greenAccent = accentMode === 'green';
  const [scrollY, setScrollY] = React.useState(0);
  const videoRef = React.useRef(null);

  React.useEffect(() => {
    const onScroll = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  React.useEffect(() => {
    const v = videoRef.current;
    if (v) { v.muted = true; const p = v.play(); if (p && p.catch) p.catch(()=>{}); }
  }, []);

  const parallax = Math.min(scrollY * 0.18, 220);
  const contentLift = Math.min(scrollY * 0.2, 200);
  const contentOpacity = Math.max(1 - scrollY / 700, 0);

  return (
    <section id="top" style={{ position: 'relative', minHeight: '100vh', overflow: 'hidden', color: '#fff', display: 'flex', alignItems: 'center', background: '#001122' }}>
      {/* Video */}
      <video
        ref={videoRef}
        autoPlay muted loop playsInline preload="auto"
        src="assets/hero.mp4"
        style={{
          position:'absolute', top:'-5%', left:'-5%', width:'110%', height:'110%',
          objectFit:'cover', zIndex:0,
          transform: `translateY(${parallax}px)`,
          willChange:'transform',
        }}
      />
      {/* Brand-color gradient overlay — dark behind text (left), transparent over motion (right). */}
      <div aria-hidden style={{ position:'absolute', inset:0, zIndex:1,
        background: `linear-gradient(92deg, rgba(0,34,68,${Math.min(0.95, overlay + 0.15)}) 0%, rgba(0,34,68,${Math.min(0.92, overlay + 0.05)}) 35%, rgba(0,34,68,${Math.max(0.05, overlay - 0.35)}) 72%, rgba(0,34,68,${Math.max(0.02, overlay - 0.5)}) 100%)`,
      }}/>
      {/* Soft bottom fade for section transition */}
      <div aria-hidden style={{ position:'absolute', bottom:0, left:0, right:0, height:'35%', zIndex:1,
        background:'linear-gradient(180deg, transparent 0%, rgba(0,12,24,0.65) 100%)'
      }}/>

      <div className="shell" style={{ position:'relative', zIndex:3, padding: '120px 32px 80px', width:'100%', transform: `translateY(${-contentLift}px)`, opacity: contentOpacity }}>
        <div style={{ maxWidth: 900 }}>
          <div className="eyebrow" style={{ color: greenAccent ? '#9BE4A9' : '#B8C7D9', fontSize: 13 }}>{v.eyebrow}</div>
          <h1 style={{
            fontFamily: 'var(--font-display)', fontWeight: 800,
            fontSize: 'clamp(46px, 6.4vw, 92px)', lineHeight: 1.02, letterSpacing: '-0.018em',
            margin: '20px 0 26px', color: '#fff', textWrap: 'balance',
            textShadow:'0 2px 40px rgba(0,0,0,0.7), 0 1px 12px rgba(0,0,0,0.5)',
          }}>
            {v.headline[0]}<br/>
            <span style={{ color: greenAccent ? accentVar : '#fff', fontStyle: greenAccent ? 'normal' : 'italic', fontWeight: greenAccent ? 800 : 500 }}>{v.headline[1]}</span>
          </h1>
          <p style={{ fontFamily:'var(--font-sans)', fontSize: 21, fontWeight: 500, lineHeight: 1.5, maxWidth: 680, color: '#fff', margin: '0 0 36px', textWrap: 'pretty', textShadow:'0 2px 20px rgba(0,20,40,0.9), 0 1px 4px rgba(0,0,0,0.7)', letterSpacing: '-0.005em' }}>
            {v.sub}
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <a className="btn primary" href="#contact" style={{ background: accentVar, padding: '15px 26px', fontSize: 15 }}>Request Partnership</a>
            <a className="btn ghost" href="#platform" style={{ padding: '15px 26px', fontSize: 15 }}>Explore the Platform</a>
          </div>
          <div style={{ display:'flex', gap: 28, marginTop: 64, color:'rgba(255,255,255,0.9)', fontFamily:'var(--font-display)', fontSize: 11, letterSpacing: '.14em', textTransform:'uppercase', flexWrap:'wrap', textShadow:'0 1px 12px rgba(0,0,0,0.7)' }}>
            <span>Yale Spinout · 2025</span>
            <span>30+ AI/ML Technologies</span>
            <span>50+ Publications</span>
            <span>A Latent Alpha Company</span>
          </div>
        </div>
      </div>

      <div aria-hidden style={{ position:'absolute', bottom: 28, left:'50%', transform:'translateX(-50%)', zIndex: 3, color: 'rgba(255,255,255,0.85)', fontFamily:'var(--font-display)', fontSize: 11, letterSpacing: '.2em', textTransform:'uppercase', display:'flex', flexDirection:'column', alignItems:'center', gap: 8, opacity: contentOpacity, textShadow:'0 1px 8px rgba(0,0,0,0.6)' }}>
        <span>Scroll the manifold</span>
        <span style={{ width: 1, height: 28, background: 'rgba(255,255,255,0.5)' }}/>
      </div>
    </section>
  );
}
window.Hero = Hero;