// ve-tweaks.jsx — panel de Tweaks compartido para las páginas de VideoEnCaja
const VE_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "orange": "#F1660F",
  "displayFont": "Archivo",
  "precios": "Recomendados"
}/*EDITMODE-END*/;

const VE_FONT_WDTH = { "Archivo": "120", "Bricolage Grotesque": "100", "Space Grotesk": "100" };
const VE_ORANGE_INK = { "#F1660F": "#C24E06", "#E8590C": "#BC4505", "#FF7A1A": "#D85F05" };

function VETweaksApp() {
  const [t, setTweak] = useTweaks(VE_TWEAK_DEFAULTS);

  React.useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty('--orange', t.orange);
    r.setProperty('--orange-ink', VE_ORANGE_INK[t.orange] || '#C24E06');
    r.setProperty('--font-display', '"' + t.displayFont + '"');
    r.setProperty('--wdth-display', VE_FONT_WDTH[t.displayFont] || '100');
  }, [t.orange, t.displayFont]);

  React.useEffect(() => {
    const rec = t.precios === 'Recomendados';
    document.querySelectorAll('[data-price-rec]').forEach((el) => {
      el.textContent = rec ? el.getAttribute('data-price-rec') : el.getAttribute('data-price-brief');
    });
  }, [t.precios]);

  return (
    <TweaksPanel>
      <TweakSection label="Marca" />
      <TweakColor label="Naranja" value={t.orange}
        options={['#F1660F', '#E8590C', '#FF7A1A']}
        onChange={(v) => setTweak('orange', v)} />
      <TweakSelect label="Tipografía display" value={t.displayFont}
        options={['Archivo', 'Bricolage Grotesque', 'Space Grotesk']}
        onChange={(v) => setTweak('displayFont', v)} />
      <TweakSection label="Precios" />
      <TweakRadio label="Flash / Anuncio" value={t.precios}
        options={['Recomendados', 'Briefing']}
        onChange={(v) => setTweak('precios', v)} />
    </TweaksPanel>
  );
}

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