import { CategoryGrid } from "@/components/home/CategoryGrid";
import { CtaBanner } from "@/components/home/CtaBanner";
import { FeaturedProducts } from "@/components/home/FeaturedProducts";
import { Hero } from "@/components/home/Hero";
import { HowSearchWorks } from "@/components/home/HowSearchWorks";
import { getCatalogFacets, getProductViews } from "@/lib/products";

/**
 * Homepage. Everything here is read from `data/products.json` on the server and
 * rendered as Server Components; only the header search and cart need client
 * JavaScript.
 */
export default async function HomePage() {
  const [facets, products] = await Promise.all([getCatalogFacets(), getProductViews()]);

  const featured = [...products]
    .sort((left, right) => right.rating - left.rating || left.id - right.id)
    .slice(0, 8);

  return (
    <>
      <Hero productCount={facets.total} />

      <div className="mx-auto max-w-7xl space-y-16 px-4 py-16 sm:px-6 lg:px-8">
        <CategoryGrid categories={facets.categories} />
        <FeaturedProducts products={featured} />
        <HowSearchWorks />
        <CtaBanner />
      </div>
    </>
  );
}