import { Radar, Search } from "lucide-react";
import Link from "next/link";
import { Kbd, Panel } from "@/components/ui";

export default function NotFound() {
  return (
    <div className="mx-auto max-w-lg py-12 sm:py-20">
      <Panel dense>
        <div className="flex flex-col items-center gap-2 px-4 py-10 text-center">
          <span className="font-mono text-[11px] font-semibold tracking-wider text-fg-subtle">HTTP 404 · NOT OBSERVED</span>
          <Radar className="mt-1 size-6 text-fg-subtle" aria-hidden />
          <h1 className="mt-1 text-lg font-semibold leading-tight">Nothing observed at this address</h1>
          <p className="max-w-sm text-[13px] text-fg-muted">The page may have moved, or the event, source, entity or cluster does not exist. Sensors keep watching; this URL is not one of them.</p>
          <div className="mt-4 flex flex-wrap justify-center gap-2 text-[12.5px]">
            <Link href="/live" className="inline-flex h-8 items-center rounded-md border border-line bg-panel px-3 hover:border-line-strong">Live feed</Link>
            <Link href="/explore" className="inline-flex h-8 items-center rounded-md border border-line bg-panel px-3 hover:border-line-strong">Explore</Link>
            <Link href="/search" className="inline-flex h-8 items-center gap-1.5 rounded-md border border-line bg-panel px-3 hover:border-line-strong"><Search className="size-3.5" /> Search</Link>
          </div>
          <p className="mt-3 flex items-center gap-1.5 text-[11px] text-fg-subtle">
            Press <Kbd>⌘</Kbd><Kbd>K</Kbd> anywhere to search entities, events and URLs.
          </p>
        </div>
      </Panel>
    </div>
  );
}