import Link from "next/link";

/**
 * Without this, a bad path drops the user on Next's unstyled white error page,
 * which does not look like it belongs to anything.
 */
export default function NotFound() {
  return (
    <main className="grid min-h-dvh place-items-center px-6 text-center">
      <div>
        <p className="text-caption font-semibold uppercase tracking-[0.08em] text-mute">404</p>
        <h1 className="mt-2 text-display">That page isn&rsquo;t here</h1>
        <p className="mx-auto mt-2 max-w-[42ch] text-body text-dim">
          The link may be stale, or the view may have been renamed.
        </p>
        <Link
          href="/"
          className="focus-ring mt-6 inline-flex rounded-control bg-accent px-4 py-2
                     text-callout font-semibold text-[var(--accent-ink)]"
        >
          Back to search
        </Link>
      </div>
    </main>
  );
}