// Roy Studios — Tweaks panel (accent, motion, background tone)
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#E0491F",
  "bgTone": "Warm paper",
  "motion": true
}/*EDITMODE-END*/;

const BG_TONES = {
  "Warm paper": { bg: "#F1EFE9", surface: "#FAF9F5" },
  "Cool bone":  { bg: "#EFF0EE", surface: "#F8F9F7" },
  "Pure white": { bg: "#FFFFFF", surface: "#F7F6F3" }
};

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

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--accent", t.accent);
    const tone = BG_TONES[t.bgTone] || BG_TONES["Warm paper"];
    root.style.setProperty("--bg", tone.bg);
    root.style.setProperty("--surface", tone.surface);
    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    root.classList.toggle("no-motion", !t.motion || reduced);
  }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="Brand" />
      <TweakColor
        label="Accent"
        value={t.accent}
        options={["#E0491F", "#2F4BE0", "#1F6B45", "#1C1C1C"]}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakRadio
        label="Background"
        value={t.bgTone}
        options={["Warm paper", "Cool bone", "Pure white"]}
        onChange={(v) => setTweak("bgTone", v)}
      />
      <TweakSection label="Motion" />
      <TweakToggle
        label="Animations"
        value={t.motion}
        onChange={(v) => setTweak("motion", v)}
      />
    </TweaksPanel>
  );
}

(function mountTweaks() {
  const host = document.getElementById("tweaks-root");
  if (!host) return;
  ReactDOM.createRoot(host).render(<RoyTweaksApp></RoyTweaksApp>);
})();