/* Specialties — our doctors and their areas of focus. */
function Specialties({ onNav, onBook }) {
  const TM = window.TamarackMedicalDesignSystem_c56b47;
  const Photo = window.TMPhoto;
  const { TMIcons, SectionHead } = window;

  const doctors = [
    {
      name: "Dr. Alaba",
      role: "Family Physician · Female Care",
      creds: "MBChB · CCFP · MRCGP",
      tint: "#e8eef5",
      img: "/ui_kits/marketing/assets/dr-alaba.jpg",
      langs: "English",
      focus: ["Women's health & Pap tests", "Contraception & family planning", "Menstrual & menopausal care", "Prenatal & newborn care"],
      bio: "Dr. Alaba provides comprehensive family medicine with a special focus on women's health, offering a comfortable, unhurried setting for sensitive conversations.",
    },
    {
      name: "Dr. Akram",
      role: "Family Physician",
      creds: "MD · CCFP · MRCGP · MSc",
      tint: "#e9efe9",
      img: "/ui_kits/marketing/assets/dr-akram.png",
      langs: "हिंदी · ਪੰਜਾਬੀ · Urdu · English",
      focus: ["Chronic disease management", "Diabetes & blood pressure", "Preventive & geriatric care", "Minor procedures"],
      bio: "Dr. Akram brings a broad family-medicine practice with deep experience in chronic-disease care, serving patients in Hindi, Punjabi, Urdu and English.",
    },
  ];

  const areas = [
    { Icon: TMIcons.stethoscope, h: "Family Medicine", p: "Primary care for every age — the foundation of everything we do." },
    { Icon: TMIcons.heart, h: "Women's Health", p: "Screening, contraception, and menstrual & menopausal care." },
    { Icon: TMIcons.shield, h: "Chronic Disease", p: "Diabetes, hypertension, cholesterol and thyroid management." },
    { Icon: TMIcons.baby, h: "Prenatal & Pediatric", p: "Well-baby visits, childhood check-ups, and prenatal support." },
  ];

  return (
    <div>
      {/* Hero — parchment */}
      <TM.Tile
        variant="parchment"
        eyebrow="Specialties"
        headline="Trusted doctors, real expertise."
        tagline="Two internationally trained family physicians, each with their own areas of focus — and a shared commitment to knowing you well."
        align="left"
        actions={<TM.Button variant="primary" onClick={onBook}>Book a visit</TM.Button>}
      />

      {/* Doctor profiles — white */}
      <section style={{ background: "var(--color-canvas)", padding: "var(--space-section) var(--space-lg)" }}>
        <div style={{ maxWidth: "var(--container-grid)", margin: "0 auto", display: "flex", flexDirection: "column", gap: "var(--space-xxl)" }}>
          {doctors.map((d, i) => (
            <div key={d.name} style={{ display: "grid", gridTemplateColumns: "360px 1fr", gap: "var(--space-section)", alignItems: "center", direction: i % 2 ? "rtl" : "ltr" }}>
              <div className="tmc-photo-frame" style={{ direction: "ltr", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-product)" }}>
                <img src={d.img} alt={`${d.name} portrait`} style={{ width: "100%", height: 480, objectFit: "cover", objectPosition: "center 10%", borderRadius: "var(--radius-lg)", display: "block" }} />
              </div>
              <div style={{ direction: "ltr" }}>
                <h2 style={{ fontFamily: "var(--font-display)", fontSize: "var(--type-display-md-size)", fontWeight: 600, letterSpacing: "-0.374px", margin: 0, color: "var(--color-navy)" }}>{d.name}</h2>
                <div style={{ fontFamily: "var(--font-text)", fontSize: 18, fontWeight: 600, letterSpacing: "-0.3px", color: "var(--color-green-deep)", marginTop: 6 }}>{d.role}</div>
                <div style={{ fontFamily: "var(--font-text)", fontSize: 14, letterSpacing: "0.2px", color: "var(--color-ink-muted-48)", marginTop: 4 }}>{d.creds}</div>
                <p style={{ fontFamily: "var(--font-text)", fontSize: 17, lineHeight: 1.6, letterSpacing: "-0.374px", color: "var(--color-ink-muted-80)", margin: "18px 0 0" }}>{d.bio}</p>
                <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 16, color: "var(--color-green)" }}>
                  <TMIcons.globe size={18} />
                  <span style={{ fontFamily: "var(--font-text)", fontSize: 15, letterSpacing: "-0.2px", color: "var(--color-ink-muted-80)" }}>{d.langs}</span>
                </div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "10px 20px", margin: "20px 0 24px" }}>
                  {d.focus.map((f) => (
                    <div key={f} style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
                      <span style={{ color: "var(--color-green)", flex: "none", marginTop: 2 }}><TMIcons.check size={18} /></span>
                      <span style={{ fontFamily: "var(--font-text)", fontSize: 15, lineHeight: 1.4, letterSpacing: "-0.2px", color: "var(--color-ink)" }}>{f}</span>
                    </div>
                  ))}
                </div>
                <TM.Button variant="primary" onClick={onBook}>Book with {d.name}</TM.Button>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Areas of care — navy */}
      <section style={{ background: "var(--color-surface-tile-1)", padding: "var(--space-section) var(--space-lg)" }}>
        <div style={{ maxWidth: "var(--container-grid)", margin: "0 auto" }}>
          <SectionHead eyebrow="Areas of care" title="Where our focus runs deep." onDark align="center" style={{ marginBottom: 48 }} />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "var(--gutter-grid)" }}>
            {areas.map(({ Icon, h, p }) => (
              <div key={h} style={{ background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.10)", borderRadius: "var(--radius-lg)", padding: "var(--space-xl)" }}>
                <span style={{ display: "inline-flex", width: 52, height: 52, borderRadius: "var(--radius-md)", background: "rgba(255,255,255,0.08)", color: "var(--color-green)", alignItems: "center", justifyContent: "center", marginBottom: 16 }}><Icon size={26} /></span>
                <h3 style={{ fontFamily: "var(--font-text)", fontSize: 19, fontWeight: 600, letterSpacing: "-0.374px", margin: 0, color: "var(--color-body-on-dark)" }}>{h}</h3>
                <p style={{ fontFamily: "var(--font-text)", fontSize: 15, lineHeight: 1.55, letterSpacing: "-0.2px", color: "var(--color-body-muted)", margin: "8px 0 0" }}>{p}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Closing CTA — parchment */}
      <TM.Tile
        variant="parchment"
        headline="Find the right doctor for you."
        tagline="New patients welcome. Book online, or call the clinic and we'll help you choose."
        actions={<>
          <TM.Button variant="primary" onClick={onBook}>Book a visit</TM.Button>
          <TM.Button variant="secondary" onClick={() => onNav("contact")}>Contact us</TM.Button>
        </>}
      />
    </div>
  );
}

Object.assign(window, { Specialties });