/* global React, ReactDOM */

function App() {
  const { route, pages, navigate } = useStore();

  // Visibility guard — if a known page is set hidden, show 404
  const matchedPage = pages.find(p => p.route === route || (route === "" && p.route === "home"));
  if (matchedPage && !matchedPage.visible) {
    return (
      <>
        <Header/>
        <main>
          <div className="page" style={{minHeight:"calc(100vh - 200px)",display:"flex",alignItems:"center",justifyContent:"center",flexDirection:"column",textAlign:"center",padding:40}}>
            <div className="mono caps" style={{fontSize:11,color:"var(--gold)",marginBottom:24,letterSpacing:".32em"}}>404 · Page hidden</div>
            <h1 className="h-display" style={{fontSize:"clamp(60px,10vw,140px)",marginBottom:30,lineHeight:.9}}>Страница<br/>скрыта</h1>
            <p style={{fontFamily:"var(--f-display)",fontWeight:300,fontSize:18,color:"var(--gray)",maxWidth:520,marginBottom:50}}>
              Эта страница временно недоступна. Возможно, она готовится к запуску, или была убрана из публикации.
            </p>
            <button className="btn btn-gold" onClick={()=>navigate("home")}>
              <span>На главную</span><span className="arrow">→</span>
            </button>
          </div>
        </main>
        <Footer/>
        <Wipe/>
      </>
    );
  }

  let page;
  if (route === "home" || route === "") page = <Home/>;
  else if (route === "catalog") page = <Catalog/>;
  else if (route.startsWith("product/")) page = <Product id={route.split("/")[1]}/>;
  else if (route === "cart") page = <Cart/>;
  else if (route === "checkout") page = <Checkout/>;
  else if (route === "confirmation") page = <Confirmation/>;
  else if (route === "lookbook") page = <Lookbook/>;
  else if (route === "about") page = <About/>;
  else if (route === "delivery") page = <Delivery/>;
  else if (route === "sizeguide") page = <SizeGuide/>;
  else if (route === "offer") page = <Offer/>;
  else if (route === "returns") page = <Returns/>;
  else if (route === "privacy") page = <Privacy/>;
  else if (route === "admin") page = <Admin/>;
  else page = <Home/>;

  return (
    <>
      <Header/>
      <main>{page}</main>
      <Footer/>
      <Wipe/>
    </>
  );
}

function Root() {
  return (
    <StoreProvider>
      <Loader/>
      <App/>
    </StoreProvider>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Root/>);