import { createFileRoute } from "@tanstack/react-router";
import { PageHero } from "@/components/site/PageHero";
import { nursingGroup, teamGroups, traineeGroups, type TeamGroup } from "@/lib/site-data";

export const Route = createFileRoute("/team")({
  head: () => ({
    meta: [
      { title: "Our Team — Ward 8 Gynaecology & Obstetrics, JPMC" },
      {
        name: "description",
        content:
          "Consultants, postgraduate trainees, nursing staff and support professionals of Ward 8, Department of Gynaecology & Obstetrics, JPMC Karachi.",
      },
      { property: "og:title", content: "The Team Behind Your Care — Ward 8, JPMC" },
      {
        property: "og:description",
        content: "Meet the consultants, trainees and nurses caring for women at Ward 8, JPMC.",
      },
    ],
  }),
  component: TeamPage,
});

const accentBar: Record<string, string> = {
  navy: "bg-navy",
  teal: "bg-teal",
  gold: "bg-gold",
  slate: "bg-navy/40",
};

const accentAvatar: Record<string, string> = {
  navy: "bg-navy text-white",
  teal: "bg-teal text-white",
  gold: "bg-gold text-navy-deep",
  slate: "bg-navy/40 text-white",
};

function GroupBlock({ group }: { group: TeamGroup }) {
  return (
    <div>
      <div className="flex items-center gap-3">
        <span className={`h-6 w-1.5 rounded-full ${accentBar[group.accent]}`} />
        <h2 className="font-display text-xl font-bold text-navy">{group.title}</h2>
      </div>
      {group.intro ? (
        <p className="mt-4 max-w-3xl text-sm leading-relaxed text-muted-foreground">
          {group.intro}
        </p>
      ) : null}
      <div className="mt-6 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
        {group.members.map((m, i) => (
          <div
            key={`${m.name ?? m.role}-${i}`}
            className="rounded-xl border border-border bg-card p-7 text-center"
          >
            {m.photo ? (
              <img
                src={m.photo}
                alt={m.name ?? m.role}
                loading="lazy"
                className="mx-auto size-20 rounded-full object-cover"
              />
            ) : (
              <span
                className={`mx-auto grid size-14 place-items-center rounded-full text-sm font-semibold ${accentAvatar[group.accent]}`}
              >
                {m.initials}
              </span>
            )}
            <h3 className="mt-4 font-display text-sm font-bold text-navy">{m.name ?? m.role}</h3>
            {m.name ? <p className="mt-1.5 text-sm text-teal">{m.role}</p> : null}
            <p className="mt-1.5 text-sm text-muted-foreground">{m.detail}</p>
            {m.quals?.length ? (
              <p className="mt-2 text-xs font-semibold tracking-wide text-navy/70 uppercase">
                {m.quals.join(" · ")}
              </p>
            ) : null}
          </div>
        ))}
      </div>
    </div>
  );
}

function TeamPage() {
  return (
    <main id="main-content">
      <PageHero
        eyebrow="Our People"
        title="The Team Behind Your Care"
        intro="Ward 8 is staffed by dedicated consultants, trainees, nurses, and support professionals committed to safe, compassionate care around the clock."
      />

      <section className="py-16 sm:py-20">
        <div className="mx-auto max-w-7xl space-y-14 px-4 sm:px-6">
          {teamGroups.map((g) => (
            <GroupBlock key={g.title} group={g} />
          ))}

          <div className="space-y-10">
            <h2 className="font-display text-2xl font-bold text-navy">
              Clinical Trainees &amp; Students
            </h2>
            {traineeGroups.map((g) => (
              <GroupBlock key={g.title} group={g} />
            ))}
          </div>

          <GroupBlock group={nursingGroup} />

          <p className="rounded-xl border border-border bg-muted p-6 text-sm leading-relaxed text-muted-foreground">
            Team composition and personnel details are indicative. For verified clinical
            appointments, enquiries, or referrals, please contact the ward directly via the
            information on our Contact page.
          </p>
        </div>
      </section>
    </main>
  );
}