// Chov sister-site Tweaks: palette switch + intro-animation toggle.
(function () {
  if (typeof React === "undefined") return;
  const { useTweaks, TweaksPanel, TweakSection, TweakSelect, TweakToggle } = window;
  if (!useTweaks) return;

  const THEME_OPTS = [
    { value: "sage",   label: "Šalviová úľová" },
    { value: "garnet", label: "Granátová královská" },
    { value: "petrol", label: "Petrolejová plást" },
  ];

  function applyTheme(t) {
    try { localStorage.setItem("vn-chov-theme", t); } catch (e) {}
    if (t === "sage") document.documentElement.removeAttribute("data-theme");
    else document.documentElement.setAttribute("data-theme", t);
  }
  function applyAnim(on) {
    if (on) document.documentElement.removeAttribute("data-anim");
    else document.documentElement.setAttribute("data-anim", "off");
  }

  function ChovTweaks() {
    let initTheme = "sage";
    try { initTheme = localStorage.getItem("vn-chov-theme") || "sage"; } catch (e) {}
    const [t, setTweak] = useTweaks({ theme: initTheme, anim: true });
    React.useEffect(() => { applyTheme(t.theme); }, [t.theme]);
    React.useEffect(() => { applyAnim(t.anim); }, [t.anim]);
    return (
      <TweaksPanel>
        <TweakSection label="Barevná paleta" />
        <TweakSelect label="Téma" value={t.theme} options={THEME_OPTS}
          onChange={(v) => setTweak("theme", v)} />
        <TweakSection label="Pohyb" />
        <TweakToggle label="Úvodní animace" value={t.anim}
          onChange={(v) => setTweak("anim", v)} />
      </TweaksPanel>
    );
  }

  window.ChovTweaks = ChovTweaks;
})();