import Link from 'next/link';
import { ArrowIcon } from '@/components/icons/common';
import { routes } from '@/lib/routes';
import '@/styles/pages/not-found.css';

/** Shared 404 body — works inside the public layout or a self-contained shell. */
export function NotFoundContent() {
  return (
    <section className="page-not-found webContent" aria-labelledby="not-found-title">
      <div className="page-not-found__inner">
        <p className="page-not-found__code" aria-hidden="true">
          404
        </p>
        <h1 id="not-found-title" className="page-not-found__title">
          Page <span>not found</span>
        </h1>
        <p className="page-not-found__copy">
          The page you are looking for doesn&rsquo;t exist or has moved. Head home, or browse upcoming
          dinners and insights.
        </p>
        <div className="page-not-found__actions">
          <Link href={routes.home} className="btn button-style btn-golden w-fit-content">
            Back to home <ArrowIcon />
          </Link>
          <Link href={routes.events} className="page-not-found__ghost">
            Events
          </Link>
          <Link href={routes.insights} className="page-not-found__ghost">
            Insights
          </Link>
        </div>
      </div>
    </section>
  );
}