import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import {
  Globe,
  Users,
  BookOpen,
  Layers,
  FileSignature,
  GraduationCap,
  School,
  ShoppingBag,
  FlaskConical,
  ArrowRight,
  Award,
  Stethoscope,
  Code2,
  Sparkles,
  Microscope,
  BookMarked,
  Building2,
  MapPin,
  Mail,
  ExternalLink,
} from "lucide-react";
import { Container } from "@/components/Container";
import { Button } from "@/components/Button";
import { FounderAvatar } from "@/components/FounderAvatar";
import { products } from "@/lib/site-config";
import { getViewer } from "@/lib/auth/viewer";

export const metadata: Metadata = {
  title: "About",
  description:
    "OrthoGlobe is an international orthopaedic charity collaboration founded by Prof Mohamed A. Imam and Dr Atef A. Hassan, building open tools, atlases, and education with practising surgeons worldwide.",
};

const productIcons: Record<string, React.ComponentType<{ className?: string }>> = {
  atlas: Layers,
  consentiq: FileSignature,
  orthoprep: GraduationCap,
  academy: School,
  store: ShoppingBag,
  research: FlaskConical,
};

const missionBullets = [
  {
    icon: Globe,
    title: "Global in reach",
    body: "Contributors and members span continents, health systems, and training traditions.",
  },
  {
    icon: Users,
    title: "Surgeon-led",
    body: "Every product is shaped and reviewed by practising orthopaedic surgeons and researchers.",
  },
  {
    icon: BookOpen,
    title: "Open to members",
    body: "Membership is free, individually vetted, and unlocks the full collaborative toolset.",
  },
];

type Founder = {
  id: "imam" | "atef";
  name: string;
  title: string;
  roleTags: string[];
  lede: string;
  bio: string[];
  photo?: string;
  initials: string;
  tone: "blue" | "ink";
  facts: { Icon: typeof Award; label: string; value: string }[];
  expertise: string[];
  links: { label: string; href: string; Icon: typeof Mail }[];
};

const founders: Founder[] = [
  {
    id: "imam",
    name: "Prof Mohamed A. Imam",
    title: "Founder & Owner · Clinical Lead",
    roleTags: ["Consultant Shoulder Surgeon", "Professor", "MD · PhD · FRCS"],
    lede:
      "Founder of OrthoGlobe and the clinical voice behind every surgeon-facing product we ship.",
    bio: [
      "Prof Mohamed A. Imam is a Consultant Shoulder & Complex Upper Limb Trauma Surgeon at the Rowley Bristow Orthopaedic Centre (Ashford & St Peter's NHS Foundation Trust) and Professor of Digital Health & Surgical Innovation at the University of East London.",
      "He holds an MD in shoulder biomechanics and a PhD in regenerative orthopaedics, is a Fellow of the Royal College of Surgeons (FRCS Tr & Orth), and has authored more than 150 peer-reviewed publications across shoulder surgery, digital health, and AI-assisted education.",
      "Recognised as a SICOT Pioneer in 2025, Prof Imam leads OrthoGlobe's clinical direction and authored the 1,575-SBA OrthoPrep FRCS question bank that anchors the Academy curriculum. He owns the clinical quality bar across Atlas, ConsentIQ, and the Research portal.",
    ],
    photo: "/photos/team/imam.jpg",
    initials: "MI",
    tone: "blue",
    facts: [
      { Icon: Building2, label: "Affiliation", value: "Ashford & St Peter's NHS FT" },
      { Icon: School, label: "University", value: "University of East London" },
      { Icon: Award, label: "Honour", value: "SICOT Pioneer 2025" },
      { Icon: BookMarked, label: "Publications", value: "150+ peer-reviewed" },
    ],
    expertise: [
      "Shoulder & upper limb surgery",
      "Regenerative orthopaedics",
      "Surgical education",
      "Digital health",
      "AI-assisted learning",
      "Clinical research design",
    ],
    links: [
      {
        label: "ORCID",
        href: "https://orcid.org/0000-0001-8972-1348",
        Icon: ExternalLink,
      },
      { label: "Contact", href: "mailto:imam@orthoglobe.org", Icon: Mail },
    ],
  },
  {
    id: "atef",
    name: "Dr Atef A. Hassan",
    title: "Chief Operating Officer · Co-Founder",
    roleTags: ["COO", "Platform & Product", "Operations"],
    lede:
      "COO of OrthoGlobe. Owns the engineering, product, and operational infrastructure that carries the collaboration.",
    bio: [
      "Dr Atef A. Hassan is the Chief Operating Officer and co-founder of OrthoGlobe. He leads platform engineering, product design, and day-to-day operations across the collaboration — building the technical infrastructure that carries OrthoPrep, ConsentIQ, Atlas, Academy, Store, and the Research portal from clinical specification into a production platform used by surgeons worldwide.",
      "His focus is the quiet work that lets a surgeon-authored initiative ship reliably: a resilient membership system, fast and accessible pages across all six OrthoGlobe initiatives, honest performance on low-bandwidth networks, and the operational discipline that keeps a small team moving without breaking the clinical content above it.",
      "Dr Hassan works in close partnership with Prof Imam to translate the clinical vision into tools members can trust — and to compound those tools into durable infrastructure for the orthopaedic field.",
    ],
    photo: "/photos/team/atef.jpg",
    initials: "AH",
    tone: "ink",
    facts: [
      { Icon: Code2, label: "Discipline", value: "Platform & product engineering" },
      { Icon: Sparkles, label: "Focus", value: "Design systems & operations" },
      { Icon: Globe, label: "Reach", value: "Worldwide membership" },
      { Icon: MapPin, label: "Based", value: "United Kingdom" },
    ],
    expertise: [
      "Full-stack engineering",
      "Product design",
      "Design systems",
      "Operations",
      "Membership infrastructure",
      "Accessibility & performance",
    ],
    links: [
      {
        label: "Email",
        href: "mailto:atef.Hassan@orthoglobe.org",
        Icon: Mail,
      },
    ],
  },
];

