import Link from "next/link";
import { PageShell, PageHeading } from "./components/PageShell";
import { FOOTER_NAV } from "./lib/nav";

// Branded 404. Static export renders this to out/404.html, which Cloudflare
// Pages serves for unmatched paths.
export default function NotFound() {
  return (
    <PageShell className="flex flex-col gap-8">
      <PageHeading
        eyebrow="404"
        title="No such page"
        standfirst="That address isn't part of this site."
      />
      <nav aria-label="Site sections" className="flex flex-col gap-3">
        <span className="label-machine">Try one of these</span>
        <ul className="flex flex-wrap gap-x-6 gap-y-2 list-none">
          {[{ href: "/", label: "Home" }, ...FOOTER_NAV].map((item) => (
            <li key={item.href}>
              <Link
                href={item.href}
                className="font-mono text-sm uppercase tracking-[0.14em] text-[var(--muted-foreground)] underline decoration-[var(--border-strong)] underline-offset-4 hover:text-[var(--foreground)] transition-colors"
              >
                {item.label}
              </Link>
            </li>
          ))}
        </ul>
      </nav>
    </PageShell>
  );
}