import React from "react";
import { useNavigate } from "react-router-dom";
import { Home, ArrowLeft } from "lucide-react";
import { Helmet } from "react-helmet";
const NotFoundPage = () => {
  const navigate = useNavigate();

  return (
    <div className="bg-slate-950 min-h-screen flex items-center justify-center">
      <Helmet>
        <title>Oh No! | Skylink Hosting</title>
      </Helmet>
      <div className="container px-4 mx-auto">
        <div className="max-w-2xl mx-auto text-center">
          {/* 404 Section */}
          <h1 className="text-8xl md:text-9xl font-bold text-blue-500 mb-8">
            404
          </h1>

          <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
            Page Not Found
          </h2>

          <p className="text-xl text-gray-300 mb-12">
            Sorry, we couldn't find the page you're looking for. The page might
            have been moved, deleted, or never existed.
          </p>

          {/* Buttons */}
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <button
              onClick={() => navigate("/")}
              className="inline-flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md font-medium transition-all duration-200"
            >
              <Home className="w-5 h-5" />
              Back to Home
            </button>

            <button
              onClick={() => navigate(-1)}
              className="inline-flex items-center justify-center gap-2 bg-gray-900 text-white px-6 py-3 rounded-md font-medium transition-all duration-200"
            >
              <ArrowLeft className="w-5 h-5" />
              Go Back
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default NotFoundPage;
