// components/SiteTweaks.jsx — shared accent/font/density tweaks across pages
window.SITE_ACCENTS = {
  blue:   '#1C80FA',
  lime:   'oklch(0.88 0.18 128)',
  violet: 'oklch(0.72 0.22 300)',
  orange: 'oklch(0.75 0.18 55)',
  cyan:   'oklch(0.82 0.14 200)',
};

window.SiteTweaks = function SiteTweaks({ defaults }) {
  const DEF = defaults || /*EDITMODE-BEGIN*/{
    "accent": "blue",
    "font": "PP Neue Montreal",
    "density": "roomy"
  }/*EDITMODE-END*/;
  const [tweaks, setTweak] = useTweaks(DEF);

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--accent', window.SITE_ACCENTS[tweaks.accent] || window.SITE_ACCENTS.blue);
    root.style.setProperty('--accent-fg', tweaks.accent === 'lime' ? '#0A0A0A' : '#FFFFFF');
    root.setAttribute('data-density', tweaks.density === 'compact' ? 'compact' : 'roomy');
    if (tweaks.font === 'System') {
      root.style.setProperty('--font-display', 'system-ui, -apple-system, "Helvetica Neue", sans-serif');
    } else {
      root.style.removeProperty('--font-display');
    }
  }, [tweaks]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Visual">
        <TweakRadio label="Accent" value={tweaks.accent} onChange={v => setTweak('accent', v)}
          options={[
            {value: 'blue', label: 'Azul'},
            {value: 'lime', label: 'Lime'},
            {value: 'violet', label: 'Violeta'},
            {value: 'orange', label: 'Laranja'},
            {value: 'cyan', label: 'Ciano'},
          ]} />
        <TweakRadio label="Fonte" value={tweaks.font} onChange={v => setTweak('font', v)}
          options={[
            {value: 'PP Neue Montreal', label: 'PP Neue'},
            {value: 'System', label: 'Sistema'},
          ]} />
        <TweakRadio label="Densidade" value={tweaks.density} onChange={v => setTweak('density', v)}
          options={[
            {value: 'roomy', label: 'Espaçoso'},
            {value: 'compact', label: 'Compacto'},
          ]} />
      </TweakSection>
    </TweaksPanel>
  );
};