// Tweaks da página Cegonha — variações de banner, cor de destaque e tipografia
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroLayout": "centrado",
  "accent": "#F2A055",
  "headingFont": "Baloo 2"
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--accent', t.accent);
    // tom suave derivado da cor de destaque
    root.style.setProperty('--accent-soft', `color-mix(in oklab, ${t.accent} 24%, #FFF8EF)`);
    root.style.setProperty('--heading-font', `"${t.headingFont}", sans-serif`);
    document.body.dataset.hero = t.heroLayout === 'dividido' ? 'split' : 'centered';
  }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="Banner" />
      <TweakRadio
        label="Disposição"
        value={t.heroLayout}
        options={['centrado', 'dividido']}
        onChange={(v) => setTweak('heroLayout', v)}
      />
      <TweakSection label="Cores" />
      <TweakColor
        label="Cor de destaque"
        value={t.accent}
        options={['#F2A055', '#E0917C', '#B49C80']}
        onChange={(v) => setTweak('accent', v)}
      />
      <TweakSection label="Tipografia" />
      <TweakRadio
        label="Títulos"
        value={t.headingFont}
        options={['Baloo 2', 'Quicksand']}
        onChange={(v) => setTweak('headingFont', v)}
      />
    </TweaksPanel>
  );
}

const tweaksRootEl = document.createElement('div');
document.body.appendChild(tweaksRootEl);
ReactDOM.createRoot(tweaksRootEl).render(<CegonhaTweaks />);