/* FESTRUM — Tweaks panel */
const FESTRUM_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#B8A077",
  "moss": "#556B57",
  "darkMode": false,
  "density": "comfortable",
  "showAccessPanel": true,
  "headlineStyle": "italic-script"
}/*EDITMODE-END*/;

function FestrumTweaks() {
  const [t, setT] = useTweaks(FESTRUM_TWEAK_DEFAULTS);

  React.useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty('--champagne-deep', t.accent);
    r.setProperty('--moss', t.moss);
    document.body.classList.toggle('dense', t.density === 'dense');
    const ap = document.querySelector('.access-panel');
    if (ap) ap.style.display = t.showAccessPanel ? '' : 'none';
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Color">
        <TweakColor label="Champagne accent" value={t.accent} onChange={(v) => setT('accent', v)} />
        <TweakColor label="Moss green" value={t.moss} onChange={(v) => setT('moss', v)} />
      </TweakSection>
      <TweakSection title="Layout">
        <TweakRadio label="Density" value={t.density} options={[{value:'comfortable',label:'Espaçado'},{value:'dense',label:'Compacto'}]} onChange={(v) => setT('density', v)} />
        <TweakToggle label="Painel de acesso (hero)" value={t.showAccessPanel} onChange={(v) => setT('showAccessPanel', v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

const root = document.getElementById('tweaks-mount');
if (root) ReactDOM.createRoot(root).render(<FestrumTweaks />);