<turbo-stream action="replace" target="booking_container"><template><div id="booking_container" class="flex h-full min-w-0 flex-1 flex-col gap-5">
  <div class="max-h-full min-w-0 flex-1" id="clinic_cards" data-controller="clinics">
    <section class="mx-auto max-w-7xl px-2 py-8 text-center uk-animation-slide-top-medium sm:px-6 sm:py-12 md:text-left">
      <div class="grid md:grid-cols-2 gap-12 items-center">
        <div>
          <h1 class="font-headline font-extrabold text-4xl md:text-5xl text-on-surface leading-tight mb-4">
            Your Care, <span class="text-primary">Closer Than Ever.</span>
          </h1>
          <p class="text-lg text-on-surface-variant max-w-xl mb-8 leading-relaxed">
            Select a clinic that matches your lifestyle. We've curated the highest-rated facilities in your area to
            ensure your clinical journey begins with absolute comfort.
          </p>
          <div class="flex flex-wrap gap-4 justify-center md:justify-start">
            <div class="flex items-center gap-2 px-4 py-2 bg-white rounded-full ghost-border shadow-sm">
              <span data-feather="map-pin" class="text-primary text-lg"></span>
              <span class="text-sm font-medium text-on-surface">New York, NY</span>
            </div>
            <div class="flex items-center gap-2 px-4 py-2 bg-white rounded-full ghost-border shadow-sm">
              <svg fill="#999999" height="16px" viewbox="0 0 24 24"
  width="16px" class="size-6 **:stroke-2 **:stroke-tertiary! fill-transparent" stroke="#000000"
  stroke-width="1px" xmlns="http://www.w3.org/2000/svg">
  <path d="M9.78133 3.89027C10.3452 3.40974 10.6271 3.16948 10.9219 3.02859C11.6037 2.70271 12.3963 2.70271 13.0781 3.02859C13.3729 3.16948 13.6548 3.40974 14.2187 3.89027C14.4431 4.08152 14.5553 4.17715 14.6752 4.25747C14.9499 4.4416 15.2584 4.56939 15.5828 4.63344C15.7244 4.66139 15.8713 4.67312 16.1653 4.69657C16.9038 4.7555 17.273 4.78497 17.5811 4.89378C18.2936 5.14546 18.8541 5.70591 19.1058 6.41844C19.2146 6.72651 19.244 7.09576 19.303 7.83426C19.3264 8.12819 19.3381 8.27515 19.3661 8.41669C19.4301 8.74114 19.5579 9.04965 19.7421 9.32437C19.8224 9.44421 19.918 9.55642 20.1093 9.78084C20.5898 10.3447 20.8301 10.6267 20.971 10.9214C21.2968 11.6032 21.2968 12.3958 20.971 13.0776C20.8301 13.3724 20.5898 13.6543 20.1093 14.2182C19.918 14.4426 19.8224 14.5548 19.7421 14.6747C19.5579 14.9494 19.4301 15.2579 19.3661 15.5824C19.3381 15.7239 19.3264 15.8709 19.303 16.1648C19.244 16.9033 19.2146 17.2725 19.1058 17.5806C18.8541 18.2931 18.2936 18.8536 17.5811 19.1053C17.273 19.2141 16.9038 19.2435 16.1653 19.3025C15.8713 19.3259 15.7244 19.3377 15.5828 19.3656C15.2584 19.4297 14.9499 19.5574 14.6752 19.7416C14.5553 19.8219 14.4431 19.9175 14.2187 20.1088C13.6548 20.5893 13.3729 20.8296 13.0781 20.9705C12.3963 21.2963 11.6037 21.2963 10.9219 20.9705C10.6271 20.8296 10.3452 20.5893 9.78133 20.1088C9.55691 19.9175 9.44469 19.8219 9.32485 19.7416C9.05014 19.5574 8.74163 19.4297 8.41718 19.3656C8.27564 19.3377 8.12868 19.3259 7.83475 19.3025C7.09625 19.2435 6.72699 19.2141 6.41893 19.1053C5.7064 18.8536 5.14594 18.2931 4.89427 17.5806C4.78546 17.2725 4.75599 16.9033 4.69706 16.1648C4.6736 15.8709 4.66188 15.7239 4.63393 15.5824C4.56988 15.2579 4.44209 14.9494 4.25796 14.6747C4.17764 14.5548 4.08201 14.4426 3.89076 14.2182C3.41023 13.6543 3.16997 13.3724 3.02907 13.0776C2.7032 12.3958 2.7032 11.6032 3.02907 10.9214C3.16997 10.6266 3.41023 10.3447 3.89076 9.78084C4.08201 9.55642 4.17764 9.44421 4.25796 9.32437C4.44209 9.04965 4.56988 8.74114 4.63393 8.41669C4.66188 8.27515 4.6736 8.12819 4.69706 7.83426C4.75599 7.09576 4.78546 6.72651 4.89427 6.41844C5.14594 5.70591 5.7064 5.14546 6.41893 4.89378C6.72699 4.78497 7.09625 4.7555 7.83475 4.69657C8.12868 4.67312 8.27564 4.66139 8.41718 4.63344C8.74163 4.56939 9.05014 4.4416 9.32485 4.25747C9.4447 4.17715 9.55691 4.08152 9.78133 3.89027Z" stroke="#000000" stroke-width="1px"/>
  <path d="M8.5 12.5L10.5 14.5L15.5 9.5" stroke="#000000" stroke-width="1px" stroke-linecap="round" stroke-linejoin="round"/>
  </svg>
              <span class="text-sm font-medium text-on-surface">Insurance Verified</span>
            </div>
          </div>
        </div>
        <div class="hidden md:block relative h-64 rounded-xl overflow-hidden shadow-xl">
          <img alt="Clinic interior" class="w-full h-full object-cover"
            data-alt="modern luxury medical clinic lobby with minimalist furniture and soft warm natural lighting"
            src="https://lh3.googleusercontent.com/aida-public/AB6AXuD28bVhOYXpQRpTcpKtxE9tH1YNeIJ3ybj0oX929BY8GtvAt28hUN-ILa57SUmtmwjj6iYIdmyAbUnddBrWVBqUkz2rl4xBwt3G0Kc4L2_KVUh4OSxmiPRufrcRRGp1OpVUBRBpLHtvUS6gUnVuzFVCkn2-I-rlU5tOSub3Bwv3LJ1Ct_Uetotaqj_sVOR1A9t0smLy0Z4_fDzU9kqUNW36It6oj-y-c5tPoa7Pg7zScRAR7K4HDy1tyO77h8UZsfLHxGniOdevh5M" />
          <div class="absolute inset-0 bg-gradient-to-r from-primary/10 to-transparent"></div>
        </div>
      </div>
    </section>
    <section class="relative mx-auto flex min-h-screen max-w-[1600px] flex-col gap-6 px-0 py-8 sm:px-6 lg:flex-row lg:gap-10 lg:px-8 lg:py-12" id="clinic-list-container">
      <!-- Sidebar: Clinic List -->
      <div class="flex min-w-0 flex-col gap-6 uk-animation-slide-left-medium lg:w-[45rem] lg:gap-8">
        <div class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
          <div>
            <p class="font-label text-xs uppercase tracking-[0.2em] font-semibold text-primary/70 mb-1">Results Near You
            </p>
            <h2 class="font-headline text-3xl font-extrabold text-on-surface m-0!">2 Medical Centers</h2>
          </div>
          <button
            class="bg-transparent flex items-center gap-2 font-bold text-primary hover:bg-primary-container/10 px-4 py-2 rounded-lg transition-colors">
            <span data-feather="sliders" class="rotate-90"></span>
            Filters
          </button>
        </div>
          <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-2 gap-6">
                <!-- Clinic Card 2 -->
                <div
                  class="group bg-surface-container-lowest rounded-2xl overflow-hidden border border-transparent hover:border-primary/20 transition-all duration-300 shadow-[0_4px_24px_rgba(0,0,0,0.04)] hover:shadow-xl opacity-90 hover:opacity-100"
                  data-clinics-target="clinicCard"
                  data-clinic-id="2">
                  <div class="relative h-48">
                    <img class="w-full h-full object-cover" alt="CareCal Downtown Clinic" src="https://demo.careflowclinic.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsiZGF0YSI6NCwicHVyIjoiYmxvYl9pZCJ9fQ==--cfa516ca26c49991b6174c57c34d639212c43811/carecal-downtown-clinic-ai-image.png" />
                    <div class="absolute top-4 left-4">
                      <span class="bg-secondary-container text-on-secondary-container px-3 py-1 rounded-full text-xs font-bold shadow-sm uppercase tracking-wider">
                        Highly Rated
                      </span>
                    </div>
                  </div>
                  <div class="p-5 sm:p-6">
                    <div class="mb-1 flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
                      <div>
                        <h3 class="font-headline text-xl font-extrabold group-hover:text-primary transition-colors m-0!">
                          CareCal Downtown Clinic
                        </h3>
                      </div>
                      <div class="text-right">
                        <div class="flex items-center justify-end text-primary gap-0.5">
                          <span data-feather="star" class="text-md"></span>
                          <span data-feather="star" class="text-md"></span>
                          <span data-feather="star" class="text-md"></span>
                          <span data-feather="star" class="text-md"></span>
                        </div>
                        <span class="text-nowrap text-[10px] font-bold text-on-surface-variant/60 uppercase">5.0 (89 reviews)</span>
                      </div>
                    </div>
                    <div class="flex flex-col gap-1 mb-6">
                      <p class="text-on-surface-variant text-sm mt-1 flex items-center gap-1">
                        <span data-feather="map-pin" class="size-4"></span>
                        245 Market Street, Boston, MA 02110
                      </p>
                      <p class="text-on-surface-variant text-sm mt-1 flex items-center gap-1">
                        <span data-feather="phone" class="size-4"></span>
                        <a class="uk-link-heading hover:text-primary!" href="tel:6175550145">(617) 555-0145</a>
                      </p>
                    </div>
                    <a class="block w-full rounded-xl bg-surface-container-highest py-3 text-center font-bold text-on-surface no-underline! transition-all hover:bg-primary-container hover:text-white" data-turbo-stream="true" href="/booking/doctors/2">Select Clinic</a>
                  </div>
                </div>
                <!-- Clinic Card 2 -->
                <div
                  class="group bg-surface-container-lowest rounded-2xl overflow-hidden border border-transparent hover:border-primary/20 transition-all duration-300 shadow-[0_4px_24px_rgba(0,0,0,0.04)] hover:shadow-xl opacity-90 hover:opacity-100"
                  data-clinics-target="clinicCard"
                  data-clinic-id="3">
                  <div class="relative h-48">
                    <img class="w-full h-full object-cover" alt="Alexandria Self Guided Skills Station" src="/assets/clinic-profile-e479fa48.png" />
                    <div class="absolute top-4 left-4">
                      <span class="bg-secondary-container text-on-secondary-container px-3 py-1 rounded-full text-xs font-bold shadow-sm uppercase tracking-wider">
                        Highly Rated
                      </span>
                    </div>
                  </div>
                  <div class="p-5 sm:p-6">
                    <div class="mb-1 flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
                      <div>
                        <h3 class="font-headline text-xl font-extrabold group-hover:text-primary transition-colors m-0!">
                          Alexandria Self Guided Skills Station
                        </h3>
                      </div>
                      <div class="text-right">
                        <div class="flex items-center justify-end text-primary gap-0.5">
                          <span data-feather="star" class="text-md"></span>
                          <span data-feather="star" class="text-md"></span>
                          <span data-feather="star" class="text-md"></span>
                          <span data-feather="star" class="text-md"></span>
                        </div>
                        <span class="text-nowrap text-[10px] font-bold text-on-surface-variant/60 uppercase">5.0 (89 reviews)</span>
                      </div>
                    </div>
                    <div class="flex flex-col gap-1 mb-6">
                      <p class="text-on-surface-variant text-sm mt-1 flex items-center gap-1">
                        <span data-feather="map-pin" class="size-4"></span>
                        2800 Eisenhower Ave Suite 220, Alexandria VA 22314
                      </p>
                      <p class="text-on-surface-variant text-sm mt-1 flex items-center gap-1">
                        <span data-feather="phone" class="size-4"></span>
                        <a class="uk-link-heading hover:text-primary!" href="tel:7039377286">(703) 937-7286</a>
                      </p>
                    </div>
                    <a class="block w-full rounded-xl bg-surface-container-highest py-3 text-center font-bold text-on-surface no-underline! transition-all hover:bg-primary-container hover:text-white" data-turbo-stream="true" href="/booking/doctors/3">Select Clinic</a>
                  </div>
                </div>
            <!-- Empty State Optimization Element -->
            <div class="p-8 rounded-2xl border-2 border-dashed border-outline-variant/40 flex flex-col items-center justify-center text-center">
            <div class="w-16 h-16 bg-primary-fixed rounded-full flex items-center justify-center text-primary mb-4">
              <span data-feather="help-circle" class="text-3xl"></span>
            </div>
            <h4 class="font-headline font-bold text-lg m-0!">Don't see your favorite clinic?</h4>
            <p class="text-on-surface-variant text-sm mt-2 max-w-xs">
              We're adding new healthcare partners daily. Let us know who we're missing.</p>
            <a class="mt-4 text-primary font-bold text-sm underline underline-offset-4 bg-transparent hover:text-primary-container transition-all" href="mailto:support@careflow.com">Suggest a Clinic</a>
          </div>
          </div>
      </div>
      <!-- Main Map View -->
      <div class="relative h-[24rem] min-h-[24rem] flex-1 overflow-hidden rounded-3xl border-4 border-white shadow-2xl uk-animation-slide-right-medium lg:h-screen lg:min-h-[700px]" uk-sticky="position: start; end: !#clinic-list-container; offset: 20">
          <div class="absolute inset-0 bg-surface-container-high"
            data-controller="clinic-map"
            data-clinic-map-token-value="pk.eyJ1IjoiYXltYW5hbGtoYWxpbCIsImEiOiJjbWxjcWswNnMwZzlnM2txOWdjc2VzbXFrIn0.H0a0uzjiC8jMVb4r1F6RJQ"
            data-clinic-map-locations-value="[{&quot;id&quot;:2,&quot;name&quot;:&quot;CareCal Downtown Clinic&quot;,&quot;address&quot;:&quot;245 Market Street, Boston, MA 02110&quot;,&quot;coordinates&quot;:[-71.055751,42.3601]},{&quot;id&quot;:3,&quot;name&quot;:&quot;Alexandria Self Guided Skills Station&quot;,&quot;address&quot;:&quot;2800 Eisenhower Ave Suite 220, Alexandria VA 22314&quot;,&quot;coordinates&quot;:[-77.081597,38.801656]}]">
          </div>
        <div class="absolute left-4 top-4 rounded-2xl border border-white/60 bg-white/90 px-4 py-3 shadow-2xl backdrop-blur-md sm:left-6 sm:top-6">
          <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-primary/70 mb-1">Clinic Map</p>
          <p class="m-0 text-sm font-bold text-on-surface">
            2 locations mapped
          </p>
        </div>
      </div>
    </section>
  </div>
</div>
</template></turbo-stream>