// tweaks-app.jsx — wires the Tweaks panel to the portfolio
const TWEAK_DEFAULTS = window.TWEAK_DEFAULTS;

const TYPE_PAIRS = {
  'grotesk-instrument': {
    display: '"Space Grotesk", "Inter", sans-serif',
    serif:   '"Instrument Serif", "Times New Roman", serif',
    sans:    '"Inter", ui-sans-serif, system-ui, sans-serif',
    label:   'Grotesk + Instrument',
  },
  'fraunces-inter': {
    display: '"Fraunces", "Times New Roman", serif',
    serif:   '"Fraunces", "Times New Roman", serif',
    sans:    '"Inter", ui-sans-serif, system-ui, sans-serif',
    label:   'Fraunces + Inter',
  },
  'mono-instrument': {
    display: '"JetBrains Mono", ui-monospace, monospace',
    serif:   '"Instrument Serif", "Times New Roman", serif',
    sans:    '"JetBrains Mono", ui-monospace, monospace',
    label:   'Mono + Instrument',
  },
};

function applyTweaks(t) {
  document.body.dataset.theme  = t.dark ? 'dark' : 'light';
  document.body.dataset.cursor = t.cursor ? 'on' : 'off';
  if (window.__setHeroIntensity) window.__setHeroIntensity(t.heroMotion);
  const pair = TYPE_PAIRS[t.typePair] || TYPE_PAIRS['grotesk-instrument'];
  document.documentElement.style.setProperty('--display', pair.display);
  document.documentElement.style.setProperty('--serif',   pair.serif);
  document.documentElement.style.setProperty('--sans',    pair.sans);
}

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

  return (
    <TweaksPanel>
      <TweakSection label="Theme" />
      <TweakToggle label="Dark mode" value={t.dark}
        onChange={(v) => setTweak('dark', v)} />
      <TweakToggle label="Custom cursor" value={t.cursor}
        onChange={(v) => setTweak('cursor', v)} />

      <TweakSection label="Typography" />
      <TweakSelect label="Type pairing" value={t.typePair}
        options={[
          { value: 'grotesk-instrument', label: 'Grotesk + Instrument' },
          { value: 'fraunces-inter',     label: 'Fraunces + Inter' },
          { value: 'mono-instrument',    label: 'Mono + Instrument' },
        ]}
        onChange={(v) => setTweak('typePair', v)} />

      <TweakSection label="Motion" />
      <TweakSlider label="Hero motion" value={t.heroMotion}
        min={0} max={100} unit="%" onChange={(v) => setTweak('heroMotion', v)} />
    </TweaksPanel>
  );
}

const root = document.createElement('div');
document.body.appendChild(root);
ReactDOM.createRoot(root).render(<App />);