export default async function AboutPage() {
  const viewer = await getViewer();
  const signedIn = viewer.signedIn;
  return (
    <>
      {/* Hero */}
      <section className="relative overflow-hidden bg-white pt-10 md:pt-16 pb-10">
        <div
          aria-hidden
          className="pointer-events-none absolute inset-x-0 top-0 h-[420px] bg-[radial-gradient(ellipse_at_top,rgba(30,64,255,0.08),transparent_60%)]"
        />
        <Container className="relative">
          <div className="text-[11px] font-bold uppercase tracking-[0.18em] text-[var(--color-blue)]">
            About OrthoGlobe
          </div>
          <h1 className="mt-3 max-w-4xl font-display text-[40px] md:text-[60px] font-extrabold leading-[1.02] tracking-[-0.028em] text-[var(--color-ink)]">
            An international orthopaedic charity collaboration.
          </h1>
          <p className="mt-6 max-w-3xl text-[18px] md:text-[21px] leading-relaxed text-[var(--color-slate)]">
            Founded by <strong className="font-semibold text-[var(--color-ink)]">Prof Mohamed A. Imam</strong> and <strong className="font-semibold text-[var(--color-ink)]">Dr Atef A. Hassan</strong>, OrthoGlobe brings
            practising surgeons, trainees, and researchers together to build the tools,
            atlases, and education the field has been missing.
          </p>
          <div className="mt-8 flex flex-wrap items-center gap-3">
            {signedIn ? (
              <Button href="/team">Meet the full team</Button>
            ) : (
              <>
                <Button href="/join">Apply for membership</Button>
                <Button href="/team" variant="ghost">
                  Meet the full team
                </Button>
              </>
            )}
          </div>
        </Container>
      </section>

      {/* Mission */}
      <section className="bg-white py-12 md:py-16">
        <Container>
          <div className="grid gap-10 md:grid-cols-2 md:items-start md:gap-14">
            <div>
              <div className="text-[11px] font-bold uppercase tracking-[0.18em] text-[var(--color-blue)]">
                Our mission
              </div>
              <h2 className="mt-3 font-display text-[30px] md:text-[40px] font-extrabold leading-tight tracking-[-0.02em] text-[var(--color-ink)]">
                Build the orthopaedic infrastructure the field is still missing.
              </h2>
              <p className="mt-5 text-[17px] leading-relaxed text-[var(--color-slate)]">
                We exist to make high-quality orthopaedic knowledge, exam preparation, consent
                tooling, and clinical atlases freely available to surgeons everywhere. The
                collaborative is built and reviewed by the people who will use it.
              </p>

              <ul className="mt-8 space-y-5">
                {missionBullets.map(({ icon: Icon, title, body }) => (
                  <li key={title} className="flex items-start gap-4">
                    <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-bold tracking-tight text-[var(--color-ink)]">
                        {title}
                      </div>
                      <p className="mt-1 text-[15px] leading-relaxed text-[var(--color-slate)]">
                        {body}
                      </p>
                    </div>
                  </li>
                ))}
              </ul>
            </div>

            <figure className="overflow-hidden rounded-2xl border border-[var(--color-line)] bg-[var(--color-mist)] shadow-[0_24px_56px_rgba(10,14,40,0.08)]">
              <div className="relative aspect-[4/5] w-full md:aspect-[4/4]">
                <Image
                  src="/photos/surgery/burundian-surgeons-or.jpg"
                  alt="Orthopaedic surgeons collaborating in the OR"
                  fill
                  sizes="(min-width: 768px) 520px, 100vw"
                  className="object-cover"
                />
              </div>
              <figcaption className="border-t border-[var(--color-line)] bg-white px-5 py-3 text-[13px] text-[var(--color-slate)]">
                Orthopaedic surgeons collaborating in the OR
              </figcaption>
            </figure>
          </div>
        </Container>
      </section>

      {/* What we build */}
      <section className="bg-[var(--color-mist)]/50 py-12 md:py-16">
        <Container>
          <div className="max-w-2xl">
            <div className="text-[11px] font-bold uppercase tracking-[0.18em] text-[var(--color-blue)]">
              What we build
            </div>
            <h2 className="mt-3 font-display text-[30px] md:text-[40px] font-extrabold leading-tight tracking-[-0.02em] text-[var(--color-ink)]">
              Six products, one collaborative.
            </h2>
            <p className="mt-4 text-[17px] leading-relaxed text-[var(--color-slate)]">
              OrthoGlobe is an umbrella for surgeon-facing tools across atlas, consent, exam prep,
              education, supply, and research.
            </p>
          </div>

          <div className="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {products.map((p) => {
              const Icon = productIcons[p.slug] ?? Layers;
              return (
                <Link
                  key={p.slug}
                  href={p.href}
                  className="group flex flex-col rounded-2xl border border-[var(--color-line)] bg-white p-6 transition-all duration-200 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)] group-hover:bg-[var(--color-blue)] group-hover:text-white transition-colors">
                    <Icon className="h-5 w-5" />
                  </span>
                  <div className="mt-5 font-display text-[18px] font-extrabold tracking-tight text-[var(--color-ink)]">
                    {p.name}
                  </div>
                  <p className="mt-2 flex-1 text-[14px] leading-relaxed text-[var(--color-slate)]">
                    {p.tagline}
                  </p>
                  <div className="mt-5 inline-flex items-center gap-1.5 text-[13px] font-semibold text-[var(--color-blue)]">
                    Explore
                    <ArrowRight className="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" />
                  </div>
                </Link>
              );
            })}
          </div>
        </Container>
      </section>

      {/* Leadership */}
      <section className="relative bg-white py-14 md:py-20">
        <Container>
          <div className="max-w-3xl">
            <div className="text-[11px] font-bold uppercase tracking-[0.18em] text-[var(--color-blue)]">
              Leadership
            </div>
            <h2 className="mt-3 font-display text-[32px] md:text-[44px] font-extrabold leading-[1.05] tracking-[-0.025em] text-[var(--color-ink)]">
              The two surgeons behind OrthoGlobe.
            </h2>
            <p className="mt-5 text-[17px] leading-relaxed text-[var(--color-slate)]">
              OrthoGlobe is founded and owned by Prof Mohamed A. Imam, and operated day-to-day by Dr Atef A. Hassan as Chief Operating Officer. Together they set clinical direction, ship product, and keep the collaboration honest to its members.
            </p>
          </div>

          <div className="mt-12 flex flex-col gap-10 md:gap-14">
            {founders.map((f, idx) => (
              <article
                key={f.id}
                className="grid gap-8 rounded-3xl border border-[var(--color-line)] bg-white p-6 shadow-[0_24px_56px_rgba(10,14,40,0.06)] md:p-10 lg:grid-cols-[320px_minmax(0,1fr)] lg:items-start"
                style={{ containerType: "inline-size" }}
              >
                <div className="relative">
                  <FounderAvatar
                    photo={f.photo}
                    name={f.name}
                    initials={f.initials}
                    tone={f.tone}
                    className="w-full"
                  />
                  <div className="mt-4 flex flex-wrap gap-1.5">
                    {f.roleTags.map((tag) => (
                      <span
                        key={tag}
                        className="inline-flex items-center rounded-full bg-[var(--color-mist)] px-2.5 py-1 text-[11px] font-bold uppercase tracking-[0.1em] text-[var(--color-blue)]"
                      >
                        {tag}
                      </span>
                    ))}
                  </div>
                </div>

                <div className="flex min-w-0 flex-col gap-5">
                  <div>
                    <div className="flex items-center gap-2 text-[11px] font-bold uppercase tracking-[0.18em] text-[var(--color-slate)]">
                      <span>#{String(idx + 1).padStart(2, "0")}</span>
                      <span className="inline-block h-px flex-1 bg-[var(--color-line)]" />
                      <span className="text-[var(--color-blue)]">{f.title}</span>
                    </div>
                    <h3 className="mt-3 font-display text-[28px] md:text-[34px] font-extrabold leading-tight tracking-[-0.02em] text-[var(--color-ink)]">
                      {f.name}
                    </h3>
                    <p className="mt-3 text-[17px] leading-relaxed text-[var(--color-ink)]">
                      {f.lede}
                    </p>
                  </div>

                  <div className="space-y-4 text-[15px] leading-relaxed text-[var(--color-slate)]">
                    {f.bio.map((para, i) => (
                      <p key={i}>{para}</p>
                    ))}
                  </div>

                  <dl className="grid grid-cols-2 gap-3 pt-2 sm:grid-cols-4">
                    {f.facts.map((fact) => (
                      <div
                        key={fact.label}
                        className="rounded-xl border border-[var(--color-line)] bg-[var(--color-line)]/25 p-3"
                      >
                        <dt className="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-[0.12em] text-[var(--color-slate)]">
                          <fact.Icon className="h-3.5 w-3.5 text-[var(--color-blue)]" aria-hidden />
                          {fact.label}
                        </dt>
                        <dd className="mt-1.5 text-[13px] font-semibold leading-snug text-[var(--color-ink)]">
                          {fact.value}
                        </dd>
                      </div>
                    ))}
                  </dl>

                  <div className="pt-2">
                    <div className="text-[11px] font-bold uppercase tracking-[0.15em] text-[var(--color-slate)]">
                      Expertise
                    </div>
                    <div className="mt-3 flex flex-wrap gap-1.5">
                      {f.expertise.map((e) => (
                        <span
                          key={e}
                          className="inline-flex items-center gap-1 rounded-full border border-[var(--color-line)] bg-white px-2.5 py-1 text-[12px] font-medium text-[var(--color-ink)]"
                        >
                          <Microscope className="h-3 w-3 text-[var(--color-blue)]" aria-hidden />
                          {e}
                        </span>
                      ))}
                    </div>
                  </div>

                  {f.links.length > 0 && (
                    <div className="flex flex-wrap gap-2 pt-3">
                      {f.links.map((link) => (
                        <a
                          key={link.label}
                          href={link.href}
                          target={link.href.startsWith("http") ? "_blank" : undefined}
                          rel={link.href.startsWith("http") ? "noreferrer noopener" : undefined}
                          className="inline-flex items-center gap-1.5 rounded-lg border border-[var(--color-line)] bg-white px-3 py-1.5 text-[13px] font-semibold text-[var(--color-ink)] transition-colors hover:border-[var(--color-blue)] hover:text-[var(--color-blue)]"
                        >
                          <link.Icon className="h-3.5 w-3.5" aria-hidden />
                          {link.label}
                        </a>
                      ))}
                    </div>
                  )}
                </div>
              </article>
            ))}
          </div>

          <aside className="mt-12 flex flex-wrap items-center justify-between gap-4 rounded-2xl border border-[var(--color-line)] bg-[var(--color-mist)]/40 p-5">
            <div className="flex items-center gap-3">
              <span className="flex h-10 w-10 items-center justify-center rounded-lg bg-white text-[var(--color-blue)]">
                <Stethoscope className="h-5 w-5" aria-hidden />
              </span>
              <div>
                <div className="font-display text-[16px] font-extrabold text-[var(--color-ink)]">
                  Steering committee of 19 surgeons
                </div>
                <div className="text-[13px] text-[var(--color-slate)]">
                  International orthopaedic surgeons and researchers guiding OrthoGlobe's direction.
                </div>
              </div>
            </div>
            <Link
              href="/team"
              className="inline-flex items-center gap-1 text-[13px] font-semibold text-[var(--color-blue)] hover:underline"
            >
              Meet the full team <ArrowRight className="h-3.5 w-3.5" aria-hidden />
            </Link>
          </aside>
        </Container>
      </section>

      {/* Collaborative impact */}
      <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-[0.18em] text-[var(--color-blue)]">
              Collaborative impact
            </div>
            <h2 className="mt-3 font-display text-[30px] md:text-[40px] font-extrabold leading-tight tracking-[-0.02em] text-[var(--color-ink)]">
              The collaboration in numbers.
            </h2>
          </div>

          <dl className="mt-10 grid gap-4 sm:grid-cols-3">
            {[
              { stat: "6", label: "OrthoGlobe initiatives" },
              { stat: "1,575", label: "FRCS SBA questions" },
              { stat: "321", label: "ConsentIQ leaflets" },
            ].map((item) => (
              <div
                key={item.label}
                className="rounded-2xl border border-[var(--color-line)] bg-white p-8"
              >
                <dt className="font-display text-[48px] md:text-[56px] font-extrabold leading-none tracking-[-0.03em] text-[var(--color-blue)]">
                  {item.stat}
                </dt>
                <dd className="mt-3 text-[14px] font-semibold uppercase tracking-wider text-[var(--color-slate)]">
                  {item.label}
                </dd>
              </div>
            ))}
          </dl>
        </Container>
      </section>

      {/* Membership CTA */}
      <section className="bg-white py-12 md:py-16">
        <Container>
          <div className="relative overflow-hidden rounded-2xl border border-[var(--color-line)] shadow-[0_24px_64px_rgba(10,14,40,0.12)]">
            <Image
              src="/photos/global-health/idf-nairobi.jpg"
              alt="International medical team in Nairobi"
              fill
              sizes="(min-width: 1024px) 1024px, 100vw"
              className="object-cover"
            />
            <div className="absolute inset-0 bg-[linear-gradient(to_right,rgba(5,8,30,0.85),rgba(5,8,30,0.55))]" />
            <div className="absolute inset-0 bg-[linear-gradient(to_top,rgba(30,64,255,0.35),transparent_60%)]" />
            <div className="relative px-6 py-14 md:px-14 md:py-20">
              <div className="max-w-2xl">
                <div className="text-[11px] font-bold uppercase tracking-[0.18em] text-white/80">
                  Membership
                </div>
                <h2 className="mt-3 font-display text-[30px] md:text-[42px] font-extrabold leading-tight tracking-[-0.02em] text-white">
                  Membership is reviewed individually.
                </h2>
                <p className="mt-5 text-[17px] leading-relaxed text-white/85">
                  Every application is read by Prof Imam or Dr Hassan. We target a 72-hour
                  turnaround and welcome consultants, registrars, trainees, researchers, and senior
                  medical students working in orthopaedic surgery.
                </p>
                {!signedIn && (
                  <div className="mt-8">
                    <Button href="/join" variant="on-blue">
                      Apply for membership
                    </Button>
                  </div>
                )}
              </div>
            </div>
          </div>
        </Container>
      </section>
    </>
  );
}
