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

export const metadata: Metadata = {
  title: 'Page Not Found',
  description: 'The page you were looking for could not be found on Plymouth Metro.',
  robots: { index: false, follow: true },
}

export default function NotFound() {
  return (
    <section className="min-h-[80vh] flex items-center bg-metro-light py-16">
      <div className="max-w-2xl mx-auto px-4 sm:px-6 text-center">
        {/* Metro-themed 404 graphic */}
        <div className="relative inline-flex items-center justify-center mb-8" aria-hidden="true">
          <div className="w-32 h-32 rounded-full bg-metro-navy flex items-center justify-center shadow-xl">
            <span className="text-5xl font-black text-white leading-none">404</span>
          </div>
          {/* Decorative line stubs */}
          <div className="absolute left-0 top-1/2 -translate-y-1/2 w-8 h-1.5 rounded-full bg-red-500 -translate-x-full" />
          <div className="absolute right-0 top-1/2 -translate-y-1/2 w-8 h-1.5 rounded-full bg-metro-sky translate-x-full" />
          <div className="absolute bottom-0 left-1/2 -translate-x-1/2 h-8 w-1.5 rounded-full bg-metro-teal translate-y-full" />
        </div>

        <h1 className="text-3xl sm:text-4xl font-black text-metro-navy mb-3">
          This stop doesn't exist
        </h1>
        <p className="text-lg text-metro-muted leading-relaxed mb-8">
          The page you're looking for couldn't be found. It may have been moved, renamed,
          or never existed on this network. Let's get you back on track.
        </p>

        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 mb-10">
          {[
            { label: 'Home',       href: '/',        desc: 'Back to the homepage' },
            { label: 'Route Map',  href: '/map',     desc: 'Explore the proposed network' },
            { label: 'Sign',       href: '/support', desc: 'Sign the petition' },
          ].map(item => (
            <Link
              key={item.href}
              href={item.href}
              className="card hover:-translate-y-1 transition-transform duration-200 text-center group"
            >
              <p className="font-semibold text-metro-navy group-hover:text-metro-sky transition-colors">
                {item.label}
              </p>
              <p className="text-xs text-metro-muted mt-1">{item.desc}</p>
            </Link>
          ))}
        </div>

        <Link href="/" className="btn-primary px-8 py-3" style={{color:"#ffffff"}}>
          <svg viewBox="0 0 20 20" fill="currentColor" className="w-4 h-4" aria-hidden="true">
            <path fillRule="evenodd" d="M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 00-1-1H9a1 1 0 00-1 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-6H3a1 1 0 01-.707-1.707l7-7z" clipRule="evenodd" />
          </svg>
          Return to Home
        </Link>
      </div>
    </section>
  )
}