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

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="/" prefetch={false} 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>
        <MissingVenueForm />
      </div>
    </main>
  );
}