// Tweaks panel for the Picara site — wires accent emphasis, body serif, and ant size.

const PicaraTweaks = ({ tweaks, setTweak }) => {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Photo filter">
        <TweakRadio
          value={tweaks.photoFilter}
          onChange={(v) => setTweak("photoFilter", v)}
          options={[
            { value: "dispo", label: "Dispo" },
            { value: "flash", label: "Flash" },
            { value: "washed", label: "Washed" },
            { value: "dusk", label: "Dusk" },
            { value: "none", label: "None" },
          ]}
        />
      </TweakSection>
      <TweakSection title="Color emphasis">
        <TweakRadio
          value={tweaks.accent}
          onChange={(v) => setTweak("accent", v)}
          options={[
            { value: "poppy", label: "Poppy" },
            { value: "lavender", label: "Lavender" },
            { value: "yellow", label: "Yellow" },
          ]}
        />
      </TweakSection>
      <TweakSection title="Body serif">
        <TweakRadio
          value={tweaks.bodySerif}
          onChange={(v) => setTweak("bodySerif", v)}
          options={[
            { value: "zilla", label: "Zilla Slab" },
            { value: "roboto", label: "Roboto Slab" },
            { value: "cormorant", label: "Cormorant" },
          ]}
        />
      </TweakSection>
      <TweakSection title="Ant size">
        <TweakSlider min={8} max={28} step={1} value={tweaks.antSize} onChange={(v) => setTweak("antSize", v)} suffix="px" />
      </TweakSection>
      <TweakSection title="Ant speed">
        <TweakSlider min={20} max={180} step={5} value={tweaks.antSpeed} onChange={(v) => setTweak("antSpeed", v)} suffix="px/s" />
      </TweakSection>
    </TweaksPanel>
  );
};

window.PicaraTweaks = PicaraTweaks;

// Apply tweak side effects (CSS vars, font swaps)
window.applyPicaraTweaks = function (tweaks) {
  const root = document.documentElement;
  const accentMap = {
    poppy: { c: "var(--poppy)", d: "var(--poppy-deep)" },
    lavender: { c: "var(--lavender)", d: "var(--lavender-deep)" },
    yellow: { c: "var(--yellow)", d: "var(--yellow-deep)" },
  };
  const a = accentMap[tweaks.accent] || accentMap.poppy;
  root.style.setProperty("--accent", a.c);
  root.style.setProperty("--accent-deep", a.d);

  const serifMap = {
    zilla: '"Zilla Slab", Georgia, serif',
    roboto: '"Roboto Slab", Georgia, serif',
    cormorant: '"Cormorant Garamond", Georgia, serif',
  };
  root.style.setProperty("--serif", serifMap[tweaks.bodySerif] || serifMap.zilla);
};