<template>
  <footer class="footer text-[Footer] font-[Footer] text-white py-16">
    <div class="container mx-auto">
      <div class="grid xl:grid-cols-5 lg:grid-cols-3 md:grid-cols-3 lg:px-20 px-5 gap-8">
        <div class="col-span-2">
          <div class="align-center mr-10">
            <div>
              <div class="relative">
                <img src="/images/arirang_logo.svg" alt="Arirang Logo" class="w-52 mb-5" />
                <p class="mt-5">
                  Stay updated to our new products, promos, events, and <br />
                  many more.
                </p>
              </div>
              <!-- <div class="flex mt-10 items-center justify-between">
                <div class="flex text-white">
                  <div class="social-icons flex items-center justify-between items-center">
                    <img src="/icon/ig_logo.svg" alt="Instagram" class="social-icon mr-6" />
                    <img src="/icon/wa_logo.svg" alt="WhatsApp" class="social-icon mr-6" />
                    <img src="/icon/Twitter_logo.svg" alt="Twitter" class="social-icon mr-6" />
                  </div>
                </div>
              </div> -->
            </div>
          </div>
        </div>
        <div class="lg:col-span-3 md:col-span-2 flex-flow">
          <div class="footer-content lg:flex grid grid-cols-2 lg:mt-0 md:mt-0 mt-8">
            <!-- Menu Section -->
            <div class="footer-menu">
              <h4>Menu</h4>
              <ul class="text-[#FFB1B1] lg:mt-5 leading-[2]">
                <li class="list-none"><NuxtLink to="/"> Home</NuxtLink></li>
                <li class="list-none"><NuxtLink to="/products">Product</NuxtLink></li>
                <li class="list-none"><NuxtLink to="/hosea">Hosea</NuxtLink></li>
                <li class="list-none"><NuxtLink to="/k-buzz">News</NuxtLink></li>
                <li class="list-none"><NuxtLink to="/about-us">About Us</NuxtLink></li>
              </ul>
            </div>

            <div class="lg:ml-0 md:ml-0 sm:md-0 ml-10 footer-links">
              <h4>Useful Links</h4>
              <ul class="text-[#FFB1B1] lg:mt-5 leading-[2]">
                <li class="list-none"><a href="https://shopee.co.id/ariranghot" target="_blank">Shopee</a></li>
                <li class="list-none"><a href="https://www.tokopedia.com/arirangofficial" target="_blank">Tokopedia</a></li>
              </ul>
            </div>

            <!-- <div class="lg:ml-0 md:ml-0 sm:md-0 ml10 footer-faq lg:mt-0 mt-5">
              <h4>FAQ</h4>
              <ul class="text-[#FFB1B1] lg:mt-5 leading-[2]">
                <li><a href="#">Shop</a></li>
                <li><a href="#">Delivery</a></li>
                <li><a href="#">Our Menu</a></li>
                <li><a href="#">Best Food</a></li>
              </ul>
            </div> -->
            <div class="footer-contact lg:w-auto md:w-auto w-[150%] lg:mt-0 mt-5 col-span-2">
              <h4>Arirang Indonesia</h4>
              <ul class="text-[#FFB1B1] lg:mt-5 leading-[2]">
                <li>
                  <a href="tel:+628001403202" class="flex">
                    <img src="/icon/phone_icon.svg" class="mr-3 w-5" />
                    <div>+62 800 1403 202</div>
                  </a>
                </li>
                <li class="flex">
                  <a href="mailto:info@jakaranatama.co.id" class="flex">
                    <img src="/icon/mail_icon.svg" class="mr-3 w-5" />
                    <div class="lg:block md:block sm:block hidden">info@jakaranatama.co.id</div>
                    <div class="lg:hidden md:hidden sm:hidden block">info@jakar anatama.co.id</div>
                  </a>
                </li>
              </ul>
            </div>
            <div class="lg:w-auto md:w-auto w-[150%] footer-contact lg:mt-0 mt-5 col-span-2">
              <h4>Arirang Internasional</h4>
              <ul class="text-[#FFB1B1] lg:mt-5 leading-[2]">
                <li>
                  <a href="tel:+628111740977" class="flex">
                    <img src="/icon/phone_icon.svg" class="mr-3 w-5" />
                    <div>+62 811 1740 977</div>
                  </a>
                </li>
                <li>
                  <a href="mailto:export.arirang@jakaranatama.co.id" class="flex">
                    <img src="/icon/mail_icon.svg" class="mr-3 w-5" />
                    <div class="lg:block md:block sm:block hidden">export.arirang@jakaranatama.co.id</div>
                    <div class="lg:hidden md:hidden sm:hidden block">export.arirang@ jakaranatama.co.id</div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </footer>
</template>

<script></script>

<style scoped>
.footer {
  background-color: #16256e;
  color: white;
  display: flex;
  justify-content: space-between;
  align-content: space-between;
}

.footer-content {
  width: 100%;
  justify-content: space-between;
  align-content: space-between;
}

.logo-section {
  flex: 5;
  margin-right: 20px;
  justify-content: space-between;
  align-content: space-between;
}

.logo {
  max-width: 100px;
  margin-bottom: 10px;
}

.description {
  font-size: 14px;
  margin: 10px 0;
}

.social-icon {
  width: 24px;
  height: 24px;
}
</style>
