// tweaks.jsx — shared Tweaks panel for every page.
// Loads after React + Babel + tweaks-panel.jsx + site.js.
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#ff38f3",
  "heroStyle": "solid",
  "glow": true,
  "grain": false,
  "tone": "black"
}/*EDITMODE-END*/;

function TweaksApp() {
  const init = Object.assign({}, TWEAK_DEFAULTS, (window.FTD && window.FTD.readSaved && window.FTD.readSaved()) || {});
  const [t, setRaw] = useTweaks(init);
  // Apply + persist ONLY when the user actually changes something — never on
  // mount. site.js already applied this page's default (its data-accent) on load,
  // so the artist's colour stays the default until deliberately overridden.
  const setTweak = (k, v) => {
    setRaw(k, v);
    const next = (typeof k === 'object' && k !== null) ? Object.assign({}, t, k) : Object.assign({}, t, { [k]: v });
    if (window.FTD) window.FTD.applyTweaks(next);
  };

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Brand color" />
      <TweakColor
        label="Accent"
        value={t.accent}
        options={['#ff38f3', '#8a00ff', '#38b6ff', '#5cff38', '#ff8538', '#ffd700']}
        onChange={(v) => setTweak('accent', String(v).toLowerCase())}
      />
      <TweakSection label="Hero" />
      <TweakRadio
        label="Headline"
        value={t.heroStyle}
        options={[{ value: 'solid', label: 'Solid' }, { value: 'outline', label: 'Outline' }]}
        onChange={(v) => setTweak('heroStyle', v)}
      />
      <TweakSection label="Atmosphere" />
      <TweakRadio
        label="Background"
        value={t.tone}
        options={[{ value: 'black', label: 'Pure black' }, { value: 'ink', label: 'Ink' }]}
        onChange={(v) => setTweak('tone', v)}
      />
      <TweakToggle label="Neon glow" value={t.glow} onChange={(v) => setTweak('glow', v)} />
      <TweakToggle label="Film grain" value={t.grain} onChange={(v) => setTweak('grain', v)} />
    </TweaksPanel>
  );
}

(function mount() {
  const el = document.createElement('div');
  el.id = 'tweaks-root';
  document.body.appendChild(el);
  ReactDOM.createRoot(el).render(<TweaksApp />);
})();