/* ============================================================
   APEX — Tweaks overlay (isolated React; drives CSS variables
   on the vanilla site). Title: "Tweaks"
   ============================================================ */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#44494E",
  "paper": ["#FFFFFF", "#FFFFFF"],
  "headline": "Serif",
  "texture": 0.5,
  "reveal": true
}/*EDITMODE-END*/;

const ACCENT_DEEP = {
  "#44494E": "#2C3034", // graphite
  "#5B6770": "#3C454C", // steel
  "#7D848B": "#565C62"  // silver
};

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

  React.useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty("--clay", t.accent);
    r.setProperty("--clay-deep", ACCENT_DEEP[t.accent] || "#7E5439");
    r.setProperty("--clay-soft", lighten(t.accent, 0.12));
    r.setProperty("--clay-tint", mix(t.accent, "#F1F2F3", 0.88));
  }, [t.accent]);

  React.useEffect(() => {
    const r = document.documentElement.style;
    if (Array.isArray(t.paper)) {
      r.setProperty("--bone", t.paper[0]);
      r.setProperty("--stone", t.paper[1] || t.paper[0]);
    }
  }, [t.paper]);

  React.useEffect(() => {
    document.documentElement.setAttribute("data-headline", (t.headline || "Serif").toLowerCase());
  }, [t.headline]);

  React.useEffect(() => {
    document.documentElement.style.setProperty("--tex", String(t.texture));
  }, [t.texture]);

  React.useEffect(() => {
    if (!t.reveal) document.querySelectorAll(".reveal").forEach(el => el.classList.add("in"));
  }, [t.reveal]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Accent" />
      <TweakColor label="Graphite / silver" value={t.accent}
        options={["#44494E", "#5B6770", "#7D848B"]}
        onChange={(v) => setTweak("accent", v)} />

      <TweakSection label="Paper tone" />
      <TweakColor label="Background" value={t.paper}
        options={[["#FFFFFF", "#FFFFFF"], ["#F7F7F8", "#EFF0F1"], ["#F1F2F3", "#E2E4E6"]]}
        onChange={(v) => setTweak("paper", v)} />

      <TweakSection label="Headlines" />
      <TweakRadio label="Display type" value={t.headline}
        options={["Serif", "Sans"]}
        onChange={(v) => setTweak("headline", v)} />

      <TweakSection label="Surface & motion" />
      <TweakSlider label="Texture intensity" value={t.texture}
        min={0} max={1} step={0.1}
        onChange={(v) => setTweak("texture", v)} />
      <TweakToggle label="Scroll reveal motion" value={t.reveal}
        onChange={(v) => setTweak("reveal", v)} />
    </TweaksPanel>
  );
}

function toRgb(hex) {
  const m = hex.replace("#", "");
  const n = parseInt(m.length === 3 ? m.replace(/(.)/g, "$1$1") : m, 16);
  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
}
function toHex(r, g, b) {
  return "#" + [r, g, b].map(v => Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, "0")).join("");
}
function lighten(hex, amt) {
  const [r, g, b] = toRgb(hex);
  return toHex(r + (255 - r) * amt, g + (255 - g) * amt, b + (255 - b) * amt);
}
function mix(hex, withHex, ratio) {
  const a = toRgb(hex), b = toRgb(withHex);
  return toHex(a[0]*(1-ratio)+b[0]*ratio, a[1]*(1-ratio)+b[1]*ratio, a[2]*(1-ratio)+b[2]*ratio);
}

(function mount() {
  const el = document.createElement("div");
  el.id = "apex-tweaks-root";
  document.body.appendChild(el);
  ReactDOM.createRoot(el).render(<ApexTweaks />);
})();