/* Tweaks panel app — applies live theme tweaks to the document root */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "direction": "onyx",
  "gold": "#C3A368",
  "display": "Cormorant Garamond",
  "motion": "rich"
}/*EDITMODE-END*/;

function applyTweaks(t) {
  const root = document.documentElement;
  root.setAttribute('data-direction', t.direction);
  root.style.setProperty('--gold', t.gold);
  // derive soft/deep tones from chosen gold
  root.style.setProperty('--display', "'" + t.display + "', Georgia, serif");
  document.body.classList.toggle('motion-off', t.motion === 'off');
  document.body.classList.toggle('motion-subtle', t.motion === 'subtle');
}

function TweaksApp() {
  const { useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakSelect } = window;
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => { applyTweaks(t); }, [t]);
  return (
    React.createElement(TweaksPanel, null,
      React.createElement(TweakSection, { label: "Art Direction" }),
      React.createElement(TweakRadio, {
        label: "Palette", value: t.direction,
        options: [{ label: "Onyx", value: "onyx" }, { label: "Stone", value: "stone" }],
        onChange: (v) => setTweak('direction', v)
      }),
      React.createElement(TweakColor, {
        label: "Accent", value: t.gold,
        options: ["#C3A368", "#B8924F", "#9C8B6E", "#A07E4B"],
        onChange: (v) => setTweak('gold', v)
      }),
      React.createElement(TweakSection, { label: "Typography" }),
      React.createElement(TweakSelect, {
        label: "Display face", value: t.display,
        options: ["Cormorant Garamond", "Playfair Display"],
        onChange: (v) => setTweak('display', v)
      }),
      React.createElement(TweakSection, { label: "Motion" }),
      React.createElement(TweakRadio, {
        label: "Level", value: t.motion,
        options: [{ label: "Rich", value: "rich" }, { label: "Subtle", value: "subtle" }, { label: "Off", value: "off" }],
        onChange: (v) => setTweak('motion', v)
      })
    )
  );
}

(function mount() {
  const el = document.getElementById('tweaks-root');
  if (el && window.ReactDOM && window.useTweaks) {
    ReactDOM.createRoot(el).render(React.createElement(TweaksApp));
  }
})();