Support Contact Section with Form & Highlights

<section class="w-full mr-auto mb-8 ml-auto edit-mode-selected" id="aura-emeqzg1lb">
  <div class="max-w-7xl sm:px-6 lg:px-8 mr-auto ml-auto pr-4 pl-4">
    <div class="relative overflow-hidden ring-1 ring-white/10 bg-white/5 rounded-3xl backdrop-blur">

      <!-- Content -->
      <div class="relative z-10 md:p-12 lg:p-16 pt-8 pr-8 pb-8 pl-8">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start" id="aura-emeqzg3qe">
          <!-- Form card -->
          <div class="lg:col-span-5">
            <div class="ring-1 ring-white/20 bg-white/95 rounded-2xl pt-6 pr-6 pb-6 pl-6 shadow-lg backdrop-blur">
              <div class="flex items-center justify-between">
                <div class="">
                  <p class="text-[11px] text-neutral-500 font-geist uppercase tracking-wider">NomadIQ Support</p>
                  <h3 class="mt-1 text-2xl sm:text-3xl font-semibold tracking-tight text-neutral-900 font-geist">
                    Have a question?
                  </h3>
                </div>
                <div class="h-9 w-9 rounded-lg bg-neutral-900 text-white flex items-center justify-center">
                  <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="message-square" class="lucide lucide-message-square h-4 w-4"><path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"></path></svg>
                </div>
              </div>

              <form action="#" method="POST" class="mt-6 space-y-4">
                <div class="">
                  <label for="ct-name" class="block text-xs text-neutral-600 font-geist">Your name<span class="text-neutral-400"> *</span></label>
                  <input id="ct-name" name="name" type="text" required="" placeholder="Jane Doe" class="mt-1 w-full pl-3 pr-3 py-2.5 text-sm rounded-xl ring-1 ring-black/10 focus:ring-2 focus:ring-neutral-900 outline-none bg-white placeholder:text-neutral-400 font-geist">
                </div>
                <div class="">
                  <label for="ct-email" class="block text-xs text-neutral-600 font-geist">Email<span class="text-neutral-400"> *</span></label>
                  <div class="relative mt-1">
                    <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 text-neutral-400 absolute left-3 top-1/2 -translate-y-1/2"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path><rect x="2" y="4" width="20" height="16" rx="2"></rect></svg>
                    <input id="ct-email" name="email" type="email" required="" placeholder="you@example.com" class="w-full pl-9 pr-3 py-2.5 text-sm rounded-xl ring-1 ring-black/10 focus:ring-2 focus:ring-neutral-900 outline-none bg-white placeholder:text-neutral-400 font-geist">
                  </div>
                </div>
                <div class="">
                  <label for="ct-msg" class="block text-xs text-neutral-600 font-geist">Message</label>
                  <textarea id="ct-msg" name="message" rows="4" placeholder="How can we help?" class="mt-1 w-full resize-y pl-3 pr-3 py-2.5 text-sm rounded-xl ring-1 ring-black/10 focus:ring-2 focus:ring-neutral-900 outline-none bg-white placeholder:text-neutral-400 font-geist"></textarea>
                </div>
                <button type="submit" class="w-full inline-flex items-center justify-center rounded-xl bg-neutral-900 text-white px-4 py-3 text-sm font-semibold hover:bg-neutral-800 transition-colors font-geist">
                  Send message
                  <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="arrow-right" class="lucide lucide-arrow-right h-4 w-4 ml-2"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
                </button>
                <p class="text-[11px] text-neutral-500 font-geist">By submitting, you agree to our Terms and Privacy Policy.</p>
              </form>
            </div>
          </div>

          <!-- Copy + highlights -->
          <div class="lg:col-span-7">
            <h2 class="text-4xl sm:text-5xl lg:text-6xl leading-[1.05] font-semibold text-white tracking-tight font-geist">Let's talk.</h2>
            <p class="text-base sm:text-lg max-w-2xl text-white/80 mt-4 font-geist">
              Tell us about your travel needs—support, partnerships, or bulk bookings. We reply within one business day.
            </p>

            <div class="mt-8 grid grid-cols-1 sm:grid-cols-2 gap-6">
              <div class="flex items-start gap-3">
                <div class="h-9 w-9 rounded-lg bg-white/10 backdrop-blur ring-1 ring-white/15 flex items-center justify-center text-white/90">
                  <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="clock-3" class="lucide lucide-clock-3 h-4 w-4"><path d="M12 6v6h4"></path><circle cx="12" cy="12" r="10"></circle></svg>
                </div>
                <div class="">
                  <p class="text-white font-semibold text-sm font-geist">Quick response</p>
                  <p class="text-white/70 text-xs font-geist">Most messages receive a reply in under 24h.</p>
                </div>
              </div>
              <div class="flex items-start gap-3">
                <div class="h-9 w-9 rounded-lg bg-white/10 backdrop-blur ring-1 ring-white/15 flex items-center justify-center text-white/90">
                  <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="route" class="lucide lucide-route h-4 w-4"><circle cx="6" cy="19" r="3"></circle><path d="M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15"></path><circle cx="18" cy="5" r="3"></circle></svg>
                </div>
                <div class="">
                  <p class="text-white font-semibold text-sm font-geist">Clear next steps</p>
                  <p class="text-white/70 text-xs font-geist">We'll follow up with a concise plan and timeline.</p>
                </div>
              </div>
            </div>

            <!-- Direct contact card -->
            <div class="mt-8">
              <div class="inline-flex gap-3 ring-1 ring-white/20 bg-white/95 rounded-2xl px-3 py-3 shadow-lg backdrop-blur items-center">
                <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/09f960eb-611f-430b-86b4-1d5a280d6eb8_800w.jpg" alt="Team lead" class="h-12 w-12 rounded-xl object-cover">
                <div class="min-w-0">
                  <p class="text-[11px] text-neutral-500 leading-none font-geist uppercase tracking-wider">Team Lead</p>
                  <p class="text-neutral-900 font-semibold tracking-tight truncate font-geist">Ava Kim</p>
                </div>
                <a href="mailto:hello@nomadiq.com" class="ml-1 inline-flex items-center gap-2 rounded-xl bg-neutral-900 text-white px-3 py-2 text-xs font-semibold hover:bg-neutral-800 transition-colors font-geist">
                  Ask directly
                  <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="message-circle" class="lucide lucide-message-circle h-3.5 w-3.5"><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"></path></svg>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>