/* BookNow — embeds the clinic's online booking system in-site so patients
   never leave tamarackclinic.ca to schedule a visit. */
function BookNow() {
  const TM = window.TamarackMedicalDesignSystem_c56b47;

  return (
    <div>
      {/* Hero — parchment */}
      <TM.Tile
        variant="parchment"
        eyebrow="Book a visit"
        headline="Book your appointment now."
        tagline="Pick a time that works for you — the form below books directly into our clinic's schedule."
        align="left"
      />

      {/* Booking widget — white */}
      <section style={{ background: "var(--color-canvas)", padding: "0 var(--space-lg) var(--space-section)" }}>
        <div style={{ maxWidth: "var(--container-grid)", margin: "0 auto" }}>
          <iframe
            title="Tamarack Medical Clinic online booking"
            src="https://cloud.healthquest.ca:45290/onlinebooking"
            width="100%"
            height="800"
            style={{ border: 0, display: "block", width: "100%", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-product)" }}
            allowFullScreen
          />
          <p style={{ fontFamily: "var(--font-text)", fontSize: 14, letterSpacing: "-0.2px", color: "var(--color-ink-muted-48)", textAlign: "center", margin: "16px 0 0" }}>
            Having trouble with the form above? Call us at (780) 244-2873 and we'll book you in directly.
          </p>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { BookNow });