// Tweaks — variações visuais do Projeto Lorenzato
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "tema": "Galeria",
  "escalaTexto": 1.1
}/*EDITMODE-END*/;

const TEMA_MAP = {
  "Galeria": "galeria",
  "Terroso": "terroso",
  "Noturno": "noturno"
};

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

  React.useEffect(() => {
    document.documentElement.setAttribute("data-theme", TEMA_MAP[t.tema] || "galeria");
  }, [t.tema]);

  React.useEffect(() => {
    document.documentElement.style.setProperty("--scale", String(t.escalaTexto));
  }, [t.escalaTexto]);

  return (
    <TweaksPanel>
      <TweakSection label="Variações visuais" />
      <TweakRadio
        label="Tema"
        value={t.tema}
        options={["Galeria", "Terroso", "Noturno"]}
        onChange={(v) => setTweak("tema", v)}
      />
      <TweakSlider
        label="Escala do texto"
        value={t.escalaTexto}
        min={0.9}
        max={1.15}
        step={0.05}
        onChange={(v) => setTweak("escalaTexto", v)}
      />
    </TweaksPanel>
  );
}

const tweaksRoot = ReactDOM.createRoot(document.getElementById("tweaks-root"));
tweaksRoot.render(<TweaksApp />);