/* ===========================================================
   Tweaks island — accent intensity, glass, heading font
   =========================================================== */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "Balanced",
  "glass": "Frosted",
  "headingFont": "Schibsted Grotesk"
}/*EDITMODE-END*/;

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

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

  React.useEffect(() => {
    const root = document.documentElement;
    root.setAttribute('data-accent', String(t.accent).toLowerCase());
    root.setAttribute('data-glass', String(t.glass).toLowerCase());
    root.style.setProperty('--font-display', FONT_STACKS[t.headingFont] || FONT_STACKS["Schibsted Grotesk"]);
  }, [t.accent, t.glass, t.headingFont]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Pastel accent" />
      <TweakRadio
        label="Intensity"
        value={t.accent}
        options={['Whisper', 'Balanced', 'More']}
        onChange={(v) => setTweak('accent', v)}
      />
      <TweakSection label="Glass header & cards" />
      <TweakRadio
        label="Frost"
        value={t.glass}
        options={['Subtle', 'Frosted', 'Solid']}
        onChange={(v) => setTweak('glass', v)}
      />
      <TweakSection label="Typography" />
      <TweakSelect
        label="Heading font"
        value={t.headingFont}
        options={['Schibsted Grotesk', 'Hanken Grotesk', 'Instrument Serif']}
        onChange={(v) => setTweak('headingFont', v)}
      />
    </TweaksPanel>
  );
}

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