// tweaks-app.jsx — typography + accent explorer for the Frances site.
// Persists to localStorage so the choice carries across every page.

const FR_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heading": "serif",
  "accent": "#2f6fd0"
}/*EDITMODE-END*/;

function readStored() {
  let h = FR_DEFAULTS.heading, a = FR_DEFAULTS.accent;
  try {
    h = localStorage.getItem('frances-heading') || h;
    a = localStorage.getItem('frances-accent') || a;
  } catch (e) {}
  return { heading: h, accent: a };
}

function applyAll(t) {
  const root = document.documentElement;
  root.setAttribute('data-heading', t.heading);
  root.style.setProperty('--blue', t.accent);
  try {
    localStorage.setItem('frances-heading', t.heading);
    localStorage.setItem('frances-accent', t.accent);
  } catch (e) {}
}

function FrancesTweaks() {
  const [t, setT] = React.useState(readStored);

  React.useEffect(() => { applyAll(t); }, [t]);

  const set = (k, v) => setT(prev => ({ ...prev, [k]: v }));

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Tipografia dos títulos" />
      <TweakRadio
        label="Estilo"
        value={t.heading}
        options={[
          { value: 'serif', label: 'Serifada' },
          { value: 'sans', label: 'Moderna' },
        ]}
        onChange={(v) => set('heading', v)}
      />
      <TweakSection label="Cor de acento" />
      <TweakColor
        label="Sotaque"
        value={t.accent}
        options={['#2f6fd0', '#1f5fbf', '#3a86c8', '#2a4d8f']}
        onChange={(v) => set('accent', v)}
      />
    </TweaksPanel>
  );
}

(function mount() {
  const el = document.getElementById('tweaks-root');
  if (el && window.ReactDOM) {
    ReactDOM.createRoot(el).render(<FrancesTweaks />);
  }
})();