import { useTranslations } from 'next-intl';
import { Link } from '#i18n/navigation';
import { Button } from '#shared/ui/Button';

export default function NotFound() {
  const t = useTranslations('Pages.NotFoundPage');

  return (
    <main className="grid min-h-dvh place-items-center p-8">
      <div className="max-w-176">
        <p className="mb-5 font-mono text-xs font-bold tracking-[0.12em] text-[#517000] uppercase">
          404
        </p>
        <h1 className="max-w-[15ch] text-[clamp(3rem,8vw,6rem)] leading-[0.98] font-semibold tracking-[-0.065em]">
          {t('title')}
        </h1>
        <p className="mt-6 mb-8 text-lg text-[#5d675f]">{t('description')}</p>
        <Button asChild>
          <Link href="/">{t('cta')}</Link>
        </Button>
      </div>
    </main>
  );
}