Contact Support Section with Responsive Form

<section class="mt-10 max-w-5xl">
  <div class="relative overflow-hidden ring-1 ring-black/10 bg-neutral-900 rounded-3xl">
    <!-- Background -->
    <div class="absolute inset-0">
      <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/60668e31-2150-424e-b292-05bfdda254e0_1600w.jpg" alt="Abstract minimal background" class="h-full w-full object-cover opacity-40">
      <div class="absolute inset-0 bg-gradient-to-tr from-black/80 via/50 to-transparent"></div>
    </div>

    <!-- Content -->
    <div class="relative z-10 sm:p-8 md:p-12 pt-5 pr-5 pb-5 pl-5">
      <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
        <!-- Form card -->
        <div class="lg:col-span-5">
          <div class="rounded-2xl bg-white/90 backdrop-blur ring-1 ring-black/10 shadow-lg p-4 sm:p-5">
            <div class="flex items-center justify-between">
              <div class="">
                <p class="text-[11px] text-neutral-500">Solace Support</p>
                <h3 class="mt-1 text-2xl sm:text-3xl font-semibold tracking-tight text-neutral-900">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-4 space-y-3">
              <div class="">
                <label for="ct-name" class="block text-xs text-neutral-600">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">
              </div>
              <div class="">
                <label for="ct-email" class="block text-xs text-neutral-600">E‑mail<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@solace.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">
                </div>
              </div>
              <div class="">
                <label for="ct-msg" class="block text-xs text-neutral-600">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"></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-medium hover:bg-neutral-800 transition-colors">
                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">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-white tracking-tight text-5xl sm:text-6xl font-semibold leading-[1.05]">Let's talk.</h2>
          <p class="sm:text-lg max-w-2xl text-base text-neutral-200 mt-4">
            Tell us about your setup—support, bulk orders, or partnerships. We reply within one business day.
          </p>

          <div class="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-5">
            <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-emerald-300">
                <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-medium text-sm">Quick response</p>
                <p class="text-neutral-300 text-xs">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-emerald-300">
                <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-medium text-sm">Clear next steps</p>
                <p class="text-neutral-300 text-xs">We’ll follow up with a concise plan and timeline.</p>
              </div>
            </div>
          </div>

          <!-- Direct contact card -->
          <div class="mt-7">
            <div
              class="inline-flex items-center gap-3 rounded-2xl bg-white/95 backdrop-blur ring-1 ring-black/10 shadow-lg p-3">
              <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">Team Lead</p>
                <p class="text-neutral-900 font-medium tracking-tight truncate">Ava Kim</p>
              </div>
              <a href="mailto:hello@solace.dev"
                class="ml-1 inline-flex items-center gap-2 rounded-xl bg-neutral-900 text-white px-3 py-2 text-xs font-medium hover:bg-neutral-800 transition-colors">
                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>
</section>