/* Chameleon Space — assembly + skin state. */
const NS = window.ChameleonSpaceDesignSystem_1abbe1;

function App() {
  const [skin, setSkin] = React.useState("acid");
  React.useEffect(() => { document.documentElement.setAttribute("data-skin", skin); }, [skin]);

  // ---- Engagement / drop-off tracking → GTM dataLayer ----
  React.useEffect(() => {
    const dl = (o) => { (window.dataLayer = window.dataLayer || []).push(o); };

    // Scroll depth milestones (each fires once) — are people reading or bouncing?
    const marks = [25, 50, 75, 90];
    const fired = new Set();
    const onScroll = () => {
      const h = document.documentElement;
      const denom = h.scrollHeight - h.clientHeight;
      const pct = denom > 0 ? (h.scrollTop / denom) * 100 : 100;
      marks.forEach((m) => { if (pct >= m && !fired.has(m)) { fired.add(m); dl({ event: "scroll_depth", percent: m }); } });
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();

    // Did they actually reach the application form?
    let io;
    const apply = document.getElementById("apply");
    if (apply && "IntersectionObserver" in window) {
      io = new IntersectionObserver((es) => {
        es.forEach((e) => { if (e.isIntersecting) { dl({ event: "view_apply_form" }); io.disconnect(); } });
      }, { threshold: 0.25 });
      io.observe(apply);
    }

    // Any "Apply to join" / scholarship CTA click, wherever it lives.
    const onClick = (e) => {
      const el = e.target.closest && e.target.closest("a,button");
      if (!el) return;
      const txt = (el.textContent || "").trim().toLowerCase();
      if (txt.startsWith("apply to join") || txt.startsWith("apply for a scholarship")) {
        dl({ event: "cta_click", cta: "apply", label: (el.textContent || "").trim() });
      }
    };
    document.addEventListener("click", onClick, true);

    return () => {
      window.removeEventListener("scroll", onScroll);
      document.removeEventListener("click", onClick, true);
      if (io) io.disconnect();
    };
  }, []);

  const BoundSwitcher = (props) => (
    <NS.SkinSwitcher value={skin} onChange={setSkin} target={document.documentElement} {...props} />
  );
  const toApply = () => { const t = document.getElementById("apply"); if (t) t.scrollIntoView({ behavior: "smooth" }); };

  return (
    <React.Fragment>
      <NS.Marquee items={["An intentional members club", "Gainesville, Florida", "Founding rate open now", "Come as you are", "We’ll make room"]} speed={26} size={26} />
      <SiteHeader />
      <Hero skinName={skin} SkinSwitcher={BoundSwitcher} onApply={toApply} />
      <Mission />
      <Vision />
      <Values />
      <Opening onApply={toApply} />
      <Gatherings />
      <Scholarship onApply={toApply} />
      <HowItWorks />
      <Apply />
      <SiteFooter />
    </React.Fragment>
  );
}

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