import Link from 'next/link';

/**
 * Custom 404 page styled with the Divisi dark theme.
 *
 * Features:
 * - Dark background (#0a0a0a)
 * - Accent color (#c8e600) for highlights
 * - Prominent "404" display
 * - Brief message and navigation link
 * - Matches Divisi brand aesthetic
 *
 * Requirements: 16.3
 */

export default function NotFound() {
  return (
    <div className="min-h-screen flex flex-col items-center justify-center bg-divisi-bg px-4">
      <div className="text-center">
        {/* Large 404 number */}
        <h1 className="text-[8rem] sm:text-[10rem] font-bold leading-none text-divisi-accent select-none">
          404
        </h1>

        {/* Message */}
        <h2 className="mt-4 text-2xl sm:text-3xl font-semibold text-divisi-text-primary">
          Page not found
        </h2>
        <p className="mt-3 text-divisi-text-secondary max-w-md mx-auto">
          The page you&apos;re looking for doesn&apos;t exist or has been moved.
        </p>

        {/* Navigation link */}
        <Link
          href="/overview"
          className="mt-8 inline-flex items-center gap-2 rounded-lg bg-divisi-accent px-6 py-3 text-sm font-medium text-divisi-bg transition-colors hover:bg-divisi-accent-hover"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <path d="m12 19-7-7 7-7" />
            <path d="M19 12H5" />
          </svg>
          Back to Dashboard
        </Link>
      </div>
    </div>
  );
}