// App for "VI. Bestiário" page
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "Selo",
  "typography": "Heráldico",
  "atmosphere": 0.5,
  "grain": true,
  "parchmentTone": "Sépia",
  "showFolds": true,
  "showRunes": true
}/*EDITMODE-END*/;

const PALETTE_MAP = { "Forja": "forja", "Selo": "selo" };
const TYPO_MAP = { "Heráldico": "heraldico", "Editorial": "editorial" };
const PARCHMENT_MAP = { "Sépia": "sepia", "Marfim": "marfim", "Couro": "couro" };

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

  React.useEffect(() => {
    document.documentElement.setAttribute("data-palette", PALETTE_MAP[t.palette] || "forja");
    document.documentElement.setAttribute("data-typography", TYPO_MAP[t.typography] || "heraldico");
    document.documentElement.setAttribute("data-parchment", PARCHMENT_MAP[t.parchmentTone] || "sepia");
    document.documentElement.setAttribute("data-folds", t.showFolds ? "on" : "off");
    document.documentElement.setAttribute("data-runes", t.showRunes ? "on" : "off");
  }, [t.palette, t.typography, t.parchmentTone, t.showFolds, t.showRunes]);

  window.useReveal();

  return (
    <>
      {t.grain && <div className="grain" />}
      <window.Nav />
      <window.BestiaryHero intensity={t.atmosphere * 0.7} />
      <window.BestiaryIndex />
      <window.BestiaryBook />
      <window.BestiaryOutro />
      <window.Footer />

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection label="Direção visual" />
        <window.TweakRadio
          label="Paleta (capa)"
          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="Pergaminho" />
        <window.TweakRadio
          label="Tom do papel"
          value={t.parchmentTone}
          options={["Sépia", "Marfim", "Couro"]}
          onChange={(v) => setTweak("parchmentTone", v)}
        />
        <window.TweakToggle
          label="Vincos e dobras"
          value={t.showFolds}
          onChange={(v) => setTweak("showFolds", v)}
        />
        <window.TweakToggle
          label="Inscrições rúnicas"
          value={t.showRunes}
          onChange={(v) => setTweak("showRunes", 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(<BestiarioApp />);