// src/Tweaks.jsx — palette + display-weight swap. Syncs to localStorage and host.

const KC_PALETTES = [
  { name: "forest", colors: ["#1C3320", "#8B5A3C", "#C8A96E", "#A8B89A"] },
  { name: "walnut", colors: ["#3A1F14", "#A8443A", "#D4B896", "#C8A96E"] },
  { name: "sage",   colors: ["#2F4F2A", "#5A7A4A", "#C8A96E", "#A8B89A"] },
];

const KCTweaks = () => {
  const [t, setTweak] = useTweaks(window.__KC_INITIAL_TWEAKS__ || { palette: "forest", displayWeight: 500 });

  React.useEffect(() => {
    localStorage.setItem("kc-tweaks", JSON.stringify(t));
    if (window.__KC_APPLY__) {
      window.__KC_APPLY__.applyPalette(t.palette);
      window.__KC_APPLY__.applyDisplayWeight(t.displayWeight);
    }
  }, [t.palette, t.displayWeight]);

  const currentPalette = KC_PALETTES.find(p => p.name === t.palette) || KC_PALETTES[0];

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Palette"/>
      <TweakColor
        label="Color palette"
        value={currentPalette.colors}
        options={KC_PALETTES.map(p => p.colors)}
        onChange={(colors) => {
          const match = KC_PALETTES.find(p => JSON.stringify(p.colors) === JSON.stringify(colors));
          if (match) setTweak("palette", match.name);
        }}
      />
      <p style={{ font: "400 11px/1.4 ui-sans-serif", color: "rgba(41,38,27,.55)", margin: "4px 0 0" }}>
        Forest (default) · Walnut · Sage
      </p>
      <TweakSection label="Display type"/>
      <TweakRadio
        label="Headline weight"
        value={String(t.displayWeight)}
        options={["400", "500", "600"]}
        onChange={v => setTweak("displayWeight", Number(v))}
      />
    </TweaksPanel>
  );
};

window.KCTweaks = KCTweaks;