/* ===== LA RED — Tweaks (color de acento + tipografía) ===== */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#2ec9ce",
  "displayFont": "Saira Condensed",
  "bodyFont": "Archivo"
}/*EDITMODE-END*/;

function mix(c, pct, other){
  return `color-mix(in srgb, ${c} ${pct}%, ${other})`;
}

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

  useEffect(()=>{
    const r = document.documentElement.style;
    r.setProperty('--accent', t.accent);
    r.setProperty('--accent-strong', mix(t.accent, 82, 'black'));
    r.setProperty('--accent-glow', mix(t.accent, 50, 'transparent'));
  }, [t.accent]);

  useEffect(()=>{
    document.documentElement.style.setProperty('--font-display', `"${t.displayFont}", "Archivo", sans-serif`);
  }, [t.displayFont]);

  useEffect(()=>{
    document.documentElement.style.setProperty('--font-body', `"${t.bodyFont}", system-ui, sans-serif`);
  }, [t.bodyFont]);

  return (
    <TweaksPanel>
      <TweakSection label="Color de acento" />
      <TweakColor
        label="Turquesa de marca"
        value={t.accent}
        options={["#2ec9ce", "#18d0d6", "#36d6a6", "#ffc73a"]}
        onChange={(v)=> setTweak('accent', v)}
      />
      <TweakSection label="Tipografía" />
      <TweakSelect
        label="Titulares"
        value={t.displayFont}
        options={["Saira Condensed", "Oswald", "Anton", "Barlow Condensed"]}
        onChange={(v)=> setTweak('displayFont', v)}
      />
      <TweakSelect
        label="Texto"
        value={t.bodyFont}
        options={["Archivo", "Saira Condensed", "Oswald"]}
        onChange={(v)=> setTweak('bodyFont', v)}
      />
    </TweaksPanel>
  );
}

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