// Jai Mahal Audio Tour — Tweaks panel
// Lets the user fine-tune the design: accent palette, density, dark mode.

const { useEffect } = React;

function applyTweaks(t) {
  const r = document.documentElement;
  // Accent palette
  const palettes = {
    oxblood: { goldDark: "#A88A4E", accent: "#7E1F2A", accentSoft: "#A93341" },
    royalblue:  { goldDark: "#A88A4E", accent: "#1F3A6B", accentSoft: "#385795" },
    forest:    { goldDark: "#9A8146", accent: "#2C4D2D", accentSoft: "#4A7A4B" },
    monochrome:{ goldDark: "#6B5A3E", accent: "#221710", accentSoft: "#4A3825" },
  };
  const p = palettes[t.palette] || palettes.oxblood;
  r.style.setProperty("--gold-dark", p.goldDark);
  r.style.setProperty("--accent", p.accent);
  r.style.setProperty("--accent-soft", p.accentSoft);

  // Theme
  if (t.dark) {
    r.style.setProperty("--cream", "#1C140C");
    r.style.setProperty("--cream-2", "#251A10");
    r.style.setProperty("--ink", "#F0E6D2");
    r.style.setProperty("--ink-soft", "#C9B996");
    r.style.setProperty("--ink-soft-2", "#B6A481");
    r.style.setProperty("--ink-faint-text", "#7A6A52");
    r.style.setProperty("--border", "#3A2B1C");
    r.style.setProperty("--ink-faint", "#2A1F13");
    r.style.setProperty("--ink-faint-2", "#4A3724");
    r.style.setProperty("--gold-on-dark", "#D5B871");
  } else {
    r.style.setProperty("--cream", "#F6EEDF");
    r.style.setProperty("--cream-2", "#F0E6D0");
    r.style.setProperty("--ink", "#221710");
    r.style.setProperty("--ink-soft", "#5C4A3A");
    r.style.setProperty("--ink-soft-2", "#46362A");
    r.style.setProperty("--ink-faint-text", "#8A7560");
    r.style.setProperty("--border", "#E2D3B5");
    r.style.setProperty("--ink-faint", "#E8DBC0");
    r.style.setProperty("--ink-faint-2", "#D8C8AA");
    r.style.setProperty("--gold-on-dark", "#E5C77E");
  }

  // Type pairing
  const typePairs = {
    cormorant: { serif: "'Cormorant Garamond', serif", sans: "'Plus Jakarta Sans', system-ui, sans-serif" },
    spectral:  { serif: "'Spectral', serif", sans: "'Plus Jakarta Sans', system-ui, sans-serif" },
    cardo:     { serif: "'Cardo', 'Cormorant Garamond', serif", sans: "'Plus Jakarta Sans', system-ui, sans-serif" },
    libre:     { serif: "'Libre Caslon Text', 'Cormorant Garamond', serif", sans: "'Plus Jakarta Sans', system-ui, sans-serif" },
  };
  const fp = typePairs[t.type] || typePairs.cormorant;
  r.style.setProperty("--font-serif", fp.serif);
  r.style.setProperty("--font-sans", fp.sans);

  // Density / scale
  r.style.fontSize = (t.density === "loose" ? 16.5 : t.density === "tight" ? 14.5 : 15.5) + "px";
}

function JMTweaks() {
  const t = useTweaks({
    palette: "oxblood",
    type: "cormorant",
    density: "default",
    dark: false,
  });

  useEffect(() => applyTweaks(t), [t.palette, t.type, t.density, t.dark]);

  return (
    <TweaksPanel title="Tweaks · Jai Mahal Tour">
      <TweakSection title="Theme">
        <TweakToggle label="Dark mode" value={t.dark} onChange={(v) => t.setTweak("dark", v)} />
      </TweakSection>

      <TweakSection title="Accent palette">
        <TweakRadio
          options={[
            { label: "Oxblood", value: "oxblood" },
            { label: "Royal Blue", value: "royalblue" },
            { label: "Forest", value: "forest" },
            { label: "Mono", value: "monochrome" },
          ]}
          value={t.palette}
          onChange={(v) => t.setTweak("palette", v)}
        />
      </TweakSection>

      <TweakSection title="Type pairing">
        <TweakSelect
          options={[
            { label: "Cormorant + Jakarta", value: "cormorant" },
            { label: "Spectral + Jakarta", value: "spectral" },
            { label: "Cardo + Jakarta", value: "cardo" },
            { label: "Libre Caslon + Jakarta", value: "libre" },
          ]}
          value={t.type}
          onChange={(v) => t.setTweak("type", v)}
        />
      </TweakSection>

      <TweakSection title="Density">
        <TweakRadio
          options={[
            { label: "Tight", value: "tight" },
            { label: "Default", value: "default" },
            { label: "Loose", value: "loose" },
          ]}
          value={t.density}
          onChange={(v) => t.setTweak("density", v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

window.JMTweaks = JMTweaks;