/* ============================================================
   TARIFIEL — Panel de Tweaks
   Conmuta tipografía, color de marca, protagonismo de la mascota
   y animaciones, aplicándolo en vivo a la landing (vanilla).
   ============================================================ */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headingFont": "Sora",
  "brand": ["#6D29D5", "#5068F2", "#4BA4F2"],
  "mascot": "Presente",
  "radius": 22,
  "anim": true
}/*EDITMODE-END*/;

const FONT_MAP = {
  Sora: "'Sora', sans-serif",
  Poppins: "'Poppins', sans-serif",
  Syne: "'Syne', sans-serif"
};
const MASCOT_MAP = { "Sutil": "subtle", "Presente": "present", "Protagonista": "hero" };

function TarifielTweaks() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--font-display', FONT_MAP[t.headingFont] || FONT_MAP.Sora);
    const b = t.brand || TWEAK_DEFAULTS.brand;
    root.style.setProperty('--c1', b[0]);
    root.style.setProperty('--c2', b[1]);
    root.style.setProperty('--c3', b[2]);
    root.style.setProperty('--purple', b[0]);
    root.style.setProperty('--violet', b[1]);
    root.style.setProperty('--blue', b[2]);
    root.style.setProperty('--r-card', (t.radius || 22) + 'px');
    root.setAttribute('data-mascot', MASCOT_MAP[t.mascot] || 'present');
    root.setAttribute('data-anim', t.anim ? 'on' : 'off');
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Tipografía" />
      <TweakRadio
        label="Titulares"
        value={t.headingFont}
        options={["Sora", "Poppins", "Syne"]}
        onChange={(v) => setTweak('headingFont', v)}
      />

      <TweakSection label="Color de marca" />
      <TweakColor
        label="Degradado"
        value={t.brand}
        options={[
          ["#6D29D5", "#5068F2", "#4BA4F2"],
          ["#4BA4F2", "#5068F2", "#6D29D5"],
          ["#5B1FB8", "#7A3FE0", "#9D5BF0"],
          ["#3B6FF2", "#4BA4F2", "#5FD0E0"]
        ]}
        onChange={(v) => setTweak('brand', v)}
      />

      <TweakSection label="Marca" />
      <TweakRadio
        label="Protagonismo"
        value={t.mascot}
        options={["Sutil", "Presente", "Protagonista"]}
        onChange={(v) => setTweak('mascot', v)}
      />
      <TweakSlider
        label="Radio de tarjetas"
        value={t.radius} min={8} max={32} step={2} unit="px"
        onChange={(v) => setTweak('radius', v)}
      />

      <TweakSection label="Movimiento" />
      <TweakToggle
        label="Animaciones"
        value={t.anim}
        onChange={(v) => setTweak('anim', v)}
      />

      <TweakSection label="Demo" />
      <TweakButton
        label="Ver resultado de cobertura"
        onClick={() => { window.__tarifielDemoResult && window.__tarifielDemoResult(); }}
      />
      <TweakButton
        label="Reiniciar verificador"
        onClick={() => { window.__tarifielReset && window.__tarifielReset(); }}
      />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById('tweaks-root')).render(<TarifielTweaks />);