import type { Metadata } from "next";
import Link from "next/link";

import { Container } from "@/components/Container";
import { PageHeader } from "@/components/PageHeader";
import { DraftBanner } from "@/components/consentiq/DraftBanner";
import { LibraryExplorer } from "@/components/consentiq/LibraryExplorer";
import {
  getLibraryRegions,
  libraryProcedures,
} from "@/data/consentiq/library";

export const metadata: Metadata = {
  title: "ConsentIQ · Procedure library",
  description:
    "Browse the ConsentIQ library of 321 orthopaedic consent leaflets, reviewed by Professor Mohamed A. Imam and organised across 13 body regions.",
};

export default function ConsentIQLibraryPage() {
  const regions = getLibraryRegions();
  return (
    <>
      <PageHeader
        eyebrow="ConsentIQ · Library"
        title="321 orthopaedic consent leaflets."
        lede="Clinician-reviewed, plain-language consent documents across 13 body regions. Search or filter to find the one you need — each leaflet follows the same structured template."
      />
      <Container className="pb-14 md:pb-16">
        <DraftBanner className="mb-8" />
        <LibraryExplorer procedures={libraryProcedures} regions={regions} />
        <div className="mt-12 flex flex-wrap items-center gap-4 text-[13px] text-[var(--color-slate)]">
          <Link
            href="/products/consentiq"
            className="font-semibold text-[var(--color-blue)] hover:text-[var(--color-blue-deep)]"
          >
            ← Back to ConsentIQ overview
          </Link>
          <span aria-hidden>·</span>
          <Link
            href="/products/consentiq/procedures"
            className="font-semibold text-[var(--color-blue)] hover:text-[var(--color-blue-deep)]"
          >
            Consent builder →
          </Link>
        </div>
      </Container>
    </>
  );
}
