/* ============ Tweaks app — drives page CSS variables ============ */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#2F6FD6",
  "displayFont": "Fraunces",
  "sectionGap": 96,
  "lead": "frozen"
}/*EDITMODE-END*/;

const loadedFonts = {};
function ensureFont(family) {
  if (family === 'Fraunces' || loadedFonts[family]) return;
  loadedFonts[family] = true;
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'https://fonts.googleapis.com/css2?family=' +
    family.replace(/ /g, '+') + ':ital,wght@0,400..700;1,400..600&display=swap';
  document.head.appendChild(link);
}

function applyTweaks(t) {
  const root = document.documentElement;
  root.style.setProperty('--accent', t.accent);
  ensureFont(t.displayFont);
  root.style.setProperty('--display-font', "'" + t.displayFont + "'");
  root.style.setProperty('--section-gap', t.sectionGap + 'px');
  root.setAttribute('data-lead', t.lead);
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => { applyTweaks(t); }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Marca" />
      <TweakColor
        label="Color de acento"
        value={t.accent}
        options={['#2F6FD6', '#04767D', '#5C7FBE', '#1E3A5F']}
        onChange={(v) => setTweak('accent', v)}
      />
      <TweakSelect
        label="Tipografía display"
        value={t.displayFont}
        options={['Fraunces', 'Playfair Display', 'DM Serif Display', 'Lora']}
        onChange={(v) => setTweak('displayFont', v)}
      />
      <TweakSection label="Color y aire" />
      <TweakRadio
        label="Pastel líder"
        value={t.lead}
        options={['frozen', 'cielo', 'wisteria']}
        onChange={(v) => setTweak('lead', v)}
      />
      <TweakSlider
        label="Aire entre secciones"
        value={t.sectionGap}
        min={64} max={128} step={4} unit="px"
        onChange={(v) => setTweak('sectionGap', v)}
      />
    </TweaksPanel>
  );
}

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