function Hero() {
  const heroRef = React.useRef(null);
  const photoRef = React.useRef(null);
  const wordRef = React.useRef(null);

  // Defensive: force-show hero content if CSS animations get stuck (iframe bug).
  // After a short delay, snap any still-running entrance animations to their end state.
  React.useEffect(() => {
    if (!heroRef.current) return;
    const el = heroRef.current;
    const fix = () => {
      el.querySelectorAll('*').forEach(node => {
        node.getAnimations?.().forEach(a => {
          if (a.playState === 'running' && a.currentTime === 0) {
            try { a.finish(); } catch(e) {}
          }
        });
      });
    };
    const t1 = setTimeout(fix, 1200);
    const t2 = setTimeout(fix, 2500);
    return () => { clearTimeout(t1); clearTimeout(t2); };
  }, []);

  // Scroll-driven scale + parallax on the photo, kinetic offset on the type.
  React.useEffect(() => {
    let raf = 0;
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => {
        raf = 0;
        const el = heroRef.current;
        if (!el) return;
        const r = el.getBoundingClientRect();
        const vh = window.innerHeight;
        // 0 at hero top, 1 when hero leaves viewport
        const p = Math.min(1, Math.max(0, -r.top / (r.height || vh)));
        if (photoRef.current) {
          // Image scales up + drifts down a touch as user scrolls
          photoRef.current.style.setProperty('--scroll-p', p.toFixed(3));
        }
        if (wordRef.current) {
          wordRef.current.style.setProperty('--scroll-p', p.toFixed(3));
        }
      });
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // Mouse parallax — subtle drift of the photo + foreground stickers
  React.useEffect(() => {
    const el = heroRef.current;
    if (!el) return;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      const x = (e.clientX - r.left) / r.width - 0.5;  // -0.5..0.5
      const y = (e.clientY - r.top) / r.height - 0.5;
      el.style.setProperty('--mx', x.toFixed(3));
      el.style.setProperty('--my', y.toFixed(3));
    };
    el.addEventListener('mousemove', onMove);
    return () => el.removeEventListener('mousemove', onMove);
  }, []);

  return (
    <header className="hero" id="top" ref={heroRef}>
      <div className="hero-grid" />
      <div className="hero-noise" />

      <div className="shell hero-inner">
        <div className="hero-top">
          <div className="eyebrow hero-eyebrow">
            <span className="pulse-dot" />
            <span>Built in Aotearoa</span>
            <span className="dim">·</span>
            <span>Launching June 2026</span>
          </div>
          <div className="hero-tag">
            <span className="hero-tag-num">N°01</span>
            <span className="hero-tag-line"/>
            <span className="hero-tag-label">A new energy stack for the field</span>
          </div>
        </div>

        <h1 className="hero-headline" ref={wordRef}>
          <span className="hl-row">
            <span className="word"><span>Silent.</span></span>{" "}
            <span className="word"><span>Mobile.</span></span>
          </span>
          <span className="hl-row hl-row-b">
            <span className="word accent"><span>Off&#8209;grid</span></span>{" "}
            <span className="word"><span>power.</span></span>
          </span>
        </h1>

        {/* Hero photo card */}
        <div className="hero-photo-wrap">
          <div className="hero-photo" ref={photoRef}>
            <img
              src="assets/trailer-hero.png"
              alt="The Solar Trailer Co — solar power station deployed in the New Zealand high country"
              loading="eager"
              decoding="async"
            />
            <div className="hero-photo-vignette" />
            <div className="hero-photo-grain" />

            {/* Floating spec stickers */}
            <div className="sticker sticker-1">
              <div className="sticker-eyebrow">Sound · 1m</div>
              <div className="sticker-num">&lt;30 <span>dB</span></div>
              <div className="sticker-line"/>
              <div className="sticker-foot">A whisper. A diesel gen runs ~95.</div>
            </div>
            <div className="sticker sticker-2">
              <div className="sticker-eyebrow">Stack</div>
              <div className="sticker-num">5<span>kW</span> · 20<span>kWh</span></div>
              <div className="sticker-line"/>
              <div className="sticker-foot">Modular lithium · sine inverter</div>
            </div>
            <div className="sticker sticker-3">
              <div className="sticker-eyebrow">Emissions on site</div>
              <div className="sticker-num">0<span>g/kWh</span></div>
              <div className="sticker-line"/>
              <div className="sticker-foot">Sun in. Power out.</div>
            </div>

            {/* Animated reticle / crosshair */}
            <svg className="hero-reticle" viewBox="0 0 100 100" aria-hidden="true">
              <circle cx="50" cy="50" r="22" fill="none" stroke="currentColor" strokeWidth="0.6"/>
              <circle cx="50" cy="50" r="2" fill="currentColor"/>
              <line x1="50" y1="20" x2="50" y2="34" stroke="currentColor" strokeWidth="0.6"/>
              <line x1="50" y1="66" x2="50" y2="80" stroke="currentColor" strokeWidth="0.6"/>
              <line x1="20" y1="50" x2="34" y2="50" stroke="currentColor" strokeWidth="0.6"/>
              <line x1="66" y1="50" x2="80" y2="50" stroke="currentColor" strokeWidth="0.6"/>
            </svg>

            {/* Corner crops */}
            <span className="corner tl" /><span className="corner tr" />
            <span className="corner bl" /><span className="corner br" />
          </div>
        </div>

        <div className="hero-bottom">
          <div className="hero-actions">
            <a href="#contact" className="btn btn-primary">Reserve a 2026 build slot <ArrowRight size={14} stroke={2} className="arrow"/></a>
            <a href="#calculator" className="btn btn-ghost">See your savings <ArrowRight size={14} stroke={2} className="arrow"/></a>
          </div>
          <p className="hero-sub">
            A road-towable solar power station that pays for itself in <span style={{color:'var(--signal)'}}>~3.5 years</span> on a typical build site — then quietly keeps earning. Tow it. Level it. Switch it on. <span style={{opacity:0.55}}>$500 fully-refundable deposit · first 25 units priced at launch parity.</span>
          </p>
        </div>
      </div>

      <div className="hero-meta">
        <span>NZBN · STC LTD · 2026</span>
        <span className="scroll-indicator">
          <span>Scroll</span>
          <span className="scroll-bar"/>
        </span>
        <span>14 of 25 launch slots reserved</span>
      </div>
    </header>
  );
}
window.Hero = Hero;