import Link from "next/link";
import { Compass } from "lucide-react";

import { Button } from "@/components/ui/button";

export default function NotFound() {
  return (
    <div className="flex min-h-[60vh] flex-col items-center justify-center gap-4 p-4 text-center">
      <div className="flex size-14 items-center justify-center rounded-full bg-brand-blue/10 text-brand-blue">
        <Compass className="size-7" />
      </div>
      <div className="space-y-1">
        <p className="font-heading text-5xl font-bold text-brand-navy">404</p>
        <p className="font-heading text-lg font-medium text-foreground">
          Page not found
        </p>
        <p className="max-w-sm text-sm text-muted-foreground">
          The page you’re looking for doesn’t exist or may have been moved.
        </p>
      </div>
      <Button asChild>
        <Link href="/dashboard">Back to dashboard</Link>
      </Button>
    </div>
  );
}