// Nelly · The Second Cleanse — app shell

function TscApp() {
  React.useEffect(() => {
    document.body.classList.add("na-page");
    return () => { document.body.classList.remove("na-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(); };
  }, []);

  const [progress, setProgress] = React.useState(0);
  React.useEffect(() => {
    const onScroll = () => {
      const h = document.documentElement;
      const max = (h.scrollHeight - h.clientHeight) || 1;
      setProgress(Math.min(1, Math.max(0, h.scrollTop / max)));
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
    };
  }, []);

  return (
    <>
      <div className="na-progress" style={{ transform: `scaleX(${progress})` }} aria-hidden="true" />
      <TscTopbar />
      <TscCrumb />
      <div className="na-shell">
        <TscMast />
        <TscHero />
        <TscLead />
        <TscBody />
        <TscGallery />
        <TscMore />
      </div>
      <TscFooter />
    </>
  );
}

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