// Nelly · /en/nelly/ — app shell

function NellyApp() {
  React.useEffect(() => {
    document.body.classList.add("np-page");
    return () => { document.body.classList.remove("np-page"); };
  }, []);

  React.useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); }
      });
    }, { threshold: 0.06, rootMargin: "0px 0px -40px 0px" });
    const scan = () => document.querySelectorAll(".reveal:not(.in)").forEach((el) => io.observe(el));
    const raf1 = requestAnimationFrame(() => requestAnimationFrame(scan));
    const mo = new MutationObserver(() => requestAnimationFrame(scan));
    mo.observe(document.body, { childList: true, subtree: true });
    return () => { cancelAnimationFrame(raf1); io.disconnect(); mo.disconnect(); };
  }, []);

  return (
    <>
      <NellyTopbar />
      <NellyCrumb />

      <div className="np-shell">
        <NellyCover />
        <NellyLetter />
        <NellySeriesIndex />
        <NellyLatest />
      </div>

      <NellyIGStrip />

      <div className="np-shell">
        <NellyUnedit />
      </div>

      <NellyFooter />
    </>
  );
}

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