// ============================================================
// Tweaks panel — accents, atmosphere, density
// ============================================================
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "cyan-magenta",
  "atmosphere": "dual-glow",
  "displayFont": "instrument-serif",
  "bgTone": "deep-blue",
  "grainOn": true,
  "gridOn": true
}/*EDITMODE-END*/;

const ACCENT_PALETTES = {
  "cyan-magenta": { cyan: "oklch(0.82 0.14 200)", magenta: "oklch(0.72 0.22 340)", swatch: ["oklch(0.82 0.14 200)", "oklch(0.72 0.22 340)"] },
  "amber-violet": { cyan: "oklch(0.82 0.16 75)",  magenta: "oklch(0.68 0.22 295)", swatch: ["oklch(0.82 0.16 75)",  "oklch(0.68 0.22 295)"] },
  "mint-coral":   { cyan: "oklch(0.83 0.16 160)", magenta: "oklch(0.72 0.22 25)",  swatch: ["oklch(0.83 0.16 160)", "oklch(0.72 0.22 25)"] },
  "monochrome":   { cyan: "oklch(0.90 0.02 240)", magenta: "oklch(0.72 0.02 240)", swatch: ["oklch(0.90 0.02 240)", "oklch(0.72 0.02 240)"] },
};

const BG_TONES = {
  "deep-blue":   { bg: "#060912", bg2: "#0a0f1c", bg3: "#11172a" },
  "ink-black":   { bg: "#08080a", bg2: "#0e0e12", bg3: "#15151b" },
  "warm-charcoal": { bg: "#100e0a", bg2: "#16140f", bg3: "#1d1b15" },
};

const DISPLAY_FONTS = {
  "instrument-serif": '"Instrument Serif", Georgia, serif',
  "fraunces":         '"Fraunces", Georgia, serif',
  "newsreader":       '"Newsreader", Georgia, serif',
  "geist":            '"Geist", -apple-system, sans-serif',
};

function applyTweaks(t) {
  const root = document.documentElement;
  const a = ACCENT_PALETTES[t.accent] || ACCENT_PALETTES["cyan-magenta"];
  root.style.setProperty('--cyan', a.cyan);
  root.style.setProperty('--magenta', a.magenta);

  const b = BG_TONES[t.bgTone] || BG_TONES["deep-blue"];
  root.style.setProperty('--bg', b.bg);
  root.style.setProperty('--bg-2', b.bg2);
  root.style.setProperty('--bg-3', b.bg3);

  const f = DISPLAY_FONTS[t.displayFont] || DISPLAY_FONTS["instrument-serif"];
  root.style.setProperty('--f-display', f);

  // Grain on/off
  document.body.style.setProperty('--grain-op', t.grainOn ? '0.5' : '0');
  if (!document.getElementById('__grain-style')) {
    const s = document.createElement('style');
    s.id = '__grain-style';
    s.textContent = 'body::before { opacity: var(--grain-op, 0.5) !important; }';
    document.head.appendChild(s);
  }

  // Grid on/off
  const grid = document.querySelector('.hero__bg .grid');
  if (grid) grid.style.opacity = t.gridOn ? '0.6' : '0';

  // Atmosphere variants
  const glowC = document.querySelector('.hero__bg .glow-cyan');
  const glowM = document.querySelector('.hero__bg .glow-magenta');
  if (glowC && glowM) {
    if (t.atmosphere === 'dual-glow') {
      glowC.style.opacity = '0.55'; glowM.style.opacity = '0.4';
    } else if (t.atmosphere === 'single-cone') {
      glowC.style.opacity = '0.75'; glowM.style.opacity = '0';
    } else if (t.atmosphere === 'minimal') {
      glowC.style.opacity = '0.2'; glowM.style.opacity = '0.12';
    } else if (t.atmosphere === 'aurora') {
      glowC.style.opacity = '0.7'; glowM.style.opacity = '0.55';
    }
  }
}

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

  React.useEffect(() => { applyTweaks(t); }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Accents">
        <TweakRadio
          label="Palette"
          value={t.accent}
          onChange={v => setTweak('accent', v)}
          options={[
            { value: "cyan-magenta", label: "Cyan + Magenta" },
            { value: "amber-violet", label: "Amber + Violet" },
            { value: "mint-coral",   label: "Mint + Coral" },
            { value: "monochrome",   label: "Monochrome" },
          ]}
        />
      </TweakSection>

      <TweakSection label="Background">
        <TweakRadio
          label="Tone"
          value={t.bgTone}
          onChange={v => setTweak('bgTone', v)}
          options={[
            { value: "deep-blue",     label: "Deep blue" },
            { value: "ink-black",     label: "Ink black" },
            { value: "warm-charcoal", label: "Warm charcoal" },
          ]}
        />
      </TweakSection>

      <TweakSection label="Atmosphere">
        <TweakRadio
          label="Top light"
          value={t.atmosphere}
          onChange={v => setTweak('atmosphere', v)}
          options={[
            { value: "dual-glow",   label: "Dual glow" },
            { value: "single-cone", label: "Single cone" },
            { value: "aurora",      label: "Aurora" },
            { value: "minimal",     label: "Minimal" },
          ]}
        />
        <TweakToggle label="Grid"  value={t.gridOn}  onChange={v => setTweak('gridOn', v)} />
        <TweakToggle label="Grain" value={t.grainOn} onChange={v => setTweak('grainOn', v)} />
      </TweakSection>

      <TweakSection label="Typography">
        <TweakSelect
          label="Display font"
          value={t.displayFont}
          onChange={v => setTweak('displayFont', v)}
          options={[
            { value: "instrument-serif", label: "Instrument Serif" },
            { value: "fraunces",         label: "Fraunces" },
            { value: "newsreader",       label: "Newsreader" },
            { value: "geist",            label: "Geist (sans)" },
          ]}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

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

// Apply defaults immediately so the page reflects them on load
applyTweaks(TWEAK_DEFAULTS);