import Link from "next/link";
import type { Metadata } from "next";
import { Home, Search, Car } from "lucide-react";
import BackButton from "@/components/ui/BackButton";

export const metadata: Metadata = {
  title: "Page Not Found — DriveHub",
  description: "The page you're looking for doesn't exist.",
};

const QUICK_LINKS = [
  { label: "Browse All Cars",  href: "/cars",    icon: Car },
  { label: "Compare Cars",     href: "/compare", icon: Search },
  { label: "Go Home",          href: "/",        icon: Home },
];

export default function NotFound() {
  return (
    <div className="min-h-[80vh] flex items-center justify-center px-4 py-16 bg-[#f6f8fc]">
      <div className="max-w-lg w-full text-center">
        {/* Large 404 */}
        <div className="mb-6 select-none">
          <span className="text-[120px] font-black leading-none bg-gradient-to-br from-blue-600 via-cyan-500 to-sky-400 bg-clip-text text-transparent">
            404
          </span>
        </div>

        <h1 className="text-2xl md:text-3xl font-black text-gray-900 mb-3">
          Page Not Found
        </h1>
        <p className="text-gray-500 text-base leading-relaxed mb-8 max-w-sm mx-auto">
          Sorry, we could not find the page you were looking for. It may have
          been moved, deleted, or the URL might be incorrect.
        </p>

        {/* Quick links */}
        <div className="flex flex-col sm:flex-row gap-3 justify-center mb-8">
          {QUICK_LINKS.map(({ label, href, icon: Icon }) => (
            <Link
              key={href}
              href={href}
              className="inline-flex items-center justify-center gap-2 rounded-2xl bg-white border border-gray-200 px-5 py-3 text-sm font-semibold text-gray-700 hover:border-blue-200 hover:text-blue-600 hover:shadow-lg hover:shadow-blue-50 transition-all duration-300"
            >
              <Icon className="w-4 h-4" />
              {label}
            </Link>
          ))}
        </div>

        {/* Back link */}
        <BackButton />
      </div>
    </div>
  );
}