"use client";

import { Glitchy404 } from "@/components/ui/glitchy-404-1";
import { Button } from "@/components/ui/button";
import { Head, Link } from "@inertiajs/react";
import { Home } from "lucide-react";

export default function NotFound() {
    return (
        <>
            <Head title="404 - Page Not Found" />
            <div className="min-h-screen bg-black flex flex-col items-center justify-center overflow-hidden">
                <Glitchy404 width={800} height={232} color="#fff" />

                <p className="text-white/70 text-lg mt-4 mb-8 text-center animate-pulse">
                    Oops! The page you're looking for doesn't exist.
                </p>

                <div className="flex gap-4">
                    <Button
                        asChild
                        variant="outline"
                        size="lg"
                        className="bg-transparent border-white text-white hover:bg-white hover:text-black transition-all duration-300"
                    >
                        <Link href="/">
                            <Home className="mr-2 h-5 w-5" />
                            Go Back Home
                        </Link>
                    </Button>
                </div>
            </div>
        </>
    );
}

