/* Tweaks app — mounts the Tweaks panel and applies choices to the vanilla page. */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "Âmbar",
  "motion": true
}/*EDITMODE-END*/;

const ACCENTS = {
  "Âmbar":  null,
  "Aço":    ["#4d72a9", "#6f8fbf"],
  "Azul":   ["#2f63c9", "#5b8def"],
  "Verde":  ["#1f8a7a", "#34b9a4"],
  "Violeta":["#5b54c9", "#8b84e6"]
};

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

  useEffect(()=>{
    const root = document.documentElement;
    const pair = ACCENTS[t.accent];
    if(!pair){
      root.style.removeProperty("--accent");
      root.style.removeProperty("--accent-2");
      root.style.removeProperty("--accent-soft");
    } else {
      root.style.setProperty("--accent", pair[0]);
      root.style.setProperty("--accent-2", pair[1]);
      root.style.setProperty("--accent-soft", pair[0] + "20");
    }
  }, [t.accent]);

  useEffect(()=>{
    document.documentElement.classList.toggle("no-motion", !t.motion);
    if(!t.motion){
      document.querySelectorAll(".reveal:not(.in)").forEach(el=>el.classList.add("in"));
    }
  }, [t.motion]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Cor de acento" />
      <TweakRadio label="Acento"
        value={t.accent} options={Object.keys(ACCENTS)}
        onChange={(v)=> setTweak("accent", v)} />
      <TweakSection label="Movimento" />
      <TweakToggle label="Animações ao rolar" value={t.motion}
        onChange={(v)=> setTweak("motion", v)} />
    </TweaksPanel>
  );
}

(function mount(){
  const el = document.getElementById("tweaks-root");
  if(window.ReactDOM && ReactDOM.createRoot) ReactDOM.createRoot(el).render(<TweaksApp/>);
  else ReactDOM.render(<TweaksApp/>, el);
})();