/* Seasons Labs — Tweaks panel (Home only).
   Mirrors values to localStorage("sl_tweaks") so every page can apply them. */

const SL_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "Electric",
  "density": "comfortable",
  "heroStyle": "analytics"
}/*EDITMODE-END*/;

const SL_ACCENTS = {
  "Seasons Purple": "#541EF6",
  "Deep Violet": "#4114C0",
  "Electric": "#7A20F9"
};

function slApply(t) {
  if (t.accent && SL_ACCENTS[t.accent]) {
    document.documentElement.style.setProperty("--sl-accent", SL_ACCENTS[t.accent]);
  }
  document.body.classList.toggle("compact", t.density === "compact");
  document.body.setAttribute("data-hero", t.heroStyle || "analytics");
  try { localStorage.setItem("sl_tweaks", JSON.stringify(t)); } catch (e) {}
  window.dispatchEvent(new Event("sl-tweaks-changed"));
}

function SLTweaks() {
  const [t, setTweak] = useTweaks(SL_TWEAK_DEFAULTS);

  // Seed from any previously stored values once on mount
  React.useEffect(() => {
    let stored = null;
    try { stored = JSON.parse(localStorage.getItem("sl_tweaks") || "null"); } catch (e) {}
    if (stored) setTweak(stored);
    slApply(stored || t);
    // eslint-disable-next-line
  }, []);

  React.useEffect(() => { slApply(t); }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Brand" />
      <TweakColor label="Accent" value={SL_ACCENTS[t.accent]}
        options={["#541EF6", "#4114C0", "#7A20F9"]}
        onChange={(hex) => {
          const name = Object.keys(SL_ACCENTS).find((k) => SL_ACCENTS[k] === hex) || "Seasons Purple";
          setTweak("accent", name);
        }} />
      <TweakSection label="Layout" />
      <TweakRadio label="Density" value={t.density}
        options={["comfortable", "compact"]}
        onChange={(v) => setTweak("density", v)} />
      <TweakSection label="Hero mockup" />
      <TweakRadio label="View" value={t.heroStyle}
        options={["analytics", "distribution"]}
        onChange={(v) => setTweak("heroStyle", v)} />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById("tweaks-root")).render(<SLTweaks />);