import Link from 'next/link'
import Image from 'next/image'
import { Button } from '@/components/ui/button'

export default function NotFound() {
  return (
    <div className="flex min-h-screen flex-col bg-background">
      {/* Header */}
      <header className="border-b border-border bg-white">
        <div className="container-app flex h-16 items-center">
          <Link href="/">
            <Image
              src="/images/MOPC-blue-long.png"
              alt="MOPC - Monaco Ocean Protection Challenge"
              width={140}
              height={45}
              className="h-10 w-auto"
              priority
            />
          </Link>
        </div>
      </header>

      {/* Content */}
      <main className="flex flex-1 flex-col items-center justify-center px-4 py-16 text-center">
        <p className="text-[8rem] font-bold leading-none tracking-tight text-brand-blue/10 sm:text-[12rem]">
          404
        </p>
        <h1 className="-mt-4 text-display font-bold text-brand-blue sm:-mt-8">
          Page Not Found
        </h1>
        <p className="mt-4 max-w-md text-body text-muted-foreground">
          The page you&apos;re looking for doesn&apos;t exist or has been moved.
        </p>
        <div className="mt-8">
          <Button asChild size="lg">
            <Link href="/">Return to Dashboard</Link>
          </Button>
        </div>
      </main>

      {/* Footer */}
      <footer className="border-t border-border bg-brand-blue py-6 text-white">
        <div className="container-app text-center">
          <p className="text-small">
            &copy; {new Date().getFullYear()} Monaco Ocean Protection Challenge.
            All rights reserved.
          </p>
        </div>
      </footer>
    </div>
  )
}