// App entry for the "Livros / Biblioteca" page
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "atmosphere": 0.5,
  "grain": true,
  "dropcap": true,
  "wideSpread": true
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    document.documentElement.setAttribute("data-dropcap", t.dropcap ? "on" : "off");
    document.documentElement.setAttribute("data-wide-spread", t.wideSpread ? "on" : "off");
  }, [t.dropcap, t.wideSpread]);

  window.useReveal();

  return (
    <>
      {t.grain && <div className="grain" />}
      <window.Nav />
      <window.BibliotecaHero intensity={t.atmosphere * 0.7} />
      <window.ReadingOrder />
      <window.BibliotecaSpreads />
      <window.ColecaoCompleta />
      <window.Footer />

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection label="Editorial" />
        <window.TweakToggle
          label="Dropcap nas sinopses"
          value={t.dropcap}
          onChange={(v) => setTweak("dropcap", v)}
        />
        <window.TweakToggle
          label="Capa em destaque (parallax)"
          value={t.wideSpread}
          onChange={(v) => setTweak("wideSpread", 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(<BibliotecaApp />);