// App for "Política de Privacidade" page
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "Selo",
  "typography": "Heráldico",
  "atmosphere": 0.4,
  "grain": true
}/*EDITMODE-END*/;

const PALETTE_MAP = { "Forja": "forja", "Selo": "selo" };
const TYPO_MAP = { "Heráldico": "heraldico", "Editorial": "editorial" };

function PrivacidadeApp() {
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    document.documentElement.setAttribute("data-palette", PALETTE_MAP[t.palette] || "selo");
    document.documentElement.setAttribute("data-typography", TYPO_MAP[t.typography] || "heraldico");
  }, [t.palette, t.typography]);

  window.useReveal();

  return (
    <>
      {t.grain && <div className="grain" />}
      <window.Nav />
      <window.PrivacidadeHero intensity={t.atmosphere * 0.5} />
      <window.PrivacidadeBody />
      <window.Footer />

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection label="Direção visual" />
        <window.TweakRadio
          label="Paleta"
          value={t.palette}
          options={["Forja", "Selo"]}
          onChange={(v) => setTweak("palette", v)}
        />
        <window.TweakRadio
          label="Tipografia"
          value={t.typography}
          options={["Heráldico", "Editorial"]}
          onChange={(v) => setTweak("typography", v)}
        />

        <window.TweakSection label="Atmosfera" />
        <window.TweakSlider
          label="Brasas"
          min={0} max={2} step={0.25}
          value={t.atmosphere}
          onChange={(v) => setTweak("atmosphere", v)}
        />
        <window.TweakToggle
          label="Grão de filme"
          value={t.grain}
          onChange={(v) => setTweak("grain", v)}
        />
      </window.TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<PrivacidadeApp />);