/* candy-tweaks.jsx — Tweaks panel for the Sugar Pop portfolio */

const CANDY_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#F2BE45", "#A9CFE8", "#EE8B4F", "#C4D89B"],
  "accent": "#2C5E3F",
  "radius": 30,
  "tilt": true,
  "font": "Fredoka"
}/*EDITMODE-END*/;

function CandyTweaks() {
  const [t, setTweak] = useTweaks(CANDY_TWEAK_DEFAULTS);

  React.useEffect(() => {
    const r = document.documentElement.style;
    const p = t.palette;
    r.setProperty("--c1", p[0]);
    r.setProperty("--c2", p[1]);
    r.setProperty("--c3", p[2]);
    r.setProperty("--c4", p[3] || p[0]);
    r.setProperty("--pine", t.accent);
    r.setProperty("--r", t.radius + "px");
    r.setProperty("--disp", '"' + t.font + '"');
    document.body.classList.toggle("flat-stickers", !t.tilt);
  }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="Color" />
      <TweakColor label="Palette" value={t.palette}
                  options={[
                    ["#F2BE45", "#A9CFE8", "#EE8B4F", "#C4D89B"],
                    ["#F2A6C2", "#B8DCC6", "#F2BE45", "#A9CFE8"],
                    ["#9FD8CB", "#F4B860", "#C9B6F0", "#F2A6C2"]
                  ]}
                  onChange={(v) => setTweak("palette", v)} />
      <TweakColor label="Deep accent" value={t.accent}
                  options={["#2C5E3F", "#34406B", "#7A3D2E"]}
                  onChange={(v) => setTweak("accent", v)} />
      <TweakSection label="Shape & type" />
      <TweakSlider label="Card roundness" value={t.radius} min={14} max={44} step={2} unit="px"
                   onChange={(v) => setTweak("radius", v)} />
      <TweakToggle label="Sticker tilt" value={t.tilt}
                   onChange={(v) => setTweak("tilt", v)} />
      <TweakRadio label="Display font" value={t.font}
                  options={["Fredoka", "Baloo 2", "Gluten"]}
                  onChange={(v) => setTweak("font", v)} />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById("tweaks-root")).render(<CandyTweaks></CandyTweaks>);