import type { Metadata } from 'next'
import Link from 'next/link'

export const metadata: Metadata = { title: '404 · World Cup' }

export default function NotFound() {
  return (
    <div className="max-w-[1200px] mx-auto px-7 py-20 flex flex-col items-center text-center">
      <div
        className="pitch-grid rounded-2xl px-12 py-16 w-full max-w-lg"
        style={{
          background: 'linear-gradient(145deg,#0a1a0e 0%,#0d2416 100%)',
          border: '1px solid rgba(34,197,94,0.2)',
        }}
      >
        <div className="font-['Bebas_Neue'] text-[120px] text-[#22c55e] leading-none">
          404
        </div>
        <p className="text-[#6abf7a] text-lg mt-2 mb-8">
          This page doesn&apos;t exist.
        </p>
        <Link
          href="/"
          className="inline-block font-['Bebas_Neue'] text-xl tracking-[0.1em] text-[#040d08] bg-[#22c55e] px-8 py-3 rounded-xl hover:bg-[#4ade80] transition-colors"
        >
          Back to Home
        </Link>
      </div>
    </div>
  )
}