<template>

  <nav class="bg-header dark:bg-gray-800 antialiased">
    <div class="max-w-screen-xl px-4 mx-auto 2xl:px-0">
      <div class="flex flex-col md:flex-row items-center justify-between py-2">


        <button @click="popDelivery = true" class="flex items-center text-white p-2 rounded">
            <font-awesome-icon icon="truck-fast" size="lg" class="me-3" />
            <span class="text-color-1 font-bold text-sm uppercase"> Free Develiery on Orders Over RM500</span>
          </button>

          <FBWPopup v-model:isVisible="popDelivery" size="medium">
            <div class="p-6">
              <h2 class="text-xl font-bold mb-4 uppercase">Free Delivery On Orders Over RM500</h2>
              <div class="border-t-2 border-gray-300 dark:border-gray-600 shadow-md my-4"></div>
              <p class="text-md">
                For all orders exceeding a value of RM500 for free.
                <br /><br />
                Otherwise, a standard fee of RM10 is charged.
                <br /><br />
                Check out our delivery  <a href="#" class="underline text-blue-500">Terms and Condition</a>              
              </p>
            </div>
          </FBWPopup>


        <div class="text-white font-bold text-xs uppercase text-center md:mt-0 md:mb-0 mt-3 mb-5">
         Your Account Consultant<br />
         <span class="text-color-1">Wong  <font-awesome-icon icon="phone-flip" size="xs" class="px-2 text-color-2" />  +6019-731 3941</span>
        </div>
        <div class="flex items-center text-white">

          <div class="relative inline-block text-left">
            <button
            id="notificationsDropdownButton1"
            data-dropdown-toggle="notificationsDropdown1"
            type="button"
            class="inline-flex items-center justify-center p-2 hover:bg-gray-600 dark:hover:bg-gray-700 text-sm font-medium leading-none text-gray-900 text-white dark:text-white"
          >

          <span class="sr-only"> Notifications </span>
          <font-awesome-icon icon="bell" class="w-5 h-5 text-white" />
          <span v-if="notificationCount > 0" class="absolute top-1 right-1 inline-flex px-1 py-0.5 items-center justify-center text-notications font-bold leading-none text-red-100 bg-red-600 rounded-full">{{ notificationCount }}</span>
          </button>

          <div
            id="notificationsDropdown1"
            class="hidden z-10 w-56 divide-y divide-gray-300 overflow-hidden overflow-y-auto bg-white antialiased shadow dark:divide-gray-600 dark:bg-gray-700"
          >

          <div class="p-2 text-sm font-medium text-gray-900 dark:text-white">
              <h3 class="text-sm font-bold text-gray-700 dark:text-gray-200 px-3">Notifications <span class="items-center rounded-lg bg-red-600 px-1.5 py-0.5 text-xs font-bold text-white">{{ notificationCount }}</span>
              </h3>
            </div>
          
          
            <ul class="p-2 text-start text-sm font-medium text-gray-900 dark:text-white">
              <li
                    v-for="(notification, index) in notifications"
                    :key="index"
                    class="py-2 px-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 cursor-pointer transition-colors duration-150"
                  >
                    {{ notification }}
                  </li>
            </ul>

          </div>

            <!-- Notification Dropdown -->
            <div v-show="isDropdownOpen" class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md shadow-lg z-50">
              <div class="p-2">
                <h3 class="text-sm font-bold text-gray-700 dark:text-gray-200">Notifications <span class="items-center rounded-lg bg-red-600 px-2 py-1 text-xs font-bold text-white">{{ notificationCount }}</span>
                </h3>
                <hr class="border-t border-gray-300 dark:border-gray-600 my-2" />
                <ul class="mt-2 text-sm text-gray-600 dark:text-gray-300">
                  <li
                    v-for="(notification, index) in notifications"
                    :key="index"
                    class="py-1 px-2 hover:bg-gray-200 dark:hover:bg-gray-700 cursor-pointer transition-colors duration-150"
                  >
                    {{ notification }}
                  </li>
                </ul>
              </div>
            </div> 
          </div>

          <button
            id="userDropdownButton1"
            data-dropdown-toggle="userDropdown1"
            type="button"
            class="me-3 inline-flex items-center justify-center p-2 hover:bg-gray-600 dark:hover:bg-gray-700 text-sm font-medium leading-none text-gray-900 text-white dark:text-white"
          >

          <span class="sr-only"> Account </span>
          <font-awesome-icon icon="circle-user" size="lg" class="w-6 h-6 me-2 text-white" />
          <div class="text-left text-xs" ><span class="font-bold text-color-1">TLP Gadget</span><br />
          60123456789</div>
          </button>

          <div
            id="userDropdown1"
            class="hidden z-10 divide-y divide-gray-100 overflow-hidden overflow-y-auto bg-white antialiased shadow dark:divide-gray-600 dark:bg-gray-700"
          >
            <ul class="p-2 text-start text-sm font-medium text-gray-900 dark:text-white">
              <li>
                <a
                  href="#"
                  title=""
                  class="inline-flex w-full items-center gap-2 px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-600"
                >
                  My Account
                </a>
              </li>
              <li>
                <a
                  href="#"
                  title=""
                  class="inline-flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-600"
                >
                  My Orders
                </a>
              </li>
             <!-- <li>
                <a
                  href="#"
                  title=""
                  class="inline-flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-600"
                >
                  Settings
                </a>
              </li>
              <li>
                <a
                  href="#"
                  title=""
                  class="inline-flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-600"
                >
                  Favourites
                </a>
              </li>-->
              <li>
                <a
                  href="#"
                  title=""
                  class="inline-flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-600"
                >
                  Delivery Addresses
                </a>
              </li>
              <!--<li>
                <a
                  href="#"
                  title=""
                  class="inline-flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-600"
                >
                  Billing Data
                </a>
              </li>-->
            </ul>


            <!-- Dark Mode Toggle 
            <div class="p-2 flex items-center gap-2 text-sm text-gray-900 dark:text-white">
              <font-awesome-icon :icon="darkMode ? 'moon' : 'sun'" class="ms-3" />
              <span>Dark Mode</span>
              <input 
                type="checkbox" 
                id="theme-toggle" 
                class="sr-only" 
                @change="toggleDarkMode"
                :checked="darkMode"
              />
              <label for="theme-toggle" class="relative inline-flex items-center cursor-pointer">
                <span class="block w-12 h-6 bg-gray-200 dark:bg-gray-600 rounded-full"></span>
                <span class="dot absolute left-1 top-1 bg-white dark:bg-gray-900 w-4 h-4 rounded-full transition-transform" :class="{ 'translate-x-6': darkMode }"></span>
              </label>
            </div>-->

            <div class="p-2 text-sm font-medium text-gray-900 dark:text-white">
              <a
                href="#"
                title=""
                class="inline-flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-600"
              >
                Sign Out
              </a>
            </div>
          </div><!-- /.user dropdpown-->


        </div>
      </div>
    </div>

  </nav>


  <nav class="bg-black border-gray-200 dark:bg-gray-900">
    <div class="max-w-screen-xl px-4 mx-auto 2xl:px-0 py-0 lg:pb-0">

    <!-- Second Row -->
    <div class="flex justify-end py-2 pt-5">
      <div class="text-white text-center w-full lg:w-auto lg:text-right">
        <div class="flex justify-center space-x-4 text-white">
          <a href="#" class="text-xs font-medium hover:text-gray-300">Help</a>
          <a href="#" class="text-xs font-medium hover:text-gray-300">Order Status</a>

          <button @click="popSignup = true" class="text-white hover:text-gray-300 text-xs">
             Newsletter Signup
          </button>

          <FBWPopup v-model:isVisible="popSignup" size="large">
            <div class="p-6 text-start">
              <h2 class="text-xl font-bold mb-4 uppercase">Sign Up &amp; Get Discount</h2>
              <div class="border-t-2 border-gray-300 dark:border-gray-600 shadow-md my-4"></div>
              <p class="text-md lg:px-10">
                  
                <div class="p-2 w-full mx-auto">
                    <form class="space-y-10" @submit.prevent="handleSubmit">
                      <!-- Email Input -->
                      <div>
                        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-white">Email</label>
                        <input 
                          type="email" 
                          id="email" 
                          name="email" 
                          placeholder="Please enter a valid email address*"
                          required
                          class="mt-1 block w-full border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                        >
                        <p v-if="emailError" class="mt-1 text-sm text-red-600">{{ emailError }}</p>
                      </div>

                      <div class="flex items-start">
                        <div class="flex items-center h-5">
                          <input 
                            id="over-18" 
                            name="over-18" 
                            type="checkbox" 
                            required
                            class="h-4 w-4 text-indigo-600 border-gray-300 focus:ring-indigo-500"
                          >
                        </div>
                        <div class="ml-3 text-sm">
                          <label for="over-18" class="font-medium text-gray-700 dark:text-white">Yes, I am over 18 years old*</label>
                        </div>
                      </div>

                      <fieldset>
                        <legend class="text-base font-medium text-gray-900 dark:text-white">Gender</legend>
                        <div class="mt-2 flex space-x-4">
                          <div class="flex items-center">
                            <input 
                              id="gender-male" 
                              name="gender" 
                              type="radio" 
                              value="Male"
                              class="h-4 w-4 text-indigo-600 border-gray-300 focus:ring-indigo-500"
                            >
                            <label for="gender-male" class="ml-2 block text-sm font-medium text-gray-700 dark:text-white">Male</label>
                          </div>
                          <div class="flex items-center">
                            <input 
                              id="gender-female" 
                              name="gender" 
                              type="radio" 
                              value="Female"
                              class="h-4 w-4 text-indigo-600 border-gray-300 focus:ring-indigo-500"
                            >
                            <label for="gender-female" class="ml-2 block text-sm font-medium text-gray-700 dark:text-white">Female</label>
                          </div>
                          <div class="flex items-center">
                            <input 
                              id="gender-prefer-not" 
                              name="gender" 
                              type="radio" 
                              value="Prefer not to say"
                              class="h-4 w-4 text-indigo-600 border-gray-300 focus:ring-indigo-500"
                            >
                            <label for="gender-prefer-not" class="ml-2 block text-sm font-medium text-gray-700 dark:text-white">Prefer not to say</label>
                          </div>
                        </div>
                      </fieldset>

                      <div class="flex items-start">
                        <div class="flex items-center h-5">
                          <input 
                            id="terms" 
                            name="terms" 
                            type="checkbox" 
                            required
                            class="h-4 w-4 text-indigo-600 border-gray-300 focus:ring-indigo-500"
                          >
                        </div>
                        <div class="ml-3 text-sm">
                          <label for="terms" class="font-medium text-gray-700 dark:text-white">
                            By clicking the "Sign Up" button. I agree to receive Fusion Tech Supply news. which includes information on events, marketing or promotions, by e-mail, whatsapp or (as may be updated from time to time.). I agree to receive personalized email marketing messages from Fusion Tech Supply Sdn Bhd. *
                          </label>
                        </div>
                      </div>

                      <div class="text-xs dark:text-white">
                        <button 
                          type="submit" 
                          class="w-full bg-black text-white py-2 px-4  hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-800"
                        >
                          Sign Up
                        </button>
                        <br /><br />
                        By clicking Sign Up, you have read and agreed to the Fusion Tech Supply. <a href="#" class="underline text-blue-500">Privacy Notice</a>. 
                      </div>
                    </form>
                  </div>
                           
              </p>
            </div>
          </FBWPopup>


          <a href="#" class="text-xs font-medium hover:text-gray-300">Login</a>
      </div>
      </div>
    </div>

    </div>
    
        <div class="flex flex-col lg:flex-row  flex-wrap items-center justify-between max-w-screen-xl mx-auto p-4">
            <a href="/" class="flex items-center space-x-3 rtl:space-x-reverse">
              <img src="@images/logo-fusiontech.png" alt="Logo" class="h-[100px] lg:h-[80px] xl:h-[100px]" />               
            </a>
            <div class="flex items-center md:order-2 space-x-1 md:space-x-2 rtl:space-x-reverse">

                <div class="flex items-center space-x-3 md:mb-4 my-6 md:my-0">
                  <div class="relative">
                    <input
                      type="text"
                      class="bg-gray-100 text-black px-2 py-2 focus:outline-none text-sm"
                      placeholder="Search..."
                    />
                    <svg
                      class="w-5 h-5 text-black absolute right-3 top-2.5"
                      xmlns="http://www.w3.org/2000/svg"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M10 19a7 7 0 100-14 7 7 0 000 14zM21 21l-4.35-4.35"
                      />
                    </svg>
                  </div>

                  <button @click="handleClick" class=" items-center justify-center w-8 h-5 me-3 text-white px-5">
                    <font-awesome-icon icon="heart" size="lg" />
                    <div id="wishlistTooltip" role="tooltip" class="tooltip">
                      Add to Wishlist
                    </div>
                  </button>

                  <button
                    id="myCartDropdownButton1"
                    data-dropdown-toggle="myCartDropdown1"
                    type="button"
                    class="inline-flex items-center justify-center p-2 hover:bg-gray-600 dark:hover:bg-gray-700 text-sm font-medium leading-none text-gray-900 text-white dark:text-white"
                  >
                    <span class="sr-only"> Cart </span>
                    <font-awesome-icon icon="shopping-basket" size="lg" class="w-6 h-6 text-white mr-2 lg:mr-0" />

                  </button>

                  <div
                    id="myCartDropdown1"
                    class="hidden z-10 mx-auto max-w-sm space-y-4 overflow-hidden bg-white p-4 antialiased shadow-lg dark:bg-gray-800"
                  >
                    <div class="grid grid-cols-2">
                      <div>
                        <a
                          href="#"
                          class="truncate text-sm font-semibold leading-none text-gray-900 dark:text-white hover:underline"
                          >Item 1</a
                        >
                        <p class="mt-0.5 truncate text-sm font-normal text-gray-500 dark:text-gray-400">
                          RM299.00
                        </p>
                      </div>

                      <div class="flex items-center justify-end gap-6">
                        <p class="text-sm font-normal leading-none text-gray-500 dark:text-gray-400">
                          Qty: 2
                        </p>

                        <button
                          data-tooltip-target="tooltipRemoveItem1a"
                          type="button"
                          class="text-red-600 hover:text-red-700 dark:text-red-500 dark:hover:text-red-600"
                        >
                          <span class="sr-only"> Remove </span>
                          <svg
                            class="h-4 w-4"
                            aria-hidden="true"
                            xmlns="http://www.w3.org/2000/svg"
                            fill="currentColor"
                            viewBox="0 0 24 24"
                          >
                            <path
                              fill-rule="evenodd"
                              d="M2 12a10 10 0 1 1 20 0 10 10 0 0 1-20 0Zm7.7-3.7a1 1 0 0 0-1.4 1.4l2.3 2.3-2.3 2.3a1 1 0 1 0 1.4 1.4l2.3-2.3 2.3 2.3a1 1 0 0 0 1.4-1.4L13.4 12l2.3-2.3a1 1 0 0 0-1.4-1.4L12 10.6 9.7 8.3Z"
                              clip-rule="evenodd"
                            />
                          </svg>
                        </button>
                        <div
                          id="tooltipRemoveItem1a"
                          role="tooltip"
                          class="tooltip invisible absolute z-10 inline-block rounded-lg bg-gray-900 px-3 py-2 text-sm font-medium text-white opacity-0 shadow-sm transition-opacity duration-300 dark:bg-gray-700"
                        >
                          Remove item
                          <div class="tooltip-arrow" data-popper-arrow></div>
                        </div>
                      </div>
                    </div>

                    <div class="grid grid-cols-2">
                      <div>
                        <a
                          href="#"
                          class="truncate text-sm font-semibold leading-none text-gray-900 dark:text-white hover:underline"
                          >Apple iPad Air</a
                        >
                        <p class="mt-0.5 truncate text-sm font-normal text-gray-500 dark:text-gray-400">
                          RM1,399
                        </p>
                      </div>

                      <div class="flex items-center justify-end gap-6">
                        <p class="text-sm font-normal leading-none text-gray-500 dark:text-gray-400">
                          Qty: 1
                        </p>

                        <button
                          data-tooltip-target="tooltipRemoveItem2a"
                          type="button"
                          class="text-red-600 hover:text-red-700 dark:text-red-500 dark:hover:text-red-600"
                        >
                          <span class="sr-only"> Remove </span>
                          <svg
                            class="h-4 w-4"
                            aria-hidden="true"
                            xmlns="http://www.w3.org/2000/svg"
                            fill="currentColor"
                            viewBox="0 0 24 24"
                          >
                            <path
                              fill-rule="evenodd"
                              d="M2 12a10 10 0 1 1 20 0 10 10 0 0 1-20 0Zm7.7-3.7a1 1 0 0 0-1.4 1.4l2.3 2.3-2.3 2.3a1 1 0 1 0 1.4 1.4l2.3-2.3 2.3 2.3a1 1 0 0 0 1.4-1.4L13.4 12l2.3-2.3a1 1 0 0 0-1.4-1.4L12 10.6 9.7 8.3Z"
                              clip-rule="evenodd"
                            />
                          </svg>
                        </button>
                        <div
                          id="tooltipRemoveItem2a"
                          role="tooltip"
                          class="tooltip invisible absolute z-10 inline-block rounded-lg bg-gray-900 px-3 py-2 text-sm font-medium text-white opacity-0 shadow-sm transition-opacity duration-300 dark:bg-gray-700"
                        >
                          Remove item
                          <div class="tooltip-arrow" data-popper-arrow></div>
                        </div>
                      </div>
                    </div>


                    <a
                      href="#"
                      title=""
                      class="mb-2 me-2 inline-flex w-full items-center justify-center rounded-lg bg-primary-700 px-5 py-2.5 text-sm font-medium text-black hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
                      role="button"
                    >
                      Proceed to Checkout
                    </a>
                  </div>
                </div>

                <button data-collapse-toggle="mega-menu" type="button" class="inline-flex items-center  p-2 w-8 h-8 justify-center text-sm bg-white text-gray-500 md:hidden hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mega-menu" aria-expanded="false">
                    <span class="sr-only">Open main menu</span>
                    <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
                    </svg>
                </button>
            </div>
            <div id="mega-menu" class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1 md:my-6">
                <ul class="flex flex-col mt-4 font-medium md:flex-row md:mt-0 md:space-x-8 rtl:space-x-reverse">

                    <li>
                        <button id="mega-menu-dropdown-button" data-dropdown-toggle="mega-menu-dropdown" class="flex items-center justify-between w-full py-2 px-3 font-bold text-sm text-white border-b border-gray-500 md:w-auto hover:bg-gray-900 md:hover:bg-transparent md:border-0 md:hover:text-blue-600 md:p-0 dark:text-gray-100 md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 md:dark:hover:bg-transparent dark:border-gray-700 uppercase">
                            Products <svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
      </svg>
                        </button>


                        <div id="mega-menu-dropdown" class="absolute z-10 hidden w-full bg-white border border-gray-100 shadow-md dark:border-gray-700 dark:bg-gray-700">

                          <div class="mx-auto w-full max-w-7xl px-4">
                              <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm text-gray-900 dark:text-white py-4">
                                  <div class="p-4 md:border-r border-solid border-black" >
                                      <div class="font-bold text-xl mb-4 uppercase">Featured</div>
                                      <ul class="space-y-3" aria-labelledby="mega-menu-dropdown-button">
                                          <li>
                                              <a href="/products/promotion" class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500">
                                                  Promotions
                                              </a>
                                          </li>
                                          <li>
                                              <a href="/products/promotion" class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500">
                                                Top Seller
                                              </a>
                                          </li>
                                          <li>
                                              <a href="/products/promotion" class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500">
                                                FTS Exclusive
                                              </a>
                                          </li>
                                          <li>
                                              <a href="/products/promotion" class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500">
                                                Sale
                                              </a>
                                          </li>
                                          <li>
                                              <a href="/products/promotion" class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500">
                                                Bundle
                                              </a>
                                          </li>
                                          <li>
                                              <a href="/products/promotion" class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500">
                                                Add-on
                                              </a>
                                          </li>
                                      </ul>
                                  </div>
                                  
                                  <div class="p-4">
                                    <div class="font-bold text-xl mb-4 uppercase">PC Component</div>
                                      <ul class="space-y-3">
                                         <li>
                                              <a href="/products/powersupply" class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500">
                                                Power Supply
                                              </a>
                                          </li>
                                          <li>
                                              <a href="/products/powersupply" class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500">
                                                Air CPU Cooler
                                              </a>
                                          </li>
                                          <li>
                                              <a href="/products/powersupply" class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500">
                                                AiO Liquid Cooler
                                              </a>
                                          </li>
                                          <li>
                                              <a href="/products/powersupply" class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500">
                                                Cooling Fan
                                              </a>
                                          </li>
                                          <li>
                                              <a href="/products/powersupply" class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500">
                                                Graphic Card
                                              </a>
                                          </li>
                                          <li>
                                              <a href="/products/powersupply" class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500">
                                                Memory Upgrade
                                              </a>
                                          </li>
                                          <li>
                                              <a href="/products/powersupply" class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500">
                                                Solid State Drive
                                              </a>
                                          </li>
                                      </ul>
                                  </div>
                                  
                                  <div class="p-4">
                                    <div class="font-bold text-xl mb-4 uppercase">Peripheral</div>
                                      <ul class="space-y-3">
                                          <li>
                                              <a href="/products/keyboards" class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500">
                                                Keyboard
                                              </a>
                                          </li>
                                          <li>
                                              <a href="/products/keyboards" class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500">
                                                Mice
                                              </a>
                                          </li>
                                          <li>
                                              <a href="/products/keyboards" class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500">
                                                Mouse Pad
                                              </a>
                                          </li>
                                          <li>
                                              <a href="/products/keyboards" class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500">
                                                Monitor Arm
                                              </a>
                                          </li>
                                          <li>
                                              <a href="/products/keyboards" class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500">
                                                Headset
                                              </a>
                                          </li>
                                          <li>
                                              <a href="/products/keyboards" class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500">
                                                Gaming Chair
                                              </a>
                                          </li>
                                          <li>
                                              <a href="/products/keyboards" class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500">
                                                Ergonomic Desk
                                              </a>
                                          </li>
                                          <li>
                                              <a href="/products/keyboards" class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500">
                                                Accessories
                                              </a>
                                          </li>
                                      </ul>
                                  </div>
                                  <div class="p-4">
                                    <div class="font-bold text-xl mb-4 uppercase">DIY</div>
                                      <ul class="space-y-3">
                                          <li>
                                              <a href="/products/pccase" class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500">
                                                PC Case
                                              </a>
                                          </li>
                                          <li>
                                              <a href="/products/pccase" class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500">
                                                DIY Storage
                                              </a>
                                          </li>
                                          <li>
                                              <a href="/products/pccase" class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500">
                                                Expansion Product
                                              </a>
                                          </li>
                                          <li>
                                              <a href="/products/pccase" class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500">
                                                Flash Memory Card
                                              </a>
                                          </li>
                                          <li>
                                              <a href="/products/pccase" class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500">
                                                USB Flash Drive
                                              </a>
                                          </li>
                                          <li>
                                              <a href="/products/pccase" class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500">
                                                Network
                                              </a>
                                          </li>
                                          <li>
                                              <a href="/products/pccase" class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500">
                                                Device Holder
                                              </a>
                                          </li>
                                          <li>
                                              <a href="/products/pccase" class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500">
                                                Others
                                              </a>
                                          </li>
                                      </ul>
                                  </div>
                              </div>
                          </div>
                      </div>


                    </li>
                    <li>
                        <a href="/products/promotion" class="block py-2 px-3 text-white font-bold text-sm border-b border-gray-500 hover:bg-gray-900 md:hover:bg-transparent md:border-0 md:hover:text-blue-600 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 md:dark:hover:bg-transparent dark:border-gray-700 uppercase">Promotions</a>
                    </li>
                    <li>
                        <a href="/products/keyboards" class="block py-2 px-3 text-white font-bold text-sm border-b border-gray-500 hover:bg-gray-900 md:hover:bg-transparent md:border-0 md:hover:text-blue-600 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 md:dark:hover:bg-transparent dark:border-gray-700 uppercase">Brands</a>
                    </li>
                    <li>
                        <a href="/products/powersupply" class="block py-2 px-3 text-white font-bold text-sm border-b border-gray-500 hover:bg-gray-900 md:hover:bg-transparent md:border-0 md:hover:text-blue-600 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 md:dark:hover:bg-transparent dark:border-gray-700 uppercase">Reviews</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>



  
</template>


<style>

.tooltip {
  visibility: hidden;
  background-color: red;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
}

[data-tooltip-target]:hover + .tooltip {
  visibility: visible;
}
</style>

<script setup>
import { ref } from 'vue'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import {FBWPopup} from '@/components'


const popDelivery = ref(false);
const popSignup = ref(false);



// Dark mode state
const darkMode = ref(document.documentElement.classList.contains('dark'));

const toggleDarkMode = () => {
  darkMode.value = !darkMode.value;
  if (darkMode.value) {
    document.documentElement.classList.add('dark');
  } else {
    document.documentElement.classList.remove('dark');
  }
};

document.addEventListener('DOMContentLoaded', function () {
  document.getElementById('myCartDropdownButton1').click()
})

function handleClick() {
  console.log('Icon clicked');
  // Add your click handling logic here
}
const isDropdownOpen = ref(false)

const notificationCount = ref(0) // Example notification count
const notifications = ref([
  'Notification 1',
  'Notification 2',
  'Notification 3'
])




</script>
