/* Tweaks panel — let user toggle palette, hero variant, density */

const PALETTES = {
  "Electric Blue": { accent: "#3878ff", accent2: "#5b95ff", accentDeep: "#2a52ff", glow: "rgba(56, 120, 255, 0.35)" },
  "Acid Green":    { accent: "#3ecf8e", accent2: "#6ce0ad", accentDeep: "#1aa86d", glow: "rgba(62, 207, 142, 0.35)" },
  "Violet":        { accent: "#8b5cf6", accent2: "#a78bfa", accentDeep: "#7c3aed", glow: "rgba(139, 92, 246, 0.35)" },
  "Sunset Orange": { accent: "#f97316", accent2: "#fb923c", accentDeep: "#ea580c", glow: "rgba(249, 115, 22, 0.35)" }
};

const BGS = {
  "Deep Navy":  { bg: "#0a0d12", bg1: "#0d1117", bg2: "#11161e", bg3: "#161d27" },
  "Pure Black": { bg: "#000000", bg1: "#070707", bg2: "#0e0e0e", bg3: "#161616" },
  "Warm Slate": { bg: "#0e0d10", bg1: "#13111a", bg2: "#1a1820", bg3: "#221f29" }
};

const PALETTE_SWATCHES = Object.fromEntries(
  Object.entries(PALETTES).map(([k, p]) => [k, [p.accent, p.accent2, p.accentDeep]])
);

function SiteTweaksPanel() {
  const [t, setTweak] = useTweaks(window.SITE_TWEAK_DEFAULTS || {});

  React.useEffect(() => {
    const root = document.documentElement;
    const p = PALETTES[t.palette] || PALETTES["Electric Blue"];
    root.style.setProperty("--accent", p.accent);
    root.style.setProperty("--accent-2", p.accent2);
    root.style.setProperty("--accent-deep", p.accentDeep);
    root.style.setProperty("--accent-glow", p.glow);
    root.style.setProperty("--accent-soft", p.glow.replace("0.35", "0.12"));

    const b = BGS[t.background] || BGS["Deep Navy"];
    root.style.setProperty("--bg",   b.bg);
    root.style.setProperty("--bg-1", b.bg1);
    root.style.setProperty("--bg-2", b.bg2);
    root.style.setProperty("--bg-3", b.bg3);

    document.body.dataset.density = t.density;
  }, [t.palette, t.background, t.density]);

  const paletteName = t.palette || "Electric Blue";
  const currentSwatch = PALETTE_SWATCHES[paletteName] || PALETTE_SWATCHES["Electric Blue"];

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Brand">
        <TweakColor
          label="Accent palette"
          value={currentSwatch}
          onChange={(v) => {
            const name = Object.keys(PALETTE_SWATCHES).find(
              (k) => PALETTE_SWATCHES[k][0] === v[0]
            ) || "Electric Blue";
            setTweak("palette", name);
          }}
          options={Object.values(PALETTE_SWATCHES)}
        />
      </TweakSection>
      <TweakSection label="Background">
        <TweakSelect
          label="Tone"
          value={t.background}
          onChange={(v) => setTweak("background", v)}
          options={Object.keys(BGS)}
        />
      </TweakSection>
      <TweakSection label="Hero">
        <TweakRadio
          label="Headline"
          value={t.headline}
          onChange={(v) => setTweak("headline", v)}
          options={["Bypass", "Speed", "Benchmark"]}
        />
        <TweakToggle
          label="Show animated diagram"
          value={t.showDiagram}
          onChange={(v) => setTweak("showDiagram", v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

window.SiteTweaksPanel = SiteTweaksPanel;