/* Tweaks panel — mount under #app */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#E8541A",
  "density": "comfortable",
  "mode": "dark"
}/*EDITMODE-END*/;

function TrakTweaks() {
  const t = useTweaks(TWEAK_DEFAULTS);

  // Apply tweaks to :root
  React.useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty('--accent', t.accent);
    if (t.mode === 'light') {
      r.style.setProperty('--bg', '#F4ECDC');
      r.style.setProperty('--bg-2', '#EBE2CE');
      r.style.setProperty('--fg', '#0B0908');
      r.style.setProperty('--fg-dim', '#5A5142');
      r.style.setProperty('--line', '#D6CBB4');
      r.style.setProperty('--stone', '#7A6F5B');
      r.style.setProperty('--accent-ink', '#F4ECDC');
    } else {
      r.style.setProperty('--bg', '#0B0908');
      r.style.setProperty('--bg-2', '#14110E');
      r.style.setProperty('--fg', '#F4ECDC');
      r.style.setProperty('--fg-dim', '#B8AC97');
      r.style.setProperty('--line', '#2A2520');
      r.style.setProperty('--stone', '#6E6552');
      r.style.setProperty('--accent-ink', '#0B0908');
    }
    r.style.setProperty('--pad',
      t.density === 'tight' ? 'clamp(16px, 2vw, 32px)' :
      t.density === 'roomy' ? 'clamp(28px, 6vw, 96px)' :
      'clamp(20px, 4vw, 56px)'
    );
  }, [t.accent, t.mode, t.density]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Accent">
        <TweakColor
          tweaks={t}
          k="accent"
          options={["#E8541A", "#D4AF37", "#E94B6C", "#5DC4A6", "#8B6FE8"]}
        />
      </TweakSection>
      <TweakSection title="Mode">
        <TweakRadio tweaks={t} k="mode" options={[{value:"dark",label:"Dark"},{value:"light",label:"Light"}]} />
      </TweakSection>
      <TweakSection title="Density">
        <TweakRadio tweaks={t} k="density" options={[
          {value:"tight",label:"Tight"},
          {value:"comfortable",label:"Mid"},
          {value:"roomy",label:"Roomy"}
        ]} />
      </TweakSection>
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById('app')).render(<TrakTweaks />);