import type { Metadata } from "next";
import Link from "next/link";
import { categoryTree } from "@/lib/public/queries";
import { Breadcrumbs } from "@/components/breadcrumbs";
export const revalidate = 600;
export const metadata: Metadata = { title: "Categories", description: "Browse every tool category: AI, software development, infrastructure, Apple platforms, data, academic research, finance and productivity.", alternates: { canonical: "/categories" } };
export default async function Categories() {
  const tree = await categoryTree();
  return (
    <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6">
      <Breadcrumbs items={[{ label: "Categories" }]} />
      <h1 className="display h1 mt-3">Categories</h1>
      <p className="mt-2 max-w-2xl text-fg-2">A two-level taxonomy. Tools may appear in several categories; the primary one defines the breadcrumb on its page. Counts include only published entries.</p>
      <div className="mt-8 space-y-10">
        {tree.map((c) => (
          <section key={c.slug} aria-labelledby={`c-${c.slug}`}>
            <div className="mb-3 flex items-baseline justify-between gap-3"><h2 id={`c-${c.slug}`} className="display h2"><Link href={`/categories/${c.slug}`} className="hover:text-accent">{c.name}</Link></h2><span className="text-sm text-fg-3">{c.count} tools</span></div>
            <p className="mb-4 max-w-3xl text-sm text-fg-2">{c.description}</p>
            <ul className="grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
              {c.children.map((ch) => (
                <li key={ch.slug}><Link href={`/categories/${ch.slug}`} className="card flex items-start justify-between gap-3 p-3"><span><span className="block text-sm font-medium">{ch.name}</span><span className="mt-0.5 line-clamp-2 block text-xs text-fg-3">{ch.description}</span></span><span className="chip shrink-0">{ch.count}</span></Link></li>
              ))}
            </ul>
          </section>
        ))}
      </div>
    </div>
  );
}