// ============================================================
// WTFITNESS animated poster hero
// Clean plate photo + HTML text layers, choreographed entrance.
// ============================================================
const { useEffect: useWtfEffect, useRef: useWtfRef } = React;

function WTFHero() {
  const heroRef = useWtfRef(null);

  useWtfEffect(() => {
    const el = heroRef.current;
    if (!el) return;

    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduced) {
      el.classList.add('play');
      return;
    }

    // Play entrance once, when the hero enters the viewport
    const io = new IntersectionObserver((entries) => {
      if (entries.some(e => e.isIntersecting)) {
        el.classList.add('play');
        io.disconnect();
      }
    }, { threshold: 0.25 });
    io.observe(el);

    // Desktop-only mouse parallax (2–3px)
    let raf = 0;
    const fine = window.matchMedia('(pointer: fine)').matches;
    const onMove = (e) => {
      if (raf) return;
      raf = requestAnimationFrame(() => {
        raf = 0;
        const r = el.getBoundingClientRect();
        const x = ((e.clientX - r.left) / r.width - 0.5) * 2;   // -1..1
        const y = ((e.clientY - r.top) / r.height - 0.5) * 2;
        el.style.setProperty('--px', x.toFixed(3));
        el.style.setProperty('--py', y.toFixed(3));
      });
    };
    const onLeave = () => {
      el.style.setProperty('--px', '0');
      el.style.setProperty('--py', '0');
    };
    if (fine && window.innerWidth > 640) {
      el.addEventListener('mousemove', onMove);
      el.addEventListener('mouseleave', onLeave);
    }
    return () => {
      io.disconnect();
      el.removeEventListener('mousemove', onMove);
      el.removeEventListener('mouseleave', onLeave);
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);

  return (
    <div className="wtf-hero" ref={heroRef} aria-label="WTFitness — a new Aussie comedy series. Fitness has never been this unfit.">
      <div className="wtf-bg">
        <div className="wtf-bg-zoom">
          <img src="assets/wtfitness-bg-clean.png" alt="The seven WTF Fitness gym staff posing in their failing inner-city gym" />
        </div>
      </div>

      <div className="wtf-layers">
        <div className="wtf-topline">A New Aussie Comedy Series</div>

        <div className="wtf-sign">
          <span className="bolt"></span><span className="bolt"></span>
          <span className="bolt"></span><span className="bolt"></span>
          <span className="wtf-sign-word">WTF</span>
          <span className="wtf-sign-fitness">FITNESS</span>
        </div>
      </div>

      <div className="wtf-cast">
        <img src="assets/wtfitness-cast.png" alt="" aria-hidden="true" />
      </div>

      <div className="wtf-layers">
        <div className="wtf-badge">
          <span className="b1">WTF</span>
          <span className="b2">FITNESS</span>
        </div>

        <div className="wtf-nopain">
          <span className="stamp1">No Pain.</span>
          <span className="stamp2">No Gain.</span>
          <span className="idea">No Idea.</span>
        </div>

        <div className="wtf-punchline">
          <span className="l1">Fitness has</span>
          <span className="l2">never been</span>
          <span className="unfit">this unfit.</span>
        </div>

        <div className="wtf-zeroclue">
          <span>Same Gym.</span>
          <span>Zero Clue.</span>
        </div>

        <div className="wtf-board">
          <div className="wtf-board-title">Today's Classes</div>
          <div className="wtf-board-line"><span className="t">6AM</span> Pain Party</div>
          <div className="wtf-board-line"><span className="t">8AM</span> Spin of Destiny</div>
          <div className="wtf-board-line"><span className="t">10AM</span> Box of Regrets</div>
          <div className="wtf-board-line"><span className="t">12PM</span> Abs &amp; Maybe</div>
          <div className="wtf-board-line"><span className="t">5PM</span> Yoga... LOL</div>
          <div className="wtf-board-line"><span className="t">7PM</span> Cardio? Cardio.</div>
        </div>

        <div className="wtf-heart"></div>
      </div>
    </div>
  );
}

Object.assign(window, { WTFHero });