function TweaksUI() {
  const defaultsEl = document.getElementById("tweak-defaults");
  const raw = defaultsEl.textContent.match(/\/\*EDITMODE-BEGIN\*\/([\s\S]*?)\/\*EDITMODE-END\*\//)[1];
  const defaults = JSON.parse(raw);
  const [tweaks, setTweak] = window.useTweaks(defaults);

  React.useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty("--heading-font", `"${tweaks.headingFont}", system-ui, sans-serif`);
    r.style.setProperty("--body-font", `"${tweaks.bodyFont}", system-ui, sans-serif`);
    r.style.setProperty("--primary", tweaks.primary);
    r.style.setProperty("--accent", tweaks.accent);
    r.style.setProperty("--highlight", tweaks.highlight);
    r.style.setProperty("--bg", tweaks.bg);
  }, [tweaks]);

  const headingFonts = ["Plus Jakarta Sans", "Manrope", "Space Grotesk", "Outfit", "DM Sans"];
  const bodyFonts = ["DM Sans", "Plus Jakarta Sans", "Manrope", "Outfit"];

  const { TweaksPanel, TweakSection, TweakSelect, TweakColor, TweakButton } = window;

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Typographie" />
      <TweakSelect label="Police titres" value={tweaks.headingFont} options={headingFonts} onChange={(v) => setTweak("headingFont", v)} />
      <TweakSelect label="Police texte" value={tweaks.bodyFont} options={bodyFonts} onChange={(v) => setTweak("bodyFont", v)} />
      <TweakSection label="Couleurs" />
      <TweakColor label="Primaire" value={tweaks.primary} onChange={(v) => setTweak("primary", v)} />
      <TweakColor label="Accent" value={tweaks.accent} onChange={(v) => setTweak("accent", v)} />
      <TweakColor label="Surligneur" value={tweaks.highlight} onChange={(v) => setTweak("highlight", v)} />
      <TweakColor label="Fond" value={tweaks.bg} onChange={(v) => setTweak("bg", v)} />
      <TweakSection label="Préréglages" />
      <TweakButton label="Apptek (défaut)" onClick={() => {
        setTweak("primary", "#1B1F4D"); setTweak("accent", "#FF5A36");
        setTweak("highlight", "#FFC542"); setTweak("bg", "#EEEAF7");
      }} />
      <TweakButton label="Vert nature" onClick={() => {
        setTweak("primary", "#0F3B2E"); setTweak("accent", "#FF6A3D");
        setTweak("highlight", "#FFD166"); setTweak("bg", "#EAF2EC");
      }} />
      <TweakButton label="Violet électrique" onClick={() => {
        setTweak("primary", "#2A0F5C"); setTweak("accent", "#E94560");
        setTweak("highlight", "#FCBF49"); setTweak("bg", "#F2EBFA");
      }} />
    </TweaksPanel>
  );
}

window.TweaksUI = TweaksUI;