import type { Metadata } from 'next';
import Link from 'next/link';
import { Backdrop } from '@/components/marketing/Backdrop';
import { SiteFooter } from '@/components/site/SiteFooter';
import { SiteHeader } from '@/components/site/SiteHeader';
import { ButtonLink } from '@/components/ui/Button';
import { ArrowRightIcon, PlayIcon } from '@/components/ui/icons';

export const metadata: Metadata = {
  title: 'Page not found',
  robots: { index: false },
};

const popular = [
  { href: '/how-it-works', label: 'How it works' },
  { href: '/for-venues', label: 'For venues' },
  { href: '/pricing', label: 'Pricing' },
  { href: '/faq', label: 'FAQ' },
];

export default function NotFound() {
  return (
    <div className="flex min-h-dvh flex-col">
      <SiteHeader />
      <main id="main" tabIndex={-1} className="relative isolate flex flex-1 items-center overflow-hidden outline-none">
        <Backdrop />
        <div className="container-page flex flex-col items-center py-20 text-center">
          <div aria-hidden="true" className="flex gap-3 sm:gap-4">
            {['4', '0', '4'].map((digit, index) => (
              <span
                key={index}
                className={
                  index === 1
                    ? 'num grid size-24 place-items-center rounded-3xl border border-dashed border-line-strong bg-night/60 font-display text-6xl font-extrabold text-subtle sm:size-32 sm:text-7xl'
                    : 'num grid size-24 place-items-center rounded-3xl border border-white/30 bg-[linear-gradient(135deg,var(--color-violet-strong),var(--color-cyan-deep))] font-display text-6xl font-extrabold text-white shadow-glow-violet sm:size-32 sm:text-7xl'
                }
              >
                {digit}
              </span>
            ))}
          </div>
          <p className="mt-8 text-xs font-bold tracking-[0.2em] text-cyan uppercase">Error 404</p>
          <h1 className="mt-3 font-display text-display font-bold">That tile never lit up.</h1>
          <p className="mt-4 max-w-lg text-lg leading-relaxed text-muted">
            The page you’re looking for isn’t on the board. It may have moved, or the link has a typo.
          </p>
          <div className="mt-8 flex w-full flex-col gap-3 sm:w-auto sm:flex-row">
            <ButtonLink href="/" size="lg">
              Back to home <ArrowRightIcon />
            </ButtonLink>
            <ButtonLink href="/demo" size="lg" variant="secondary">
              <PlayIcon /> Try the live demo
            </ButtonLink>
          </div>
          <nav aria-label="Popular pages" className="mt-10">
            <ul className="flex flex-wrap justify-center gap-x-6 gap-y-1">
              {popular.map((link) => (
                <li key={link.href}>
                  <Link href={link.href} className="inline-flex min-h-11 items-center text-sm font-semibold text-violet-soft hover:text-fg">
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </nav>
        </div>
      </main>
      <SiteFooter />
    </div>
  );
}