// Agora App — main router + state.

const { useState, useEffect } = React;

const App = () => {
  const [route, setRoute] = useState({ name:'home' });
  const [watchlist, setWatchlist] = useState(new Set(['i02','i05','i08']));
  const [cart, setCart] = useState([]);

  // Scroll-to-top on route change
  useEffect(() => { window.scrollTo({ top: 0, behavior: 'instant' }); }, [route]);

  const toggleWatch = (id) => {
    setWatchlist(s => {
      const ns = new Set(s);
      ns.has(id) ? ns.delete(id) : ns.add(id);
      return ns;
    });
  };

  const ctx = { route, setRoute, watchlist, toggleWatch, cart, setCart };

  return (
    <div style={{ minHeight:'100vh', background:'var(--ap-bg)', display:'flex', flexDirection:'column' }}>
      <TopNav route={route} setRoute={setRoute} watchlistCount={watchlist.size}/>
      <main style={{ flex: 1 }}>
        {route.name === 'home'        && <Home {...ctx}/>}
        {route.name === 'browse'      && <Browse {...ctx}/>}
        {route.name === 'product'     && <Product {...ctx}/>}
        {route.name === 'seller'      && <Seller {...ctx}/>}
        {route.name === 'sellers'     && <SellersIndex {...ctx}/>}
        {route.name === 'watchlist'   && <Watchlist {...ctx}/>}
        {route.name === 'dream'       && <DreamFinder {...ctx}/>}
        {route.name === 'editorial'   && <Editorial {...ctx}/>}
        {route.name === 'checkout'    && <Checkout {...ctx}/>}
        {route.name === 'sellerdash'  && <SellerDash {...ctx}/>}
      </main>
      <Footer setRoute={setRoute}/>
    </div>
  );
};

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