function App() {
  const { route } = useRoute();
  const [loadingProducts, setLoadingProducts] = React.useState(true);

  React.useEffect(() => {
    fetch('/api/products?sync=true')
      .then(r => r.json())
      .then(data => {
        window.PRODUCTS = data;
        setLoadingProducts(false);
      })
      .catch(() => setLoadingProducts(false));
  }, []);

  const params = new URLSearchParams(window.location.search);
  const pagoOk = params.get('pago') === 'ok';
  const sessionId = params.get('session_id') || '';

  if (loadingProducts) {
    return (
      <div style={{ height: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--kraft)', color: 'var(--ink)', fontFamily: 'Special Elite, monospace' }}>
        Iniciando el Buffet...
      </div>
    );
  }

  if (pagoOk) {
    return (
      <>
        <TopNav />
        <PagoOk sessionId={sessionId} />
        <Footer />
      </>
    );
  }

  return (
    <>
      <TopNav />
      {route.page === 'home' && <>
        <Hero />
        <Ticker />
        <IntroStrip />
        <section>
          <div className="section-head">
            <h2><span className="sub">PORTADA · COLECCIONES</span>Colecciones de Tazos Completas</h2>
            <div className="meta">Selección de Spanki<br />edición limitada</div>
          </div>
          <div className="pack-grid">
            {window.PRODUCTS.filter(p => p.stock > 0 && p.categoria === 'Tazos' && (p.slug.includes('coleccion-completa') || p.nombre.toLowerCase().includes('colección completa') || p.nombre.toLowerCase().includes('coleccion completa'))).slice(0, 8).map((p) =>
              <StickerPack key={p.id} product={p}
                onClick={() => window.dispatchEvent(new CustomEvent('nav-producto', { detail: p.slug }))} />
            )}
          </div>
        </section>
        <NewsletterSection />
        <VideoTV />
        <StepsRow />
      </>}
      {route.page === 'tienda' && <Tienda />}
      {route.page === 'producto' && <Producto slug={route.slug} />}
      {route.page === 'nosotros' && <Nosotros />}
      {route.page === 'contacto' && <Contacto />}
      <Footer />
      <CartDrawer />
    </>
  );
}

function AppNavBridge() {
  const { setRoute } = useRoute();
  React.useEffect(() => {
    const h = (e) => setRoute({ page: 'producto', slug: e.detail });
    window.addEventListener('nav-producto', h);
    return () => window.removeEventListener('nav-producto', h);
  }, [setRoute]);
  return null;
}

function Root() {
  return (
    <RouteProvider>
      <AuthProvider>
        <CartProvider>
          <AppNavBridge />
          <App />
        </CartProvider>
      </AuthProvider>
    </RouteProvider>
  );
}

ReactDOM.createRoot(document.getElementById('app')).render(<Root />);