import Link from "next/link";

export default function NotFound() {
  return (
    <>
      <section
        className="breadcrumb-wrapper fix bg-cover"
        style={{
          backgroundImage: "url(/assets/img/inner-page/breadcrumb.jpg)",
        }}
      >
        <div className="shape">
          <img src="/assets/img/inner-page/shape.png" alt="img" />
        </div>
        <div className="container">
          <div className="page-heading">
            <h1 className="breadcrumb-title">Page Not Found</h1>
            <ul className="breadcrumb-list">
              <li>
                <Link href="/">Home</Link>
              </li>
              <li>
                <i className="fa-solid fa-chevron-right"></i>
              </li>
              <li>
                <a href="#">Not Found</a>
              </li>
            </ul>
          </div>
        </div>
      </section>

      <section className="section-padding">
        <div className="container">
          <div className="row justify-content-center">
            <div className="col-lg-8 text-center">
              <div className="error-content">
                <h2 className="mb-3">404 - Page Not Found</h2>
                <p className="mb-4">
                  The page you're looking for could not be found. It may have been moved or deleted. Please check the URL or return to the home page.
                </p>
                <div className="button-group">
                  <Link href="/" className="theme-btn">
                    Back to Home
                    <i className="fa-solid fa-arrow-right"></i>
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}