import Link from "next/link"

export const metadata = { title: "Not Found" }

export default function NotFound() {
  return (
    <main className="flex min-h-screen items-center justify-center bg-blacksite-bg px-6 text-blacksite-text">
      <div className="w-full max-w-2xl border border-blacksite-line bg-blacksite-surface/60 p-8 shadow-2xl shadow-black/40 sm:p-12">
        <p className="section-label mb-5">SIGNAL LOST /.404</p>
        <h1 className="mb-5 font-display text-5xl font-semibold tracking-tight text-blacksite-text sm:text-7xl">
          Route dissolved into static.
        </h1>
        <p className="mb-8 max-w-lg text-sm leading-6 text-blacksite-muted sm:text-base">
          This coordinate is dark; return to base or scan the field notes.
        </p>
        <div className="flex flex-wrap gap-3">
          <Link
            href="/"
            className="border border-signal-orange px-4 py-3 font-mono text-xs uppercase tracking-[0.16em] text-signal-orange transition-colors hover:bg-signal-orange hover:text-blacksite-bg focus-visible:bg-signal-orange focus-visible:text-blacksite-bg"
          >
            Return home
          </Link>
          <Link
            href="/blog/"
            className="border border-blacksite-line px-4 py-3 font-mono text-xs uppercase tracking-[0.16em] text-blacksite-text transition-colors hover:border-signal-cyan hover:text-signal-cyan focus-visible:border-signal-cyan focus-visible:text-signal-cyan"
          >
            Field notes
          </Link>
        </div>
      </div>
    </main>
  )
}