import { Search } from 'lucide-react';
import type { Metadata } from 'next';
import Link from 'next/link';
import { Container, Note } from '@/components/ui/section';
import { PUBLIC_API_BASE, routes } from '@/lib/site';

export const metadata: Metadata = { title: 'Not found', robots: { index: false } };

/** 404 for the whole site (and for entity pages whose slug/type does not resolve). Search is the way back. */
export default function NotFound() {
  const btn = 'inline-flex h-11 items-center border border-rule px-3.5 text-sm text-ink-2 hover:border-rule-strong hover:text-ink';
  return (
    <Container className="py-16 md:py-24">
      <p className="eyebrow">404 · Not on the map</p>
      <h1 className="display mt-2 text-3xl md:text-5xl">We have no record at this address.</h1>
      <p className="mt-4 max-w-xl text-[15px] leading-relaxed text-ink-2">
        The entity may have been merged into another record (its old slug then redirects), renamed by its source, or never crawled. Nothing is invented to fill the gap — search the atlas instead.
      </p>
      <form action="/search" method="get" role="search" className="mt-6 flex max-w-xl items-stretch border border-rule-strong bg-surface focus-within:border-accent">
        <label htmlFor="nf-q" className="sr-only">Search AI Atlas</label>
        <Search className="my-auto ml-3 size-4 shrink-0 text-ink-3" aria-hidden />
        <input id="nf-q" name="q" type="search" placeholder="Search models, companies, papers, benchmarks…" className="h-11 min-w-0 flex-1 bg-transparent px-3 text-[16px] text-ink placeholder:text-ink-3 focus:outline-none" autoComplete="off" spellCheck={false} />
        <button type="submit" className="bg-ink px-4 text-sm font-medium text-canvas hover:opacity-90">Search</button>
      </form>
      <div className="mt-6 flex flex-wrap gap-2 text-sm">
        <Link href={routes.home()} className={btn}>Home</Link>
        <Link href={routes.models()} className={btn}>Models</Link>
        <Link href={routes.explore()} className={btn}>Explore all types</Link>
        <Link href={routes.changes()} className={btn}>Changes</Link>
      </div>
      <Note className="mt-8 max-w-xl">
        Canonical URLs are <span className="mono">/models/&lt;slug&gt;</span>, <span className="mono">/companies/&lt;slug&gt;</span>, <span className="mono">/papers/&lt;slug&gt;</span>… — a slug under the wrong type is a 404, not a duplicate page. Programmatic lookup: <a href={`${PUBLIC_API_BASE}/search/suggest?q=claude`} className="link mono">{PUBLIC_API_BASE.replace(/^https?:\/\/www\./, '')}/search/suggest?q=…</a>
      </Note>
    </Container>
  );
}