We design digital products that

// app/(storefront)/page.tsx
import { Suspense } from 'react';
import { notFound } from 'next/navigation';
import { getProducts, getHeroContent } from '@/lib/db';
import { ProductGrid, HeroSection, Navbar, Footer } from '@/components/ui';

export const metadata = {
  title: 'LuxeBeauty | Premium Cosmetics Store',
  description: 'أناقة تليق بك. اكتشفي مجموعتنا الفاخرة.',
  openGraph: {
    images: ['/og-image.jpg'],
  },
};

interface PageProps {
  searchParams: { category?: string; sort?: string };
}

export default async function CosmeticsStorePage({ searchParams }: PageProps) {
  // 1. Parallel data fetching for performance (Cloudflare D1)
  const [products, heroContent] = await Promise.all([
    getProducts(searchParams.category),
    getHeroContent(),
  ]);

  if (!products?.length) return notFound();

  return (
    <div className="flex flex-col min-h-screen bg-zinc-950">
      <Navbar cartCount={3} />

      <main className="flex-1 w-full">
        {/* Hero Section with Suspense for image optimization */}
        <Suspense fallback={<HeroSkeleton />}>
          <HeroSection data={heroContent} />
        </Suspense>

        <section className="px-6 py-12 lg:px-12">
          <div className="flex items-center justify-between mb-8">
            <h2 className="text-2xl font-bold text-white border-r-4 border-orange-500 pr-3">
              وصل حديثاً
            </h2>
            <button className="text-zinc-400 hover:text-orange-500">
              عرض الكل ←
            </button>
          </div>

          {/* Dynamic Product Grid mapping over Database results */}
          <Suspense fallback={<GridSkeleton />}>
            <ProductGrid items={products} />
          </Suspense>
        </section>
      </main>

      <Footer />
    </div>
  );
}