// tweaks-app.jsx — NOUX live design controls
// Applies to the static page by re-pointing CSS custom properties and toggling
// body classes. Defaults mirror the shipped design, so an untouched panel = no change.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "Studio · matte",
  "accent": ["#D6470E", "#A2330A"],
  "display": "Fraunces",
  "body": "Schibsted · grotesque",
  "logo": "Spaced caps",
  "direction": "Editorial"
}/*EDITMODE-END*/;

/* Complete colour systems — every token tuned together. */
const PALETTES = {
  "Studio · matte": {
    bone: "#FCFCFB", deep: "#F4F4F2", paper: "#FFFFFF", line: "#E9E9E6",
    ink: "#161616", inkSoft: "#5A5A57", inkMute: "#9B9B97",
    accent: ["#D6470E", "#A2330A"], shadow: "#141414"
  },
  "Cellar · bottle green": {
    bone: "#F2EFE6", deep: "#E9E4D6", paper: "#FBFAF4", line: "#DCD6C4",
    ink: "#161D17", inkSoft: "#4D5749", inkMute: "#83897B",
    accent: ["#2D5F43", "#1D4230"], shadow: "#142019"
  },
  "Archive · gallery blue": {
    bone: "#F7F7F2", deep: "#ECECE4", paper: "#FFFFFF", line: "#DEDED4",
    ink: "#131316", inkSoft: "#4A4A50", inkMute: "#87878D",
    accent: ["#2741CC", "#1A2C99"], shadow: "#101013"
  },
  "Madder · oxblood": {
    bone: "#F6EFE7", deep: "#EEE2D6", paper: "#FCF7F1", line: "#E2D3C5",
    ink: "#1C1210", inkSoft: "#5A463F", inkMute: "#93796E",
    accent: ["#8E2F35", "#5F1D22"], shadow: "#1E0F11"
  },
  "Nocturne · candlelit": {
    dark: true,
    bone: "#15110B", deep: "#1C1710", paper: "#211B12", line: "#33291B",
    ink: "#F1E7D4", inkSoft: "#BFB096", inkMute: "#857A64",
    accent: ["#D87A3D", "#E98E54"], shadow: "#EFE5D2"
  }
};
const ACCENT_OPTIONS = Object.values(PALETTES).map(p => p.accent);

const DISPLAY = {
  "Fraunces":      "'Fraunces', Georgia, serif",
  "Playfair":      "'Playfair Display', Georgia, serif",
  "Newsreader":    "'Newsreader', Georgia, serif",
  "Libre Caslon":  "'Libre Caslon Display', Georgia, serif",
  "DM Serif":      "'DM Serif Display', Georgia, serif"
};

const BODY = {
  "Schibsted · grotesque": "'Schibsted Grotesk', system-ui, sans-serif",
  "Newsreader · serif":    "'Newsreader', Georgia, serif",
  "Spectral · serif":      "'Spectral', Georgia, serif",
  "Source Serif":          "'Source Serif 4', Georgia, serif",
  "Inter · grotesque":     "'Inter', system-ui, sans-serif"
};

const LOGO_CLASS = { "Dot": "dot", "Grid · stacked": "grid", "Ligature · OU": "liga", "Italic X": "italx", "Halftone": "halftone", "Spaced caps": "spaced" };
const LOGO_ALL = Object.values(LOGO_CLASS);
const DIRS = ["editorial", "gallery", "press"];

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

  React.useEffect(() => {
    const r = document.documentElement.style;
    const pal = PALETTES[t.palette] || PALETTES["Studio · matte"];
    const acc = Array.isArray(t.accent) ? t.accent : pal.accent;
    r.setProperty('--accent', acc[0]);
    r.setProperty('--accent-deep', acc[1]);

    r.setProperty('--bone', pal.bone);
    r.setProperty('--bone-deep', pal.deep);
    r.setProperty('--paper', pal.paper);
    r.setProperty('--line', pal.line);
    r.setProperty('--line-soft', pal.line);
    r.setProperty('--ink', pal.ink);
    r.setProperty('--ink-soft', pal.inkSoft);
    r.setProperty('--ink-mute', pal.inkMute);
    r.setProperty('--shadow', pal.shadow);

    r.setProperty('--serif', DISPLAY[t.display] || DISPLAY["Fraunces"]);
    r.setProperty('--body', BODY[t.body] || BODY["Schibsted · grotesque"]);

    const b = document.body;
    b.classList.toggle('pal-dark', !!pal.dark);
    LOGO_ALL.forEach((c) => b.classList.remove('logo-' + c));
    b.classList.add('logo-' + (LOGO_CLASS[t.logo] || 'dot'));
    DIRS.forEach((c) => b.classList.remove('dir-' + c));
    b.classList.add('dir-' + String(t.direction || 'Editorial').toLowerCase());
  }, [t]);

  return (
    <React.Fragment>
      <span hidden></span>
      <TweaksPanel title="Tweaks">
      <TweakSection label="Typography" />
      <TweakSelect label="Display / headlines" value={t.display}
        options={Object.keys(DISPLAY)} onChange={(v) => setTweak('display', v)} />
      <TweakSelect label="Body text" value={t.body}
        options={Object.keys(BODY)} onChange={(v) => setTweak('body', v)} />
      <div style={{ display: 'flex', gap: '8px', margin: '4px 0 2px' }}>
        <TweakButton label="Le Monde editorial" onClick={() => setTweak({
          display: 'Newsreader', body: 'Newsreader · serif', palette: 'Archive · gallery blue', accent: PALETTES['Archive · gallery blue'].accent, direction: 'Press', logo: 'Spaced caps'
        })} />
        <TweakButton label="Original" secondary onClick={() => setTweak({
          display: 'Fraunces', body: 'Schibsted · grotesque', palette: 'Studio · matte', accent: PALETTES['Studio · matte'].accent, direction: 'Editorial', logo: 'Spaced caps'
        })} />
      </div>

      <TweakSection label="Colour" />
      <TweakSelect label="Palette" value={t.palette}
        options={Object.keys(PALETTES)}
        onChange={(v) => setTweak({ palette: v, accent: (PALETTES[v] || {}).accent })} />
      <TweakColor label="Accent override" value={t.accent}
        options={ACCENT_OPTIONS} onChange={(v) => setTweak('accent', v)} />

      <TweakSection label="Brand mark" />
      <TweakSelect label="Logo" value={t.logo}
        options={Object.keys(LOGO_CLASS)} onChange={(v) => setTweak('logo', v)} />

      <TweakSection label="Site design" />
      <TweakRadio label="Direction" value={t.direction}
        options={["Editorial", "Gallery", "Press"]} onChange={(v) => setTweak('direction', v)} />
    </TweaksPanel>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('tweaks-mount')).render(<App />);