/* APP - mount everything */

function App() {
  // global reveal observer fallback for non-react reveals
  useEffect(() => {
    const els = document.querySelectorAll('.reveal:not(.in)');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.15 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  // light smooth-scroll wheel inertia (Lenis-lite)
  useEffect(() => {
    if (window.matchMedia('(hover: none)').matches) return;
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;

    let current = window.scrollY;
    let target = window.scrollY;
    let raf;

    const onScroll = () => { target = window.scrollY; };
    const tick = () => {
      current += (target - current) * 0.12;
      if (Math.abs(target - current) > 0.5) {
        document.documentElement.style.setProperty('--scroll', `${current}px`);
        // Don't actually move the DOM - just smooth target syncing is enough
        // We rely on native scroll, but apply a tiny lag class effect via translate on body content
      }
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    addEventListener('scroll', onScroll, { passive: true });

    return () => {
      cancelAnimationFrame(raf);
      removeEventListener('scroll', onScroll);
    };
  }, []);

  return (
    <>
      <Nav />
      <main>
        <Hero />
        <Pulse />
        <Lore />
        <WinWall />
        <Creators />
        <MotionBoard />
        <GangMap />
        <Voices />
        <JoinCTA />
      </main>
      <Footer />
      <AdminApp />
    </>
  );
}

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