// Workshop landing — root app.

function App() {
  // Cursor-reactive teal glow on dark sections.
  // Listens for mouse on .hero, .walk, .final and writes --mx/--my onto each
  // so a radial-gradient layer can follow the cursor with low opacity.
  React.useEffect(() => {
    const supportsHover = window.matchMedia('(hover: hover)').matches;
    if (!supportsHover) return;
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;

    const sections = document.querySelectorAll('.hero, .walk, .final');
    const onMove = (e) => {
      const t = e.currentTarget;
      const r = t.getBoundingClientRect();
      t.style.setProperty('--mx', ((e.clientX - r.left) / r.width * 100) + '%');
      t.style.setProperty('--my', ((e.clientY - r.top) / r.height * 100) + '%');
    };
    const onEnter = (e) => e.currentTarget.classList.add('has-cursor');
    const onLeave = (e) => e.currentTarget.classList.remove('has-cursor');
    sections.forEach((s) => {
      s.addEventListener('mousemove', onMove);
      s.addEventListener('mouseenter', onEnter);
      s.addEventListener('mouseleave', onLeave);
    });
    return () => sections.forEach((s) => {
      s.removeEventListener('mousemove', onMove);
      s.removeEventListener('mouseenter', onEnter);
      s.removeEventListener('mouseleave', onLeave);
    });
  }, []);

  // Host photo parallax — subtle drift as the user scrolls.
  React.useEffect(() => {
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    const photos = document.querySelectorAll('.host-photo .host-img');
    if (!photos.length) return;
    let raf = 0;
    const update = () => {
      raf = 0;
      const vh = window.innerHeight;
      photos.forEach((img) => {
        const card = img.closest('.host-photo');
        if (!card) return;
        const r = card.getBoundingClientRect();
        if (r.bottom < 0 || r.top > vh) return;
        // -10 to +10px depending on where the card centre is in the viewport
        const centre = (r.top + r.height / 2) / vh;
        const shift = (0.5 - centre) * 20;
        img.style.setProperty('--host-parallax', `${shift.toFixed(1)}px`);
      });
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); };
    update();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);

  return (
    <>
      <Hero/>
      <ForYou/>
      <SeeLive/>
      <WalkAway/>
      <Testimonials/>
      <Hosts/>
      <FAQ/>
      <FinalCTA/>
      <Footer/>
      <FloatingCTA/>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);