import Link from "next/link";
import {
  BookOpen,
  FileText,
  FlaskConical,
  GraduationCap,
  Layers,
  Newspaper,
  ShieldCheck,
  Stethoscope,
} from "lucide-react";
import { PageHeader } from "@/components/PageHeader";
import { Container } from "@/components/Container";
import { Button } from "@/components/Button";

const popularLinks = [
  { href: "/", label: "Home", description: "Start here", Icon: Layers },
  { href: "/products/atlas", label: "Atlas", description: "Clinical reference", Icon: Stethoscope },
  { href: "/products/consentiq", label: "ConsentIQ", description: "Consent toolkit", Icon: ShieldCheck },
  { href: "/products/orthoprep", label: "OrthoPrep", description: "Exam preparation", Icon: BookOpen },
  { href: "/products/academy", label: "Academy", description: "Courses", Icon: GraduationCap },
  { href: "/products/research", label: "Research", description: "Collaborative studies", Icon: FlaskConical },
  { href: "/blog", label: "Blog", description: "Editorial", Icon: FileText },
  { href: "/news", label: "News", description: "Orthopaedic feeds", Icon: Newspaper },
];

export default function NotFound() {
  return (
    <>
      <PageHeader
        eyebrow="404"
        title="Page not found."
        lede="The page you're looking for doesn't exist or has moved. Try one of the popular destinations below."
      />
      <Container className="pb-24">
        <div className="flex flex-wrap items-center gap-3">
          <Button href="/">Back to OrthoGlobe</Button>
          <Button href="/contact" variant="ghost">
            Report a broken link
          </Button>
        </div>

        <section className="mt-14">
          <h2 className="text-[11px] font-bold uppercase tracking-[0.15em] text-[var(--color-slate)]">
            Popular destinations
          </h2>
          <ul className="mt-4 grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
            {popularLinks.map(({ href, label, description, Icon }) => (
              <li key={href}>
                <Link
                  href={href}
                  className="group flex h-full items-start gap-3 rounded-xl border border-[var(--color-line)] bg-white p-4 transition-all hover:-translate-y-0.5 hover:border-[var(--color-blue)] hover:shadow-sm"
                >
                  <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--color-mist)] text-[var(--color-blue)]">
                    <Icon className="h-[18px] w-[18px]" aria-hidden />
                  </span>
                  <div className="min-w-0">
                    <div className="truncate font-display text-[15px] font-extrabold text-[var(--color-ink)] group-hover:text-[var(--color-blue)]">
                      {label}
                    </div>
                    <div className="truncate text-[12px] text-[var(--color-slate)]">
                      {description}
                    </div>
                  </div>
                </Link>
              </li>
            ))}
          </ul>
        </section>
      </Container>
    </>
  );
}
