// ve-tweaks-v3.jsx — Tweaks para la home v3 (dark)
const VE3_DEFAULTS = /*EDITMODE-BEGIN*/{
  "orange": "#F1660F",
  "anchoTitulos": 125,
  "grano": true
}/*EDITMODE-END*/;

function VE3TweaksApp() {
  const [t, setTweak] = useTweaks(VE3_DEFAULTS);

  React.useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty('--orange', t.orange);
    r.setProperty('--wdth-display', String(t.anchoTitulos));
    const g = document.querySelector('.grain');
    if (g) g.style.display = t.grano ? '' : 'none';
  }, [t.orange, t.anchoTitulos, t.grano]);

  return (
    <TweaksPanel>
      <TweakSection label="Marca" />
      <TweakColor label="Naranja" value={t.orange}
        options={['#F1660F', '#E8590C', '#FF7A1A']}
        onChange={(v) => setTweak('orange', v)} />
      <TweakSlider label="Ancho de títulos" value={t.anchoTitulos} min={100} max={125} step={1}
        onChange={(v) => setTweak('anchoTitulos', v)} />
      <TweakToggle label="Grano de cine" value={t.grano}
        onChange={(v) => setTweak('grano', v)} />
    </TweaksPanel>
  );
}

(function mountVE3() {
  const root = document.getElementById('ve-tweaks-root');
  if (root) ReactDOM.createRoot(root).render(<VE3TweaksApp />);
})();