/* UNFO · CINEMATIC — Tweaks */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#ea0707",
  "intensity": 100,
  "lang": "es",
  "anim": true
}/*EDITMODE-END*/;

function hexA(hex, a) { const h = hex.replace('#', ''); return `rgba(${parseInt(h.substr(0,2),16)},${parseInt(h.substr(2,2),16)},${parseInt(h.substr(4,2),16)},${a})`; }

function CineTweaks() {
  const { useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakSlider, TweakToggle } = window;
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => { document.documentElement.style.setProperty('--red', t.accent); document.documentElement.style.setProperty('--accent-glow', hexA(t.accent, 0.55)); }, [t.accent]);
  React.useEffect(() => { document.documentElement.style.setProperty('--accent-amt', (t.intensity / 100).toFixed(2)); }, [t.intensity]);
  React.useEffect(() => { if (window.UNFO && window.UNFO.setLang) window.UNFO.setLang(t.lang); }, [t.lang]);
  React.useEffect(() => { if (window.UNFO && window.UNFO.setAnim) window.UNFO.setAnim(t.anim); }, [t.anim]);
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Idioma" />
      <TweakRadio label="Idioma" value={t.lang} options={[{ value: 'es', label: 'Español' }, { value: 'en', label: 'English' }]} onChange={(v) => setTweak('lang', v)} />
      <TweakSection label="Acento" />
      <TweakColor label="Color" value={t.accent} options={['#ea0707', '#fa4040', '#f55f62', '#ff2d2d']} onChange={(v) => setTweak('accent', v)} />
      <TweakSlider label="Atmósfera (grano + glow)" value={t.intensity} min={0} max={140} unit="%" onChange={(v) => setTweak('intensity', v)} />
      <TweakSection label="Motion" />
      <TweakToggle label="Animaciones" value={t.anim} onChange={(v) => setTweak('anim', v)} />
    </TweaksPanel>
  );
}
(function mount() { const el = document.getElementById('tweaks-root'); if (!el || !window.useTweaks) return setTimeout(mount, 60); ReactDOM.createRoot(el).render(<CineTweaks />); })();