import Link from 'next/link'
import { Button } from '@/components/ui/button'
import { SearchX, ArrowLeft, Home } from 'lucide-react'

export default function NotFound() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-slate-50 dark:bg-slate-950 p-4 relative overflow-hidden">
      {/* Background ambient effects */}
      <div className="absolute inset-0 z-0 pointer-events-none">
        <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]"></div>
        <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 h-[400px] w-[600px] rounded-full bg-[#1B2CC1] opacity-10 dark:opacity-20 blur-[120px]"></div>
      </div>

      <div className="relative z-10 w-full max-w-lg">
        <div className="bg-white dark:bg-slate-900 rounded-[2rem] shadow-2xl shadow-[#1B2CC1]/10 border border-slate-100 dark:border-slate-800 p-8 sm:p-12 text-center animate-in fade-in zoom-in duration-500">
          
          <div className="w-24 h-24 sm:w-32 sm:h-32 mx-auto bg-blue-50 dark:bg-blue-950/50 rounded-[2rem] border-4 border-white dark:border-slate-800 flex items-center justify-center mb-6 shadow-inner rotate-3">
            <SearchX className="w-12 h-12 sm:w-16 sm:h-16 text-[#1B2CC1]" />
          </div>

          <h1 className="text-6xl font-black text-slate-900 dark:text-white mb-2 tracking-tighter">
            4<span className="text-[#1B2CC1]">0</span>4
          </h1>
          
          <h2 className="text-xl sm:text-2xl font-bold text-slate-800 dark:text-slate-200 mb-4">
            Halaman Tidak Ditemukan
          </h2>
          
          <p className="text-sm sm:text-base text-slate-500 dark:text-slate-400 mb-8 max-w-sm mx-auto leading-relaxed">
            Waduh, sepertinya halaman yang Anda cari sedang jalan-jalan atau memang tidak pernah ada. Mari kita kembali ke jalan yang benar!
          </p>

          <div className="flex flex-col sm:flex-row gap-3 justify-center">
            <Link href="/" className="w-full sm:w-auto">
              <Button className="w-full h-12 rounded-xl bg-[#1B2CC1] hover:bg-[#15229E] text-white font-bold px-6 shadow-md shadow-[#1B2CC1]/20 gap-2 transition-all">
                <Home className="w-4 h-4" />
                Kembali ke Beranda
              </Button>
            </Link>
          </div>

        </div>
        
        {/* Footer info */}
        <p className="text-center text-xs text-slate-400 font-medium mt-8">
          TitipIn &copy; {new Date().getFullYear()} - Sistem Titip Pesanan
        </p>
      </div>
    </div>
  )
}