/* ============================================================
   Ilha de Ajustes (Tweaks) — variações ao vivo. Português.
   ============================================================ */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroBg": "dusk",
  "accent": "coral",
  "headlineFont": "geometric",
  "rhythm": "alternating",
  "marqueeSpeed": 48
}/*EDITMODE-END*/;

const ACCENTS = {
  coral:      { accent: '#E77E7C', a2: '#F2B53B', a3: '#0082B8' },
  yellow:     { accent: '#F2B53B', a2: '#E77E7C', a3: '#0082B8' },
  multicolor: { accent: '#E77E7C', a2: '#F2B53B', a3: '#0082B8' },
};

function applyTweaks(t){
  const root = document.documentElement;
  const body = document.body;
  root.dataset.heroBg = t.heroBg;
  const a = ACCENTS[t.accent] || ACCENTS.coral;
  root.style.setProperty('--accent', a.accent);
  root.style.setProperty('--accent-2', a.a2);
  root.style.setProperty('--accent-3', a.a3);
  body.dataset.accent = t.accent;
  root.style.setProperty('--font-display', t.headlineFont === 'serif'
    ? "'Newsreader', Georgia, serif"
    : "'Jost', system-ui, sans-serif");
  body.dataset.headline = t.headlineFont;
  body.dataset.rhythm = t.rhythm;
  root.style.setProperty('--marquee-duration', t.marqueeSpeed + 's');
}

function TweaksApp(){
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => { applyTweaks(t); }, [t]);

  return (
    <TweaksPanel title="Ajustes">
      <TweakSection label="Capa" />
      <TweakRadio
        label="Fundo"
        value={t.heroBg}
        options={[
          { value: 'dusk', label: 'Entardecer' },
          { value: 'night', label: 'Noturna' },
          { value: 'gradient', label: 'Gradiente' },
        ]}
        onChange={(v) => setTweak('heroBg', v)}
      />

      <TweakSection label="Cor" />
      <TweakRadio
        label="Cor de destaque"
        value={t.accent}
        options={[
          { value: 'coral', label: 'Coral' },
          { value: 'yellow', label: 'Amarelo' },
          { value: 'multicolor', label: 'Multicolor' },
        ]}
        onChange={(v) => setTweak('accent', v)}
      />
      <TweakRadio
        label="Ritmo das seções"
        value={t.rhythm}
        options={[
          { value: 'alternating', label: 'Claro / escuro' },
          { value: 'navy', label: 'Tudo azul' },
        ]}
        onChange={(v) => setTweak('rhythm', v)}
      />

      <TweakSection label="Tipografia" />
      <TweakRadio
        label="Títulos"
        value={t.headlineFont}
        options={[
          { value: 'geometric', label: 'Geométrica' },
          { value: 'serif', label: 'Serif' },
        ]}
        onChange={(v) => setTweak('headlineFont', v)}
      />

      <TweakSection label="Carrossel" />
      <TweakSlider
        label="Velocidade"
        value={t.marqueeSpeed}
        min={20} max={90} step={2} unit="s"
        onChange={(v) => setTweak('marqueeSpeed', v)}
      />
    </TweaksPanel>
  );
}

(function bootstrap(){
  let saved = {};
  try { saved = JSON.parse(localStorage.getItem('tweaks') || '{}'); } catch(e){}
  applyTweaks(Object.assign({}, TWEAK_DEFAULTS, saved));
  const mount = document.getElementById('tweaks-root');
  if (mount && window.ReactDOM) {
    ReactDOM.createRoot(mount).render(<TweaksApp />);
  }
})();