Contact Split

<section class="ws-contact bg-[var(--ws-contact-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">
    <div class="overflow-hidden rounded-3xl border border-[var(--ws-contact-input-border)]">
      <div class="grid lg:grid-cols-2">
        <!-- Image / Map side (decorative gradient — keep hardcoded) -->
        <div class="hidden bg-gradient-to-br from-indigo-500 to-purple-600 lg:block">
          <div class="flex h-full flex-col items-center justify-center p-12 text-center">
            <div class="rounded-2xl border border-white/20 bg-white/10 p-8 backdrop-blur-sm">
              <svg class="mx-auto h-12 w-12 text-white/80" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"/></svg>
              <p class="mt-4 text-lg font-semibold text-white">Visit us</p>
              <p class="mt-1 text-sm text-indigo-100">Friedrichstra&szlig;e 123</p>
              <p class="text-sm text-indigo-100">10117 Berlin, Germany</p>
            </div>
          </div>
        </div>

        <!-- Form side -->
        <div class="bg-[var(--ws-contact-bg)] p-8 sm:p-12">
          <h2 class="text-2xl font-bold tracking-tight text-[var(--ws-contact-text)]">Send us a message</h2>
          <p class="mt-2 text-sm text-[var(--ws-contact-text-soft)]">We'll get back to you within one business day.</p>

          <form class="mt-8 space-y-5">
            <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
              <div>
                <label for="split-first" class="block text-sm font-medium text-[var(--ws-contact-text-soft)]">First name</label>
                <input type="text" id="split-first" name="first-name" autocomplete="given-name" required
                  class="mt-1.5 block w-full rounded-lg border border-[var(--ws-contact-input-border)] bg-[var(--ws-contact-input-bg)] px-3.5 py-2.5 text-sm text-[var(--ws-contact-text)] placeholder:opacity-50 focus:border-[var(--ws-contact-action-bg)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-contact-action-bg)]">
              </div>
              <div>
                <label for="split-last" class="block text-sm font-medium text-[var(--ws-contact-text-soft)]">Last name</label>
                <input type="text" id="split-last" name="last-name" autocomplete="family-name" required
                  class="mt-1.5 block w-full rounded-lg border border-[var(--ws-contact-input-border)] bg-[var(--ws-contact-input-bg)] px-3.5 py-2.5 text-sm text-[var(--ws-contact-text)] placeholder:opacity-50 focus:border-[var(--ws-contact-action-bg)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-contact-action-bg)]">
              </div>
            </div>
            <div>
              <label for="split-email" class="block text-sm font-medium text-[var(--ws-contact-text-soft)]">Email</label>
              <input type="email" id="split-email" name="email" autocomplete="email" required
                class="mt-1.5 block w-full rounded-lg border border-[var(--ws-contact-input-border)] bg-[var(--ws-contact-input-bg)] px-3.5 py-2.5 text-sm text-[var(--ws-contact-text)] placeholder:opacity-50 focus:border-[var(--ws-contact-action-bg)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-contact-action-bg)]">
            </div>
            <div>
              <label for="split-message" class="block text-sm font-medium text-[var(--ws-contact-text-soft)]">Message</label>
              <textarea id="split-message" name="message" rows="4" required
                class="mt-1.5 block w-full rounded-lg border border-[var(--ws-contact-input-border)] bg-[var(--ws-contact-input-bg)] px-3.5 py-2.5 text-sm text-[var(--ws-contact-text)] placeholder:opacity-50 focus:border-[var(--ws-contact-action-bg)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-contact-action-bg)]"
                placeholder="How can we help?"></textarea>
            </div>
            <button type="submit" class="w-full rounded-lg bg-[var(--ws-contact-action-bg)] px-6 py-3 text-sm font-semibold text-[var(--ws-contact-action-text)] transition hover:opacity-90">Send message</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>