import { Link, useLocation } from 'react-router-dom';
import { ArrowRight } from 'lucide-react';

import { allDemos, lineup, REPO_URL, routes } from '@/content/lineup';
import * as s from '@/content/styles';

/**
 * A 404 with somewhere to go.
 *
 * The destinations are read from the registry and the lineup rather than
 * hard-coded, so this page cannot become the one place on the site that still
 * links to a demo we removed.
 */
export default function NotFound() {
  const { pathname } = useLocation();
  const topVerticals = lineup.slice(0, 4);

  return (
    <main className={`${s.shell} py-16 sm:py-24`}>
      <p className={`${s.eyebrow} nums`}>404</p>
      <h1 className={`${s.h1} mt-3 max-w-2xl`}>That page isn’t here.</h1>
      <p className={`${s.lede} mt-5 max-w-2xl`}>
        Nothing is served at{' '}
        <code className="break-all font-mono text-fg">{pathname}</code>. Either the link is old or
        we moved something. Here is everything this site has.
      </p>

      <div className="mt-8 flex flex-col gap-3 sm:flex-row">
        <Link className={s.btnPrimary} to={routes.home}>
          Start at the beginning
        </Link>
        <Link className={s.btnSecondary} to={routes.gallery}>
          Every environment
        </Link>
      </div>

      <div className="mt-12 grid gap-8 sm:grid-cols-2">
        <nav aria-labelledby="nf-demos">
          <h2 className={s.h3} id="nf-demos">
            Demos
          </h2>
          <ul className="mt-3 space-y-2">
            {allDemos.map((demo) => (
              <li key={demo.slug}>
                <Link className={`${s.link} text-sm`} to={routes.demo(demo.slug)}>
                  {demo.title}
                </Link>
                <span className="ml-2 text-xs text-muted">
                  {demo.status === 'live' ? 'Live' : 'Specification'}
                </span>
              </li>
            ))}
            {allDemos.length === 0 ? (
              <li className="text-sm text-muted">No demos are registered yet.</li>
            ) : null}
          </ul>
        </nav>

        <nav aria-labelledby="nf-verticals">
          <h2 className={s.h3} id="nf-verticals">
            The lineup
          </h2>
          <ul className="mt-3 space-y-2">
            {topVerticals.map((v) => (
              <li key={v.slug}>
                <Link className={`${s.link} text-sm`} to={routes.vertical(v.slug)}>
                  {v.title}
                </Link>
              </li>
            ))}
            <li>
              <Link
                className="inline-flex items-center gap-1.5 text-sm font-medium text-muted transition-colors duration-1 ease-enter hover:text-fg"
                to={routes.home}
              >
                All {lineup.length}
                <ArrowRight aria-hidden="true" className="size-3.5" />
              </Link>
            </li>
          </ul>
        </nav>
      </div>

      <div className="card mt-12 p-5">
        <h2 className={s.h3}>Looking for the numbers?</h2>
        <p className={`${s.prose} mt-2 max-w-2xl`}>
          What is measured, what is cited from elsewhere, and what we have deliberately not measured
          all live on one page.
        </p>
        <div className="mt-4 flex flex-col gap-3 sm:flex-row">
          <Link className={s.btnSecondary} to={routes.honesty}>
            Honesty
          </Link>
          <a className={s.btnSecondary} href={REPO_URL} rel="noreferrer noopener" target="_blank">
            The source on GitHub
          </a>
        </div>
      </div>
    </main>
  );
}