// Tweaks island — drives CSS variables + body data-attributes on the homepage.
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "primary": "#CC2228",
  "headingFont": "Barlow Condensed",
  "density": "Regular",
  "cards": "Suave"
}/*EDITMODE-END*/;

const DENS_MAP  = { "Compacta": "compact", "Regular": "regular", "Cómoda": "comfy" };
const CARDS_MAP = { "Suave": "soft", "Marcada": "sharp", "Plana": "flat" };

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

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--red', t.primary);
    root.style.setProperty('--font-display', t.headingFont);
    document.body.dataset.density = DENS_MAP[t.density]  || 'regular';
    document.body.dataset.cards   = CARDS_MAP[t.cards]   || 'soft';
  }, [t.primary, t.headingFont, t.density, t.cards]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Marca" />
      <TweakColor label="Color primario" value={t.primary}
        options={["#CC2228", "#E2342A", "#B10E2E", "#D9480F"]}
        onChange={(v) => setTweak('primary', v)} />
      <TweakSelect label="Tipografía titulares" value={t.headingFont}
        options={["Barlow Condensed", "Oswald", "Saira Condensed"]}
        onChange={(v) => setTweak('headingFont', v)} />

      <TweakSection label="Grid de noticias" />
      <TweakRadio label="Densidad" value={t.density}
        options={["Compacta", "Regular", "Cómoda"]}
        onChange={(v) => setTweak('density', v)} />
      <TweakRadio label="Estilo cards" value={t.cards}
        options={["Suave", "Marcada", "Plana"]}
        onChange={(v) => setTweak('cards', v)} />
    </TweaksPanel>
  );
}

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