<template>
<footer class="p-4 bg-black sm:p-6 dark:bg-gray-800">

  <div class="max-w-screen-xl px-4 mx-auto 2xl:px-0">
    <div class="lg:flex lg:justify-between">
      
      <div class="max-w-screen-xl px-4 mx-auto 2xl:px-0">
        <div class="lg:flex lg:justify-between">

          
          <div class="mb-6 md:mb-0 text-white text-sm lg:w-2/4">
            <a href="#" class="flex items-center">
              <img src="@images/footer_fusiontech.png" class="mr-3 w-3/4" alt="Fusion Tech Logo" />
            </a>
            <div class="my-5">
              <span class="text-color-1">HEADQUARTER</span><br />
              No, 8C, Tmn Mewah, Batu 21⁄2, Jln Maharaja Lela, 36000 Teluk Intan, Perak, Malaysia.
              <br /><br />
              <span class="text-color-1">SALES &amp; MARKETING KL</span><br />
              C-4-8, Medan Connaught, Jalan 3/144A, 56000 Kuala Lumpur, Malaysia.
            </div>
            <div class="text-xs mb-10 text-gray-500"> &copy; Fusion Tech Supply {{ currentYear }}</div>
          </div>

          
          <div class="grid grid-cols-1 gap-8 sm:gap-6 sm:grid-cols-2 divide-x-0 md:divide-x-2 divide-gray-500 lg:w-2/4">
            <div class="pr-4 pl-0 lg:pr-2 lg:pl-0 lg:ms-20">
              <h2 class="mb-6 text-lg font-semibold text-white uppercase dark:text-gray-100">Company Info</h2>
              <ul class="text-white dark:text-gray-100 text-sm">
                <li class="mb-2">
                  <a href="#" class="hover:underline">About Us</a>
                </li>
                <li class="mb-2">
                  <a href="#" class="hover:underline">Why Us</a>
                </li>
                <li class="mb-2">
                  <a href="#" class="hover:underline">Careers</a>
                </li>
                <li class="mb-2">
                  <a href="#" class="hover:underline">Press</a>
                </li>
              </ul>
            </div>
            <div class="pr-4 mb-8 pl-0 md:pl-10 text-sm">
              <h2 class="mb-6 text-lg font-semibold text-white uppercase dark:text-gray-100">Contacts</h2>
              <ul class="text-white dark:text-gray-100">
                <li class="mb-2">
                  <font-awesome-icon :icon="['fas', 'phone-flip']" size="sm" class="pr-3" /> +605-610 4100
                </li>
                <li class="mb-2">
                  <a href="mailto:enquiry@fusiontech.com.my" class="flex items-center text-sm sm:text-base text-color-1 truncate">
                    <font-awesome-icon :icon="['fas', 'envelope']" size="sm" class="pr-3" />
                    <span class="lg:text-xs">enquiry@fusiontech.com.my</span>
                  </a>
                </li>
              </ul><br />

              <h2 class="mb-6 text-lg font-semibold text-white uppercase dark:text-gray-100">Follow Us</h2>
              <ul class="text-white dark:text-gray-100">
                <li class="mb-2">
                  <div class="flex space-x-4">
                    <a href="#" target="_blank">
                      <font-awesome-icon :icon="['fab', 'facebook']" size="2x" />
                    </a>
                    <a href="#" target="_blank">
                      <font-awesome-icon :icon="['fab', 'instagram']" size="2x" />
                    </a>
                  </div>
                </li>
              </ul>
            </div>
          </div>

        </div>
      </div>


    </div>
  </div>

</footer>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import { library } from '@fortawesome/fontawesome-svg-core';
  import { faFacebook, faInstagram } from '@fortawesome/free-brands-svg-icons';
  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
  
  // Add the icons to the library
  library.add(faFacebook, faInstagram);

  const currentYear = new Date().getFullYear();
  const showPopup = ref(false);
  </script>
  