function Hero({ variant = 'manifesto' }) {
  const [lang] = useLang();
  const C = window.FUSE_CONTENT.hero;
  const V = C.variants[variant] || C.variants.manifesto;
  const heroRef = React.useRef(null);

  // Subtle parallax on the meta column as user scrolls into hero
  React.useEffect(() => {
    let raf;
    const onScroll = () => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        if (!heroRef.current) return;
        const y = window.scrollY;
        heroRef.current.style.setProperty('--py', `${Math.min(y * 0.12, 40)}px`);
      });
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => { cancelAnimationFrame(raf); window.removeEventListener('scroll', onScroll); };
  }, []);

  const [pre, emph, post] = V.h1[lang];

  return (
    <section ref={heroRef} id="top" className="section" style={{ paddingTop: 'calc(var(--nav-h) + 88px)', paddingBottom: 80, position: 'relative', overflow: 'hidden' }} data-screen-label="hero">
      {/* Marginalia: hand-drawn arrow pointing at the "Agendar llamada" CTA in the navbar */}
      <img
        src="design-system/marks/arrow-curve.svg"
        alt=""
        aria-hidden
        className="mark mark-oxblood hero-arrow"
        style={{
          position: 'absolute',
          width: 110, height: 'auto',
          opacity: 0.6,
          pointerEvents: 'none',
        }}
      />
      <style>{`
        .hero-arrow {
          /* Tip of the path is the upper-right end of the SVG; we rotate
             a hair so the tip aims up-and-right at the navbar CTA. */
          top: 72px;
          right: 200px;
          transform: rotate(-20deg);
        }
        @media (max-width: 1080px) {
          .hero-arrow { right: 170px; top: 68px; width: 96px; }
        }
        @media (max-width: 820px) {
          .hero-arrow { display: none; }
        }
      `}</style>

      <div className="container">
        <div className="kicker reveal" style={{ marginBottom: 32, display: 'flex', gap: 16, alignItems: 'center' }}>
          <span style={{ color: 'var(--accent)' }}>{V.kicker[lang]}</span>
          <span style={{ flex: '0 0 32px', height: 1, background: 'var(--border-strong)' }} />
          <span>{lang === 'es' ? 'Sistemas comerciales y operacionales AI‑native' : 'AI-native commercial & operational systems'}</span>
        </div>

        <h1 className="h-display reveal" data-delay="1" style={{ maxWidth: '20ch', marginBottom: 40 }} key={`${variant}-${lang}`}>
          {pre}{' '}
          <span className="mk-emph">{emph}</span>{' '}
          {post}
        </h1>

        <div className="reveal" data-delay="2" style={{
          display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64,
          alignItems: 'end', marginBottom: 48,
          transform: 'translateY(calc(var(--py, 0px) * -0.5))',
        }}>
          <p className="lead" style={{ maxWidth: '54ch', fontSize: 'var(--text-lead)' }}>
            {V.lead[lang]}
          </p>
          <div className="kicker" style={{
            display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'flex-start',
            transform: 'translateY(var(--py, 0px))',
          }}>
            {C.meta[lang].map(([big, small], i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 28, color: 'var(--ink)', letterSpacing: '-0.02em' }}>{big}</span>
                <span style={{ color: 'var(--fg-mute)' }}>{small}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="reveal" data-delay="3" style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
          <a href="#cta" className="btn btn-primary">{C.cta_primary[lang]}</a>
          <a href="#ofertas" className="btn btn-ghost">{C.cta_secondary[lang]} <span style={{ fontFamily: 'var(--font-display)' }}>→</span></a>
        </div>

        <div className="reveal" data-delay="4" style={{ marginTop: 88, display: 'grid', gridTemplateColumns: '1fr auto 1fr', gap: 24, alignItems: 'end', borderTop: '1px solid var(--ink)', paddingTop: 20 }}>
          <div className="kicker">§ {lang === 'es' ? 'Esta página' : 'This page'}</div>
          <div className="kicker">{C.note[lang]}</div>
          <div className="kicker" style={{ textAlign: 'right' }}>2026 · v1.0</div>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;