import Image from "next/image";
import Link from "next/link";

import { Button } from "@/components/ui/button";
import { BlurFade } from "@/components/magicui/blur-fade";

const BLUR_FADE_DELAY = 0.01;

export default function NotFoundPage() {
  return (
    <main 
      className="fixed inset-0 flex flex-col items-center justify-center bg-background"
    >
      <div className="flex flex-col items-center space-y-6 text-center max-w-lg w-full p-6">
        
        <BlurFade delay={BLUR_FADE_DELAY * 1}>
          <Image
            src="/images/404.jpg"
            alt="A lost robot in a desert, indicating a 404 page not found error."
            width={400}
            height={300}
            className="rounded-lg shadow-lg"
          />
        </BlurFade>
        
        <BlurFade delay={BLUR_FADE_DELAY * 2}>
          <h1 className="text-4xl font-bold tracking-tight">
            Lost in the Digital Sands
          </h1>
        </BlurFade>

        <BlurFade delay={BLUR_FADE_DELAY * 3}>
          <p className="text-muted-foreground">
            It seems the page you are looking for does not exist, has been moved, 
            or is currently unavailable.
          </p>
        </BlurFade>

        <BlurFade delay={BLUR_FADE_DELAY * 4}>
          <div className="flex flex-wrap items-center justify-center gap-2">
            <Link href="/">
              <Button>Go to Homepage</Button>
            </Link>
            <Link href="/publications">
              <Button variant="outline">View Publications</Button>
            </Link>
            <Link href="/#contact">
                <Button variant="outline">Contact Me</Button>
            </Link>
          </div>
        </BlurFade>
      </div>
    </main>
  );
}