// tweaks-app.jsx — panel de Tweaks para comparar variaciones del Home
// Lee la preferencia guardada por el botón de la nav
const _savedTheme = localStorage.getItem('rotary-theme');
const ROTARY_TWEAKS = /*EDITMODE-BEGIN*/{
  "hero": "1",
  "accent": "#f7a81b",
  "tema": _savedTheme === 'dark' ? 'Oscuro' : 'Claro'
}/*EDITMODE-END*/;

function RotaryTweaks() {
  const [t, setTweak] = useTweaks(ROTARY_TWEAKS);

  React.useEffect(() => {
    document.documentElement.setAttribute('data-hero', t.hero);
    document.documentElement.style.setProperty('--accent', t.accent);
    var themeDark = t.tema === 'Oscuro';
    document.documentElement.setAttribute('data-theme', themeDark ? 'dark' : 'light');
    localStorage.setItem('rotary-theme', themeDark ? 'dark' : 'light');
  }, [t.hero, t.accent, t.tema]);

  return (
    <TweaksPanel>
      <TweakSection label="Tema" />
      <TweakRadio
        label="Fondo"
        value={t.tema}
        options={['Claro', 'Oscuro']}
        onChange={(v) => setTweak('tema', v)}
      />
      <div style={{ fontSize: 12, color: '#64748b', lineHeight: 1.5, margin: '2px 2px 6px' }}>
        Oscuro usa el azul Rotary de fondo. Funciona con las 3 variantes del hero.
      </div>
      <TweakSection label="Portada (Home)" />
      <TweakRadio
        label="Variación del hero"
        value={t.hero}
        options={['1', '2', '3']}
        onChange={(v) => setTweak('hero', v)}
      />
      <div style={{ fontSize: 12, color: '#64748b', lineHeight: 1.5, margin: '2px 2px 6px' }}>
        1 · Editorial dividido &nbsp;·&nbsp; 2 · Inmersivo azul &nbsp;·&nbsp; 3 · Banda dorada
      </div>
      <TweakSection label="Color de acento" />
      <TweakColor
        label="Acento"
        value={t.accent}
        options={['#f7a81b', '#019fcb', '#d41367', '#009999']}
        onChange={(v) => setTweak('accent', v)}
      />
      <div style={{ fontSize: 12, color: '#64748b', lineHeight: 1.5, margin: '2px' }}>
        Gold es el acento oficial de Rotary; los demás son secundarios de la paleta para usos puntuales.
      </div>
    </TweaksPanel>
  );
}

(function mountRotaryTweaks() {
  const el = document.createElement('div');
  document.body.appendChild(el);
  ReactDOM.createRoot(el).render(<RotaryTweaks />);
})();