import type { Metadata } from "next";
import { PageHeader } from "@/components/PageHeader";
import { Container } from "@/components/Container";
import { photos } from "@/lib/photos";

export const metadata: Metadata = {
  title: "Photo credits",
  description:
    "Photographer credits and source links for every free-license photograph used on OrthoGlobe.",
};

// Group photos by category so the credits page is scannable.
function groupByCategory() {
  const groups = new Map<string, typeof photos>();
  for (const p of photos) {
    const existing = groups.get(p.category) ?? [];
    existing.push(p);
    groups.set(p.category, existing);
  }
  return Array.from(groups.entries()).sort(([a], [b]) => a.localeCompare(b));
}

const categoryLabels: Record<string, string> = {
  anatomy: "Anatomy & X-ray",
  classroom: "Classroom & e-learning",
  consent: "Consent & doctor-patient",
  "exam-prep": "Exam preparation",
  "global-health": "Global health",
  rehab: "Physical therapy & rehab",
  surgery: "Surgery & operating room",
  training: "Training & education",
};

export default function CreditsPage() {
  const groups = groupByCategory();

  return (
    <>
      <PageHeader
        eyebrow="Photo credits"
        title="Every photograph, its photographer, and its source."
        lede="OrthoGlobe uses free-license photography from Wikimedia Commons. We track the photographer, source page, and license for every image — attribution is shown here whether or not it is strictly required."
      />

      <Container className="py-12">
        <div className="space-y-16">
          {groups.map(([category, items]) => (
            <section key={category}>
              <h2 className="font-display text-[24px] font-extrabold tracking-tight text-[var(--color-ink)]">
                {categoryLabels[category] ?? category}
              </h2>
              <ul className="mt-6 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
                {items.map((p) => (
                  <li
                    key={p.path}
                    className="group flex flex-col overflow-hidden rounded-xl border border-[var(--color-line)] bg-white"
                  >
                    <div className="relative aspect-[16/10] w-full overflow-hidden bg-[var(--color-mist)]">
                      {/* eslint-disable-next-line @next/next/no-img-element */}
                      <img
                        src={p.path}
                        alt={p.alt}
                        loading="lazy"
                        className="h-full w-full object-cover transition-transform duration-500 ease-out group-hover:scale-[1.03]"
                      />
                    </div>
                    <div className="flex flex-1 flex-col p-5">
                      <p className="text-[14px] leading-relaxed text-[var(--color-slate)]">
                        {p.alt}
                      </p>
                      <dl className="mt-4 space-y-1 text-[12px]">
                        <div className="flex gap-1">
                          <dt className="font-semibold text-[var(--color-ink)]">Credit:</dt>
                          <dd className="text-[var(--color-slate)]">{p.credit}</dd>
                        </div>
                        <div className="flex gap-1">
                          <dt className="font-semibold text-[var(--color-ink)]">License:</dt>
                          <dd className="text-[var(--color-slate)]">{p.license}</dd>
                        </div>
                      </dl>
                      {p.source ? (
                        <a
                          href={p.source}
                          target="_blank"
                          rel="noreferrer"
                          className="mt-4 inline-flex items-center gap-1 text-[12px] font-semibold text-[var(--color-blue)] hover:underline"
                        >
                          View on Wikimedia Commons
                          <span aria-hidden>→</span>
                        </a>
                      ) : null}
                    </div>
                  </li>
                ))}
              </ul>
            </section>
          ))}
        </div>

        <div className="mt-16 rounded-xl border border-[var(--color-line)] bg-[var(--color-mist)]/60 p-6 text-[13px] leading-relaxed text-[var(--color-slate)]">
          <p>
            All photographs above are distributed under free licenses (CC0, CC-BY,
            CC-BY-SA, Public Domain, or "No restrictions") via{" "}
            <a
              href="https://commons.wikimedia.org"
              target="_blank"
              rel="noreferrer"
              className="font-semibold text-[var(--color-blue)] hover:underline"
            >
              Wikimedia Commons
            </a>
            . Click any "View on Wikimedia Commons" link for the original file page,
            full license text, and attribution details.
          </p>
        </div>
      </Container>
    </>
  );
}
