import React from "react";
import { useNavigate } from "react-router-dom";
import Footer from "../../nav/Footer";
import GlobalAnimatedBackground from "../../../background/GlobalAnimatedBackground";

const NotFoundPage = () => {
  const navigate = useNavigate();

  return (
    <div className="relative flex flex-col min-h-screen overflow-hidden">
      <GlobalAnimatedBackground />
      <div className="flex-grow flex flex-col items-center justify-center z-10 relative">
        <div className="bg-white rounded-xl shadow-2xl px-10 py-12 max-w-md w-full text-center">
          <h1 className="text-7xl font-extrabold text-blue-600 mb-4">404</h1>
          <h2 className="text-3xl font-bold text-gray-800 mb-2">Page Not Found</h2>
          <p className="text-gray-500 mb-6">
            Sorry, the page you are looking for does not exist or has been moved.
          </p>
          <button
            onClick={() => navigate("/login")}
            className="px-6 py-3 bg-blue-600 text-white rounded-lg shadow hover:bg-blue-700 transition"
          >
            Go back to Login
          </button>
        </div>
      </div>
      <Footer />
    </div>
  );
};

export default NotFoundPage;