import Image from "next/image";
import Button from "../components/ui/Button";

export default function NotFound() {
  return (
    <main className="relative flex min-h-screen items-center justify-center overflow-hidden px-4 py-10 sm:px-6 sm:py-12 lg:px-8 lg:py-16">
      {/* Background Blur */}
      <div className="absolute inset-0 -z-10 overflow-hidden">
        <div className="absolute left-1/2 top-0 h-64 w-64 -translate-x-1/2 rounded-full bg-linear-to-r from-violet-500/20 to-fuchsia-500/20 blur-3xl sm:h-80 sm:w-80 lg:h-105 lg:w-105" />
      </div>

      <div className="mx-auto flex w-full max-w-4xl flex-col items-center text-center">
        {/* Illustration */}
        <div className="relative mb-6 sm:mb-8 lg:mb-10">
          <Image
            src="/images/not-found.svg"
            alt="404 Not Found"
            width={320}
            height={320}
            priority
            className="h-auto w-44 sm:w-56 md:w-64 lg:w-72 xl:w-80"
          />
        </div>

        {/* Badge */}
        <span className="mb-4 rounded-full border border-purple-500/20 bg-purple-500/10 px-3 py-1 text-xs font-medium text-purple-600 dark:text-purple-400 sm:px-4 sm:text-sm">
          Error 404
        </span>

        {/* Heading */}
        <h1 className="font-heading text-4xl font-medium leading-tight lg:text-4xl 2xl:text-5xl">
          Oops! Page Not Found
        </h1>

        {/* Description */}
        <p className="text-text mx-auto mt-4 max-w-xs text-sm leading-6 sm:mt-5 sm:max-w-lg sm:text-base sm:leading-7 md:max-w-2xl lg:text-lg lg:leading-8">
          The page you are looking for might have been removed, renamed, or is
          temporarily unavailable.
        </p>

        {/* Buttons */}
        <div className="mt-8 flex w-full max-w-md flex-col gap-3 sm:mt-10 sm:flex-row sm:justify-center">
          <Button
            href="/"
            className="w-full sm:w-auto"
            buttonClassName="w-full sm:min-w-[190px]"
          >
            Go to Homepage
          </Button>

          <Button
            href="/contact"
            variant="white"
            className="w-full sm:w-auto"
            buttonClassName="w-full sm:min-w-[190px]"
          >
            Contact Support
          </Button>
        </div>
      </div>
    </main>
  );
}