// Shared Tweaks panel app — depends on tweaks-panel.jsx (loaded first)
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#2A3FA0",
  "serif": "Playfair",
  "scale": 1.05,
  "cursor": true
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => {
    const fam = t.serif === 'Playfair' ? 'Playfair Display' : 'Newsreader';
    const r = document.documentElement.style;
    r.setProperty('--accent', t.accent);
    r.setProperty('--serif', `'${fam}', Georgia, serif`);
    r.setProperty('--scale', String(t.scale));
    document.body.classList.toggle('no-cursor-fx', !t.cursor);
  }, [t.accent, t.serif, t.scale, t.cursor]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Accent" />
      <TweakColor label="Color" value={t.accent}
        options={['#8C2F39', '#2A3FA0', '#1C5551', '#211F1A']}
        onChange={(v) => setTweak('accent', v)} />
      <TweakSection label="Type" />
      <TweakRadio label="Statement serif" value={t.serif}
        options={['Newsreader', 'Playfair']}
        onChange={(v) => setTweak('serif', v)} />
      <TweakSlider label="Statement size" value={t.scale} min={0.85} max={1.2} step={0.05} unit="×"
        onChange={(v) => setTweak('scale', v)} />
      <TweakSection label="Motion" />
      <TweakToggle label="Responsive cursor" value={t.cursor}
        onChange={(v) => setTweak('cursor', v)} />
    </TweaksPanel>
  );
}
ReactDOM.createRoot(document.getElementById('tweaks-root')).render(<App />);