// tweaks-app.jsx — palette & type controls for the Julien Leveau homepage.
// Applies CSS custom properties on :root so the whole page recolors live.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#3f6076",
  "neutrals": ["#f6f8f9", "#eaeef1", "#161c20"],
  "display": "Marcellus"
}/*EDITMODE-END*/;

const FONT_STACK = {
  "Marcellus": "'Marcellus', Georgia, serif",
  "Cormorant": "'Cormorant', Georgia, serif",
  "Bodoni Moda": "'Bodoni Moda', Georgia, serif"
};

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

  React.useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty('--accent', t.accent);
    if (Array.isArray(t.neutrals)) {
      r.setProperty('--paper', t.neutrals[0]);
      r.setProperty('--paper-2', t.neutrals[1]);
      r.setProperty('--ink', t.neutrals[2]);
    }
    r.setProperty('--display', FONT_STACK[t.display] || FONT_STACK.Marcellus);
  }, [t.accent, t.neutrals, t.display]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Colour" />
      <TweakColor
        label="Accent"
        value={t.accent}
        options={['#3f6076', '#2f6d6a', '#4d5a67', '#9a6b3f']}
        onChange={(v) => setTweak('accent', v)}
      />
      <TweakColor
        label="Neutrals"
        value={t.neutrals}
        options={[
          ['#f6f8f9', '#eaeef1', '#161c20'],
          ['#ffffff', '#f1f2f3', '#111417'],
          ['#f7f4ee', '#ece5d9', '#1d1b17']
        ]}
        onChange={(v) => setTweak('neutrals', v)}
      />
      <TweakSection label="Typography" />
      <TweakRadio
        label="Display font"
        value={t.display}
        options={['Marcellus', 'Cormorant', 'Bodoni Moda']}
        onChange={(v) => setTweak('display', v)}
      />
    </TweaksPanel>
  );
}

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