/* App.jsx — single-page redesign shell.
   Sticky left Rail + one flowing scroll (Hello → Work → Archive → Media →
   Notes → About → Résumé → Contact), with the hidden Reading Room / Screening
   Room kept as alternate views. Scroll is driven by Lenis. */

function App() {
  const [active, setActive] = React.useState("hello");
  const [view, setView] = React.useState("magazine");
  const [menu, setMenu] = React.useState(false);
  const [navOpen, setNavOpen] = React.useState(true);
  const lenisRef = React.useRef(null);

  /* ---- Lenis smooth scroll ---- */
  React.useEffect(() => {
    if (!window.Lenis) return;
    const lenis = new window.Lenis({
      lerp: 0.085,
      wheelMultiplier: 1,
      smoothWheel: true,
      syncTouch: false,
      autoRaf: true,
    });
    lenisRef.current = lenis;
    window.__lenis = lenis;

    /* Pause Lenis whenever a modal locks body scroll, so overlays stay put. */
    const mo = new MutationObserver(() => {
      const locked = document.body.style.overflow === "hidden";
      if (locked) lenis.stop(); else lenis.start();
    });
    mo.observe(document.body, { attributes: true, attributeFilter: ["style"] });

    return () => { mo.disconnect(); lenis.destroy(); delete window.__lenis; };
  }, []);

  const scrollTo = (id) => {
    setMenu(false);
    setView("magazine");
    requestAnimationFrame(() => {
      const el = document.getElementById(id);
      if (!el) return;
      const offset = window.innerWidth <= 980 ? -58 : 0;
      if (lenisRef.current) lenisRef.current.scrollTo(el, { duration: 1.4, offset });
      else el.scrollIntoView({ behavior: "smooth" });
    });
  };

  /* ---- scroll-spy ---- */
  React.useEffect(() => {
    if (view !== "magazine") return;
    let raf = 0;
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => {
        raf = 0;
        const mark = window.innerHeight * 0.42;
        let cur = "hello";
        for (const n of NAV) {
          const el = document.getElementById(n.id);
          if (el && el.getBoundingClientRect().top <= mark) cur = n.id;
        }
        setActive(cur);
      });
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
      if (raf) cancelAnimationFrame(raf);
    };
  }, [view]);

  return (
    <React.Fragment>
      <div className={"site" + (navOpen ? "" : " nav-collapsed")}>
        <Rail active={active} onNav={scrollTo} collapsed={!navOpen} onToggle={() => setNavOpen(o => !o)} />
        <main className="content">
          <MobileBar active={active} onOpen={() => setMenu(true)} />
          {view === "magazine" && (
            <React.Fragment>
              <Intro onNav={scrollTo} />
              <Work />
              <Archive onGallery={() => setView("gallery")} />
              <Media onGallery={() => setView("gallery")} />
              <Notes onBlog={() => setView("blog")} />
              <About />
              <Resume onNav={scrollTo} />
              <Contact onBlog={() => setView("blog")} />
            </React.Fragment>
          )}
          {view === "blog" && <Blog onBack={() => setView("magazine")} />}
          {view === "gallery" && <Gallery onBack={() => setView("magazine")} />}
        </main>
      </div>
      <MobileMenu open={menu} active={active} onNav={scrollTo} onClose={() => setMenu(false)} />
    </React.Fragment>
  );
}

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