// app.jsx — Tweaks panel for the More AI Less Cost landing page.
// Mutates CSS custom properties on :root so the static page picks up changes live.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#1d5e6b",
  "paper": "#ede7d4",
  "displayFont": "Bricolage Grotesque",
  "bodyFont": "Newsreader",
  "grain": 18,
  "dropCap": true,
  "stack": "chaotic"
}/*EDITMODE-END*/;

// Curated palettes — each option shows accent + paper preview so the user
// sees how the pair reads together. Stored value is the accent hex.
const ACCENT_OPTIONS = [
  ['#b8392a', '#efe6d3'],   // Brick on warm cream (default)
  ['#e07a1f', '#f4ecd8'],   // Sodium orange
  ['#6b1f1f', '#e9e0c9'],   // Oxblood
  ['#1d5e6b', '#ede7d4'],   // Deep teal
  ['#c69a2c', '#f3ebd6'],   // Mustard ochre
];

const PAPER_OPTIONS = [
  '#efe6d3',  // Warm cream (default)
  '#f3ede0',  // Eggshell
  '#f7f3e8',  // Off-white
  '#e3e3d0',  // Sage paper
];

const DISPLAY_FONTS = [
  'Bricolage Grotesque',
  'Archivo Black',
  'Anton',
  'Antonio',
];

const BODY_FONTS = [
  'Newsreader',
  'Source Serif 4',
  'Lora',
  'EB Garamond',
];

const STACK_ROTATIONS = {
  tidy:    { d1: '-0.6deg', d2: '0.5deg',  d3: '-0.3deg' },
  loose:   { d1: '-2.4deg', d2: '1.8deg',  d3: '-0.8deg' },
  chaotic: { d1: '-5.5deg', d2: '4.2deg',  d3: '-2.1deg' },
};

function applyTweaks(t) {
  const root = document.documentElement;
  root.style.setProperty('--red', t.accent);
  root.style.setProperty('--paper', t.paper);
  root.style.setProperty('--font-display', `'${t.displayFont}', system-ui, sans-serif`);
  // Body font: serif fallback unless the chosen body font is a sans (none here, all four are serif)
  root.style.setProperty('--font-body', `'${t.bodyFont}', 'Iowan Old Style', 'Times New Roman', serif`);
  root.style.setProperty('--grain-opacity', String(Math.max(0, Math.min(50, t.grain)) / 100));
  const rot = STACK_ROTATIONS[t.stack] || STACK_ROTATIONS.loose;
  root.style.setProperty('--doc1-rot', rot.d1);
  root.style.setProperty('--doc2-rot', rot.d2);
  root.style.setProperty('--doc3-rot', rot.d3);
  document.body.classList.toggle('no-dropcap', !t.dropCap);
}

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

  return (
    <TweaksPanel>
      <TweakSection label="Palette" />
      <TweakColor
        label="Accent + paper"
        value={[t.accent, t.paper]}
        options={ACCENT_OPTIONS}
        onChange={(pair) => setTweak({ accent: pair[0], paper: pair[1] })}
      />

      <TweakSection label="Typography" />
      <TweakSelect
        label="Display"
        value={t.displayFont}
        options={DISPLAY_FONTS}
        onChange={(v) => setTweak('displayFont', v)}
      />
      <TweakSelect
        label="Body"
        value={t.bodyFont}
        options={BODY_FONTS}
        onChange={(v) => setTweak('bodyFont', v)}
      />
      <TweakToggle
        label="Drop cap"
        value={t.dropCap}
        onChange={(v) => setTweak('dropCap', v)}
      />

      <TweakSection label="Atmosphere" />
      <TweakSlider
        label="Paper grain"
        value={t.grain}
        min={0}
        max={50}
        unit="%"
        onChange={(v) => setTweak('grain', v)}
      />
      <TweakRadio
        label="Document stack"
        value={t.stack}
        options={['tidy', 'loose', 'chaotic']}
        onChange={(v) => setTweak('stack', v)}
      />
    </TweaksPanel>
  );
}

// Mount
const root = ReactDOM.createRoot(document.getElementById('tweaks-root'));
root.render(<App />);