function ShopApp() {
  const [theme, setTheme] = React.useState(() => {
    try { return localStorage.getItem("thaihao-shop-theme") || "light"; } catch { return "light"; }
  });
  React.useEffect(() => { try { localStorage.setItem("thaihao-shop-theme", theme); } catch {} }, [theme]);
  const toggle = () => setTheme(t => t==="dark"?"light":"dark");

  const [tab1, setTab1] = React.useState("home");
  const [tab2, setTab2] = React.useState("live");
  const [tab3, setTab3] = React.useState("home");
  const [tab4, setTab4] = React.useState("cart");

  return (
    <div className="stage">
      <div className="kit-header">
        <h1>ThaiHao Shop · 泰好商城 (Consumer storefront · Phase 5+)</h1>
        <p>zh-CN · mobile-first · high-conversion · 高密度商品 + 直播购物</p>
      </div>

      <ShopShell title="发现 · Discover" tab={tab1} setTab={setTab1} theme={theme} onToggleTheme={toggle}>
        <Discover />
      </ShopShell>

      <ShopShell title="直播购物 · Live shopping" tab={tab2} setTab={setTab2} theme={theme} onToggleTheme={toggle} hideTopbar={true}>
        <LiveView />
      </ShopShell>

      <ShopShell title="商品详情 · Product detail" tab={tab3} setTab={setTab3} theme={theme} onToggleTheme={toggle} hideTabbar={true}>
        <ProductDetail />
      </ShopShell>

      <ShopShell title="购物车 · Cart" tab={tab4} setTab={setTab4} theme={theme} onToggleTheme={toggle} hideTabbar={true}>
        <Cart />
      </ShopShell>
    </div>
  );
}

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