/* eslint-disable */
/* =========================================================================
   Helix — App orchestrator: routing, theme, tweaks panel, contact modal
   ========================================================================= */

const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = React;

const HEADLINE_OPTIONS = [
  { value: "data_right_way", label: "You have all the data." },
  { value: "ai_starts_data", label: "Effective AI starts with data." },
  { value: "before_models",  label: "Before the models, the foundation." },
  { value: "hype_intelligence", label: "Less AI hype." },
];

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "pyramidMode": "solid",
  "headline": "data_right_way"
}/*EDITMODE-END*/;

function App() {
  const [page, setPage] = useStateA("home");
  const [focusLayer, setFocusLayer] = useStateA(null);
  const [contactOpen, setContactOpen] = useStateA(false);
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  // Apply theme — always light
  useEffectA(() => {
    document.documentElement.setAttribute("data-theme", "light");
  }, []);

  // Scroll-reveal: add .is-in to .reveal elements when they enter viewport
  useEffectA(() => {
    const io = new IntersectionObserver(
      (entries) => entries.forEach((e) => {
        if (e.isIntersecting) { e.target.classList.add("is-in"); io.unobserve(e.target); }
      }),
      { threshold: 0.08, rootMargin: "0px 0px -28px 0px" }
    );
    const sweep = () => document.querySelectorAll(".reveal:not(.is-in)").forEach((el) => io.observe(el));
    sweep();
    // re-sweep when React re-renders new DOM nodes (page navigation)
    const mo = new MutationObserver(sweep);
    mo.observe(document.getElementById("root"), { childList: true, subtree: true });
    return () => { io.disconnect(); mo.disconnect(); };
  }, []);

  const navigate = (to, layer = null) => {
    setPage(to);
    setFocusLayer(layer);
    // scroll to top on nav (or to layer on services)
    setTimeout(() => {
      if (to === "services" && layer) {
        const el = document.getElementById(`layer-${layer}`);
        if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
      } else {
        window.scrollTo({ top: 0, behavior: "smooth" });
      }
    }, 50);
  };

  // Allow links inside page components to fire navigation via custom event.
  useEffectA(() => {
    const handler = (e) => navigate(e.detail);
    document.addEventListener("helix:navigate", handler);
    return () => document.removeEventListener("helix:navigate", handler);
  }, []);

  const toggleTheme = () => {};

  return (
    <>
      <Nav
        current={page}
        onNavigate={navigate}
        onContact={() => setContactOpen(true)}
      />

      {page === "home" && (
        <HomePage
          onNavigate={navigate}
          onContact={() => setContactOpen(true)}
          pyramidMode={tweaks.pyramidMode}
          headlineKey={tweaks.headline}
        />
      )}
      {page === "services" && (
        <ServicesPage onNavigate={navigate} focusLayer={focusLayer} />
      )}
      {page === "about" && (
        <AboutPage onContact={() => setContactOpen(true)} />
      )}

      <Footer onNavigate={navigate} onContact={() => setContactOpen(true)} />

      <ContactModal open={contactOpen} onClose={() => setContactOpen(false)} />

      {/* Tweaks panel (shown when toggled from the toolbar) */}
      <window.TweaksPanel title="Helix tweaks">
        <window.TweakSection label="Visuals">
          <window.TweakRadio
            label="Pyramid style"
            value={tweaks.pyramidMode}
            onChange={(v) => setTweak("pyramidMode", v)}
            options={[
              { value: "facet", label: "Faceted" },
              { value: "solid", label: "Solid" },
            ]}
          />
        </window.TweakSection>
        <window.TweakSection label="Copy">
          <window.TweakSelect
            label="Hero headline"
            value={tweaks.headline}
            onChange={(v) => setTweak("headline", v)}
            options={HEADLINE_OPTIONS}
          />
        </window.TweakSection>
      </window.TweaksPanel>
    </>
  );
}

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