// Tweaks panel for Maison Solène landing page
// Lets prospects (or you) preview the template under different palettes / brand names / font pairings.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "maison",
  "brandFirst": "Maison",
  "brandSecond": "Solène",
  "displayFont": "Cormorant Garamond",
  "compactNav": false
}/*EDITMODE-END*/;

const PALETTES = {
  maison: {
    label: "Maison · Cream + Forest",
    swatch: ["#ECE5D8", "#1B1715", "#4A5A45"],
    vars: {
      "--bg":         "#ECE5D8",
      "--bg-soft":    "#E3DBCB",
      "--bg-deep":    "#1B1715",
      "--ink":        "#1B1715",
      "--ink-soft":   "#4A4138",
      "--ink-mute":   "#8A7E6E",
      "--line":       "rgba(27,23,21,.16)",
      "--line-soft":  "rgba(27,23,21,.08)",
      "--accent":     "#4A5A45",
      "--accent-deep":"#2F3A2C",
      "--paper":      "#F6F1E6"
    }
  },
  dune: {
    label: "Dune · Sand + Terracotta",
    swatch: ["#F0E6D5", "#2A1F18", "#B5644A"],
    vars: {
      "--bg":         "#F0E6D5",
      "--bg-soft":    "#E5D8C2",
      "--bg-deep":    "#2A1F18",
      "--ink":        "#2A1F18",
      "--ink-soft":   "#5A4636",
      "--ink-mute":   "#9C8474",
      "--line":       "rgba(42,31,24,.18)",
      "--line-soft":  "rgba(42,31,24,.09)",
      "--accent":     "#B5644A",
      "--accent-deep":"#8C4632",
      "--paper":      "#F8F0E2"
    }
  },
  atelier: {
    label: "Atelier · Bone + Charcoal",
    swatch: ["#F2EFEA", "#14110F", "#4D4944"],
    vars: {
      "--bg":         "#F2EFEA",
      "--bg-soft":    "#E6E1D7",
      "--bg-deep":    "#14110F",
      "--ink":        "#14110F",
      "--ink-soft":   "#3A3530",
      "--ink-mute":   "#8C857E",
      "--line":       "rgba(20,17,15,.16)",
      "--line-soft":  "rgba(20,17,15,.08)",
      "--accent":     "#6B6B5A",
      "--accent-deep":"#3F3F36",
      "--paper":      "#FAF7F2"
    }
  },
  noir: {
    label: "Noir · Espresso + Gold",
    swatch: ["#1A1614", "#EDE5D6", "#C9A876"],
    vars: {
      "--bg":         "#1A1614",
      "--bg-soft":    "#231D1A",
      "--bg-deep":    "#0E0B0A",
      "--ink":        "#EDE5D6",
      "--ink-soft":   "#BFB6A5",
      "--ink-mute":   "#867D6E",
      "--line":       "rgba(237,229,214,.18)",
      "--line-soft":  "rgba(237,229,214,.09)",
      "--accent":     "#C9A876",
      "--accent-deep":"#B8945E",
      "--paper":      "#231D1A"
    }
  },
  rose: {
    label: "Rose · Linen + Burgundy",
    swatch: ["#F2EAE3", "#2A1418", "#8A2B36"],
    vars: {
      "--bg":         "#F2EAE3",
      "--bg-soft":    "#E6DAD0",
      "--bg-deep":    "#2A1418",
      "--ink":        "#2A1418",
      "--ink-soft":   "#5B3038",
      "--ink-mute":   "#9C7A7C",
      "--line":       "rgba(42,20,24,.16)",
      "--line-soft":  "rgba(42,20,24,.08)",
      "--accent":     "#8A2B36",
      "--accent-deep":"#5E1B25",
      "--paper":      "#F9F1EA"
    }
  }
};

const FONTS = {
  "Cormorant Garamond": '"Cormorant Garamond", "Times New Roman", serif',
  "DM Serif Display":   '"DM Serif Display", "Cormorant Garamond", serif',
  "Tenor Sans":         '"Tenor Sans", "Cormorant Garamond", serif',
  "Italiana":           '"Italiana", "Cormorant Garamond", serif',
  "Libre Caslon Text":  '"Libre Caslon Text", "Cormorant Garamond", serif'
};

