'use client';

import { useRouter } from 'next/navigation';
import { Button } from '@/components/ui/button';
import Link from 'next/link';
import Image from 'next/image';
import { ArrowLeft, Home } from 'lucide-react';

export default function NotFound() {
  const router = useRouter();

  return (
    <div className="relative flex min-h-screen w-full flex-col items-center justify-center bg-background px-4 py-8">
      {/* Background soft glow */}
      <div className="absolute top-1/2 left-1/2 -z-10 h-[400px] w-[400px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary/5 blur-[100px]" />

      <div className="z-10 flex w-full max-w-xl flex-col items-center text-center animate-in fade-in slide-in-from-bottom-6 duration-1000">
        {/* 3D Illustration Container */}
        <div className="relative mb-6 h-48 w-48 sm:h-64 sm:w-64 overflow-hidden rounded-2xl shadow-xl transition-transform hover:scale-105 duration-500">
          <Image
            src="/images/404.png"
            alt="404 Page Not Found Illustration"
            fill
            className="object-cover"
            priority
          />
        </div>
        
        <h1 className="text-2xl font-black tracking-tight text-foreground sm:text-4xl">
          Oops! Page Not Found
        </h1>
        
        <p className="mt-4 text-sm leading-relaxed text-muted-foreground max-w-md sm:text-base">
          It seems the page you are looking for has taken a coffee break or disappeared into thin air. Let&apos;s get you back on track!
        </p>

        <div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row w-full">
          <Button 
            onClick={() => router.back()} 
            size="default" 
            variant="outline"
            className="h-11 px-6 text-sm font-bold border-2 transition-all hover:bg-muted active:scale-95 w-full sm:w-auto rounded-xl"
          >
            <ArrowLeft className="mr-2 h-4 w-4" />
            Go back
          </Button>
          <Button
            asChild
            size="default"
            className="h-11 px-8 text-sm font-bold shadow-lg shadow-primary/20 transition-all hover:scale-105 active:scale-95 w-full sm:w-auto rounded-xl"
          >
            <Link href="/">
              <Home className="mr-2 h-4 w-4" />
              Back to Home
            </Link>
          </Button>
        </div>
      </div>
    </div>
  );
}