import Link from "next/link";
import type { Metadata } from "next";
import { PageShell, PageHeading } from "../components/PageShell";
import { groupedDocs } from "../lib/docs";

export const metadata: Metadata = {
  title: "Docs",
  description:
    "How to install, run, and publish an Archilyzer archive: setup, operation, deployment, and the machine-readable corpus.",
};

// The index renders from the same listDocs() that feeds generateStaticParams,
// so it structurally cannot link to a page that doesn't exist.
export default function DocsIndexPage() {
  const groups = groupedDocs();
  return (
    <PageShell className="flex flex-col gap-12">
      <PageHeading
        eyebrow="Documentation"
        title="Docs"
        standfirst="From a channel URL to a searchable archive you host."
      />

      {groups.map((group) => (
        <section key={group.label} className="flex flex-col gap-4">
          <h2 className="label-machine">{group.label}</h2>
          <ul className="flex flex-col list-none border-t border-[var(--border)]">
            {group.docs.map((doc) => (
              <li key={doc.slug} className="border-b border-[var(--border)]">
                <Link
                  href={`/docs/${doc.slug}/`}
                  className="group flex flex-col gap-1 py-4 sm:flex-row sm:items-baseline sm:gap-6"
                >
                  <span className="font-display text-base font-semibold text-[var(--foreground)] sm:w-64 sm:shrink-0">
                    {doc.title}
                  </span>
                  <span className="text-sm leading-relaxed text-[var(--muted-foreground)] group-hover:text-[var(--foreground)] transition-colors">
                    {doc.blurb}
                  </span>
                </Link>
              </li>
            ))}
          </ul>
        </section>
      ))}

      {groups.length === 0 && (
        <p className="doc-measure text-[var(--muted-foreground)]">
          No documentation shipped with this build.
        </p>
      )}
    </PageShell>
  );
}