import type { Metadata } from "next";
import Link from "next/link";
import {
  Globe,
  HeartHandshake,
  Wrench,
  FlaskConical,
  Award,
  HandCoins,
  HeartPulse,
  ShieldCheck,
  ArrowRight,
} from "lucide-react";
import { Container } from "@/components/Container";
import { PageHeader } from "@/components/PageHeader";
import { Button } from "@/components/Button";
import { siteConfig } from "@/lib/site-config";
import {
  trainingCentres,
  workforceCountries,
  workforceSummary,
} from "@/data/clinical/workforce";

export const metadata: Metadata = {
  title: "Clinical — Global Orthopaedics",
  description:
    "OrthoGlobe's Global Orthopaedics programme: advancing orthopaedic care worldwide through shared expertise, resources, and multicentre research.",
};

const pillars = [
  {
    icon: HeartHandshake,
    title: "Sharing expertise",
    body: "OrthoGlobe connects leading orthopaedic surgeons and healthcare professionals from high-resource settings with colleagues in regions where specialist care is limited. Through lectures, webinars, and collaborative operating-room experiences, we transfer knowledge on modern techniques, evidence-based care, and new technologies.",
  },
  {
    icon: Wrench,
    title: "Providing resources",
    body: "Access to modern surgical tools and technologies remains a major barrier in many parts of the world. OrthoGlobe helps partner sites secure essential equipment, implants, and consumables, and supports site infrastructure so that surgeons can deliver the care their patients deserve.",
  },
  {
    icon: FlaskConical,
    title: "Research and development",
    body: "Beyond training and resources, OrthoGlobe invests in ongoing research and development. We host multicentre studies, registries, and quality-improvement work that generate the evidence base for orthopaedic practice — with outputs that are openly shared across the collaboration.",
  },
];

const priorities = [
  {
    icon: ShieldCheck,
    title: "Enhanced surgical precision",
    body: "Reducing surgical errors and improving patient outcomes through structured training and access to advanced equipment.",
  },
  {
    icon: Globe,
    title: "Wider access to specialist care",
    body: "Extending musculoskeletal care pathways into communities that currently lack orthopaedic subspecialist provision.",
  },
  {
    icon: HeartPulse,
    title: "Improved patient experience",
    body: "Supporting consent, rehabilitation, and follow-up so that surgical treatment translates into long-term functional recovery.",
  },
  {
    icon: Award,
    title: "Sustainable surgical systems",
    body: "Building local teaching, mentorship, and research capability so gains persist after visiting faculty leave.",
  },
];

const involvement = [
  {
    icon: HeartHandshake,
    title: "Volunteer",
    body: "Surgeons, trainees, and allied medical professionals can join as trainers, site faculty, or clinical consultants on OrthoGlobe programmes.",
  },
  {
    icon: HandCoins,
    title: "Donate",
    body: "Contributions of medical equipment, educational materials, or funding support frontline sites and bursaries for trainees.",
  },
  {
    icon: FlaskConical,
    title: "Collaborate on research",
    body: "Principal investigators can host multicentre studies under the OrthoGlobe Charity Collaboration and open enrolment to partner sites.",
  },
];

