// Tweaks panel
function TweaksPanel({ tweaks, setTweaks, active }) {
  if (!active) return null;

  const set = (k, v) => {
    const next = { ...tweaks, [k]: v };
    setTweaks(next);
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { [k]: v } }, "*");
  };

  return (
    <div style={{
      position: "fixed", right: 24, bottom: 24, zIndex: 200,
      width: 320, padding: 20, borderRadius: 14,
      background: "rgba(18,18,21,0.95)", backdropFilter: "blur(20px)",
      border: "1px solid var(--line-strong)",
      boxShadow: "0 20px 60px rgba(0,0,0,0.6)",
    }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 18 }}>
        <span className="mono" style={{ fontSize: 11, letterSpacing: "0.18em", color: "var(--ink)" }}>TWEAKS</span>
        <span className="mono" style={{ fontSize: 10, color: "var(--ink-mute)" }}>LIVE</span>
      </div>

      <TweakField label="Product 1 name">
        <input value={tweaks.product1_name} onChange={(e) => set("product1_name", e.target.value)} style={inputStyle} />
      </TweakField>
      <TweakField label="Product 2 name">
        <input value={tweaks.product2_name} onChange={(e) => set("product2_name", e.target.value)} style={inputStyle} />
      </TweakField>
      <TweakField label="Hero headline">
        <textarea value={tweaks.hero_headline} onChange={(e) => set("hero_headline", e.target.value)} style={{ ...inputStyle, minHeight: 60, resize: "vertical" }} />
      </TweakField>

      <TweakField label="Accent 1 (Product 1)">
        <div style={{ display: "flex", gap: 6 }}>
          {["#e6a34a", "#d96c3a", "#c9b578", "#6aa67c", "#e0e0dc"].map((c) => (
            <button key={c} onClick={() => set("accent_1", c)} style={{
              width: 28, height: 28, borderRadius: 999, background: c,
              border: tweaks.accent_1 === c ? "2px solid var(--ink)" : "1px solid var(--line-strong)",
              cursor: "pointer",
            }} />
          ))}
        </div>
      </TweakField>
      <TweakField label="Accent 2 (Product 2)">
        <div style={{ display: "flex", gap: 6 }}>
          {["#7a6bff", "#4fa8e6", "#b67ae0", "#4de0b5", "#e07a9a"].map((c) => (
            <button key={c} onClick={() => set("accent_2", c)} style={{
              width: 28, height: 28, borderRadius: 999, background: c,
              border: tweaks.accent_2 === c ? "2px solid var(--ink)" : "1px solid var(--line-strong)",
              cursor: "pointer",
            }} />
          ))}
        </div>
      </TweakField>

      <TweakField label="Motion">
        <div style={{ display: "flex", gap: 4 }}>
          {["full", "subtle", "off"].map((m) => (
            <button key={m} onClick={() => set("motion", m)} className="mono" style={{
              flex: 1, fontSize: 11, padding: "8px 10px", borderRadius: 6,
              border: "1px solid var(--line-strong)",
              background: tweaks.motion === m ? "var(--ink)" : "transparent",
              color: tweaks.motion === m ? "#000" : "var(--ink-dim)",
              cursor: "pointer", textTransform: "uppercase", letterSpacing: "0.1em",
            }}>{m}</button>
          ))}
        </div>
      </TweakField>
    </div>
  );
}

const inputStyle = {
  width: "100%", background: "var(--bg-3)", border: "1px solid var(--line-strong)",
  borderRadius: 6, padding: "8px 10px", fontSize: 13, color: "var(--ink)",
  fontFamily: "inherit", outline: "none",
};

function TweakField({ label, children }) {
  return (
    <div style={{ marginBottom: 14 }}>
      <div className="mono" style={{
        fontSize: 10, color: "var(--ink-mute)", letterSpacing: "0.12em",
        textTransform: "uppercase", marginBottom: 6,
      }}>{label}</div>
      {children}
    </div>
  );
}

Object.assign(window, { TweaksPanel });