/* global React, useTweaks, TweaksPanel, TweakSection, TweakSelect, TweakSlider, TweakRadio */
const { useEffect } = React;

// Curated pairings — warm/maternal + readable medical
const PAIRINGS = {
  "Éditorial chaleureux": { head: '"Newsreader", Georgia, serif',            body: '"Mulish", system-ui, sans-serif' },
  "Classique":            { head: '"Spectral", Georgia, serif',              body: '"Source Sans 3", system-ui, sans-serif' },
  "Moderne":              { head: '"Bricolage Grotesque", system-ui, sans',  body: '"Public Sans", system-ui, sans-serif' },
  "Sobre (sans serif)":   { head: '"Mulish", system-ui, sans-serif',         body: '"Mulish", system-ui, sans-serif' },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "pairing": "Éditorial chaleureux",
  "baseSize": 17,
  "scale": "Ample"
}/*EDITMODE-END*/;

const SCALES = { "Compacte": 0.9, "Ample": 1.0, "Affirmée": 1.12 };

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

  useEffect(() => {
    const root = document.documentElement.style;
    const p = PAIRINGS[t.pairing] || PAIRINGS["Éditorial chaleureux"];
    root.setProperty('--font-head', p.head);
    root.setProperty('--font-body', p.body);
    root.setProperty('--fs-base', t.baseSize + 'px');
    root.setProperty('--h-scale', SCALES[t.scale] || 1.0);
  }, [t.pairing, t.baseSize, t.scale]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Typographie" />
      <TweakSelect label="Couple typographique" value={t.pairing}
        options={Object.keys(PAIRINGS)}
        onChange={(v) => setTweak('pairing', v)} />
      <TweakSlider label="Taille du texte" value={t.baseSize} min={15} max={20} step={1} unit="px"
        onChange={(v) => setTweak('baseSize', v)} />
      <TweakRadio label="Échelle des titres" value={t.scale}
        options={Object.keys(SCALES)}
        onChange={(v) => setTweak('scale', v)} />
    </TweaksPanel>
  );
}

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