/* ============================================================
   tweaks.jsx — in-design Tweaks: swap the brand color world and
   accent style. Applied live via :root CSS variables.
   ============================================================ */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "world": "Builder",
  "accent": "Gradient",
  "showArtifacts": true
}/*EDITMODE-END*/;

const WORLDS = {
  Builder: { c1: "#a556f7", c2: "#6366f1", solid: "#7c3aed", glow: "124,58,237" },
  Agency:  { c1: "#22d3ee", c2: "#2563eb", solid: "#2563eb", glow: "37,99,235" },
  Academy: { c1: "#34d399", c2: "#04a146", solid: "#04a146", glow: "4,161,70" }
};

function TweaksMount() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    const r = document.documentElement.style;
    const w = WORLDS[t.world] || WORLDS.Builder;
    r.setProperty("--accent-1", w.c1);
    r.setProperty("--accent-2", w.c2);
    r.setProperty("--accent-solid", w.solid);
    r.setProperty("--accent-glow", `rgba(${w.glow},0.5)`);
    r.setProperty("--accent-soft", `rgba(${w.glow},0.10)`);
    r.setProperty("--accent-line", `rgba(${w.glow},0.28)`);
    r.setProperty("--cta-shadow", `0 -1px 70.8px -16px rgba(${w.glow},0.7)`);
    r.setProperty("--accent-grad",
      t.accent === "Solid" ? w.solid : `linear-gradient(96deg, ${w.c1} 0%, ${w.c2} 100%)`);
  }, [t.world, t.accent]);

  useEffect(() => {
    document.body.classList.toggle("hide-artifacts", !t.showArtifacts);
  }, [t.showArtifacts]);

  return (
    <TweaksPanel>
      <TweakSection label="Brand world" />
      <TweakRadio label="Sub-brand" value={t.world}
        options={["Builder", "Agency", "Academy"]}
        onChange={(v) => setTweak("world", v)} />
      <TweakRadio label="Accent style" value={t.accent}
        options={["Gradient", "Solid"]}
        onChange={(v) => setTweak("accent", v)} />
      <TweakSection label="Pipeline" />
      <TweakToggle label="Show artifact filenames" value={t.showArtifacts}
        onChange={(v) => setTweak("showArtifacts", v)} />
    </TweaksPanel>
  );
}

window.TweaksMount = TweaksMount;