const { useEffect, useRef, useState } = React;

function useScrollReveal() {
  useEffect(() => {
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add('in');
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12, rootMargin: '0px 0px -60px 0px' }
    );
    document.querySelectorAll('.enter').forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

function useLenisAndGridSpeed() {
  useEffect(() => {
    let lenis;
    if (window.Lenis) {
      lenis = new window.Lenis({
        duration: 1.25,
        easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
        smoothWheel: true,
        smoothTouch: false,
      });
      const raf = (t) => { lenis.raf(t); requestAnimationFrame(raf); };
      requestAnimationFrame(raf);
    }
    const root = document.documentElement;
    let last = window.scrollY, vel = 0;
    const baseDur = 14;
    let alive = true;
    const loop = () => {
      if (!alive) return;
      vel *= 0.92;
      const dur = Math.max(0.8, baseDur / (1 + vel * 0.6));
      root.style.setProperty('--grid-dur', dur.toFixed(2) + 's');
      requestAnimationFrame(loop);
    };
    loop();
    const onScroll = () => {
      const y = window.scrollY;
      vel = Math.min(20, vel + Math.abs(y - last) * 0.05);
      last = y;
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => { alive = false; window.removeEventListener('scroll', onScroll); if (lenis) lenis.destroy(); };
  }, []);
}

function App() {
  useScrollReveal();
  useLenisAndGridSpeed();
  return (
    <React.Fragment>
      <CyberBg />
      <div className="page">
        <Hero />
        <Bento />
        <Dashboard />
        <BuyersTable />
        <FinalCTA />
        <footer>
          <span>TRAFFIC BEARS • iGaming Performance Unit • 2019—2025</span>
        </footer>
      </div>
    </React.Fragment>
  );
}

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