/* global React, ProductCard, Header, Footer, ShopPage, AboutPage, EventsPage, GalleryPage */
const { useState, useEffect } = React;

function App() {
  const [route, setRoute] = useState("shop");
  const products = window.SS_PRODUCTS;

  useEffect(() => { window.scrollTo({ top: 0, behavior: "instant" }); }, [route]);

  return (
    <>
      <Header route={route} setRoute={setRoute} />
      {route === "shop"  && <ShopPage products={products} />}
      {route === "events" && <EventsPage setRoute={setRoute} />}
      {route === "gallery" && <GalleryPage setRoute={setRoute} />}
      {route === "about" && <AboutPage about={window.SS_ABOUT} setRoute={setRoute} />}
      <Footer setRoute={setRoute} />
    </>
  );
}

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