/* Zoriya — Tweaks panel (marquee + motion) */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "pbSpeed": 36,
  "pbEdgeFade": true
}/*EDITMODE-END*/;

function ZoriyaTweaks() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    const p = document.querySelector(".powered");
    const track = document.querySelector(".pb-track");
    const mq = document.querySelector(".pb-marquee");
    if (!p) return;
    if (track) track.style.animationDuration = t.pbSpeed + "s";
    if (mq) {
      const mask = t.pbEdgeFade
        ? "linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)"
        : "none";
      mq.style.webkitMaskImage = mask;
      mq.style.maskImage = mask;
    }
  }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="Powered-by marquee" />
      <TweakSlider label="Loop duration" value={t.pbSpeed} min={14} max={70} step={1} unit="s"
                   onChange={(v) => setTweak("pbSpeed", v)} />
      <TweakToggle label="Fading edges" value={t.pbEdgeFade}
                   onChange={(v) => setTweak("pbEdgeFade", v)} />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById("tweaksRoot")).render(<ZoriyaTweaks />);