import type { Metadata } from "next";
import Link from "next/link";
import { ArrowLeft, ArrowRight } from "lucide-react";
import { Logo } from "@/components/brand/logo";
import { Button } from "@/components/ui/button";

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

export default function NotFound() {
  return (
    <div className="relative flex min-h-dvh flex-col overflow-x-clip">
      <div aria-hidden className="dot-grid pointer-events-none absolute inset-0 opacity-60 [mask-image:radial-gradient(ellipse_70%_60%_at_50%_40%,black_10%,transparent_100%)] dark:opacity-40" />
      <header className="relative z-10 flex h-14 items-center px-5 sm:px-8">
        <Link href="/" aria-label="PolyLLM home" className="rounded-md">
          <Logo size={24} />
        </Link>
      </header>
      <main className="relative z-10 flex flex-1 items-center justify-center px-5 pb-16">
        <div className="max-w-md text-center animate-fade-up">
          <p className="font-mono text-[12px] uppercase tracking-[0.16em] text-fg-subtle">Error 404</p>
          <h1 className="mt-3 text-balance text-4xl font-semibold leading-none tracking-tight sm:text-5xl">
            This page doesn&apos;t <span className="text-gradient">exist</span>.
          </h1>
          <p className="mt-4 text-pretty text-[15px] leading-7 text-fg-muted">The link may be broken, the share may have been revoked, or the page moved. Nothing here has been lost on your side.</p>
          <div className="mt-8 flex flex-col items-center justify-center gap-2 sm:flex-row">
            <Button asChild size="lg" className="w-full sm:w-auto">
              <Link href="/app/chat">
                Open PolyLLM
                <ArrowRight />
              </Link>
            </Button>
            <Button asChild size="lg" variant="outline" className="w-full sm:w-auto">
              <Link href="/">
                <ArrowLeft />
                Back to home
              </Link>
            </Button>
          </div>
        </div>
      </main>
    </div>
  );
}