/* AboutUs — rebuilt from the real Tamarack About page: physician-owned family
   medicine, on-site pharmacy, Southside PCN affiliation, care for all ages. */
function AboutUs({ onNav, onBook }) {
  const TM = window.TamarackMedicalDesignSystem_c56b47;
  const Photo = window.TMPhoto;
  const { TMIcons, SectionHead, FactStrip } = window;

  const audiences = [
    { Icon: TMIcons.users, h: "Adults", p: "Everyday primary care, screening, and chronic-disease management." },
    { Icon: TMIcons.baby, h: "Children", p: "Well-baby visits, immunizations, and childhood check-ups." },
    { Icon: TMIcons.heart, h: "Elderly", p: "Compassionate, coordinated care for our senior patients." },
  ];

  const pcn = [
    "Nursing", "Home care", "Dietitians", "Behavioural health consultants",
    "Physiotherapists", "Patient educators", "Chronic disease managers",
  ];

  return (
    <div>
      {/* Hero — parchment */}
      <TM.Tile
        variant="parchment"
        eyebrow="About us"
        headline="A physician-owned family medicine clinic."
        tagline="We care for patients to promote their physical and mental well-being — with an on-site pharmacy, a provisional psychologist, and the multidisciplinary support of the Southside PCN."
        align="left"
        actions={<>
          <TM.Button variant="primary" onClick={onBook}>Book a visit</TM.Button>
          <TM.Button variant="secondary" onClick={() => onNav("specialties")}>Meet our doctors</TM.Button>
        </>}
      />

      {/* Story — white, two column */}
      <section style={{ background: "var(--color-canvas)", padding: "var(--space-section) var(--space-lg)" }}>
        <div style={{ maxWidth: "var(--container-grid)", margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-section)", alignItems: "center" }}>
          <div className="tmc-photo-frame" style={{ borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-product)" }}>
            <img src="/ui_kits/marketing/assets/clinic-building.png" alt="Tamarack Medical Clinic building" style={{ width: "100%", height: 420, objectFit: "cover", objectPosition: "center", borderRadius: "var(--radius-lg)", display: "block" }} />
          </div>
          <div>
            <SectionHead eyebrow="About Tamarack Clinic" title="We offer comprehensive, compassionate primary care." />
            <div style={{ fontFamily: "var(--font-text)", fontSize: 17, lineHeight: 1.6, letterSpacing: "-0.374px", color: "var(--color-ink-muted-80)", marginTop: 20, display: "flex", flexDirection: "column", gap: 16 }}>
              <p style={{ margin: 0 }}>We are a physician-owned and operated family medicine clinic that offers medical care to promote our patients' physical and mental well-being.</p>
              <p style={{ margin: 0 }}>Our team of qualified, Canadian-certified family physicians and Family Medicine MDs is competent and capable of providing care to all adults, children, and the elderly.</p>
              <p style={{ margin: 0 }}>We have an on-site pharmacy and a provisional psychologist, and we're affiliated with the Southside Primary Care Network — giving our patients access to a diverse array of multidisciplinary care.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Care for all ages — 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="Care for every age" title="Adults, children, and elderly." align="center" style={{ marginBottom: 48 }} />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "var(--gutter-grid)" }}>
            {audiences.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: 60, height: 60, borderRadius: "50%", background: "var(--color-canvas-parchment)", color: "var(--color-green)", alignItems: "center", justifyContent: "center", marginBottom: 18 }}><Icon size={28} /></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: "8px 0 0" }}>{p}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Southside PCN — white */}
      <section style={{ background: "var(--color-canvas)", padding: "var(--space-section) var(--space-lg)" }}>
        <div style={{ maxWidth: "var(--container-grid)", margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: "var(--space-section)", alignItems: "center" }}>
          <div>
            <SectionHead eyebrow="Primary Care Network" title="Affiliated with the Southside PCN." />
            <p style={{ fontFamily: "var(--font-text)", fontSize: 17, lineHeight: 1.6, letterSpacing: "-0.374px", color: "var(--color-ink-muted-80)", margin: "20px 0 24px" }}>
              The Southside Primary Care Network offers care from a range of multidisciplinary professions, so your treatment is coordinated across the team:
            </p>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "10px 20px", marginBottom: 24 }}>
              {pcn.map((item) => (
                <div key={item} style={{ display: "flex", gap: 10, alignItems: "center" }}>
                  <span style={{ color: "var(--color-green)", flex: "none" }}><TMIcons.check size={18} /></span>
                  <span style={{ fontFamily: "var(--font-text)", fontSize: 15, letterSpacing: "-0.2px", color: "var(--color-ink)" }}>{item}</span>
                </div>
              ))}
            </div>
            <TM.TextLink href="https://www.edmontonsouthsidepcn.ca/" withChevron>edmontonsouthsidepcn.ca</TM.TextLink>
          </div>
          <Photo label="Multidisciplinary care team" height={380} tint="#e9efe9" shadow />
        </div>
      </section>

      {/* Facts — parchment */}
      <section style={{ background: "var(--color-canvas-parchment)", padding: "var(--space-section) var(--space-lg)" }}>
        <div style={{ maxWidth: "var(--container-grid)", margin: "0 auto" }}>
          <FactStrip variant="light" />
        </div>
      </section>

      {/* Languages — navy */}
      <TM.Tile variant="dark3" headline="We speak your language.">
        <p style={{ fontFamily: "var(--font-text)", fontSize: "var(--type-lead-airy-size)", fontWeight: 300, lineHeight: 1.5, color: "var(--color-body-muted)", maxWidth: "32ch", margin: "8px auto 0" }}>
          ਅਸੀਂ ਤੁਹਾਡੀ ਭਾਸ਼ਾ ਬੋਲਦੇ ਹਾਂ · हम आपकी भाषा बोलते हैं · اردو · English. Punjabi, Hindi, Urdu and more.
        </p>
      </TM.Tile>

      {/* Closing CTA — parchment */}
      <TM.Tile
        variant="parchment"
        headline="Become a patient today."
        tagline="We're accepting new patients and welcome walk-ins. Book online or contact the clinic."
        actions={<>
          <TM.Button variant="primary" onClick={onBook}>Book a visit</TM.Button>
          <TM.Button variant="secondary" onClick={() => onNav("contact")}>Contact the clinic</TM.Button>
        </>}
      />
    </div>
  );
}

Object.assign(window, { AboutUs });