<nav
  class="
    fixed
    w-screen
    z-50
    transition-all
    duration-300
    ease-in-out
    flex flex-col
    lg:flex-row lg:items-center
    flex-shrink-0
    px-5
  "
  x-data="navbar()"
  x-init="initTheme()"
  x-on:scroll.window="scroll()"
  x-on:mouseleave="megamenuOpened = false, openedMegamenu = ''"
  x-bind:class="{
        'bg-white dark:bg-muted-800 shadow-lg shadow-muted-400/10 dark:shadow-muted-800/10': scrolled || megamenuOpened,
        '': !scrolled || !megamenuOpened,
        'bg-white dark:bg-muted-800': mobileOpen,
        '': !mobileOpen
    }"
>
  <div
    class="
      w-full
      max-w-7xl
      mx-auto
      flex flex-wrap
      py-3
      flex-row
      items-center
      sm:justify-between
    "
  >
    <div class="flex justify-between items-center w-full lg:w-1/5">
      <a
        href="/home.html"
        class="
          flex
          title-font
          font-medium
          items-center
          text-muted-900
          dark:text-muted-100
        "
      >
        <img class="h-11" src="/img/logo/logo-square.svg" alt="Vite logo" />
        <span class="font-heading font-bold text-2xl ml-3">Mistral</span>
      </a>

      <!-- Hamburger -->
      <button
        class="
          flex
          relative
          justify-center
          items-center
          ml-auto
          w-10
          h-10
          focus:outline-none
          lg:hidden
        "
        @click="mobileOpen = !mobileOpen"
      >
        <div class="block top-1/2 left-6 w-4 -translate-x-1/2 -translate-y-1/2">
          <span
            class="
              block
              absolute
              w-7
              h-0.5
              text-primary-500
              bg-current
              transition
              duration-500
              ease-in-out
            "
            :class="mobileOpen ? 'rotate-45' : '-translate-y-2'"
          ></span>
          <span
            class="
              block
              absolute
              w-5
              h-0.5
              text-primary-500
              bg-current
              transition
              duration-500
              ease-in-out
            "
            :class="mobileOpen ? 'opacity-0' : ''"
          ></span>
          <span
            class="
              block
              absolute
              w-7
              h-0.5
              text-primary-500
              bg-current
              transition
              duration-500
              ease-in-out
            "
            :class="mobileOpen ? '-rotate-45' : 'translate-y-2'"
          ></span>
        </div>
      </button>
    </div>
    <div
      class="hidden text-center lg:text-left lg:flex flex-grow"
      :class="{
          'block': mobileOpen,
          'hidden': !mobileOpen
      }"
    >
      <ul
        class="
          flex flex-col
          mt-3
          mb-1
          lg:flex-row lg:mx-auto lg:mt-0 lg:mb-0 lg:gap-x-4
        "
      >
        <li
          class="relative"
          x-on:mouseover="megamenuOpened = true, openedMegamenu = 'megamenu-1'"
        >
          <button
            type="button"
            class="
              relative
              inline-flex
              items-center
              gap-1
              text-base
              font-sans
              text-muted-600
              hover:text-primary-500
              dark:text-muted-200 dark:hover:text-primary-400
              py-2
              md:mx-2
              tw-accessibility
            "
            :class="megamenuOpened ? 'z-40' : 'z-50'"
          >
            <span>Product</span>
            <i
              class="
                iconify
                w-5
                h-5
                text-muted-400
                dark:text-muted-300
                transition-transform
                duration-300
              "
              :class="openedMegamenu === 'megamenu-1' && megamenuOpened ? 'rotate-180' : ''"
              data-icon="lucide:chevron-down"
            ></i>
          </button>

          <!--Megamenu-->
          {{> navigation/megamenu-large}}
        </li>
        <li
          class="relative"
          x-on:mouseover="megamenuOpened = true, openedMegamenu = 'megamenu-2'"
        >
          <button
            type="button"
            class="
              relative
              inline-flex
              items-center
              gap-1
              text-base
              font-sans
              text-muted-600
              hover:text-primary-500
              dark:text-muted-200 dark:hover:text-primary-400
              py-2
              md:mx-2
              tw-accessibility
            "
            :class="megamenuOpened ? 'z-40' : 'z-50'"
          >
            <span>Company</span>
            <i
              class="
                iconify
                w-5
                h-5
                text-muted-400
                dark:text-muted-300
                transition-transform
                duration-300
              "
              :class="openedMegamenu === 'megamenu-2' && megamenuOpened ? 'rotate-180' : ''"
              data-icon="lucide:chevron-down"
            ></i>
          </button>
          <!--Megamenu-->
          {{> navigation/megamenu-slim}}
        </li>
        <li x-on:mouseover="megamenuOpened = false, openedMegamenu = ''">
          <a
            href="/pricing.html"
            class="
              block
              text-base
              font-sans
              text-muted-600
              hover:text-primary-500
              dark:text-muted-200 dark:hover:text-primary-400
              py-2
              md:mx-2
              tw-accessibility
            "
          >
            Pricing
          </a>
        </li>
        <li x-on:mouseover="megamenuOpened = false, openedMegamenu = ''">
          <a
            href="/login.html"
            class="
              block
              text-base
              font-sans
              text-muted-600
              hover:text-primary-500
              dark:text-muted-200 dark:hover:text-primary-400
              py-2
              md:mx-2
              tw-accessibility
            "
          >
            Sign In
          </a>
        </li>
      </ul>
      <div class="flex flex-col my-3 lg:hidden">
        <div class="mb-4">
          <!--Dark mode-->
          {{> theme/theme-toggler}}
        </div>
        <a
          href="/signup.html"
          class="
            relative
            w-full
            font-sans font-normal
            inline-flex
            items-center
            justify-center
            leading-5
            no-underline
            min-w-[130px]
            space-x-1
            text-white
            bg-primary-500
            h-12
            px-5
            py-3
            text-base
            rounded-xl
            hover:bg-primary-600 hover:shadow-xl hover:shadow-primary-500/20
            tw-accessibility
            transition-all
            duration-300
          "
        >
          Get Started
        </a>
      </div>
    </div>

    <div class="hidden lg:flex lg:w-1/5 lg:justify-end lg:gap-x-4">
      <button
        type="button"
        class="
          group
          h-12
          w-12
          rounded-full
          flex
          items-center
          justify-center
          tw-accessibility
        "
        @click="openSearch()"
      >
        <div
          class="
            h-10
            w-10
            flex
            items-center
            justify-center
            rounded-full
            text-muted-400
            group-hover:text-muted-500 group-hover:bg-muted-100
            dark:group-hover:bg-muted-700 dark:group-hover:text-muted-100
            transition-colors
            duration-300
          "
        >
          <i class="iconify w-4 h-4" data-icon="lucide:search"></i>
        </div>
      </button>
      <div class="h-12 w-12 flex items-center justify-center">
        <!--Dark mode-->
        {{> theme/theme-toggler}}
      </div>
      <a
        href="/signup.html"
        class="
          relative
          font-sans font-normal
          inline-flex
          items-center
          justify-center
          leading-5
          no-underline
          min-w-[130px]
          space-x-1
          text-white
          bg-primary-500
          h-12
          px-5
          py-3
          text-base
          rounded-xl
          hover:bg-primary-600 hover:shadow-xl hover:shadow-primary-500/20
          tw-accessibility
          transition-all
          duration-300
        "
      >
        Get Started
      </a>
    </div>
  </div>
</nav>
