import { Link } from "@tanstack/react-router";

export function NotFound() {
  return (
    <section className="bg-ink px-6 pt-36 pb-24 text-fg">
      <div className="mx-auto max-w-xl">
        <p className="label-kicker">404</p>
        <h1 className="mt-4 font-display text-section font-medium">
          This page is not on the map.
        </h1>
        <p className="mt-4 text-muted">
          The address you requested does not exist on this site.
        </p>
        <Link
          to="/"
          className="mt-10 inline-flex min-h-12 items-center bg-fg px-6 text-[0.78rem] font-semibold tracking-[0.16em] text-ink uppercase no-underline"
        >
          Return home
        </Link>
      </div>
    </section>
  );
}
