/* Home — the public clinic homepage, rebuilt from the real Tamarack site:
   community hero → intro → Our Services → hours → languages → doctors → CTA. */
function Home({ onNav, onBook }) {
  const TM = window.TamarackMedicalDesignSystem_c56b47;
  const Photo = window.TMPhoto;
  const { TMIcons, FactStrip, HoursOfOperation } = window;

  const services = [
    { Icon: TMIcons.heart, h: "Private Medical Care", p: "Offering primary care services at private cost to patients who do not have medical coverage." },
    { Icon: TMIcons.users, h: "Refugee Health", p: "Offering 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 quickLinks = [
    { label: "About us", to: () => onNav("about") },
    { label: "Our doctors", to: () => onNav("specialties") },
    { label: "Quick appointment", to: onBook },
    { label: "Contact us", to: () => onNav("contact") },
  ];

  const doctors = [
    { name: "Dr. Alaba", meta: "Family Physician · Female Care · MBChB, CCFP, MRCGP", tint: "#e8eef5", img: "/ui_kits/marketing/assets/dr-alaba.jpg" },
    { name: "Dr. Akram", meta: "Family Physician · हिंदी · ਪੰਜਾਬੀ · MD, CCFP, MRCGP, MSc", tint: "#e9efe9", img: "/ui_kits/marketing/assets/dr-akram.png" },
  ];

  return (
    <div>
      {/* Hero — light */}
      <TM.Tile
        variant="light"
        eyebrow="Tamarack Medical Clinic"
        headline={<>Your <span style={{ color: "var(--color-azure)" }}>community's</span> own medical clinic.</>}
        tagline="We offer medical services covered by Alberta Health, plus private medical care, refugee health and WCB injuries."
        align="left"
        actions={<>
          <TM.Button variant="primary" onClick={onBook}>Book now</TM.Button>
          <TM.Button variant="secondary" onClick={() => onNav("contact")}>Contact us</TM.Button>
        </>}
      >
        <div className="tmc-photo-frame" style={{ width: "min(960px, 100%)", marginTop: 20, borderRadius: "var(--radius-lg)" }}>
          <img src="/ui_kits/marketing/assets/clinic-building.png" alt="Tamarack Medical Clinic & Pharmacy building" style={{ width: "100%", height: 420, objectFit: "cover", objectPosition: "center", borderRadius: "var(--radius-lg)", display: "block", boxShadow: "var(--shadow-product)" }} />
        </div>
      </TM.Tile>

      {/* Intro — parchment */}
      <section style={{ background: "var(--color-canvas-parchment)", padding: "var(--space-section) var(--space-lg)" }}>
        <div style={{ maxWidth: "var(--container-text)", margin: "0 auto", textAlign: "center" }}>
          <p style={{ fontFamily: "var(--font-display)", fontSize: 28, lineHeight: 1.4, fontWeight: 600, letterSpacing: "-0.5px", color: "var(--color-navy)", margin: 0 }}>
            Thank you for visiting <span style={{ color: "var(--color-azure)" }}>Tamarack Medical Clinic</span>, where we offer comprehensive, compassionate primary care to our patients.
          </p>
          <div style={{ display: "flex", justifyContent: "center", flexWrap: "wrap", gap: 28, marginTop: 32 }}>
            {quickLinks.map((q, i) => (
              <React.Fragment key={q.label}>
                {i > 0 && <span style={{ color: "var(--color-green)" }}>•</span>}
                <a href="#" onClick={(e) => { e.preventDefault(); q.to(); }} style={{ fontFamily: "var(--font-text)", fontSize: 17, fontWeight: 600, letterSpacing: "-0.3px", color: "var(--color-navy)" }}>{q.label}</a>
              </React.Fragment>
            ))}
          </div>
        </div>
      </section>

      {/* Our Services — 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)" }}>
            {services.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 style={{ marginTop: 40, display: "flex", justifyContent: "center" }}>
            <TM.Button variant="secondary" onClick={() => onNav("services")}>View all services</TM.Button>
          </div>
        </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>

      {/* Hours — white */}
      <HoursOfOperation variant="white" />

      {/* 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>

      {/* Doctors preview — parchment */}
      <section style={{ background: "var(--color-canvas-parchment)", padding: "var(--space-section) var(--space-lg)" }}>
        <div style={{ maxWidth: "var(--container-grid)", margin: "0 auto" }}>
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 32, flexWrap: "wrap", gap: 12 }}>
            <h2 style={{ fontFamily: "var(--font-display)", fontSize: "var(--type-display-md-size)", fontWeight: 600, letterSpacing: "-0.374px", margin: 0, color: "var(--color-navy)" }}>Meet our doctors</h2>
            <TM.TextLink href="#" withChevron onClick={(e) => { e.preventDefault(); onNav("specialties"); }}>See all physicians</TM.TextLink>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "var(--gutter-grid)", maxWidth: 760 }}>
            {doctors.map((p) => (
              <TM.ServiceCard key={p.name} title={p.name} meta={p.meta} linkLabel="Book" href="#" onClick={onBook}
                image={<img src={p.img} alt={`${p.name} portrait`} style={{ width: "100%", height: 320, objectFit: "cover", objectPosition: "center 10%", display: "block" }} />} />
            ))}
          </div>
        </div>
      </section>

      {/* Closing CTA — navy */}
      <TM.Tile
        variant="dark"
        eyebrow="Need medical advice? Don't worry."
        headline="Contact us for the best care."
        tagline="Walk in, call, or book online — our team is here for you and your family."
        actions={<>
          <TM.Button variant="primary" onClick={onBook}>Get treatment</TM.Button>
          <TM.TextLink href="#" onDark withChevron onClick={(e) => { e.preventDefault(); onNav("contact"); }}>Contact the clinic</TM.TextLink>
        </>}
      />
    </div>
  );
}

Object.assign(window, { Home });