// Tweaks panel + reusable hooks for the site

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "grain": true,
  "dark": false,
  "serifHeadlines": true,
  "motion": true,
  "heroVariant": "photo",
  "terminePref": "list"
}/*EDITMODE-END*/;

function useSiteTweaks() {
  const [tweaks, setTweak] = useTweaks(DEFAULTS);
  return { tweaks, setTweak };
}

function SiteTweaksPanel({ tweaks, setTweak }) {
  return (
    <TweaksPanel>
      <TweakSection label="Darstellung"/>
      <TweakToggle label="Paper-Grain" value={tweaks.grain} onChange={(v) => setTweak('grain', v)}/>
      <TweakToggle label="Dark Mode" value={tweaks.dark} onChange={(v) => setTweak('dark', v)}/>
      <TweakToggle label="Serif-Headlines" value={tweaks.serifHeadlines} onChange={(v) => setTweak('serifHeadlines', v)}/>
      <TweakToggle label="Animationen" value={tweaks.motion !== false} onChange={(v) => setTweak('motion', v)}/>
      <TweakSection label="Home-Hero"/>
      <TweakRadio
        label="Variante"
        value={tweaks.heroVariant}
        options={['photo','typography','illustration']}
        onChange={(v) => setTweak('heroVariant', v)}
      />
      <TweakSection label="Termine"/>
      <TweakRadio
        label="Voreinstellung"
        value={tweaks.terminePref}
        options={['list','calendar']}
        onChange={(v) => setTweak('terminePref', v)}
      />
    </TweaksPanel>
  );
}

window.useSiteTweaks = useSiteTweaks;
window.SiteTweaksPanel = SiteTweaksPanel;