/* Tweaks panel for XOS Womenswear landing.
   Lets the user remix the palette, display font and small layout knobs. */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "marine",
  "displayFont": "instrument",
  "showMarquee": true,
  "campaignMode": "ink"
}/*EDITMODE-END*/;

const PALETTES = {
  marine: {
    label: "Marine · Cream · Teak",
    swatch: ["oklch(0.96 0.013 85)", "oklch(0.28 0.060 250)", "oklch(0.62 0.105 210)", "oklch(0.52 0.075 55)"],
    vars: {
      "--bg":       "oklch(0.96 0.013 85)",
      "--bg-soft":  "oklch(0.93 0.018 80)",
      "--ink":      "oklch(0.28 0.060 250)",
      "--ink-soft": "oklch(0.46 0.055 250)",
      "--ink-mute": "oklch(0.62 0.040 250)",
      "--accent":   "oklch(0.62 0.105 210)",
      "--sand":     "oklch(0.84 0.028 80)",
      "--teak":     "oklch(0.52 0.075 55)",
      "--line":     "oklch(0.28 0.060 250 / 0.12)"
    }
  },
  deep: {
    label: "Deep Sea · Cream · Coral",
    swatch: ["oklch(0.95 0.014 85)", "oklch(0.18 0.060 250)", "oklch(0.66 0.16 30)", "oklch(0.52 0.075 55)"],
    vars: {
      "--bg":       "oklch(0.95 0.014 85)",
      "--bg-soft":  "oklch(0.92 0.018 80)",
      "--ink":      "oklch(0.18 0.060 250)",
      "--ink-soft": "oklch(0.40 0.055 250)",
      "--ink-mute": "oklch(0.58 0.040 250)",
      "--accent":   "oklch(0.66 0.16 30)",
      "--sand":     "oklch(0.84 0.028 80)",
      "--teak":     "oklch(0.52 0.075 55)",
      "--line":     "oklch(0.18 0.060 250 / 0.14)"
    }
  },
  shore: {
    label: "Shore · Driftwood · Aqua",
    swatch: ["oklch(0.94 0.020 80)", "oklch(0.32 0.030 240)", "oklch(0.72 0.090 200)", "oklch(0.74 0.040 70)"],
    vars: {
      "--bg":       "oklch(0.94 0.020 80)",
      "--bg-soft":  "oklch(0.91 0.022 75)",
      "--ink":      "oklch(0.32 0.030 240)",
      "--ink-soft": "oklch(0.50 0.030 240)",
      "--ink-mute": "oklch(0.66 0.025 240)",
      "--accent":   "oklch(0.72 0.090 200)",
      "--sand":     "oklch(0.86 0.030 80)",
      "--teak":     "oklch(0.58 0.060 60)",
      "--line":     "oklch(0.32 0.030 240 / 0.12)"
    }
  },
  midnight: {
    label: "Midnight · Aqua · Sand",
    swatch: ["oklch(0.16 0.035 250)", "oklch(0.94 0.020 80)", "oklch(0.72 0.105 200)", "oklch(0.66 0.060 60)"],
    vars: {
      "--bg":       "oklch(0.16 0.035 250)",
      "--bg-soft":  "oklch(0.20 0.040 250)",
      "--ink":      "oklch(0.94 0.020 80)",
      "--ink-soft": "oklch(0.74 0.020 80)",
      "--ink-mute": "oklch(0.58 0.020 80)",
      "--accent":   "oklch(0.72 0.105 200)",
      "--sand":     "oklch(0.30 0.040 250)",
      "--teak":     "oklch(0.58 0.060 60)",
      "--line":     "oklch(0.94 0.020 80 / 0.16)"
    }
  }
};

function applyPalette(name) {
  const p = PALETTES[name] || PALETTES.bone;
  const root = document.documentElement;
  Object.entries(p.vars).forEach(([k, v]) => root.style.setProperty(k, v));
}

function applyFont(name) {
  document.body.classList.toggle("font-fraunces", name === "fraunces");
}

function applyMarquee(on) {
  const m = document.querySelector(".marquee");
  if (m) m.style.display = on ? "" : "none";
}

function applyCampaignMode(mode) {
  const hero = document.querySelector(".hero-img");
  if (!hero) return;
  hero.classList.remove("dark", "accent");
  if (mode === "ink") hero.classList.add("dark");
  else if (mode === "accent") hero.classList.add("accent");
  // else bone — leave default
}

// Custom palette picker — clusters 4 small swatches per option, labeled.
function PaletteGrid({ value, onChange }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, marginTop: 8 }}>
      {Object.entries(PALETTES).map(([key, p]) => {
        const on = key === value;
        return (
          <button
            key={key}
            type="button"
            onClick={() => onChange(key)}
            style={{
              cursor: "pointer",
              padding: 0,
              border: on ? "2px solid #111" : "1px solid rgba(0,0,0,0.18)",
              background: "transparent",
              borderRadius: 6,
              overflow: "hidden",
              textAlign: "left",
              fontFamily: "inherit"
            }}
          >
            <div style={{ display: "flex", height: 28 }}>
              {p.swatch.map((c, i) => (
                <div key={i} style={{ flex: 1, background: c }} />
              ))}
            </div>
            <div style={{
              fontFamily: "ui-monospace, monospace",
              fontSize: 9.5,
              letterSpacing: "0.14em",
              textTransform: "uppercase",
              padding: "6px 8px",
              background: "#fff",
              color: "#111",
              borderTop: "1px solid rgba(0,0,0,0.08)"
            }}>
              {p.label}
            </div>
          </button>
        );
      })}
    </div>
  );
}

function XOSTweaks() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => { applyPalette(tweaks.palette); }, [tweaks.palette]);
  React.useEffect(() => { applyFont(tweaks.displayFont); }, [tweaks.displayFont]);
  React.useEffect(() => { applyMarquee(tweaks.showMarquee); }, [tweaks.showMarquee]);
  React.useEffect(() => { applyCampaignMode(tweaks.campaignMode); }, [tweaks.campaignMode]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Color story" />
      <PaletteGrid value={tweaks.palette} onChange={(v) => setTweak("palette", v)} />

      <TweakSection label="Display font" />
      <TweakRadio
        label="Serif"
        value={tweaks.displayFont}
        onChange={(v) => setTweak("displayFont", v)}
        options={[
          { value: "instrument", label: "Instrument" },
          { value: "fraunces",   label: "Fraunces" }
        ]}
      />

      <TweakSection label="Hero cover" />
      <TweakRadio
        label="Treatment"
        value={tweaks.campaignMode}
        onChange={(v) => setTweak("campaignMode", v)}
        options={[
          { value: "ink",    label: "Ink" },
          { value: "accent", label: "Accent" },
          { value: "bone",   label: "Bone" }
        ]}
      />

      <TweakSection label="Layout" />
      <TweakToggle
        label="Drop ticker"
        value={tweaks.showMarquee}
        onChange={(v) => setTweak("showMarquee", v)}
      />
    </TweaksPanel>
  );
}

const root = ReactDOM.createRoot(document.getElementById("tweaks-root"));
root.render(<XOSTweaks />);