import Link from "next/link";
import { ButtonLink } from "@/components/ui/Button";
import { ArrowRight } from "@/components/ui/Icons";
import { Eyebrow } from "@/components/ui/SectionHeading";
import { serviceCatalog } from "@/content/catalog";
import { routes } from "@/lib/routes";

export default function NotFound() {
  return (
    <section aria-labelledby="not-found-title" className="container-page grid gap-12 pb-28 pt-16 lg:grid-cols-12 lg:gap-6 lg:pb-36 lg:pt-24">
      <div className="lg:col-span-6">
        <Eyebrow>404</Eyebrow>
        <h1 id="not-found-title" className="mt-6 text-display-lg">
          This page isn&rsquo;t here.
        </h1>
        <p className="mt-6 max-w-md text-lead text-ink-soft">
          The link may be old, or the page may have moved. These are good places to pick up the trail.
        </p>
        <div className="mt-10 flex flex-col gap-3 sm:flex-row">
          <ButtonLink href={routes.home} size="lg">
            Back to home
          </ButtonLink>
          <ButtonLink href={routes.resources} variant="secondary" size="lg">
            Browse resources
          </ButtonLink>
        </div>
      </div>
      <nav aria-label="Services" className="lg:col-span-5 lg:col-start-8">
        <p className="text-label uppercase text-muted">Services</p>
        <ul className="mt-4 border-t border-ink">
          {serviceCatalog.map((service) => (
            <li key={service.slug}>
              <Link href={routes.service(service.slug)} className="group flex items-center justify-between border-b border-line py-3.5">
                <span>{service.name}</span>
                <ArrowRight size={15} className="btn-arrow" />
              </Link>
            </li>
          ))}
        </ul>
      </nav>
    </section>
  );
}