import Link from 'next/link';
import { t } from '@/i18n';
import { routes } from '@/lib/site';

export default function NotFound() {
  return (
    <div className="mx-auto max-w-prose py-20 text-center">
      <div className="eyebrow">404</div>
      <h1 className="display mt-2 text-3xl text-ink">{t('common.notFound')}</h1>
      <p className="mt-3 text-ink-2">{t('common.notFoundHint')}</p>
      <div className="mt-6 flex flex-wrap justify-center gap-3 text-sm">
        <Link href={routes.countries()} className="inline-flex h-10 items-center rounded-sm bg-ink px-4 font-medium text-paper hover:bg-accent hover:text-accent-ink">
          {t('common.browseCountries')}
        </Link>
        <Link href={routes.home()} className="inline-flex h-10 items-center rounded-sm border border-rule px-4 text-ink hover:bg-surface-2">
          {t('common.goHome')}
        </Link>
      </div>
    </div>
  );
}