/* Yurrah — Tweaks panel (mounts independently of the vanilla app) */

const YURRAH_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentLead": "ochre",
  "wipeColor": "ochre",
  "ambient": true,
  "speed": 1
}/*EDITMODE-END*/;

function YurrahTweaksApp() {
  const [t, setTweak] = useTweaks(YURRAH_TWEAK_DEFAULTS);

  React.useEffect(() => {
    window.dispatchEvent(new CustomEvent("yurrah-tweaks", { detail: t }));
  }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="Colour" />
      <TweakRadio
        label="Accent lead"
        value={t.accentLead}
        options={["ochre", "blue"]}
        onChange={(v) => setTweak("accentLead", v)}
      />
      <TweakRadio
        label="Wipe edge"
        value={t.wipeColor}
        options={["ochre", "blue", "bone"]}
        onChange={(v) => setTweak("wipeColor", v)}
      />
      <TweakSection label="Motion" />
      <TweakSlider
        label="Transition speed"
        value={t.speed}
        min={0.6}
        max={1.8}
        step={0.1}
        unit="x"
        onChange={(v) => setTweak("speed", v)}
      />
      <TweakToggle
        label="Ambient flow lines"
        value={t.ambient}
        onChange={(v) => setTweak("ambient", v)}
      />
    </TweaksPanel>
  );
}

(function mountTweaks() {
  const host = document.createElement("div");
  host.id = "yurrah-tweaks-root";
  document.body.appendChild(host);
  ReactDOM.createRoot(host).render(<YurrahTweaksApp />);
})();