/* Lyapp — Tweaks panel */
const LY_DEFAULTS = /*EDITMODE-BEGIN*/{
  "scheme": "default",
  "hero": "right",
  "headFont": "\"Newsreader\", Georgia, serif"
}/*EDITMODE-END*/;

function LyTweaks() {
  const [t, setTweak] = useTweaks(LY_DEFAULTS);

  React.useEffect(() => {
    const root = document.documentElement;
    root.setAttribute('data-scheme', t.scheme);
    root.setAttribute('data-hero', t.hero);
    root.style.setProperty('--font-head', t.headFont);
    try { localStorage.setItem('lyapp_tweaks', JSON.stringify(t)); } catch (e) {}
  }, [t.scheme, t.hero, t.headFont]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Fargebruk" />
      <TweakRadio
        label="Tema"
        value={t.scheme}
        options={[
          { value: 'default', label: 'Off-white' },
          { value: 'navy-hero', label: 'Navy hero' },
          { value: 'grey-base', label: 'Lys grå' },
        ]}
        onChange={(v) => setTweak('scheme', v)}
      />

      <TweakSection label="Hero" />
      <TweakRadio
        label="Plassering"
        value={t.hero}
        options={[
          { value: 'right', label: 'Telefon høyre' },
          { value: 'left', label: 'Telefon venstre' },
          { value: 'center', label: 'Sentrert' },
        ]}
        onChange={(v) => setTweak('hero', v)}
      />

      <TweakSection label="Typografi" />
      <TweakSelect
        label="Overskrift"
        value={t.headFont}
        options={[
          { value: '"Newsreader", Georgia, serif', label: 'Newsreader' },
          { value: '"Source Serif 4", Georgia, serif', label: 'Source Serif' },
          { value: '"DM Serif Display", Georgia, serif', label: 'DM Serif Display' },
          { value: '"Space Grotesk", system-ui, sans-serif', label: 'Space Grotesk' },
        ]}
        onChange={(v) => setTweak('headFont', v)}
      />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById('tweaks-root')).render(<LyTweaks />);