// tweaks-app.jsx — Vola design tweaks (mounts the Tweaks panel)
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "behind",
  "accent": "cobalt"
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    document.body.setAttribute("data-hero", t.hero);
    document.body.setAttribute("data-accent", t.accent);
  }, [t.hero, t.accent]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Hero" />
      <TweakRadio
        label="Hero treatment"
        value={t.hero}
        options={["behind", "around"]}
        onChange={(v) => setTweak("hero", v)}
      />
      <TweakSection label="Accent" />
      <TweakRadio
        label="Cobalt family"
        value={t.accent}
        options={["cobalt", "indigo", "azure"]}
        onChange={(v) => setTweak("accent", v)}
      />
    </TweaksPanel>
  );
}

(function mountTweaks() {
  const root = document.getElementById("tweaks-root");
  if (root && window.ReactDOM) {
    ReactDOM.createRoot(root).render(<VolaTweaks />);
  }
})();