/* Services — the clinic's offerings: Alberta Health primary care plus the
   three specialty services (private care, refugee health, WCB) and more. */
function Services({ onNav, onBook }) {
  const TM = window.TamarackMedicalDesignSystem_c56b47;
  const Photo = window.TMPhoto;
  const { TMIcons, SectionHead } = window;

  const featured = [
    { Icon: TMIcons.heart, h: "Private Medical Care", p: "Primary care services at a private cost for patients who do not have medical coverage." },
    { Icon: TMIcons.users, h: "Refugee Health", p: "Comprehensive primary care for the health of our refugee population." },
    { Icon: TMIcons.shield, h: "WCB Injuries", p: "Helping workers recover from injuries sustained at work." },
  ];

  const services = [
    { Icon: TMIcons.stethoscope, h: "Family medicine & physicals", p: "Annual check-ups, screening, and primary care for every age — covered by Alberta Health." },
    { Icon: TMIcons.walk, h: "Walk-in & same-day visits", p: "Coughs, colds, infections, minor injuries — seen without an appointment." },
    { Icon: TMIcons.heart, h: "Women's health", p: "Pap tests, contraception, menstrual and menopausal care with Dr. Alaba." },
    { Icon: TMIcons.shield, h: "Chronic disease management", p: "Diabetes, blood pressure, cholesterol and thyroid — steady, coordinated plans." },
    { Icon: TMIcons.syringe, h: "Immunizations & travel", p: "Routine vaccines, flu shots, and pre-travel immunization advice." },
    { Icon: TMIcons.calendar, h: "Prescriptions & renewals", p: "New prescriptions and refills — with an on-site pharmacy to fill them." },
    { Icon: TMIcons.baby, h: "Prenatal & pediatric care", p: "Well-baby visits, childhood check-ups, and prenatal support." },
    { Icon: TMIcons.check, h: "Forms, notes & referrals", p: "Sick notes, insurance and disability forms, and specialist referrals." },
  ];

  const steps = [
    { n: "1", h: "Book or walk in", p: "Reserve a time online or just stop by during clinic hours." },
    { n: "2", h: "See your doctor", p: "An unhurried visit with a physician who reviews your full history." },
    { n: "3", h: "Leave with a plan", p: "Clear next steps, prescriptions, labs or referrals — handled on the spot." },
  ];

  return (
    <div>
      {/* Hero — navy */}
      <TM.Tile
        variant="dark"
        eyebrow="Services"
        headline="Everything your family needs, under one roof."
        tagline="Primary care covered by Alberta Health, plus private medical care, refugee health and WCB injuries — from routine check-ups to the unexpected."
        align="left"
        actions={<>
          <TM.Button variant="primary" onClick={onBook}>Book a visit</TM.Button>
          <TM.TextLink href="#" onDark withChevron onClick={(e) => { e.preventDefault(); onNav("specialties"); }}>Meet our doctors</TM.TextLink>
        </>}
      />

      {/* Featured three — white */}
      <section style={{ background: "var(--color-canvas)", padding: "var(--space-section) var(--space-lg)" }}>
        <div style={{ maxWidth: "var(--container-grid)", margin: "0 auto" }}>
          <div style={{ textAlign: "center", marginBottom: 48 }}>
            <h2 style={{ fontFamily: "var(--font-display)", fontSize: "var(--type-display-md-size)", fontWeight: 600, letterSpacing: "-0.374px", margin: 0, color: "var(--color-navy)" }}>Our Services</h2>
            <p style={{ fontFamily: "var(--font-text)", fontSize: 18, letterSpacing: "-0.3px", color: "var(--color-ink-muted-80)", margin: "12px auto 0", maxWidth: "52ch" }}>We also offer medical services including private medical care, refugee health and WCB injuries.</p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "var(--gutter-grid)" }}>
            {featured.map(({ Icon, h, p }) => (
              <div key={h} style={{ background: "var(--color-canvas)", border: "1px solid var(--color-hairline)", borderRadius: "var(--radius-lg)", padding: "var(--space-xl)", textAlign: "center" }}>
                <span style={{ display: "inline-flex", width: 64, height: 64, borderRadius: "50%", background: "var(--color-canvas-parchment)", color: "var(--color-green)", alignItems: "center", justifyContent: "center", marginBottom: 20 }}><Icon size={30} /></span>
                <h3 style={{ fontFamily: "var(--font-text)", fontSize: 21, fontWeight: 600, letterSpacing: "-0.374px", margin: 0, color: "var(--color-navy)" }}>{h}</h3>
                <p style={{ fontFamily: "var(--font-text)", fontSize: 16, lineHeight: 1.55, letterSpacing: "-0.3px", color: "var(--color-ink-muted-80)", margin: "10px 0 0" }}>{p}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Full list — parchment */}
      <section style={{ background: "var(--color-canvas-parchment)", padding: "var(--space-section) var(--space-lg)" }}>
        <div style={{ maxWidth: "var(--container-grid)", margin: "0 auto" }}>
          <SectionHead eyebrow="Everyday care" title="Care for the routine and the unexpected." style={{ marginBottom: 48 }} />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "var(--gutter-grid)" }}>
            {services.map(({ Icon, h, p }) => (
              <div key={h} style={{ display: "flex", gap: 20, alignItems: "flex-start", padding: "var(--space-lg)", background: "var(--color-canvas)", border: "1px solid var(--color-hairline)", borderRadius: "var(--radius-lg)" }}>
                <span style={{ flex: "none", width: 52, height: 52, borderRadius: "var(--radius-md)", background: "var(--color-canvas-parchment)", color: "var(--color-green)", display: "flex", alignItems: "center", justifyContent: "center" }}><Icon size={26} /></span>
                <div>
                  <h3 style={{ fontFamily: "var(--font-text)", fontSize: 19, fontWeight: 600, letterSpacing: "-0.374px", margin: 0, color: "var(--color-navy)" }}>{h}</h3>
                  <p style={{ fontFamily: "var(--font-text)", fontSize: 16, lineHeight: 1.55, letterSpacing: "-0.3px", color: "var(--color-ink-muted-80)", margin: "8px 0 0" }}>{p}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* What to expect — white */}
      <section style={{ background: "var(--color-canvas)", padding: "var(--space-section) var(--space-lg)" }}>
        <div style={{ maxWidth: "var(--container-grid)", margin: "0 auto" }}>
          <SectionHead eyebrow="What to expect" title="Simple from start to finish." align="center" style={{ marginBottom: 48 }} />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "var(--gutter-grid)" }}>
            {steps.map((s) => (
              <div key={s.n} style={{ textAlign: "center" }}>
                <div style={{ width: 56, height: 56, margin: "0 auto 16px", borderRadius: "50%", background: "var(--color-green)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 700 }}>{s.n}</div>
                <h3 style={{ fontFamily: "var(--font-text)", fontSize: 19, fontWeight: 600, letterSpacing: "-0.374px", margin: 0, color: "var(--color-navy)" }}>{s.h}</h3>
                <p style={{ fontFamily: "var(--font-text)", fontSize: 16, lineHeight: 1.55, letterSpacing: "-0.3px", color: "var(--color-ink-muted-80)", margin: "8px auto 0", maxWidth: "30ch" }}>{s.p}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Closing CTA — parchment */}
      <TM.Tile
        variant="parchment"
        headline="Need to be seen?"
        tagline="Walk in during clinic hours, or book a time that works for you."
        actions={<>
          <TM.Button variant="primary" onClick={onBook}>Book a visit</TM.Button>
          <TM.Button variant="secondary" onClick={() => onNav("contact")}>Get directions</TM.Button>
        </>}
      />
    </div>
  );
}

Object.assign(window, { Services });