// Tweaks island for the Younium × Claude field guide.
// Drives CSS custom properties / classes on the live page.
// React + Babel + tweaks-panel.jsx are loaded before this file.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "turquoise",
  "gradient": "turquoise",
  "animations": true
}/*EDITMODE-END*/;

const GRADS = {
  turquoise: "linear-gradient(180deg, #112134 0%, #54b6be 100%)",
  blue:      "linear-gradient(180deg, #112134 0%, #479acf 100%)",
  red:       "linear-gradient(180deg, #112134 0%, #d95e51 100%)"
};

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

  React.useEffect(() => {
    const root = document.documentElement;
    if (t.accent === "blue") root.setAttribute("data-accent", "blue");
    else root.removeAttribute("data-accent");
  }, [t.accent]);

  React.useEffect(() => {
    const g = GRADS[t.gradient] || GRADS.turquoise;
    document.documentElement.style.setProperty("--hero-grad", g);
    document.documentElement.style.setProperty("--cta-grad", g);
  }, [t.gradient]);

  React.useEffect(() => {
    document.body.classList.toggle("no-anim", !t.animations);
  }, [t.animations]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Brand" />
      <TweakRadio
        label="Accent"
        value={t.accent}
        options={["turquoise", "blue"]}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakRadio
        label="Gradient"
        value={t.gradient}
        options={["turquoise", "blue", "red"]}
        onChange={(v) => setTweak("gradient", v)}
      />
      <TweakSection label="Motion" />
      <TweakToggle
        label="Entrance animations"
        value={t.animations}
        onChange={(v) => setTweak("animations", v)}
      />
    </TweaksPanel>
  );
}

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