Contact With Details

<!--
  Phone and email are real tel:/mailto: links, so a tap dials or composes. The
  icons are aria-hidden decoration; the visible label ("Email", "24 Harbour
  Street") is what carries the meaning.
-->
<section class="mx-auto grid w-full max-w-5xl gap-8 px-4 py-12 md:grid-cols-2 md:gap-12 sm:py-16">
  <div>
    <h2 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl dark:text-gray-100">Contact us</h2>
    <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Prefer another channel? Reach us however suits you.</p>
    <ul class="mt-6 space-y-4">
      <li class="flex items-start gap-3">
        <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-blue-50 text-blue-600 dark:bg-blue-950 dark:text-blue-400" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5"><path d="M21 10c0 7-9 12-9 12s-9-5-9-12a9 9 0 0 1 18 0Z" /><circle cx="12" cy="10" r="3" /></svg>
        </span>
        <span><span class="block text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">Address</span><span class="text-sm text-gray-800 dark:text-gray-200">24 Harbour Street, Lisbon</span></span>
      </li>
      <li class="flex items-start gap-3">
        <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-blue-50 text-blue-600 dark:bg-blue-950 dark:text-blue-400" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92Z" /></svg>
        </span>
        <span><span class="block text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">Phone</span><a href="tel:+35121000000" class="text-sm text-blue-700 hover:underline dark:text-blue-400">+351 21 000 0000</a></span>
      </li>
      <li class="flex items-start gap-3">
        <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-blue-50 text-blue-600 dark:bg-blue-950 dark:text-blue-400" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5"><path d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z" /><path d="m22 7-10 5L2 7" /></svg>
        </span>
        <span><span class="block text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">Email</span><a href="mailto:hello@example.com" class="text-sm text-blue-700 hover:underline dark:text-blue-400">hello@example.com</a></span>
      </li>
    </ul>
  </div>
  <form class="space-y-4">
    <div>
      <label for="cd-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>
      <input id="cd-name" name="name" type="text" autocomplete="name" required class="mt-1.5 block w-full rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 text-sm text-gray-900 focus-visible:border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-blue-400" />
    </div>
    <div>
      <label for="cd-email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
      <input id="cd-email" name="email" type="email" autocomplete="email" required class="mt-1.5 block w-full rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 text-sm text-gray-900 focus-visible:border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-blue-400" />
    </div>
    <div>
      <label for="cd-message" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Message</label>
      <textarea id="cd-message" name="message" rows="4" required class="mt-1.5 block w-full resize-y rounded-lg border border-gray-300 bg-white px-3.5 py-2.5 text-sm text-gray-900 focus-visible:border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-blue-400"></textarea>
    </div>
    <button type="submit" class="inline-flex w-full items-center justify-center rounded-lg bg-blue-600 px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">Send message</button>
  </form>
</section>