const { useEffect } = React;
const PAGE_TITLES = {
  home:         () => 'Saancha Shoes — Handmade in Islamabad',
  cart:         () => 'Your Cart — Saancha Shoes',
  checkout:     () => 'Checkout — Saancha Shoes',
  confirmation: () => 'Order Confirmed — Saancha Shoes',
  search:       () => 'Search — Saancha Shoes',
  category:     (r) => {
    const cat = window.CATS && window.CATS.find(c => c.group === r.group);
    const sub = cat && cat.subs && cat.subs.find(s => s.sub === r.sub);
    return sub ? `${sub.label} — Saancha Shoes` : cat ? `${cat.label} — Saancha Shoes` : 'Shop — Saancha Shoes';
  },
  product:      (r) => {
    const p = window.PRODUCTS && window.PRODUCTS.find(x => x.id === r.id);
    return p ? `${p.name} — Saancha Shoes` : 'Product — Saancha Shoes';
  },
  page:         (r) => {
    const labels = {
      account: 'My Account', signin: 'Sign In', wishlist: 'Wishlist',
      track: 'Track Order', privacy: 'Privacy Policy', terms: 'Terms & Conditions',
      returns: 'Returns & Refunds', shipping: 'Shipping Policy',
      cancellation: 'Cancellation Policy', about: 'About Us', story: 'Our Story',
      craft: 'The Craft', journal: 'Journal', faq: 'FAQ', sizing: 'Size Guide',
      care: 'Care Guide', contact: 'Contact Us',
    };
    return r.slug && labels[r.slug] ? `${labels[r.slug]} — Saancha Shoes` : 'Saancha Shoes';
  },
};

function buildRouteLd(route) {
  if (route.name === 'product') {
    const p = window.PRODUCTS && window.PRODUCTS.find(x => x.id === route.id);
    if (!p) return {};
    return {
      '@context': 'https://schema.org',
      '@type': 'Product',
      name: p.name,
      description: p.desc || p.name,
      image: p.img ? 'https://saanchashoes.shop/' + p.img.replace(/^\.\//, '') : undefined,
      offers: {
        '@type': 'Offer',
        priceCurrency: 'PKR',
        price: p.price,
        availability: 'https://schema.org/InStock',
        seller: { '@type': 'Organization', name: 'Saancha Shoes' },
      },
    };
  }
  if (route.name === 'category') {
    const cat = window.CATS && window.CATS.find(c => c.group === route.group);
    const sub = cat && cat.subs && cat.subs.find(s => s.sub === route.sub);
    const label = sub ? sub.label : cat ? cat.label : 'Shop';
    return {
      '@context': 'https://schema.org',
      '@type': 'BreadcrumbList',
      itemListElement: [
        { '@type': 'ListItem', position: 1, name: 'Home', item: 'https://saanchashoes.shop/' },
        { '@type': 'ListItem', position: 2, name: cat ? cat.label : label, item: `https://saanchashoes.shop/#${route.group}` },
        sub ? { '@type': 'ListItem', position: 3, name: sub.label } : null,
      ].filter(Boolean),
    };
  }
  return {
    '@context': 'https://schema.org',
    '@type': 'WebPage',
    name: PAGE_TITLES[route.name] ? PAGE_TITLES[route.name](route) : 'Saancha Shoes',
    url: 'https://saanchashoes.shop/',
  };
}

function App() {
  const { route } = useStore();

  // Update document.title per route
  const { useEffect } = React;
  useEffect(() => {
    const fn = PAGE_TITLES[route.name];
    document.title = fn ? fn(route) : 'Saancha Shoes — Handmade in Islamabad';
  }, [route]);

  // Update route-specific JSON-LD
  useEffect(() => {
    const el = document.getElementById('ld-route');
    if (el) {
      try { el.textContent = JSON.stringify(buildRouteLd(route)); } catch {}
    }
  }, [route]);

  let page;
  if (route.name === 'home') page = <Home />;
  else if (route.name === 'category') page = <Listing />;
  else if (route.name === 'product') page = <ProductPage />;
  else if (route.name === 'checkout') page = <Checkout />;
  else if (route.name === 'confirmation') page = <Confirmation />;
  else if (route.name === 'page') page = <ContentPage slug={route.slug} sub={route.sub} />;
  else page = <Home />;

  return (
    <>
      <Header />
      <main>{page}</main>
      <Footer />
      <CartDrawer />
      <MobileMenu />
      <SearchOverlay />
    </>
  );
}

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