import type { Metadata } from "next";
import MobileMenu from "@/components/home/MobileMenu";
import SearchPopup from "@/components/home/SearchPopup";
import Header from "@/components/home/Header";
import FooterSection from "@/components/home/FooterSection";
import Link from "next/link";

export const metadata: Metadata = {
  title: "404 - Page Not Found",
  description: "The page you are looking for does not exist or has been moved.",
};

export default function NotFound() {
  return (
    <div className="wrapper">
      <MobileMenu />
      <SearchPopup />
      <section className="main-sec2">
        <Header />
        <div className="page-banner">
          <div className="carousel-container">
            <div className="page-content text-center">
              <h1
                className="title"
                data-aos="fade-up"
                data-aos-duration={900}
                data-aos-delay={300}
              >
                404
              </h1>
              <p
                data-aos="fade-up"
                data-aos-duration={900}
                data-aos-delay={400}
                style={{ fontSize: "1.25rem", marginBottom: "2rem" }}
              >
                Oops! The page you are looking for does not exist or has been
                moved.
              </p>
              <Link
                href="/"
                className="btn-style1"
                data-aos="fade-up"
                data-aos-duration={900}
                data-aos-delay={500}
              >
                Back to Home
              </Link>
            </div>
          </div>
        </div>
      </section>
      <FooterSection />
    </div>
  );
}