// Shared site shell — every page wraps content in <Site> for nav, footer, theme, tweaks
const TWEAKS = /*EDITMODE-BEGIN*/{
  "accent": ["#7A52FF", "#5A2DF4", "#F118B2"],
  "theme": "dark"
}/*EDITMODE-END*/;

const ACCENT_KEY = (arr) => JSON.stringify(arr).toLowerCase();
const ACCENT_LOOKUP = {
  [ACCENT_KEY(["#7A52FF", "#5A2DF4", "#F118B2"])]: { p1: "#7A52FF", p2: "#5A2DF4", glow: "rgba(90,45,244,0.35)", a2: "#F118B2" },
  [ACCENT_KEY(["#24A1DE", "#1764D8", "#2BD974"])]: { p1: "#24A1DE", p2: "#1764D8", glow: "rgba(36,140,222,0.35)", a2: "#2BD974" },
  [ACCENT_KEY(["#FFB000", "#FF7A45", "#F118B2"])]: { p1: "#FFB000", p2: "#FF7A45", glow: "rgba(255,122,69,0.35)", a2: "#F118B2" },
};

function useTheme(initialDefault) {
  // Read from localStorage so theme persists across pages.
  const [theme, setThemeState] = React.useState(() => {
    try {
      const stored = localStorage.getItem("antelope-theme");
      if (stored === "dark" || stored === "light") return stored;
    } catch {}
    return initialDefault || "dark";
  });
  const setTheme = (t) => {
    setThemeState(t);
    try { localStorage.setItem("antelope-theme", t); } catch {}
  };
  React.useEffect(() => {
    document.documentElement.setAttribute("data-theme", theme);
  }, [theme]);
  return [theme, setTheme];
}

function useAccent(initialDefault) {
  const [accent, setAccentState] = React.useState(() => {
    try {
      const stored = localStorage.getItem("antelope-accent");
      if (stored) return JSON.parse(stored);
    } catch {}
    return initialDefault;
  });
  const setAccent = (a) => {
    setAccentState(a);
    try { localStorage.setItem("antelope-accent", JSON.stringify(a)); } catch {}
  };
  React.useEffect(() => {
    const ac = ACCENT_LOOKUP[ACCENT_KEY(accent)] || ACCENT_LOOKUP[ACCENT_KEY(["#7A52FF", "#5A2DF4", "#F118B2"])];
    const root = document.documentElement;
    root.style.setProperty("--purple", ac.p2);
    root.style.setProperty("--purple-2", ac.p1);
    root.style.setProperty("--purple-glow", ac.glow);
    root.style.setProperty("--pink", ac.a2);
  }, [accent]);
  return [accent, setAccent];
}

function Site({ children, currentPage }) {
  const [t, setTweak] = useTweaks(TWEAKS);
  const [theme, setTheme] = useTheme(t.theme);
  const [accent, setAccent] = useAccent(t.accent);

  // Sync tweaks state with persisted state
  React.useEffect(() => {
    if (t.theme !== theme) setTweak("theme", theme);
  }, [theme]);
  React.useEffect(() => {
    if (ACCENT_KEY(t.accent) !== ACCENT_KEY(accent)) setTweak("accent", accent);
  }, [accent]);

  // Reveal on scroll
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
    }, { rootMargin: "-50px" });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, [children]);

  return (
    <>
      <div className="site-bg"/>
      <TopNav theme={theme} setTheme={setTheme} currentPage={currentPage}/>
      {children}
      <SiteFooter/>

      <TweaksPanel title="Tweaks">
        <TweakSection title="Theme">
          <TweakRadio
            label="Mode"
            value={theme}
            onChange={(v) => setTheme(v)}
            options={[
              { value: "dark", label: "Dark" },
              { value: "light", label: "Light" },
            ]}
          />
          <TweakColor
            label="Accent palette"
            value={accent}
            onChange={(v) => setAccent(v)}
            options={[
              ["#7A52FF", "#5A2DF4", "#F118B2"],
              ["#24A1DE", "#1764D8", "#2BD974"],
              ["#FFB000", "#FF7A45", "#F118B2"],
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

window.Site = Site;
window.useTheme = useTheme;