/* global React, ReactDOM, Nav, Hero, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor,
   ThesisSection, ArchitectureSection, IdeSection, MultiPhysicsSection, AiCoreSection, CloudSection,
   TeamSection, CtaSection, Footer */
const { useEffect: useEffectApp, useRef: useRefApp } = React;

const ACCENTS = {
  "#3fc6f0": { a: "oklch(0.82 0.13 213)",  a2: "oklch(0.72 0.14 233)",  ink: "oklch(0.19 0.04 233)" },
  "#5b86f5": { a: "oklch(0.74 0.15 248)",  a2: "oklch(0.68 0.15 262)",  ink: "oklch(0.97 0.01 248)" },
  "#36d8a8": { a: "oklch(0.82 0.15 168)",  a2: "oklch(0.75 0.14 188)",  ink: "oklch(0.18 0.04 170)" },
};

function applyAccent(key) {
  const c = ACCENTS[key] || ACCENTS["#3fc6f0"];
  const r = document.documentElement.style;
  r.setProperty("--accent", c.a);
  r.setProperty("--accent-2", c.a2);
  r.setProperty("--accent-ink", c.ink);
  // rebuild alpha-derived tokens from the chosen accent
  const base = c.a.replace(/\)$/, "");
  r.setProperty("--accent-dim", base + " / 0.14)");
  r.setProperty("--accent-line", base + " / 0.32)");
  r.setProperty("--grid-dot", "oklch(0.30 0.012 250 / 0.6)");
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "split",
  "accent": "#3fc6f0"
}/*EDITMODE-END*/;

function useRevealObserver() {
  useEffectApp(() => {
    const els = document.querySelectorAll(".reveal:not(.is-in)");
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("is-in"); io.unobserve(e.target); } });
    }, { threshold: 0.16, rootMargin: "0px 0px -8% 0px" });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  });
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useEffectApp(() => { applyAccent(t.accent); }, [t.accent]);
  useRevealObserver();

  return (
    <>
      <Nav />
      <main>
        <Hero variant={t.heroVariant} key={t.heroVariant} />
        <ThesisSection />
        <ArchitectureSection />
        <IdeSection />
        <MultiPhysicsSection />
        <AiCoreSection />
        <CloudSection />
        <TeamSection />
        <CtaSection />
      </main>
      <Footer />

      <TweaksPanel>
        <TweakSection label="Hero direction" />
        <TweakRadio
          label="Layout"
          value={t.heroVariant}
          options={["split", "centered", "console"]}
          onChange={(v) => setTweak("heroVariant", v)}
        />
        <TweakSection label="Accent" />
        <TweakColor
          label="Color"
          value={t.accent}
          options={["#3fc6f0", "#5b86f5", "#36d8a8"]}
          onChange={(v) => setTweak("accent", v)}
        />
      </TweaksPanel>
    </>
  );
}

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