import type { Metadata } from "next";
import Link from "next/link";
import { listCollections } from "@/lib/public/queries";
import { Breadcrumbs } from "@/components/breadcrumbs";
import { fmtDate } from "@/lib/utils";
export const revalidate = 600;
export const metadata: Metadata = { title: "Collections", description: "Curated stacks and guides: Apple Silicon AI, high-frequency finance research, academic writing, self-hosted agent infrastructure, real-estate valuation and more.", alternates: { canonical: "/collections" } };
export default async function Collections() {
  const cols = await listCollections();
  return (
    <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6">
      <Breadcrumbs items={[{ label: "Collections" }]} />
      <h1 className="display h1 mt-3">Collections</h1>
      <p className="mt-2 max-w-2xl text-fg-2">Editorial guides that assemble tools into working stacks. Each collection explains why a tool is included and how the pieces fit together.</p>
      <div className="mt-8 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        {cols.map((c) => (
          <Link key={c.slug} href={`/collections/${c.slug}`} className="card flex flex-col p-5">
            <h2 className="display text-2xl">{c.title}</h2>
            <p className="mt-2 line-clamp-3 text-sm text-fg-2">{c.description}</p>
            <p className="mt-auto pt-4 text-xs text-fg-3">{c.count} tools · updated {fmtDate(c.updatedAt)}</p>
          </Link>
        ))}
        {cols.length === 0 && <p className="card p-8 text-fg-2">Collections are being prepared.</p>}
      </div>
    </div>
  );
}