// tweaks-app.jsx
// Three expressive tweaks for Nura Atelier — mood, voice, composition.
// Each reshapes the FEEL of the page, not pixel-level adjustments.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "mood": "daylight",
  "voice": "editorial",
  "composition": "boutique"
}/*EDITMODE-END*/;

// ── Mood — entire warm-tone palette swap ───────────────────────────────────
const MOODS = {
  daylight: {
    label: "Daylight",
    ink: "#14110e", inkSoft: "#2a241d",
    goldDeep: "#8c6a36", gold: "#b08850",
    shell: "#faf6ef", paper: "#ffffff", bone: "#f4ede2", boneDeep: "#ebe0cf",
    rule: "rgba(20, 17, 14, .14)", ruleStrong: "rgba(20, 17, 14, .28)"
  },
  noir: {
    label: "Noir",
    ink: "#0b0907", inkSoft: "#1f1b15",
    goldDeep: "#a47730", gold: "#d9aa55",
    shell: "#f2ece1", paper: "#ffffff", bone: "#e6dccc", boneDeep: "#d4c8b3",
    rule: "rgba(11, 9, 7, .14)", ruleStrong: "rgba(11, 9, 7, .28)"
  },
  bridal: {
    label: "Bridal",
    ink: "#2a2122", inkSoft: "#403333",
    goldDeep: "#9c6f60", gold: "#c69378",
    shell: "#fbf3ee", paper: "#fffaf6", bone: "#f4e6da", boneDeep: "#e8d4c2",
    rule: "rgba(42, 33, 34, .14)", ruleStrong: "rgba(42, 33, 34, .28)"
  }
};

// ── Voice — typographic personality ────────────────────────────────────────
const VOICES = {
  editorial: {
    label: "Editorial",
    serif: '"Cormorant Garamond", Georgia, "Times New Roman", serif',
    sans: '"Manrope", system-ui, -apple-system, sans-serif',
    googleFont:
      "Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Manrope:wght@400;500;600;700;800"
  },
  architectural: {
    label: "Architectural",
    serif: '"Playfair Display", "Times New Roman", Georgia, serif',
    sans: '"Inter", system-ui, -apple-system, sans-serif',
    googleFont:
      "Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Inter:wght@400;500;600;700;800"
  },
  soft: {
    label: "Soft",
    serif: '"DM Serif Display", Georgia, serif',
    sans: '"Plus Jakarta Sans", system-ui, -apple-system, sans-serif',
    googleFont:
      "DM+Serif+Display:ital@0;1&family=Plus+Jakarta+Sans:wght@400;500;600;700;800"
  }
};

// ── Composition — which hero photograph anchors the brand ─────────────────
const COMPOSITIONS = {
  boutique: {
    label: "Boutique",
    src: "./assets/editorial.jpg",
    position: "60% 42%"
  },
  walk: {
    label: "On the walk",
    src: "./assets/abaya-black.jpg",
    position: "60% 30%"
  },
  detail: {
    label: "Couture detail",
    src: "./assets/atelier-noir.jpg",
    position: "55% 40%"
  }
};

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

  // ── Mood palette ────────────────────────────────────────────────────────
  React.useEffect(() => {
    const m = MOODS[t.mood] || MOODS.daylight;
    const r = document.documentElement.style;
    r.setProperty("--ink", m.ink);
    r.setProperty("--ink-soft", m.inkSoft);
    r.setProperty("--gold", m.gold);
    r.setProperty("--gold-deep", m.goldDeep);
    r.setProperty("--shell", m.shell);
    r.setProperty("--paper", m.paper);
    r.setProperty("--bone", m.bone);
    r.setProperty("--bone-deep", m.boneDeep);
    r.setProperty("--rule", m.rule);
    r.setProperty("--rule-strong", m.ruleStrong);
    r.setProperty("--theme-color", m.ink);
    // theme-color meta for browser chrome
    const meta = document.querySelector('meta[name="theme-color"]');
    if (meta) meta.setAttribute("content", m.ink);
  }, [t.mood]);

  // ── Voice (load font, set families) ─────────────────────────────────────
  React.useEffect(() => {
    const v = VOICES[t.voice] || VOICES.editorial;
    const linkId = "tw-font-" + t.voice;
    if (!document.getElementById(linkId)) {
      const link = document.createElement("link");
      link.id = linkId;
      link.rel = "stylesheet";
      link.href =
        "https://fonts.googleapis.com/css2?family=" + v.googleFont + "&display=swap";
      document.head.appendChild(link);
    }
    document.documentElement.style.setProperty("--serif", v.serif);
    document.documentElement.style.setProperty("--sans", v.sans);
  }, [t.voice]);

  // ── Composition (swap hero photograph) ──────────────────────────────────
  React.useEffect(() => {
    const c = COMPOSITIONS[t.composition] || COMPOSITIONS.boutique;
    const img = document.querySelector(".hero-bg img");
    if (img) {
      // soft fade-swap
      img.style.transition = "opacity .5s ease";
      img.style.opacity = "0";
      setTimeout(() => {
        img.src = c.src;
        img.style.objectPosition = c.position;
        img.style.opacity = "1";
      }, 280);
    }
  }, [t.composition]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Mood" />
      <TweakRadio
        label="Palette"
        value={t.mood}
        options={[
          { value: "daylight", label: "Daylight" },
          { value: "noir",     label: "Noir" },
          { value: "bridal",   label: "Bridal" }
        ]}
        onChange={(v) => setTweak("mood", v)}
      />

      <TweakSection label="Voice" />
      <TweakRadio
        label="Typography"
        value={t.voice}
        options={[
          { value: "editorial",     label: "Editorial" },
          { value: "architectural", label: "Architectural" },
          { value: "soft",          label: "Soft" }
        ]}
        onChange={(v) => setTweak("voice", v)}
      />

      <TweakSection label="Composition" />
      <TweakRadio
        label="Hero shot"
        value={t.composition}
        options={[
          { value: "boutique", label: "Boutique" },
          { value: "walk",     label: "On the walk" },
          { value: "detail",   label: "Couture detail" }
        ]}
        onChange={(v) => setTweak("composition", v)}
      />
    </TweaksPanel>
  );
}

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