/* eslint-disable */
// Homepage Tweaks — hero variant + accent mode

const HERO_VARIANTS = {
  a: { label: "Authority", desc: "Editorial statement" },
  b: { label: "Living Surface", desc: "Animated dashboard" },
  c: { label: "Manifesto", desc: "POV + counters" },
  d: { label: "Lattice", desc: "Connected platform" },
};

function HomepageTweaks() {
  const defaults = window.IES_TWEAKS || { hero_variant: "a", accent_mode: "green" };
  const [t, setTweak] = useTweaks(defaults);

  React.useEffect(() => {
    document.body.dataset.hero = t.hero_variant || "a";
  }, [t.hero_variant]);

  React.useEffect(() => {
    const root = document.documentElement;
    if (t.accent_mode === "green") {
      root.style.setProperty("--accent", "#2BD668");
      root.style.setProperty("--accent-glow", "rgba(43,214,104,0.18)");
      root.style.setProperty("--accent-ink", "#04140A");
    } else if (t.accent_mode === "white") {
      root.style.setProperty("--accent", "#FAFBFC");
      root.style.setProperty("--accent-glow", "rgba(255,255,255,0.10)");
      root.style.setProperty("--accent-ink", "#05080F");
    } else if (t.accent_mode === "mono") {
      root.style.setProperty("--accent", "#C4CAD9");
      root.style.setProperty("--accent-glow", "rgba(196,202,217,0.10)");
      root.style.setProperty("--accent-ink", "#05080F");
    }
  }, [t.accent_mode]);

  return (
    <TweaksPanel title="Tweaks · Homepage">
      <TweakSection label="Hero variant" />
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6 }}>
        {Object.entries(HERO_VARIANTS).map(([key, v]) => {
          const active = (t.hero_variant || "a") === key;
          return (
            <button
              key={key}
              onClick={() => setTweak("hero_variant", key)}
              style={{
                appearance: "none",
                border: active ? "1px solid #29261b" : "1px solid rgba(0,0,0,0.12)",
                background: active ? "#29261b" : "rgba(255,255,255,0.5)",
                color: active ? "#FAF8F3" : "#29261b",
                borderRadius: 8,
                padding: "10px 10px",
                textAlign: "left",
                cursor: "pointer",
                font: "inherit",
                lineHeight: 1.2,
              }}
            >
              <div style={{ fontWeight: 600, fontSize: 11.5, marginBottom: 2 }}>
                {key.toUpperCase()} · {v.label}
              </div>
              <div style={{ fontSize: 10, opacity: 0.7 }}>{v.desc}</div>
            </button>
          );
        })}
      </div>

      <TweakSection label="Accent" />
      <TweakRadio
        label="Tone"
        value={t.accent_mode}
        options={["green", "white", "mono"]}
        onChange={(v) => setTweak("accent_mode", v)}
      />
      <div style={{ fontSize: 10.5, color: "rgba(41,38,27,0.55)", lineHeight: 1.5, marginTop: 4 }}>
        Product pages keep their own brand color regardless.
      </div>
    </TweaksPanel>
  );
}

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