Mega Menu Navbar

<!--
  Two panels, two audiences. Above lg the Products button opens a full-bleed
  mega panel whose grid re-caps to the same max-w-6xl as the bar, so the
  columns line up with the nav. Below lg the hamburger opens a flat, headed
  list - the same destinations, no floating surface to mis-tap on a phone.
-->
<header class="relative border-b border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
  <nav class="mx-auto flex h-14 max-w-6xl items-center gap-4 px-4" aria-label="Main">
    <a href="/" class="mr-auto 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>

    <div class="hidden items-center gap-1 lg:flex">
      <button
        type="button"
        aria-haspopup="true"
        aria-expanded="false"
        aria-controls="mega-panel"
        class="group inline-flex items-center gap-1 rounded-md px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-50 dark:focus-visible:ring-blue-400"
      >
        Products
        <svg class="h-3.5 w-3.5 transition-transform group-aria-expanded:rotate-180 motion-reduce:transition-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="m6 9 6 6 6-6" /></svg>
      </button>
      <a href="/pricing" class="rounded-md px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-50 dark:focus-visible:ring-blue-400">Pricing</a>
      <a href="/docs" class="rounded-md px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-50 dark:focus-visible:ring-blue-400">Docs</a>
    </div>

    <a href="/signup" class="hidden rounded-lg bg-blue-600 px-3.5 py-1.5 text-sm font-semibold text-white hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 lg:block dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">Get started</a>

    <button
      type="button"
      aria-expanded="false"
      aria-controls="mega-mobile-menu"
      aria-label="Open main menu"
      class="inline-flex h-10 w-10 items-center justify-center rounded-md text-gray-700 hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 lg:hidden dark:text-gray-300 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400"
    >
      <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M4 6h16M4 12h16M4 18h16" /></svg>
    </button>
  </nav>

  <div id="mega-panel" hidden class="absolute inset-x-0 top-full z-30 border-b border-gray-200 bg-white shadow-lg dark:border-gray-800 dark:bg-gray-900">
    <ul class="mx-auto grid max-w-6xl gap-2 px-4 py-6 lg:grid-cols-2">
      <li>
        <a href="/analytics" class="block rounded-lg p-3 hover:bg-gray-100 focus-visible:bg-gray-100 focus-visible:outline-none dark:hover:bg-gray-800 dark:focus-visible:bg-gray-800">
          <span class="block text-sm font-semibold text-gray-900 dark:text-gray-50">Analytics</span>
          <span class="mt-0.5 block text-sm text-gray-600 dark:text-gray-400">Traffic, funnels and retention in one view.</span>
        </a>
      </li>
      <li>
        <a href="/automation" class="block rounded-lg p-3 hover:bg-gray-100 focus-visible:bg-gray-100 focus-visible:outline-none dark:hover:bg-gray-800 dark:focus-visible:bg-gray-800">
          <span class="block text-sm font-semibold text-gray-900 dark:text-gray-50">Automation</span>
          <span class="mt-0.5 block text-sm text-gray-600 dark:text-gray-400">Trigger workflows from any event.</span>
        </a>
      </li>
      <li>
        <a href="/payments" class="block rounded-lg p-3 hover:bg-gray-100 focus-visible:bg-gray-100 focus-visible:outline-none dark:hover:bg-gray-800 dark:focus-visible:bg-gray-800">
          <span class="block text-sm font-semibold text-gray-900 dark:text-gray-50">Payments</span>
          <span class="mt-0.5 block text-sm text-gray-600 dark:text-gray-400">Checkout, invoicing and billing APIs.</span>
        </a>
      </li>
      <li>
        <a href="/security" class="block rounded-lg p-3 hover:bg-gray-100 focus-visible:bg-gray-100 focus-visible:outline-none dark:hover:bg-gray-800 dark:focus-visible:bg-gray-800">
          <span class="block text-sm font-semibold text-gray-900 dark:text-gray-50">Security</span>
          <span class="mt-0.5 block text-sm text-gray-600 dark:text-gray-400">SSO, audit logs and scoped access.</span>
        </a>
      </li>
    </ul>
  </div>

  <div id="mega-mobile-menu" hidden class="border-t border-gray-200 px-4 pb-4 pt-2 dark:border-gray-800">
    <p class="px-3 pb-1 pt-2 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Products</p>
    <ul class="flex flex-col gap-1">
      <li><a href="/analytics" class="block rounded-md px-3 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800">Analytics</a></li>
      <li><a href="/automation" class="block rounded-md px-3 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800">Automation</a></li>
      <li><a href="/payments" class="block rounded-md px-3 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800">Payments</a></li>
      <li><a href="/security" class="block rounded-md px-3 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800">Security</a></li>
    </ul>
    <ul class="mt-2 flex flex-col gap-1 border-t border-gray-200 pt-2 dark:border-gray-800">
      <li><a href="/pricing" class="block rounded-md px-3 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800">Pricing</a></li>
      <li><a href="/docs" class="block rounded-md px-3 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800">Docs</a></li>
      <li><a href="/signup" class="block rounded-lg bg-blue-600 px-3 py-2.5 text-center text-sm font-semibold text-white hover:bg-blue-700">Get started</a></li>
    </ul>
  </div>
</header>