// Shared font-switcher Tweaks island for all pages (persists across pages via localStorage).
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "fontPair": "明朝 × ゴシック（標準）"
}/*EDITMODE-END*/;

const FONT_PAIRS = {
  "明朝 × ゴシック（標準）": { display: "'Zen Old Mincho', serif", body: "'Zen Kaku Gothic New', sans-serif" },
  "凛とした明朝": { display: "'Shippori Mincho B1', serif", body: "'Noto Sans JP', sans-serif" },
  "やわらか丸ゴシック": { display: "'Zen Maru Gothic', sans-serif", body: "'Zen Maru Gothic', sans-serif" },
  "モダン明朝": { display: "'Noto Serif JP', serif", body: "'Zen Kaku Gothic New', sans-serif" }
};

function TweaksApp(){
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(function(){
    const p = FONT_PAIRS[t.fontPair] || FONT_PAIRS["明朝 × ゴシック（標準）"];
    document.documentElement.style.setProperty('--font-display', p.display);
    document.documentElement.style.setProperty('--font-body', p.body);
  }, [t.fontPair]);
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="書体" />
      <TweakSelect label="フォントの組合せ" value={t.fontPair}
        options={Object.keys(FONT_PAIRS)}
        onChange={(v) => setTweak('fontPair', v)} />
    </TweaksPanel>
  );
}
ReactDOM.createRoot(document.getElementById('tweaks-root')).render(<TweaksApp />);