Contact Split Footer

<!--
  Contact details beside two link columns. The contact block is a real
  <address> (with not-italic, because browsers italicise it by default), the
  phone is a tel: link and the email a mailto: - on a phone these are the two
  most useful taps in the footer, so both get 40px-tall targets. break-all on
  the email keeps a long address wrapping inside 320px instead of pushing the
  page sideways.
-->
<footer class="border-t border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
  <div class="mx-auto grid max-w-6xl gap-10 px-4 pb-8 pt-12 md:grid-cols-2">
    <div>
      <a href="/" class="text-lg font-bold text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-50 dark:focus-visible:ring-blue-400">Adysre</a>
      <address class="mt-4 not-italic">
        <ul class="flex flex-col gap-3">
          <li class="flex items-start gap-3 text-sm text-gray-600 dark:text-gray-400">
            <svg class="mt-0.5 h-5 w-5 shrink-0 text-gray-400 dark:text-gray-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
              <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
              <circle cx="12" cy="10" r="3" />
            </svg>
            <span>100 Market Street, Suite 300<br />San Francisco, CA 94103</span>
          </li>
          <li>
            <a href="tel:+14155550132" class="inline-flex min-h-10 items-center gap-3 text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-300 dark:hover:text-gray-50 dark:focus-visible:ring-blue-400">
              <svg class="h-5 w-5 shrink-0 text-gray-400 dark:text-gray-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
                <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.72 12.84 12.84 0 0 0 .7 2.81 2 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-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
              </svg>
              +1 (415) 555-0132
            </a>
          </li>
          <li>
            <a href="mailto:hello@adysre.com" class="inline-flex min-h-10 items-center gap-3 break-all text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-300 dark:hover:text-gray-50 dark:focus-visible:ring-blue-400">
              <svg class="h-5 w-5 shrink-0 text-gray-400 dark:text-gray-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
                <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
                <path d="m22 6-10 7L2 6" />
              </svg>
              hello@adysre.com
            </a>
          </li>
        </ul>
      </address>
    </div>

    <nav aria-label="Footer">
      <div class="grid grid-cols-2 gap-6">
        <div>
          <h2 class="mb-3 text-xs font-semibold uppercase tracking-[0.06em] text-gray-500 dark:text-gray-400">Company</h2>
          <ul class="flex flex-col gap-2">
            <li><a href="/about" class="text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-300 dark:hover:text-gray-50 dark:focus-visible:ring-blue-400">About</a></li>
            <li><a href="/careers" class="text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 dark:text-gray-300 dark:hover:text-gray-50">Careers</a></li>
            <li><a href="/blog" class="text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 dark:text-gray-300 dark:hover:text-gray-50">Blog</a></li>
          </ul>
        </div>
        <div>
          <h2 class="mb-3 text-xs font-semibold uppercase tracking-[0.06em] text-gray-500 dark:text-gray-400">Support</h2>
          <ul class="flex flex-col gap-2">
            <li><a href="/help" class="text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 dark:text-gray-300 dark:hover:text-gray-50">Help center</a></li>
            <li><a href="/status" class="text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 dark:text-gray-300 dark:hover:text-gray-50">Status</a></li>
            <li><a href="/privacy" class="text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 dark:text-gray-300 dark:hover:text-gray-50">Privacy</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </div>

  <div class="border-t border-gray-200 dark:border-gray-800">
    <p class="mx-auto max-w-6xl p-4 text-[0.8125rem] text-gray-500 dark:text-gray-400">
      © <time datetime="2026">2026</time> Adysre Inc.
    </p>
  </div>
</footer>