// App for "III. Reino dos Humanos"
const REINO_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "Selo",
  "typography": "Heráldico",
  "atmosphere": 1,
  "grain": true
}/*EDITMODE-END*/;

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

function ReinoApp() {
  const [t, setTweak] = window.useTweaks(REINO_TWEAK_DEFAULTS);

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

  window.useReveal();

  return (
    <>
      {t.grain && <div className="grain" />}
      <window.Nav />
      <window.ReinoChapterHero intensity={t.atmosphere * 0.7} />
      <window.RealmIntro />
      <window.RealmCompass />
      <window.RealmIndex />
      {window.REGIONS.map((r, i) => (
        <window.RegionChapter key={r.id} region={r} last={i === window.REGIONS.length - 1} />
      ))}
      <window.ReinoOutro />
      <window.Newsletter />
      <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(<ReinoApp />);