// app/not-found.js (not in a 'page.js' file)

import Link from "next/link";
import Image from "next/image";

export default function NotFound() {

  return (
    <div className="relative z-1 flex min-h-screen flex-col items-center justify-center overflow-hidden p-6">
      {/* Metadata - App Router style */}
      <title>404 Error Page | TailAdmin</title>
      <meta name="description" content="Page not found" />

      {/* Centered Content */}
      <div className="mx-auto w-full max-w-[242px] text-center sm:max-w-[472px]">
        <h1 className="mb-8 text-4xl font-bold text-gray-800 dark:text-white/90">
          ERROR
        </h1>

        {/* Optimized Images */}
        <Image
          src="/images/error/404.svg"
          alt="404"
          width={400}
          height={300}
          className="dark:hidden mx-auto"
          priority
        />
        <Image
          src="/images/error/404-dark.svg"
          alt="404"
          width={400}
          height={300}
          className="hidden dark:block mx-auto"
          priority
        />

        <p className="mb-6 mt-10 text-base text-gray-700 dark:text-gray-400 sm:text-lg">
          We can&#39;t seem to find the page you are looking for!
        </p>

        <Link
          href="/"
          className="inline-flex items-center justify-center rounded-lg border border-gray-300 bg-white px-5 py-3.5 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200"
        >
          Back to Home Page
        </Link>
      </div>

      {/* Footer */}
      <p className="absolute bottom-6 left-1/2 -translate-x-1/2 text-center text-sm text-gray-500 dark:text-gray-400">
        &copy; {new Date().getFullYear()} - TailAdmin
      </p>
    </div>
  );
}