/* Akam — Tweaks island. Typography exploration (the chosen variation axis). */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "typePreset": "contrast"
}/*EDITMODE-END*/;

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

  // push to the vanilla site on mount + whenever changed
  React.useEffect(() => {
    window.__akamTweaks = t;
    if (window.akamApplyTweaks) window.akamApplyTweaks(t);
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Typography" />
      <TweakSelect
        label="Type system"
        value={t.typePreset}
        options={[
          { value: 'gallery',  label: 'Gallery — Bodoni / Manrope' },
          { value: 'contrast', label: 'Contrast — Cormorant / Space Grotesk' },
          { value: 'swiss',    label: 'Swiss — Archivo' },
          { value: 'couture',  label: 'Couture — Italiana / Jost' },
        ]}
        onChange={(v) => setTweak('typePreset', v)}
      />
      <div style={{ fontSize: 10.5, lineHeight: 1.5, color: 'rgba(41,38,27,.5)', paddingTop: 2 }}>
        Each system swaps the display + body pairing across the whole site, including the wordmark.
      </div>
    </TweaksPanel>
  );
}

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