// Shared tweaks panel — used across all pages except Anasayfa & Eserler (which have their own)

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "forest",
  "theme": "light",
  "fontmix": "serif"
}/*EDITMODE-END*/;

function SharedTweakRoot(){
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => {
    document.body.dataset.palette = t.palette;
    document.body.dataset.theme = t.theme;
    document.body.dataset.fontmix = t.fontmix;
  }, [t.palette, t.theme, t.fontmix]);
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Renk paleti" />
      <TweakSelect label="Palet" value={t.palette}
        options={[
          {value:'forest', label:'Orman yeşili'},
          {value:'navy', label:'Lacivert'},
          {value:'bordeaux', label:'Bordo'},
          {value:'kraft', label:'Kraft'},
          {value:'ink', label:'Yalnız siyah'}
        ]}
        onChange={v => setTweak('palette', v)} />
      <TweakSection label="Tema" />
      <TweakRadio label="Mod" value={t.theme}
        options={['light','dark']}
        onChange={v => setTweak('theme', v)} />
      <TweakSection label="Tipografi" />
      <TweakRadio label="Başlık" value={t.fontmix}
        options={['serif','sans']}
        onChange={v => setTweak('fontmix', v)} />
    </TweaksPanel>
  );
}
const tweakRoot = document.createElement('div');
document.body.appendChild(tweakRoot);
ReactDOM.createRoot(tweakRoot).render(<SharedTweakRoot />);