/* Tweaks app — renders ONLY the Tweaks panel and applies choices to the
   vanilla landing page through CSS custom properties on :root.
   Keeps the design's resting state untouched when Tweaks is off. */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#2B50F0",
  "serif": "Instrument Serif",
  "rings": true
}/*EDITMODE-END*/;

// accent presets: primary + hover + two tints, kept at matching chroma/lightness
const ACCENTS = {
  "#2B50F0": { hover: "#1E3CCC", t50: "#EEF1FE", t100: "#DEE5FD" }, // Cobalt (brand)
  "#4338CA": { hover: "#3730A3", t50: "#EEF0FE", t100: "#E0E2FB" }, // Indigo
  "#1769FF": { hover: "#0F52CC", t50: "#EAF2FF", t100: "#D2E3FF" }, // Azure
  "#6D44E0": { hover: "#5630C0", t50: "#F2EEFE", t100: "#E5DCFB" }  // Violet
};

const SERIFS = {
  "Instrument Serif": '"Instrument Serif", Georgia, serif',
  "Spectral":   '"Spectral", Georgia, serif',
  "Playfair":   '"Playfair Display", Georgia, serif'
};

function applyTweaks(t) {
  const root = document.documentElement;
  const a = ACCENTS[t.accent] || ACCENTS["#2B50F0"];
  root.style.setProperty("--blue", t.accent);
  root.style.setProperty("--blue-600", a.hover);
  root.style.setProperty("--blue-50", a.t50);
  root.style.setProperty("--blue-100", a.t100);
  root.style.setProperty("--serif", SERIFS[t.serif] || SERIFS["Instrument Serif"]);
  document.querySelectorAll(".stage-rings").forEach(function (r) {
    r.style.display = t.rings ? "" : "none";
  });
}

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

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Accent" />
      <TweakColor
        label="Couleur"
        value={t.accent}
        options={Object.keys(ACCENTS)}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakSection label="Typographie" />
      <TweakRadio
        label="Titres"
        value={t.serif}
        options={["Instrument Serif", "Spectral", "Playfair"]}
        onChange={(v) => setTweak("serif", v)}
      />
      <TweakSection label="Décor" />
      <TweakToggle
        label="Halo derrière le téléphone"
        value={t.rings}
        onChange={(v) => setTweak("rings", v)}
      />
    </TweaksPanel>
  );
}

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