function App() {
  const [active, setActive] = React.useState("top");
  const [modalBook, setModalBook] = React.useState(null);

  const onNav = id => {
    setActive(id);
    const el = id === "top" ? document.body : document.getElementById(id);
    if (el) {
      if (id === "top") window.scrollTo({ top: 0, behavior: "smooth" });
      else el.scrollIntoView({ behavior: "smooth", block: "start" });
    }
  };

  React.useEffect(() => {
    const sections = ["book-one","series","world","map","characters","author"];
    const onScroll = () => {
      const y = window.scrollY + 200;
      let cur = "top";
      for (const id of sections) {
        const el = document.getElementById(id);
        if (el && el.offsetTop <= y) cur = id;
      }
      setActive(cur);
    };
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <>
      <Nav active={active} onNav={onNav}/>
      <Hero onNav={onNav} onOpen={setModalBook}/>
      <IfYouLoved/>
      <Featured onOpen={setModalBook}/>
      <Series onOpen={setModalBook}/>
      <World/>
      <ThresholdMap/>
      <Characters/>
      <Author/>
      <Footer/>
      {modalBook && <BookModal book={modalBook} onClose={() => setModalBook(null)}/>}
    </>
  );
}

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