// Main App — palette/font swatches + tweaks panel + section composition

const PALETTES = {
  ink:       { bg: '#07070a', bg2: '#0d0d12', fg: '#f4f1ea', accent: 'oklch(0.68 0.27 305)' },       // bone on ink + bright purple
  mono:      { bg: '#000000', bg2: '#0a0a0a', fg: '#ffffff', accent: '#ffffff' },                     // pure mono
  acid:      { bg: '#050605', bg2: '#0a0d09', fg: '#e9ffe1', accent: 'oklch(0.88 0.22 130)' },        // acid green
  infrared:  { bg: '#0a0405', bg2: '#10080a', fg: '#f4e6e2', accent: 'oklch(0.7 0.2 25)' },           // deep red on charcoal
  bone:      { bg: '#f0ebe1', bg2: '#e6e0d2', fg: '#1a1814', accent: 'oklch(0.45 0.14 30)' },         // off-white paper
  dichroic:  { bg: '#06070d', bg2: '#0c0d18', fg: '#e8eafa', accent: 'oklch(0.78 0.18 300)' },        // shifting violet
};

const FONTS = {
  mono:      { mono: "'JetBrains Mono'", sans: "'IBM Plex Sans'", display: "'IBM Plex Sans'" },
  sharp:     { mono: "'JetBrains Mono'", sans: "'Fraunces'", display: "'Fraunces'" },
  grotesk:   { mono: "'Space Mono'", sans: "'Space Grotesk'", display: "'Space Grotesk'" },
  display:   { mono: "'JetBrains Mono'", sans: "'Inter Tight'", display: "'Inter Tight'" },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "ink",
  "fontPair": "display",
  "logoTreatment": "tracked",
  "density": "regular",
  "grid": false
}/*EDITMODE-END*/;

function applyPalette(p) {
  const root = document.documentElement;
  // Derive variations
  root.style.setProperty('--ink-bg', p.bg);
  root.style.setProperty('--ink-bg-2', p.bg2);
  root.style.setProperty('--ink', p.fg);
  root.style.setProperty('--accent', p.accent);
  // Light/dark detection: bone is light
  const isLight = p === PALETTES.bone;
  root.style.setProperty('--ink-mid', isLight ? 'rgba(26,24,20,0.62)' : 'rgba(244,241,234,0.62)');
  root.style.setProperty('--ink-dim', isLight ? 'rgba(26,24,20,0.36)' : 'rgba(244,241,234,0.32)');
  root.style.setProperty('--ink-faint', isLight ? 'rgba(26,24,20,0.14)' : 'rgba(244,241,234,0.12)');
  root.style.setProperty('--ink-line', isLight ? 'rgba(26,24,20,0.22)' : 'rgba(244,241,234,0.18)');
  root.style.setProperty('--accent-soft',
    isLight ? `color-mix(in oklab, ${p.accent}, transparent 88%)`
            : `color-mix(in oklab, ${p.accent}, transparent 80%)`);
}

function applyFont(f) {
  const root = document.documentElement;
  root.style.setProperty('--mono', `${f.mono}, ui-monospace, monospace`);
  root.style.setProperty('--sans', `${f.sans}, system-ui, sans-serif`);
  root.style.setProperty('--display', `${f.display}, system-ui, sans-serif`);
}

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

  React.useEffect(() => { applyPalette(PALETTES[t.palette] || PALETTES.ink); }, [t.palette]);
  React.useEffect(() => { applyFont(FONTS[t.fontPair] || FONTS.display); }, [t.fontPair]);
  React.useEffect(() => { document.body.dataset.density = t.density; }, [t.density]);
  React.useEffect(() => { document.body.dataset.grid = t.grid ? 'on' : 'off'; }, [t.grid]);

  return (
    <>
      <NavRail t={t} />
      <main className="main">
        <Hero t={t} />
        <Releases t={t} />
        <Live t={t} />
        <Radio t={t} />
        <DJMixes t={t} />
        <About t={t} />
        <Contact t={t} />
        <Listen t={t} />
        <Footer />
      </main>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Palette" />
        <TweakSelect label="Color palette" value={t.palette}
          options={[
            { value: 'ink', label: 'Ink + purple' },
            { value: 'mono', label: 'Pure mono' },
            { value: 'acid', label: 'Acid green' },
            { value: 'infrared', label: 'Infrared' },
            { value: 'bone', label: 'Bone & ink (light)' },
            { value: 'dichroic', label: 'Dichroic violet' },
          ]}
          onChange={(v) => setTweak('palette', v)} />

        <TweakSection label="Type" />
        <TweakSelect label="Pairing" value={t.fontPair}
          options={[
            { value: 'display', label: 'Inter Tight + JetBrains Mono' },
            { value: 'mono', label: 'IBM Plex Sans + JetBrains' },
            { value: 'sharp', label: 'Fraunces + JetBrains' },
            { value: 'grotesk', label: 'Space Grotesk + Space Mono' },
          ]}
          onChange={(v) => setTweak('fontPair', v)} />

        <TweakSection label="Logo" />
        <TweakRadio label="Treatment" value={t.logoTreatment}
          options={[
            { value: 'tracked', label: 'Tracked' },
            { value: 'monolith', label: 'Stack' },
            { value: 'lowercase-mono', label: 'lower' },
          ]}
          onChange={(v) => setTweak('logoTreatment', v)} />

        <TweakSection label="Layout" />
        <TweakRadio label="Density" value={t.density}
          options={['compact', 'regular', 'comfy']}
          onChange={(v) => setTweak('density', v)} />
        <TweakToggle label="Show grid" value={t.grid}
          onChange={(v) => setTweak('grid', v)} />
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);