// site/app.jsx — compose + mount + theme + tweaks + scroll reveal
const { useState: appUS, useEffect: appUE } = React;

function useReveal() {
  appUE(() => {
    const els = document.querySelectorAll(".reveal");
    if (!("IntersectionObserver" in window)) { els.forEach(e => e.classList.add("in")); return; }
    const io = new IntersectionObserver((entries) => {
      entries.forEach(en => { if (en.isIntersecting) { en.target.classList.add("in"); io.unobserve(en.target); } });
    }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
    els.forEach(e => io.observe(e));
    return () => io.disconnect();
  }, []);
}

// accent swatch hex → data-accent key (drives the wakalix accent ramp)
const ACCENTS = [
  { hex: "#2BC6D8", key: "cyan" },
  { hex: "#1FA6AD", key: "teal" },
  { hex: "#7E73F0", key: "indigo" },
  { hex: "#1BB89B", key: "bluegreen" },
];
const ACCENT_KEY = Object.fromEntries(ACCENTS.map(a => [a.hex, a.key]));

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#2BC6D8",
  "headline": "engine",
  "showProof": true
}/*EDITMODE-END*/;

function Site() {
  const [theme, setTheme] = appUS(() => {
    try { return localStorage.getItem("wakalix-site-theme") || "dark"; } catch (e) { return "dark"; }
  });
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  appUE(() => {
    document.documentElement.dataset.theme = theme;
    try { localStorage.setItem("wakalix-site-theme", theme); } catch (e) {}
  }, [theme]);

  appUE(() => {
    document.documentElement.dataset.accent = ACCENT_KEY[t.accent] || "cyan";
  }, [t.accent]);

  useReveal();

  return (
    <div className="am site">
      <Nav theme={theme} setTheme={setTheme} />
      <Hero headline={t.headline} showProof={t.showProof} />
      <Why />
      <How />
      <Bridge />
      <UseCases />
      <ValueStream />
      <Picture />
      <Outcomes />
      <Cost />
      <Story />
      <Grow />
      <Honesty />
      <CTA />
      <Footer />
      <LeadModal />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Brand" />
        <TweakColor label="Accent" value={t.accent} options={ACCENTS.map(a => a.hex)} onChange={(v) => setTweak("accent", v)} />
        <TweakRadio label="Theme" value={theme} options={["dark", "light"]} onChange={setTheme} />
        <TweakSection label="Hero" />
        <TweakSelect label="Headline" value={t.headline}
          options={[{ value: "engine", label: "Your whole org, one engine" }, { value: "see", label: "Meet SEE" }, { value: "cost", label: "Fraction of the AI bill" }]}
          onChange={(v) => setTweak("headline", v)} />
        <TweakToggle label="Outcomes strip" value={t.showProof} onChange={(v) => setTweak("showProof", v)} />
      </TweaksPanel>
    </div>
  );
}

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