/* ============================================================
   KEELIO — Tweaks (mounts into #tweaks-root, drives the vanilla
   page through CSS variables + a data attribute)
   ============================================================ */

// Load alternate display fonts once so font swaps are instant.
(function injectFonts() {
  var l = document.createElement('link');
  l.rel = 'stylesheet';
  l.href = 'https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&display=swap';
  document.head.appendChild(l);
})();

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#FC6E39",
  "surface": "warm",
  "headlineFont": "Schibsted Grotesk",
  "motion": true
}/*EDITMODE-END*/;

const FONT_STACKS = {
  "Schibsted Grotesk": '"Schibsted Grotesk", system-ui, sans-serif',
  "Space Grotesk": '"Space Grotesk", system-ui, sans-serif',
  "Instrument Serif": '"Instrument Serif", Georgia, serif',
  "Newsreader": '"Newsreader", Georgia, serif'
};

const SURFACES = {
  warm:  { paper: "#F7F3EF", paper2: "#FCFAF7", sand: "#EFE8E2" },
  crisp: { paper: "#FFFFFF", paper2: "#FFFFFF", sand: "#F2ECE7" },
  fog:   { paper: "#EFEEEC", paper2: "#F8F7F5", sand: "#E7E2DD" }
};

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

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--accent', t.accent);
    root.style.setProperty('--font-display', FONT_STACKS[t.headlineFont] || FONT_STACKS["Schibsted Grotesk"]);
    const s = SURFACES[t.surface] || SURFACES.warm;
    root.style.setProperty('--paper', s.paper);
    root.style.setProperty('--paper-2', s.paper2);
    root.style.setProperty('--paper-sand', s.sand);
    if (t.motion) root.removeAttribute('data-reduce');
    else root.setAttribute('data-reduce', '');
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Brand" />
      <TweakColor label="Accent / CTA" value={t.accent}
        options={["#FC6E39", "#2B6DA3", "#29566C", "#E0533B"]}
        onChange={(v) => setTweak('accent', v)} />

      <TweakSection label="Surface" />
      <TweakRadio label="Background" value={t.surface}
        options={[{value:'warm',label:'Warm'},{value:'crisp',label:'Crisp'},{value:'fog',label:'Fog'}]}
        onChange={(v) => setTweak('surface', v)} />

      <TweakSection label="Type" />
      <TweakSelect label="Headline font" value={t.headlineFont}
        options={Object.keys(FONT_STACKS)}
        onChange={(v) => setTweak('headlineFont', v)} />

      <TweakSection label="Motion" />
      <TweakToggle label="Animations" value={t.motion}
        onChange={(v) => setTweak('motion', v)} />
    </TweaksPanel>
  );
}

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