/* Tweaks island — React panel that drives the vanilla page via window.applyTweaks. */
function BlockTogetherTweaks() {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);
  // push every change (and the initial mount) into the page
  React.useEffect(() => { if (window.applyTweaks) window.applyTweaks(t); }, [t]);

  const ACCENTS = ["#ffce3a", "#46a8ff", "#7ae15b", "#e15bb4"];

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Brand" />
      <TweakColor label="Accent / button color" value={t.accent} options={ACCENTS}
        onChange={(v) => setTweak("accent", v)} />
      <TweakText label="Hero tagline" value={t.tagline}
        onChange={(v) => setTweak("tagline", v)} />

      <TweakSection label="Playground" />
      <TweakRadio label="World sky" value={t.worldSky} options={["day", "dusk", "night"]}
        onChange={(v) => setTweak("worldSky", v)} />

      <TweakSection label="Hero" />
      <TweakToggle label="Walking smileys" value={t.parade}
        onChange={(v) => setTweak("parade", v)} />
    </TweaksPanel>
  );
}

(function mountTweaks() {
  function go() {
    const root = document.getElementById("tweak-root");
    if (!root || !window.useTweaks) { setTimeout(go, 60); return; }
    ReactDOM.createRoot(root).render(<BlockTogetherTweaks />);
  }
  go();
})();