/* ============================================================
   Tweaks — couleurs & typographie · La Suite RAMOO
   ============================================================ */
const { useTweaks, TweaksPanel, TweakSection, TweakColor, TweakSelect } = window;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#A9824F",
  "ambiance": "Albâtre chaud",
  "headingFont": "Cormorant Garamond",
  "bodyFont": "Jost"
}/*EDITMODE-END*/;

/* accent → version claire associée */
function lighten(hex, amt) {
  const n = parseInt(hex.replace("#",""), 16);
  let r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
  r = Math.round(r + (255 - r) * amt);
  g = Math.round(g + (255 - g) * amt);
  b = Math.round(b + (255 - b) * amt);
  return "#" + [r,g,b].map(x => x.toString(16).padStart(2,"0")).join("");
}

const AMBIANCES = {
  "Albâtre chaud": { a: "#F4EFE7", a2: "#EDE6DA", c: "#FBF8F2" },
  "Ivoire froid":  { a: "#F1F1EE", a2: "#E7E7E2", c: "#FBFBF9" },
  "Greige":        { a: "#ECE7DF", a2: "#DFD9CD", c: "#F7F3EC" },
  "Lin rosé":      { a: "#F4EBE5", a2: "#EBDDD6", c: "#FBF4F0" },
};

function applyTweaks(t) {
  const root = document.documentElement.style;
  root.setProperty("--bronze", t.accent);
  root.setProperty("--bronze-clair", lighten(t.accent, 0.28));
  const amb = AMBIANCES[t.ambiance] || AMBIANCES["Albâtre chaud"];
  root.setProperty("--albatre", amb.a);
  root.setProperty("--albatre-2", amb.a2);
  root.setProperty("--creme", amb.c);
  root.setProperty("--serif", `"${t.headingFont}", Georgia, serif`);
  root.setProperty("--sans", `"${t.bodyFont}", system-ui, sans-serif`);
}

function TweaksApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => { applyTweaks(t); }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Couleurs" />
      <TweakColor
        label="Accent"
        value={t.accent}
        options={["#A9824F", "#B5613C", "#7E7A4E", "#5C6B73", "#8A5A6A"]}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakSelect
        label="Ambiance"
        value={t.ambiance}
        options={Object.keys(AMBIANCES)}
        onChange={(v) => setTweak("ambiance", v)}
      />
      <TweakSection label="Typographie" />
      <TweakSelect
        label="Titres"
        value={t.headingFont}
        options={["Cormorant Garamond", "Marcellus", "Playfair Display", "Tenor Sans"]}
        onChange={(v) => setTweak("headingFont", v)}
      />
      <TweakSelect
        label="Texte"
        value={t.bodyFont}
        options={["Jost", "Manrope", "Outfit", "Work Sans"]}
        onChange={(v) => setTweak("bodyFont", v)}
      />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById("tweaks-app")).render(<TweaksApp />);