/** صفحه اصلی: بنر، دسته‌ها، پرفروش‌ها، روتین پوست، جدیدها و برندها */
import type { Metadata } from "next";
import Link from "next/link";
import { seo } from "@/lib/seo";
import { site } from "@/lib/site";
import { featuredCategories } from "@/data/content";
import { BrandStrip } from "@/components/home/BrandStrip";
import { CategoryTiles } from "@/components/home/CategoryTiles";
import { HeroCarousel } from "@/components/home/HeroCarousel";
import { ProductRail } from "@/components/product/ProductRail";
import {
  getBestsellers,
  getBrands,
  getCategoryIndex,
  getHomeBanners,
  getNewArrivals,
  getSkinTypes,
} from "@/server/services/catalog";

export const metadata: Metadata = seo({ title: `${site.name} | ${site.tagline}`, description: site.description, path: "/", absoluteTitle: true });

// صفحه اصلی هر ۶۰ ثانیه از دیتابیس تازه‌سازی می‌شود
export const revalidate = 60;

export default async function HomePage() {
  const [banners, bestsellers, newArrivals, brands, skinTypes, cats] = await Promise.all([
    getHomeBanners(),
    getBestsellers(),
    getNewArrivals(),
    getBrands(),
    getSkinTypes(),
    getCategoryIndex(),
  ]);

  const tiles = featuredCategories
    .filter((f) => cats.byId.has(f.categoryId))
    .map((f) => ({ name: cats.byId.get(f.categoryId)!.name, href: cats.href(f.categoryId), icon: f.icon }));

  return (
    <>
      <h1 className="sr-only">زهورا؛ فروشگاه آنلاین آرایشی و بهداشتی</h1>
      <HeroCarousel banners={banners} />
      <CategoryTiles items={tiles} />
      <ProductRail title="پرفروش‌ها" href="/search?sort=popular" products={bestsellers} />

      {/* بخش روتین بر اساس نوع پوست */}
      <section className="container-z py-8">
        <div className="rounded-3xl bg-ink px-6 py-10 text-paper md:px-14 md:py-14">
          <p className="text-[11px] tracking-[0.25em] text-paper/60">روتین شخصی</p>
          <h2 className="mt-2 text-2xl font-extrabold md:text-3xl">پوست شما چه نوعی است؟</h2>
          <p className="mt-2 max-w-md text-sm leading-6 text-paper/70">محصولات مراقبت پوست را بر اساس نیاز پوستتان ببینید.</p>
          <div className="mt-6 flex flex-wrap gap-2">
            {skinTypes.map((s) => (
              <Link
                key={s.id}
                href={`${cats.href("c-skincare")}?skin=${s.id}`}
                className="inline-flex h-10 items-center rounded-full border border-paper/40 px-5 text-sm transition-colors hover:bg-paper hover:text-ink"
              >
                پوست {s.name}
              </Link>
            ))}
          </div>
        </div>
      </section>

      <ProductRail title="تازه‌ها" href="/search?sort=newest" products={newArrivals} />
      <BrandStrip brands={brands} />
    </>
  );
}