/** فهرست الفبایی برندها */
import type { Metadata } from "next";
import { seo } from "@/lib/seo";
import Link from "next/link";
import { Breadcrumbs } from "@/components/ui/Breadcrumbs";
import { getBrands } from "@/server/services/catalog";

export const metadata: Metadata = seo({ title: "برندها", description: "فهرست کامل برندهای آرایشی و بهداشتی موجود در زهورا.", path: "/brands" });

export const revalidate = 300;

export default async function BrandsPage() {
  const brands = await getBrands();
  const groups = Map.groupBy(brands, (b) => b.nameEn[0]);

  return (
    <div className="container-z py-6 md:py-10">
      <Breadcrumbs items={[{ name: "برندها" }]} />
      <h1 className="mt-4 mb-8 text-2xl font-extrabold md:text-3xl">برندها</h1>
      <div className="space-y-8">
        {[...groups.entries()].map(([letter, list]) => (
          <section key={letter} className="grid grid-cols-[48px_1fr] gap-4 border-t border-line pt-6">
            <h2 className="text-2xl font-light" dir="ltr">{letter}</h2>
            <ul className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
              {list.map((b) => (
                <li key={b.id}>
                  <Link href={`/brand/${b.slug}`} className="block rounded-2xl border border-line p-4 transition-colors hover:border-ink">
                    <span className="block text-sm font-medium tracking-[0.25em]">{b.nameEn}</span>
                    <span className="mt-1 block text-xs text-muted">{b.name} · {b.country}</span>
                  </Link>
                </li>
              ))}
            </ul>
          </section>
        ))}
      </div>
    </div>
  );
}