// Nelly profile — app

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

  React.useEffect(() => {
    const reveal = (el) => el.classList.add("in");
    if (!("IntersectionObserver" in window)) {
      document.querySelectorAll(".reveal").forEach(reveal);
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { reveal(e.target); io.unobserve(e.target); } });
    }, { threshold: 0, rootMargin: "0px 0px 200px 0px" });
    const observed = new WeakSet();
    const scan = () => {
      document.querySelectorAll(".reveal:not(.in)").forEach((el) => {
        if (observed.has(el)) return;
        observed.add(el);
        io.observe(el);
      });
    };
    const raf1 = requestAnimationFrame(() => requestAnimationFrame(scan));
    const mo = new MutationObserver(() => requestAnimationFrame(scan));
    mo.observe(document.body, { childList: true, subtree: true });
    // Safety net: anything still hidden after 1.5s gets revealed unconditionally.
    const safety = setTimeout(() => {
      document.querySelectorAll(".reveal:not(.in)").forEach(reveal);
    }, 1500);
    return () => { cancelAnimationFrame(raf1); clearTimeout(safety); io.disconnect(); mo.disconnect(); };
  }, []);

  return (
    <>
      <Header onDark={false} />

      <nav className="crumb" aria-label="Breadcrumb">
        <a href="/">Home</a>
        <span className="sl">/</span>
        <a href="#">Contributors</a>
        <span className="sl">/</span>
        <span className="cur">Nelly</span>
      </nav>

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

      <NellyIG />

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

      <Footer />
    </>
  );
}

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