export default function ClinicalPage() {
  const summary = workforceSummary();
  return (
    <>
      <PageHeader
        eyebrow="Clinical"
        title="Global orthopaedics."
        lede="Advancing orthopaedic care worldwide through innovation, collaboration, and shared clinical standards."
      />

      <section className="bg-white py-12 md:py-16">
        <Container>
          <div className="grid gap-12 md:grid-cols-[1.15fr_1fr] md:items-start">
            <div>
              <div className="text-[11px] font-bold uppercase tracking-wider text-[var(--color-blue)]">
                Our mission
              </div>
              <h2 className="mt-3 font-display text-[30px] md:text-[38px] font-extrabold leading-tight tracking-[-0.02em] text-[var(--color-ink)]">
                Every patient deserves access to high-quality orthopaedic care.
              </h2>
              <p className="mt-5 text-[17px] leading-relaxed text-[var(--color-slate)]">
                OrthoGlobe is a pioneering initiative dedicated to elevating the
                standards of orthopaedic surgery worldwide. The programme focuses on
                under-resourced regions where access to specialised musculoskeletal
                care is limited — bringing together surgeons, institutions, and
                researchers to improve outcomes through training, resources, and
                research.
              </p>
              <p className="mt-4 text-[17px] leading-relaxed text-[var(--color-slate)]">
                The mission is simple: ensure that every patient has access to
                high-quality orthopaedic care, regardless of geography or resource
                setting.
              </p>
            </div>
            <aside className="rounded-2xl border border-[var(--color-line)] bg-[var(--color-mist)]/50 p-6 md:p-8">
              <div className="text-[11px] font-bold uppercase tracking-wider text-[var(--color-blue)]">
                At a glance
              </div>
              <ul className="mt-4 space-y-4 text-[15px] text-[var(--color-ink)]">
                <li className="flex gap-3">
                  <span className="mt-2 inline-block h-1.5 w-1.5 flex-none rounded-full bg-[var(--color-blue)]" />
                  International collaborative founded by Professor Mohamed A. Imam.
                </li>
                <li className="flex gap-3">
                  <span className="mt-2 inline-block h-1.5 w-1.5 flex-none rounded-full bg-[var(--color-blue)]" />
                  Research, education, and equipment pathways in a single programme.
                </li>
                <li className="flex gap-3">
                  <span className="mt-2 inline-block h-1.5 w-1.5 flex-none rounded-full bg-[var(--color-blue)]" />
                  Open to partner sites, visiting faculty, and trainees worldwide.
                </li>
                <li className="flex gap-3">
                  <span className="mt-2 inline-block h-1.5 w-1.5 flex-none rounded-full bg-[var(--color-blue)]" />
                  Based at {siteConfig.address.line1}, {siteConfig.address.city}.
                </li>
              </ul>
            </aside>
          </div>
        </Container>
      </section>

      <section className="bg-[var(--color-mist)] py-12 md:py-16">
        <Container>
          <div className="max-w-2xl">
            <div className="text-[11px] font-bold uppercase tracking-wider text-[var(--color-blue)]">
              How it works
            </div>
            <h2 className="mt-3 font-display text-[30px] md:text-[38px] font-extrabold leading-tight tracking-[-0.02em] text-[var(--color-ink)]">
              Three pillars that compound over time.
            </h2>
          </div>
          <div className="mt-10 grid gap-5 md:grid-cols-3">
            {pillars.map(({ icon: Icon, title, body }) => (
              <article
                key={title}
                className="flex flex-col rounded-2xl border border-[var(--color-line)] bg-white p-6 md:p-7"
              >
                <span className="flex h-11 w-11 items-center justify-center rounded-lg bg-[var(--color-mist)] text-[var(--color-blue)]">
                  <Icon className="h-5 w-5" />
                </span>
                <h3 className="mt-5 font-display text-[20px] font-extrabold tracking-[-0.01em] text-[var(--color-ink)]">
                  {title}
                </h3>
                <p className="mt-3 text-[15px] leading-relaxed text-[var(--color-slate)]">
                  {body}
                </p>
              </article>
            ))}
          </div>
        </Container>
      </section>

      <section className="bg-white py-12 md:py-16">
        <Container>
          <div className="max-w-2xl">
            <div className="text-[11px] font-bold uppercase tracking-wider text-[var(--color-blue)]">
              Impact and priorities
            </div>
            <h2 className="mt-3 font-display text-[30px] md:text-[38px] font-extrabold leading-tight tracking-[-0.02em] text-[var(--color-ink)]">
              Where the programme concentrates effort.
            </h2>
            <p className="mt-4 text-[17px] leading-relaxed text-[var(--color-slate)]">
              OrthoGlobe aims to make significant strides in transforming orthopaedic
              surgery landscapes worldwide. These are the priorities that guide each
              new engagement.
            </p>
          </div>
          <div className="mt-10 grid gap-5 md:grid-cols-2">
            {priorities.map(({ icon: Icon, title, body }) => (
              <div
                key={title}
                className="flex gap-4 rounded-2xl border border-[var(--color-line)] bg-white p-6"
              >
                <span className="flex h-10 w-10 flex-none items-center justify-center rounded-lg bg-[var(--color-mist)] text-[var(--color-blue)]">
                  <Icon className="h-5 w-5" />
                </span>
                <div>
                  <div className="font-display text-[17px] font-extrabold tracking-tight text-[var(--color-ink)]">
                    {title}
                  </div>
                  <p className="mt-1.5 text-[14px] leading-relaxed text-[var(--color-slate)]">
                    {body}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </Container>
      </section>

      <section className="bg-white py-12 md:py-16">
        <Container>
          <div className="max-w-3xl">
            <div className="text-[11px] font-bold uppercase tracking-wider text-[var(--color-blue)]">
              Global workforce atlas
            </div>
            <h2 className="mt-3 font-display text-[30px] md:text-[38px] font-extrabold leading-tight tracking-[-0.02em] text-[var(--color-ink)]">
              {summary.countryCount} countries, {summary.surgeonCount.toLocaleString()} orthopaedic surgeons.
            </h2>
            <p className="mt-4 text-[17px] leading-relaxed text-[var(--color-slate)]">
              OrthoGlobe&rsquo;s international workforce atlas maps orthopaedic
              specialist density across {summary.countryCount} countries — from{" "}
              {summary.maxDensity.toFixed(1)} surgeons per 100,000 population at
              the high end to {summary.minDensity.toFixed(2)} at the low end.
              {" "}{summary.programCount.toLocaleString()} training programmes
              are indexed across the collaboration.
            </p>
          </div>

          <div className="mt-10 overflow-hidden rounded-2xl border border-[var(--color-line)] bg-white shadow-[0_16px_40px_rgba(10,14,40,0.04)]">
            <div className="max-h-[540px] overflow-y-auto">
              <table className="w-full text-[14px]">
                <thead className="sticky top-0 bg-[var(--color-mist)]/80 backdrop-blur">
                  <tr className="text-left text-[11px] font-bold uppercase tracking-wider text-[var(--color-slate)]">
                    <th className="px-5 py-3">Country</th>
                    <th className="px-5 py-3">Surgeons / 100k</th>
                    <th className="px-5 py-3">Total surgeons</th>
                    <th className="px-5 py-3">Training programmes</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-[var(--color-line)]">
                  {workforceCountries.map((c) => (
                    <tr key={c.code} className="hover:bg-[var(--color-mist)]/30">
                      <td className="px-5 py-3">
                        <div className="flex items-center gap-3">
                          <span
                            aria-hidden
                            className="inline-block h-3 w-3 flex-none rounded-sm"
                            style={{ backgroundColor: c.color }}
                          />
                          <span className="font-semibold text-[var(--color-ink)]">
                            {c.name}
                          </span>
                          <span className="text-[12px] uppercase tracking-wide text-[var(--color-slate)]">
                            {c.code}
                          </span>
                        </div>
                      </td>
                      <td className="px-5 py-3 tabular-nums text-[var(--color-ink)]">
                        {c.density.toFixed(2)}
                      </td>
                      <td className="px-5 py-3 tabular-nums text-[var(--color-slate)]">
                        {c.surgeons.toLocaleString()}
                      </td>
                      <td className="px-5 py-3 tabular-nums text-[var(--color-slate)]">
                        {c.programs}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </Container>
      </section>

      <section className="bg-[var(--color-mist)] py-12 md:py-16">
        <Container>
          <div className="max-w-2xl">
            <div className="text-[11px] font-bold uppercase tracking-wider text-[var(--color-blue)]">
              Leading training centres
            </div>
            <h2 className="mt-3 font-display text-[30px] md:text-[38px] font-extrabold leading-tight tracking-[-0.02em] text-[var(--color-ink)]">
              Where the collaboration learns.
            </h2>
            <p className="mt-4 text-[17px] leading-relaxed text-[var(--color-slate)]">
              A sample of the fellowship and training centres indexed in the
              OrthoGlobe workforce atlas.
            </p>
          </div>
          <ul className="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
            {trainingCentres.map((centre) => (
              <li
                key={`${centre.name}-${centre.country}`}
                className="flex h-full flex-col rounded-2xl border border-[var(--color-line)] bg-white p-5"
              >
                <div className="text-[11px] font-bold uppercase tracking-wider text-[var(--color-blue)]">
                  {centre.country} · {centre.type}
                </div>
                <div className="mt-2 font-display text-[17px] font-extrabold tracking-tight text-[var(--color-ink)]">
                  {centre.name}
                </div>
                <div className="mt-auto pt-4 text-[13px] text-[var(--color-slate)]">
                  {centre.specialty}
                </div>
              </li>
            ))}
          </ul>
        </Container>
      </section>

      {/* Atlas methodology & data-sources deep links */}
      <section className="bg-[var(--color-mist)]/40 py-12 md:py-16">
        <Container>
          <div className="max-w-2xl">
            <div className="text-[11px] font-bold uppercase tracking-wider text-[var(--color-blue)]">
              Transparency
            </div>
            <h2 className="mt-3 font-display text-[30px] md:text-[38px] font-extrabold leading-tight tracking-[-0.02em] text-[var(--color-ink)]">
              How we measure orthopaedic capacity.
            </h2>
            <p className="mt-4 text-[17px] leading-relaxed text-[var(--color-slate)]">
              The Atlas figures you see on the home page and /products/atlas are
              grounded in a public methodology and traceable data sources.
            </p>
          </div>
          <div className="mt-8 grid gap-5 md:grid-cols-2">
            <Link
              href="/clinical/methodology"
              className="group flex flex-col rounded-2xl border border-[var(--color-line)] bg-white p-6 transition-all hover:-translate-y-0.5 hover:border-[var(--color-blue)] hover:shadow-[0_16px_40px_rgba(30,64,255,0.12)]"
            >
              <span className="flex h-11 w-11 items-center justify-center rounded-lg bg-[var(--color-mist)] text-[var(--color-blue)]">
                <FlaskConical className="h-5 w-5" aria-hidden />
              </span>
              <div className="mt-5 font-display text-[20px] font-extrabold tracking-tight text-[var(--color-ink)]">
                Methodology
              </div>
              <p className="mt-2 flex-1 text-[14px] leading-relaxed text-[var(--color-slate)]">
                Numerator and denominator definitions, capacity thresholds, data
                collection process, analytical limitations, and validation.
              </p>
              <span className="mt-5 inline-flex items-center gap-1.5 text-[13px] font-semibold text-[var(--color-blue)]">
                Read methodology
                <ArrowRight className="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" />
              </span>
            </Link>
            <Link
              href="/clinical/data-sources"
              className="group flex flex-col rounded-2xl border border-[var(--color-line)] bg-white p-6 transition-all hover:-translate-y-0.5 hover:border-[var(--color-blue)] hover:shadow-[0_16px_40px_rgba(30,64,255,0.12)]"
            >
              <span className="flex h-11 w-11 items-center justify-center rounded-lg bg-[var(--color-mist)] text-[var(--color-blue)]">
                <Globe className="h-5 w-5" aria-hidden />
              </span>
              <div className="mt-5 font-display text-[20px] font-extrabold tracking-tight text-[var(--color-ink)]">
                Data sources
              </div>
              <p className="mt-2 flex-1 text-[14px] leading-relaxed text-[var(--color-slate)]">
                WHO Global Health Workforce Statistics, national medical councils,
                published academic literature, society data, and the OrthoGlobe
                collaborative network.
              </p>
              <span className="mt-5 inline-flex items-center gap-1.5 text-[13px] font-semibold text-[var(--color-blue)]">
                Read data sources
                <ArrowRight className="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" />
              </span>
            </Link>
          </div>
        </Container>
      </section>

      <section className="bg-white py-12 md:py-16">
        <Container>
          <div className="max-w-2xl">
            <div className="text-[11px] font-bold uppercase tracking-wider text-[var(--color-blue)]">
              Get involved
            </div>
            <h2 className="mt-3 font-display text-[30px] md:text-[38px] font-extrabold leading-tight tracking-[-0.02em] text-[var(--color-ink)]">
              OrthoGlobe thrives on collaboration.
            </h2>
            <p className="mt-4 text-[17px] leading-relaxed text-[var(--color-slate)]">
              There are several ways to contribute to the mission — whether you run a
              clinical service, supply equipment, or want to host a research study.
            </p>
          </div>
          <div className="mt-10 grid gap-5 md:grid-cols-3">
            {involvement.map(({ icon: Icon, title, body }) => (
              <div
                key={title}
                className="flex flex-col rounded-2xl border border-[var(--color-line)] bg-white p-6"
              >
                <span className="flex h-11 w-11 items-center justify-center rounded-lg bg-[var(--color-mist)] text-[var(--color-blue)]">
                  <Icon className="h-5 w-5" />
                </span>
                <div className="mt-5 font-display text-[18px] font-extrabold tracking-[-0.01em] text-[var(--color-ink)]">
                  {title}
                </div>
                <p className="mt-2 text-[14px] leading-relaxed text-[var(--color-slate)]">
                  {body}
                </p>
              </div>
            ))}
          </div>
          <div className="mt-10 rounded-2xl border border-[var(--color-line)] bg-white p-6 md:p-8">
            <div className="flex flex-wrap items-center justify-between gap-4">
              <div>
                <div className="font-display text-[20px] font-extrabold tracking-tight text-[var(--color-ink)]">
                  Together, we can make orthopaedic care a universal standard.
                </div>
                <p className="mt-2 text-[15px] text-[var(--color-slate)]">
                  To learn more, partner with OrthoGlobe, or contribute to the
                  programme, get in touch.
                </p>
              </div>
              <div className="flex flex-wrap gap-3">
                <Button href="/contact">Contact us</Button>
                <Link
                  href="/join"
                  className="inline-flex items-center gap-2 text-[14px] font-semibold text-[var(--color-blue)] underline underline-offset-4 hover:opacity-80"
                >
                  Apply for membership
                  <ArrowRight className="h-4 w-4" />
                </Link>
              </div>
            </div>
          </div>
        </Container>
      </section>
    </>
  );
}
