import Link from "next/link";
import { ArrowLeft, Home, SearchX } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";

export default function NotFound() {
  return (
    <main className="relative flex min-h-screen items-center justify-center overflow-hidden bg-background px-4 py-12 text-foreground">
      <div className="absolute inset-0 -z-10 bg-[radial-gradient(circle_at_top,_var(--muted)_0,_transparent_36rem)]" />
      <Card className="w-full max-w-2xl border-border/70 bg-card/95 shadow-xl">
        <CardContent className="flex flex-col items-center px-6 py-12 text-center sm:px-10">
          <div className="mb-6 flex size-16 items-center justify-center rounded-full bg-muted text-muted-foreground ring-1 ring-border">
            <SearchX className="size-8" aria-hidden="true" />
          </div>

          <Badge variant="outline" className="mb-4">
            404 - Page not found
          </Badge>

          <h1 className="max-w-xl text-3xl font-semibold tracking-tight sm:text-4xl">
            We could not find the page you are looking for.
          </h1>
          <p className="mt-4 max-w-lg text-sm leading-6 text-muted-foreground sm:text-base">
            The link may be broken, the page may have moved, or the address was typed incorrectly.
          </p>

          <div className="mt-8 flex flex-col gap-3 sm:flex-row">
            <Button asChild size="lg">
              <Link href="/">
                <Home className="size-4" aria-hidden="true" />
                Go to home
              </Link>
            </Button>
            <Button asChild variant="outline" size="lg">
              <Link href="/login">
                <ArrowLeft className="size-4" aria-hidden="true" />
                Back to login
              </Link>
            </Button>
          </div>
        </CardContent>
      </Card>
    </main>
  );
}