import Link from 'next/link'
import { Button } from '@/components/ui/button'
import { Home } from 'lucide-react'
import { type, typeSpacing } from '@/lib/typography'
import { cn } from '@/lib/utils'

export const metadata = {
  title: '۴۰۴',
  description: 'صفحه‌ای که دنبال آن هستید یافت نشد.',
}

export default function NotFound() {
  return (
    <section className="min-h-[70vh] flex items-center justify-center px-4 py-20">
      <div className="mx-auto max-w-lg w-full text-center">
        <div className="relative inline-block mb-6">
          <span
            className={cn(type["display-mono"], "text-transparent bg-clip-text bg-gradient-to-b from-primary/90 to-primary/50 select-none")}
            aria-hidden
          >
            ۴۰۴
          </span>
        </div>

        <h1 className={cn(type.h2, "mb-3 text-foreground")}>
          صفحه پیدا نشد
        </h1>
        <p className={cn(type.body, "mb-10 mx-auto max-w-sm text-muted-foreground")}>
          به نظر می‌رسد این آدرس وجود ندارد یا منتقل شده است.
        </p>

        <Button asChild size="lg" className="gap-2">
          <Link href="/">
            <Home className="size-5" />
            صفحه اصلی
          </Link>
        </Button>
      </div>
    </section>
  )
}