import Link from "next/link";
import { Terminal, Home } from "lucide-react";
import { Button } from "@/components/ui/button";
import "@/app/globals.css"; // Убедись, что путь правильный

export default function NotFound() {
  return (
    <html lang="en">
      <body className="bg-[#0A0A0B] text-[#E2E8F0] font-mono">
        <div className="min-h-screen flex flex-col items-center justify-center px-4 relative overflow-hidden">
          {/* Декоративный фон */}
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[80vw] h-[80vw] max-w-[600px] max-h-[600px] bg-red-500/10 blur-[120px] rounded-full -z-10" />

          <div className="flex flex-col items-center text-center z-10">
            <Terminal className="w-20 h-20 text-red-500 mb-8 animate-pulse" />

            <h1 className="text-8xl font-black tracking-tighter mb-4">404</h1>

            <div className="bg-red-500/10 border border-red-500/30 text-red-500 px-6 py-2 rounded-lg text-sm uppercase tracking-widest mb-12">
              [ Error: Node Not Found ]
            </div>

            <p className="text-slate-400 mb-12 max-w-md leading-relaxed">
              The routing table does not contain the requested node. The
              transmission was dropped. Return to the secure network.
            </p>

            <Button
              asChild
              className="gap-2 rounded-2xl px-8 h-14 bg-white text-black hover:bg-slate-200 transition-colors"
            >
              <Link href="/">
                <Home className="size-4" />
                Return Home
              </Link>
            </Button>
          </div>
        </div>
      </body>
    </html>
  );
}