// Pre-load alternate display fonts (lazy — only when picked)
const loadedFonts = new Set(["Cormorant Garamond"]);
function ensureFontLoaded(family) {
  if (loadedFonts.has(family)) return;
  loadedFonts.add(family);
  const link = document.createElement("link");
  link.rel = "stylesheet";
  link.href = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(family)}:ital,wght@0,400;0,500;0,700;1,400&display=swap`;
  document.head.appendChild(link);
}

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

function applyFont(family) {
  ensureFontLoaded(family);
  document.documentElement.style.setProperty("--serif", FONTS[family] || FONTS["Cormorant Garamond"]);
}

function applyBrand(first, second) {
  document.querySelectorAll("[data-brand-target] span:first-child").forEach(el => {
    el.innerHTML = `${first} <span class="amp">${second}</span>`;
  });
  document.querySelectorAll(".foot-brand").forEach(el => {
    el.innerHTML = `${first} <span class="amp">${second}</span>`;
  });
  document.title = `${first} ${second} — Salon & Spa`;
}

function applyNav(compact) {
  const nav = document.querySelector(".nav .wrap");
  if (!nav) return;
  nav.style.height = compact ? "62px" : "";
}

function PaletteSwatch({ value, swatch, label, active, onClick }) {
  return (
    <button
      onClick={onClick}
      style={{
        all: "unset",
        display: "flex", alignItems: "center", gap: 10,
        padding: "8px 10px",
        border: active ? "1px solid rgba(0,0,0,.35)" : "0.5px solid rgba(0,0,0,.1)",
        borderRadius: 8,
        background: active ? "rgba(255,255,255,.85)" : "rgba(255,255,255,.5)",
        cursor: "pointer", width: "100%", boxSizing: "border-box"
      }}>
      <span style={{ display:"flex" }}>
        {swatch.map((c, i) => (
          <span key={i} style={{
            display:"inline-block", width:14, height:14, borderRadius:"50%",
            background:c, border:"0.5px solid rgba(0,0,0,.15)",
            marginLeft: i ? -4 : 0
          }} />
        ))}
      </span>
      <span style={{ fontSize:11.5, fontWeight: active ? 600 : 500 }}>{label}</span>
    </button>
  );
}

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

  React.useEffect(() => { applyPalette(t.palette); }, [t.palette]);
  React.useEffect(() => { applyFont(t.displayFont); }, [t.displayFont]);
  React.useEffect(() => { applyBrand(t.brandFirst, t.brandSecond); }, [t.brandFirst, t.brandSecond]);
  React.useEffect(() => { applyNav(t.compactNav); }, [t.compactNav]);

  return (
    <TweaksPanel title="Tweaks · Template">
      <TweakSection label="Palette" />
      <div style={{display:"flex", flexDirection:"column", gap:6}}>
        {Object.entries(PALETTES).map(([k, p]) => (
          <PaletteSwatch
            key={k}
            value={k}
            swatch={p.swatch}
            label={p.label}
            active={t.palette === k}
            onClick={() => setTweak("palette", k)} />
        ))}
      </div>

      <TweakSection label="Brand" />
      <TweakText label="First word" value={t.brandFirst}
        onChange={(v) => setTweak("brandFirst", v)} />
      <TweakText label="Second word" value={t.brandSecond}
        onChange={(v) => setTweak("brandSecond", v)} />

      <TweakSection label="Typography" />
      <TweakSelect label="Display font" value={t.displayFont}
        options={Object.keys(FONTS)}
        onChange={(v) => setTweak("displayFont", v)} />

      <TweakSection label="Layout" />
      <TweakToggle label="Compact nav" value={t.compactNav}
        onChange={(v) => setTweak("compactNav", v)} />

      <TweakSection label="Quick demo" />
      <TweakButton onClick={() => document.querySelector("[data-open-book]").click()}>
        Open booking modal →
      </TweakButton>
      <TweakButton onClick={() => window.scrollTo({top:0, behavior:"smooth"})}>
        Back to top ↑
      </TweakButton>
    </TweaksPanel>
  );
}

const root = document.createElement("div");
document.body.appendChild(root);
ReactDOM.createRoot(root).render(<App />);