import Link from "next/link";
import { Footer } from "@/components/footer";
import { Button } from "@/components/ui/button";
import { Page } from "@/components/ui/card";
import { routes } from "@/lib/routes";

export default function NotFound() {
  return (
    <>
      <main id="main">
      <Page className="flex min-h-[60dvh] flex-col items-start justify-center py-16">
        <div className="label-caps mb-2">404</div>
        <h1 className="text-[26px] font-semibold tracking-[-0.02em] sm:text-[32px]">This entry is not in the index.</h1>
        <p className="mt-2 max-w-md text-[14px] text-ink-2">The page may have moved, or the entity may have been merged with another record. Try the search, or browse from the map.</p>
        <div className="mt-6 flex flex-wrap gap-2">
          <Button href={routes.search()} variant="primary">
            Search the index
          </Button>
          <Button href={routes.map()}>Open the map</Button>
          <Link href={routes.home()} className="inline-flex h-10 items-center px-2 text-[13px] text-ink-3 hover:text-ink sm:h-9">
            Home
          </Link>
        </div>
      </Page>
      </main>
      <Footer />
    </>
  );
}