// ============== APP ==============
function App() {
  // route can be: 'home' | 'lookbook' | 'product'
  // params is sub-category key when route === 'product'
  const [{ route, params }, setRouteState] = React.useState({ route: "home", params: null });


  const navigate = React.useCallback((r, p) => {
    // for 'home' route the second arg is an anchor id
    if (r === "home") {
      setRouteState({ route: "home", params: null });
      requestAnimationFrame(() => requestAnimationFrame(() => {
        if (p) {
          const el = document.getElementById(p);
          if (el) {
            const top = el.getBoundingClientRect().top + window.scrollY - 80;
            window.scrollTo({ top, behavior: "smooth" });
            return;
          }
        }
        window.scrollTo({ top: 0, behavior: "smooth" });
      }));
      return;
    }
    setRouteState({ route: r, params: p || null });
    requestAnimationFrame(() => requestAnimationFrame(() => {
      window.scrollTo({ top: 0, behavior: "smooth" });
    }));
  }, []);

  return (
    <>
      <Header route={route} params={params} navigate={navigate} />
      {route === "home" && <HomeScreen navigate={navigate} />}
      {route === "about" && <AboutScreen navigate={navigate} />}
      {route === "lookbook" && <LookbookScreen navigate={navigate} />}
      {route === "product" && params && SUBCATEGORIES[params] && (
        <ProductScreen subKey={params} navigate={navigate} />
      )}
      <Footer navigate={navigate} />
      <FixedAffordances />
    </>
  );
}

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