import Link from 'next/link';
import { Logo } from '@/components/brand/Logo';
import { QrIcon } from '@/components/ui/icons';
import { CodeForm } from '../_lib/CodeForm';
import { JoinBackdrop } from '../_lib/JoinBackdrop';

export default function VenueNotFound() {
  return (
    <main id="main" tabIndex={-1} className="relative isolate flex min-h-dvh flex-col outline-none">
      <JoinBackdrop />
      <div className="mx-auto flex h-14 w-full max-w-md items-center px-4">
        <Link href="/" className="-m-1 rounded-lg p-1" aria-label="PintRush home">
          <Logo size="sm" />
        </Link>
      </div>
      <div className="mx-auto flex w-full max-w-md flex-1 flex-col px-4 pt-8 pb-[max(1.5rem,env(safe-area-inset-bottom))]">
        <span className="mx-auto grid size-16 place-items-center rounded-3xl border border-amber/50 bg-amber/10 text-amber shadow-glow-amber">
          <QrIcon className="size-8" />
        </span>
        <h1 className="mt-6 text-center font-display text-3xl font-bold">We can’t find that bar</h1>
        <p className="mt-3 text-center text-muted">
          That game code doesn’t match any venue. Scan the QR code on the TV again, or type the code shown under it.
        </p>
        <div className="mt-8">
          <CodeForm />
        </div>
      </div>
    </main>
  );
}