import type { Metadata } from "next";
import Link from "next/link";
import { getCategoriesWithCounts } from "@/lib/games";

export const metadata: Metadata = {
  title: "Categories",
  description: "Browse curated browser games by category.",
  alternates: { canonical: "/categories" },
};

/** Categories index with live published-game counts. */
export default async function CategoriesPage() {
  const categories = await getCategoriesWithCounts();

  return (
    <div className="shell py-10">
      <h1 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
        Categories
      </h1>
      <p className="mt-2 max-w-2xl text-slate-400">
        Ten launch categories. The architecture supports adding more at any
        time without code changes.
      </p>
      <ul className="mt-8 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {categories.map((c) => (
          <li key={c.slug}>
            <Link
              href={`/category/${c.slug}`}
              className="card-lift block rounded-2xl border border-slate-800 bg-slate-900 p-5"
              aria-label={`Browse ${c.name} games (${c.gameCount} available)`}
            >
              <div className="flex items-start justify-between gap-3">
                <h2 className="text-lg font-semibold text-white">{c.name}</h2>
                <span className="rounded-full bg-slate-800 px-2.5 py-0.5 text-xs font-medium text-slate-300">
                  {c.gameCount} {c.gameCount === 1 ? "game" : "games"}
                </span>
              </div>
              <p className="mt-1 text-sm text-slate-400">{c.blurb}</p>
              <span className="mt-3 inline-block text-sm font-medium text-brand-300">
                Explore →
              </span>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}