Contact Map

<section class="ws-contact bg-[var(--ws-contact-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">
    <div class="grid gap-12 lg:grid-cols-2">
      <!-- Form -->
      <div>
        <h2 class="text-3xl font-bold tracking-tight text-[var(--ws-contact-text)] sm:text-4xl">Get in touch</h2>
        <p class="mt-3 text-base text-[var(--ws-contact-text-soft)]">Have a question or want to work together? Drop us a message.</p>

        <form class="mt-8 space-y-5">
          <div class="grid gap-4 sm:grid-cols-2">
            <div>
              <label for="map-first" class="block text-sm font-medium text-[var(--ws-contact-text-soft)]">First name</label>
              <input type="text" id="map-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="map-last" class="block text-sm font-medium text-[var(--ws-contact-text-soft)]">Last name</label>
              <input type="text" id="map-last" name="last_name" autocomplete="family-name"
                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="map-email" class="block text-sm font-medium text-[var(--ws-contact-text-soft)]">Email</label>
            <input type="email" id="map-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)]"
              placeholder="you@example.com">
          </div>
          <div>
            <label for="map-msg" class="block text-sm font-medium text-[var(--ws-contact-text-soft)]">Message</label>
            <textarea id="map-msg" 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="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>

      <!-- Map + Details -->
      <div>
        <!-- Map placeholder -->
        <div class="flex aspect-[4/3] items-center justify-center rounded-xl bg-[var(--ws-contact-input-bg)] border border-[var(--ws-contact-input-border)]">
          <div class="text-center">
            <svg class="mx-auto h-12 w-12 text-[var(--ws-contact-text-soft)]" fill="none" viewBox="0 0 24 24" stroke-width="1" 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-2 text-sm text-[var(--ws-contact-text-soft)]">Map embed goes here</p>
          </div>
        </div>

        <!-- Contact details -->
        <dl class="mt-6 space-y-4 text-sm">
          <div class="flex gap-3">
            <dt><span class="sr-only">Address</span><svg class="h-5 w-5 text-[var(--ws-contact-text-soft)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><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></dt>
            <dd class="text-[var(--ws-contact-text-soft)]">123 Innovation Drive, Suite 400<br>San Francisco, CA 94105</dd>
          </div>
          <div class="flex gap-3">
            <dt><span class="sr-only">Phone</span><svg class="h-5 w-5 text-[var(--ws-contact-text-soft)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z" /></svg></dt>
            <dd class="text-[var(--ws-contact-text-soft)]">+1 (555) 123-4567</dd>
          </div>
          <div class="flex gap-3">
            <dt><span class="sr-only">Email</span><svg class="h-5 w-5 text-[var(--ws-contact-text-soft)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" /></svg></dt>
            <dd class="text-[var(--ws-contact-text-soft)]">hello@company.com</dd>
          </div>
        </dl>
      </div>
    </div>
  </div>
</section>