<turbo-stream action="replace" target="service_selection"><template><div id="service_selection" class="flex flex-col h-full">
  <div class="flex items-center gap-3 px-6 pt-6 pb-4 lg:px-8 lg:pt-10 lg:pb-5 shrink-0">
    <div class="flex items-center justify-center size-[38px] bg-emerald-100 text-emerald-600 rounded-full shrink-0">
      <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="size-4" aria-hidden="true"><path d="M12.6667 2.66602H3.33333C2.59695 2.66602 2 3.26297 2 3.99935V13.3327C2 14.0691 2.59695 14.666 3.33333 14.666H12.6667C13.403 14.666 14 14.0691 14 13.3327V3.99935C14 3.26297 13.403 2.66602 12.6667 2.66602Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.667 1.33398V4.00065" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M5.33301 1.33398V4.00065" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M2 6.66602H14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </div>
    <h2 class="text-[20px] font-bold leading-7 text-[#18181b]">Choose Your Appointment</h2>
  </div>

  <div class="flex flex-col gap-3 overflow-y-auto px-6 pb-6 lg:px-8 lg:pb-10">
      
<a class="flex items-start gap-5 px-6 py-5 bg-white border border-zinc-300 rounded-[12px] cursor-pointer transition-all hover:border-indigo-500 hover:bg-indigo-50 group" data-turbo="false" data-action="click-&gt;scheduling--turbo-link#visit" data-service-id="b9443532-9626-49b2-ac02-63efdc515bad" data-service-name="Design working session" data-duration="90" data-price="45000" href="/scheduling/design-meeting-hut/availability?service_id=b9443532-9626-49b2-ac02-63efdc515bad">

  <div class="flex flex-1 gap-5 items-start min-w-0">
    <div class="flex flex-col flex-1 gap-3 min-w-0">
      <h3 class="text-[18px] font-semibold leading-7 text-[#18181b] group-hover:text-indigo-600 transition-colors">
        Design working session
      </h3>

        <p class="text-base font-normal leading-6 text-[#52525b]">
          Longer session. Lean-startup style with a shared workspace e.g. Figma
        </p>

      <div class="flex items-center gap-7 text-base font-semibold leading-6 text-[#52525b]">
        <span class="flex items-center gap-1.5">
          <span class="text-[#52525b]"><svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="size-[18px]" aria-hidden="true"><path d="M9 16.5C13.1421 16.5 16.5 13.1421 16.5 9C16.5 4.85786 13.1421 1.5 9 1.5C4.85786 1.5 1.5 4.85786 1.5 9C1.5 13.1421 4.85786 16.5 9 16.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M9 4.5V9L12 10.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
          90 min
        </span>

          <span>$450</span>
      </div>
    </div>

    <div class="shrink-0 mt-0.5 text-zinc-400 group-hover:text-indigo-600 transition-colors">
      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="size-5" aria-hidden="true"><path d="M9 5l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </div>
  </div>
</a>
      
<a class="flex items-start gap-5 px-6 py-5 bg-white border border-zinc-300 rounded-[12px] cursor-pointer transition-all hover:border-indigo-500 hover:bg-indigo-50 group" data-turbo="false" data-action="click-&gt;scheduling--turbo-link#visit" data-service-id="6f58fda6-f78a-4cf7-9bfd-b462baf7bc24" data-service-name="Short Design Meeting" data-duration="30" data-price="15000" href="/scheduling/design-meeting-hut/availability?service_id=6f58fda6-f78a-4cf7-9bfd-b462baf7bc24">

  <div class="flex flex-1 gap-5 items-start min-w-0">
    <div class="flex flex-col flex-1 gap-3 min-w-0">
      <h3 class="text-[18px] font-semibold leading-7 text-[#18181b] group-hover:text-indigo-600 transition-colors">
        Short Design Meeting
      </h3>

        <p class="text-base font-normal leading-6 text-[#52525b]">
          Have a short design meeting.
        </p>

      <div class="flex items-center gap-7 text-base font-semibold leading-6 text-[#52525b]">
        <span class="flex items-center gap-1.5">
          <span class="text-[#52525b]"><svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="size-[18px]" aria-hidden="true"><path d="M9 16.5C13.1421 16.5 16.5 13.1421 16.5 9C16.5 4.85786 13.1421 1.5 9 1.5C4.85786 1.5 1.5 4.85786 1.5 9C1.5 13.1421 4.85786 16.5 9 16.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M9 4.5V9L12 10.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
          30 min
        </span>

          <span>$150</span>
      </div>
    </div>

    <div class="shrink-0 mt-0.5 text-zinc-400 group-hover:text-indigo-600 transition-colors">
      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="size-5" aria-hidden="true"><path d="M9 5l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </div>
  </div>
</a>
  </div>
</div></template></turbo-stream><turbo-stream action="replace" target="calendar_selection"><template><div id='calendar_selection'></div></template></turbo-stream><turbo-stream action="replace" target="time_slots"><template><div id='time_slots'></div></template></turbo-stream><turbo-stream action="replace" target="selected_service"><template>
<div id="selected_service">
</div>
</template></turbo-stream>