// app.jsx — root
function App() {
  useReveal();

  // Lenis-style smooth scroll
  React.useEffect(() => {
    let raf;
    let current = window.scrollY;
    let target = window.scrollY;
    let active = false;
    const ease = 0.085;

    const onWheel = (e) => {
      // Don't hijack scroll inside the reels lane or lightbox
      if (e.target.closest(".reels-lane") || e.target.closest(".lightbox")) return;
      e.preventDefault();
      target += e.deltaY;
      target = Math.max(0, Math.min(target, document.body.scrollHeight - window.innerHeight));
      if (!active) { active = true; loop(); }
    };

    const loop = () => {
      current += (target - current) * ease;
      window.scrollTo(0, current);
      if (Math.abs(target - current) > 0.5) {
        raf = requestAnimationFrame(loop);
      } else {
        active = false;
      }
    };

    // sync on user scroll (touch / scrollbar)
    const onScroll = () => { if (!active) { current = target = window.scrollY; } };

    window.addEventListener("wheel", onWheel, { passive: false });
    window.addEventListener("scroll", onScroll);
    return () => {
      window.removeEventListener("wheel", onWheel);
      window.removeEventListener("scroll", onScroll);
      cancelAnimationFrame(raf);
    };
  }, []);

  return (
    <React.Fragment>
      <Cursor />
      <Lightbox />
      <div className="grain" aria-hidden="true"></div>

      <header className="nav">
        <a className="brand" href="#top">Uditi <i>Das</i>.</a>
        <ul>
          <li><a className="uline" href="#work">Work</a></li>
          <li><a className="uline" href="#social">Social</a></li>
          <li><a className="uline" href="#reels">Reels</a></li>
          <li><a className="uline" href="#contact">Contact</a></li>
        </ul>
        <Clock />
      </header>

      <main>
        <Hero />

        <Marquee items={["Brand whisperer", "Pixel perfectionist", "Reel mover", "Moodboard mystic", "Type nerd", "Color hoarder"]} />

        <About />
        <Branding />
        <Banners />
        <Creatives />

        <Marquee items={["Moodboards that close meetings", "Stop-scroll creative", "Print smells better in person", "Made in Kolkata", "Iconic on a Tuesday"]} dark />

        <Moodboard />
        <Social />
        <Reels />

        <Marquee items={["Available for hire", "Available for hire", "Available for hire", "Available for hire"]} />

        <Closing />
      </main>
      <FooterBlock />
    </React.Fragment>
  );
}

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