Responsive Contact Info Bar with Status Badge

<div class="flex text-sm bg-neutral-50/80 rounded-2xl mt-10 pt-3 pr-4 pb-3 pl-4 items-center justify-between w-full max-w-3xl">
  <div class="flex items-center gap-3">
    <span class="inline-flex items-center gap-1.5 rounded-full bg-white ring-1 ring-neutral-200 px-2.5 py-1 text-xs text-neutral-700">
      <span class="h-2 w-2 rounded-full bg-emerald-500"></span>
      <span class="font-geist">Available</span>
    </span>
    <div class="hidden sm:flex items-center gap-2 text-neutral-600">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="map-pin" class="lucide lucide-map-pin h-4 w-4 text-neutral-400"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" class=""></path><circle cx="12" cy="10" r="3" class=""></circle></svg>
      <span class="font-geist"><span class="font-medium text-neutral-800">Creative Studio</span> • San Francisco, CA</span>
    </div>
  </div>

  <a href="tel:+14155551234" class="group inline-flex items-center gap-1.5 text-neutral-900">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="phone" class="lucide lucide-phone h-4 w-4"><path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384" class=""></path></svg>
    <span class="font-geist tracking-tight text-lg sm:text-xl font-medium">(415) 555-1234</span>
  </a>

  <div class="hidden md:flex items-center gap-3">
    <a href="mailto:hello@creativestudio.com" class="inline-flex items-center gap-1.5 ring-1 ring-neutral-200 bg-white rounded-full px-3 py-1.5 text-neutral-800 transition-colors hover:text-indigo-600">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="mail" class="lucide lucide-mail h-4 w-4"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" class=""></path><rect x="2" y="4" width="20" height="16" rx="2" class=""></rect></svg>
      <span class="font-geist font-medium">Contact</span>
    </a>
  </div>
</div>