// Grey Architect — flagship Tweaks
// Palette + typographic display + motion controls, persisted via host protocol.

const GA_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "alabaster",
  "display": "serif",
  "cursor": true,
  "curtain": true,
  "grain": false
}/*EDITMODE-END*/;

const GA_PAL = {
  alabaster: { label: "Alabaster · Bronze", sw: ["#f3efe8", "#1b1815", "#9c7449"],
    v: { "--bg":"#f3efe8","--bg-2":"#ece6dc","--paper":"#f7f4ee","--ink":"#1b1815",
      "--ink-2":"#5d564d","--ink-3":"#9b9384","--line":"rgba(27,24,21,.12)",
      "--line-2":"rgba(27,24,21,.26)","--accent":"#9c7449","--accent-soft":"#b89469",
      "--dark":"#16130e","--dark-ink":"#ece4d6" } },
  greige: { label: "Greige · Stone", sw: ["#e9e7e1", "#23211d", "#8a8174"],
    v: { "--bg":"#e9e7e1","--bg-2":"#dedad2","--paper":"#efece6","--ink":"#23211d",
      "--ink-2":"#5f5a51","--ink-3":"#9c958a","--line":"rgba(35,33,29,.12)",
      "--line-2":"rgba(35,33,29,.26)","--accent":"#8a8174","--accent-soft":"#a89e8e",
      "--dark":"#1a1814","--dark-ink":"#e7e2d8" } },
  clay: { label: "Warm Clay", sw: ["#f0e8de", "#2a211a", "#a9683f"],
    v: { "--bg":"#f0e8de","--bg-2":"#e6dccd","--paper":"#f5efe5","--ink":"#2a211a",
      "--ink-2":"#6a5d4d","--ink-3":"#a4977f","--line":"rgba(42,33,26,.13)",
      "--line-2":"rgba(42,33,26,.28)","--accent":"#a9683f","--accent-soft":"#c08a5f",
      "--dark":"#1c1510","--dark-ink":"#ecdfce" } },
  graphite: { label: "Graphite (Dark)", sw: ["#17161a", "#ece9e3", "#c08a5a"],
    v: { "--bg":"#17161a","--bg-2":"#201e22","--paper":"#1c1b1f","--ink":"#ece9e3",
      "--ink-2":"#a7a299","--ink-3":"#6b675f","--line":"rgba(236,233,227,.12)",
      "--line-2":"rgba(236,233,227,.28)","--accent":"#c08a5a","--accent-soft":"#d6a878",
      "--dark":"#0f0e11","--dark-ink":"#ece9e3" } }
};

function GreyTweaks() {
  const [t, setTweak] = useTweaks(GA_DEFAULTS);

  React.useEffect(() => {
    const p = GA_PAL[t.palette] || GA_PAL.alabaster;
    const r = document.documentElement;
    Object.entries(p.v).forEach(([k, v]) => r.style.setProperty(k, v));
  }, [t.palette]);

  React.useEffect(() => {
    const id = "ga-display-style";
    let s = document.getElementById(id);
    if (!s) { s = document.createElement("style"); s.id = id; document.head.appendChild(s); }
    if (t.display === "sans") {
      s.textContent = `
        .hero h1, .manifesto p, .sec-head h2, .f-text h3, .cap h3, .spread h2,
        .studio-copy h2, .foot-top h2, .stat .v, .v-hero .v-title h2, .v-lede .big,
        .pcard .c-meta h4, .mq .item .nm, .pstep h4, .recog .lab h3, .vnext, .display {
          font-family: var(--sans) !important; font-style: normal !important;
          font-weight: 300 !important; letter-spacing: -.02em !important; }
        .hero h1, .foot-top h2, .spread h2 { font-weight: 250 !important; }
      `;
    } else { s.textContent = ``; }
  }, [t.display]);

  React.useEffect(() => {
    const c = document.getElementById("cursor");
    if (c) c.style.display = t.cursor ? "" : "none";
  }, [t.cursor]);

  React.useEffect(() => {
    if (!t.curtain) sessionStorage.setItem("ga_seen", "1");
    else sessionStorage.removeItem("ga_seen");
  }, [t.curtain]);

  React.useEffect(() => {
    const id = "ga-grain";
    let el = document.getElementById(id);
    if (t.grain) {
      if (!el) {
        el = document.createElement("div"); el.id = id;
        el.style.cssText = "position:fixed;inset:0;z-index:140;pointer-events:none;opacity:.05;" +
          "mix-blend-mode:multiply;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")";
        document.body.appendChild(el);
      }
    } else if (el) { el.remove(); }
  }, [t.grain]);

  return (
    <TweaksPanel title="Tweaks · Grey Architect">
      <TweakSection label="Palette" />
      <TweakColor label="Studio palette"
        value={GA_PAL[t.palette].sw}
        options={Object.keys(GA_PAL).map((k) => GA_PAL[k].sw)}
        onChange={(v) => {
          const key = Object.keys(GA_PAL).find((k) =>
            JSON.stringify(GA_PAL[k].sw) === JSON.stringify(v));
          if (key) setTweak("palette", key);
        }} />
      <div style={{ font: "400 10px/1.4 var(--mono,monospace)", letterSpacing: ".08em",
        textTransform: "uppercase", color: "rgba(41,38,27,.5)", marginTop: "-2px" }}>
        {GA_PAL[t.palette].label}
      </div>

      <TweakSection label="Typography" />
      <TweakRadio label="Display type" value={t.display}
        options={["serif", "sans"]} onChange={(v) => setTweak("display", v)} />

      <TweakSection label="Motion & Texture" />
      <TweakToggle label="Intro curtain" value={t.curtain}
        onChange={(v) => setTweak("curtain", v)} />
      <TweakToggle label="“View” cursor" value={t.cursor}
        onChange={(v) => setTweak("cursor", v)} />
      <TweakToggle label="Film grain" value={t.grain}
        onChange={(v) => setTweak("grain", v)} />
    </TweaksPanel>
  );
}

const __ga = document.createElement("div");
document.body.appendChild(__ga);
ReactDOM.createRoot(__ga).render(<GreyTweaks />);