/* Steuris — Tweaks layer. Font-pairing options for the landing page.
   Each option swaps --font-display + --font-body on :root.
   Numerals stay JetBrains Mono across all options for data consistency. */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "font": "grotesk"
}/*EDITMODE-END*/;

const FONTS = {
  inter:  { label: 'Inter Tight',   display: "'Inter Tight', 'Inter', sans-serif",        body: "'Inter', system-ui, sans-serif" },
  grotesk:{ label: 'Space Grotesk', display: "'Space Grotesk', 'Inter', sans-serif",      body: "'Inter', system-ui, sans-serif" },
  sora:   { label: 'Sora',          display: "'Sora', 'Inter', sans-serif",               body: "'Inter', system-ui, sans-serif" },
  manrope:{ label: 'Manrope',       display: "'Manrope', sans-serif",                     body: "'Manrope', system-ui, sans-serif" },
  plex:   { label: 'IBM Plex',      display: "'IBM Plex Sans', sans-serif",               body: "'IBM Plex Sans', system-ui, sans-serif" }
};

function SteurisTweaks() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    const f = FONTS[t.font] || FONTS.inter;
    const root = document.documentElement;
    root.style.setProperty('--font-display', f.display);
    root.style.setProperty('--font-body', f.body);
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Schrift" />
      <TweakSelect
        label="Schriftfamilie"
        value={t.font}
        options={Object.keys(FONTS).map((k) => ({ value: k, label: FONTS[k].label }))}
        onChange={(v) => setTweak('font', v)} />
    </TweaksPanel>
  );
}

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