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 company/event/sensor pages whose id does not resolve. */
export default function NotFound() {
  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">No monitored record at this address.</h1>
      <p className="mt-4 max-w-xl text-[15px] leading-relaxed text-ink-2">The company may not be onboarded yet, the slug may have changed (ids never do), or the page never existed. 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 Company 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 companies, industries, countries…" 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.companies()} className="btn">
          Companies
        </Link>
        <Link href={routes.live()} className="btn">
          Live feed
        </Link>
        <Link href={routes.events()} className="btn">
          Events
        </Link>
      </div>
      <Note className="mt-8 max-w-xl">
        Canonical URLs: <span className="mono">/company/&lt;slug&gt;</span>, <span className="mono">/industry/&lt;slug&gt;</span>, <span className="mono">/country/&lt;code&gt;</span>, <span className="mono">/events/&lt;id&gt;</span>. Programmatic lookup: <span className="mono">{PUBLIC_API_BASE.replace(/^https?:\/\/www\./, '')}/search/suggest?q=…</span>
      </Note>
    </Container>
  );
}