import Link from "next/link";
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Page Not Found — Route Commerce",
  description: "The page you are looking for could not be found. Explore the rest of Route Commerce.",
  robots: {
    index: false,
    follow: false,
  },
};

export default function NotFound() {
  return (
    <main className="atelier-canvas relative min-h-screen flex items-center justify-center px-6 py-16 overflow-hidden">
      <div className="atelier-grain" aria-hidden="true" />

      {/* Ambient orbs */}
      <div className="pointer-events-none absolute inset-0 overflow-hidden" aria-hidden="true">
        <div
          className="absolute top-1/3 left-1/3 w-96 h-96 rounded-full opacity-30"
          style={{ background: "radial-gradient(circle, rgba(34, 78, 47, 0.16) 0%, transparent 70%)", filter: "blur(60px)" }}
        />
        <div
          className="absolute bottom-1/3 right-1/3 w-96 h-96 rounded-full opacity-25"
          style={{ background: "radial-gradient(circle, rgba(202, 138, 4, 0.16) 0%, transparent 70%)", filter: "blur(48px)" }}
        />
      </div>

      <div className="relative z-10 max-w-lg w-full text-center atelier-enter">
        <div className="atelier-section-num justify-center mb-4">No. 404</div>

        {/* Large editorial numeral */}
        <div
          className="atelier-numeral text-[10rem] sm:text-[14rem] leading-none select-none"
          aria-hidden="true"
        >
          404
        </div>

        <h1 className="atelier-title text-3xl sm:text-4xl mt-2">
          Off the <span className="atelier-italic text-[#786B53]">beaten path</span>
        </h1>
        <p className="mt-4 text-stone-600 text-sm leading-relaxed max-w-sm mx-auto">
          We searched the field, but couldn&apos;t find that page. The route may have moved or never existed.
        </p>

        <div className="atelier-rule my-8" />

        {/* Quick links */}
        <div className="grid grid-cols-2 sm:grid-cols-4 gap-2.5">
          {[
            { href: "/", label: "Home", desc: "Overview" },
            { href: "/pricing", label: "Pricing", desc: "Plans" },
            { href: "/contact", label: "Contact", desc: "Get in touch" },
            { href: "/tuxedo", label: "Tuxedo", desc: "Sweet corn" },
          ].map((link) => (
            <Link
              key={link.href}
              href={link.href}
              className="group flex flex-col items-center gap-1 px-3 py-3.5 rounded-xl border border-stone-200/80 bg-white/70 backdrop-blur-sm hover:border-[#14532D] hover:bg-white transition-all"
            >
              <span className="text-sm font-semibold text-stone-900 group-hover:text-[#14532D] transition-colors">
                {link.label}
              </span>
              <span className="text-[10px] tracking-[0.12em] uppercase text-stone-500" style={{ fontFamily: "var(--font-fragment-mono)" }}>
                {link.desc}
              </span>
            </Link>
          ))}
        </div>

        <p className="atelier-fineprint text-center mt-10">
          Lost? Reach us at{" "}
          <a href="mailto:support@routecommerce.com" className="text-[#14532D] hover:underline normal-case tracking-normal">
            support@routecommerce.com
          </a>
        </p>
      </div>
    </main>
  );
}
