import Link from 'next/link'
import { getTranslations } from 'next-intl/server'
import { Wrench } from 'lucide-react'
import { Button } from '@/components/ui/button'

export default async function NotFound() {
  const t = await getTranslations('common')

  return (
    <div className="grid-bg flex min-h-screen items-center justify-center p-4">
      <div className="absolute inset-0 overflow-hidden">
        <div className="absolute -top-40 -right-40 h-96 w-96 rounded-full bg-primary/10 blur-3xl" />
        <div className="absolute -bottom-40 -left-40 h-96 w-96 rounded-full bg-primary/5 blur-3xl" />
      </div>

      <div className="glass relative z-10 w-full max-w-md rounded-2xl p-8 text-center shadow-2xl">
        <div className="mb-6 inline-flex h-20 w-20 items-center justify-center rounded-full bg-primary/10">
          <Wrench className="h-10 w-10 text-primary" strokeWidth={1.5} />
        </div>

        <p className="mb-2 font-mono text-6xl font-bold tracking-tighter text-primary">404</p>
        <h1 className="text-xl font-semibold tracking-tight">{t('notFoundPage.title')}</h1>
        <p className="mt-2 text-sm text-muted-foreground">{t('notFoundPage.description')}</p>

        <div className="mt-8 flex flex-col gap-3 sm:flex-row sm:justify-center">
          <Button asChild>
            <Link href="/">{t('notFoundPage.backToDashboard')}</Link>
          </Button>
        </div>
      </div>
    </div>
  )
}