Contact With FAQ

<!--
  The FAQ is native <details>/<summary> — it opens and closes with zero JS and is
  keyboard-operable and announced out of the box. The default disclosure triangle
  is hidden and replaced by a chevron that rotates with group-open.
-->
<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">Get in touch</h2>
    <form class="mt-6 space-y-4">
      <div>
        <label for="cf2-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>
        <input id="cf2-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="cf2-email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
        <input id="cf2-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="cf2-message" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Message</label>
        <textarea id="cf2-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>
  </div>
  <div>
    <h3 class="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Before you ask</h3>
    <div class="mt-3">
      <details class="group border-b border-gray-200 py-3 dark:border-gray-800">
        <summary class="flex cursor-pointer list-none items-center justify-between gap-3 rounded text-sm font-medium text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 [&::-webkit-details-marker]:hidden dark:text-gray-100">
          How soon will I hear back?
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 shrink-0 text-gray-500 transition-transform group-open:rotate-180 motion-reduce:transition-none" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
        </summary>
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Within one business day, usually much sooner.</p>
      </details>
      <details class="group border-b border-gray-200 py-3 dark:border-gray-800">
        <summary class="flex cursor-pointer list-none items-center justify-between gap-3 rounded text-sm font-medium text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 [&::-webkit-details-marker]:hidden dark:text-gray-100">
          Do you offer phone support?
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 shrink-0 text-gray-500 transition-transform group-open:rotate-180 motion-reduce:transition-none" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
        </summary>
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Yes, on Business and Enterprise plans.</p>
      </details>
    </div>
  </div>
</section>