<template>
  <div>
    <div class="grid lg:grid-cols-4 md:grid-cols-2 bg-white lg:py-20 py-10 lg:gap-5 md:gap-8 gap-5 lg:px-20 md:px-10 px-5">
      <div data-aos="fade-right" class="image-item aspect-[1/1] object-cover rounded-xl hover-scale">
        <img src="/images/img_connect_1.webp" alt="Food Image 1" class="w-full h-full object-cover rounded-xl" loading="lazy" />
      </div>
      <div data-aos="fade-right" class="image-item aspect-[1/1] object-cover rounded-xl hover-scale">
        <img src="/images/img_connect_2.webp" alt="Food Image 2" class="w-full h-full object-cover rounded-xl" loading="lazy" />
      </div>
      <div data-aos="fade-right" class="image-item aspect-[1/1] object-cover rounded-xl hover-scale">
        <img src="/images/img_connect_3.webp" alt="Food Image 3" class="w-full h-full object-cover rounded-xl" loading="lazy" />
      </div>
      <div style="overflow-x: hidden" class="image-item align-center justify-between self-center">
        <div data-aos="fade-left">
          <div class="flex items-center space-x-2">
            <p class="lg:text-3xl md:text-2xl text-xl font-bold">Connect with us on social media</p>
          </div>
          <p class="lg:text-base md:text-lg text-sm text-[#959595] mt-3">Stay updated to our new products, promos, events, and many more.</p>
          <div class="flex mt-10 items-center justify-between">
            <div class="flex text-white">
              <a href="https://www.tiktok.com/@arirang.taste" target="_blank" class="flex group cursor-pointer bg-[#000000] text-center rounded-full items-center px-[10px] md:py-[8px] py-[10px] mr-2">
                <img :src="'/icon/tiktok_logo.svg'" alt="Tiktok" class="w-5 h-5" />
                <p class="hidden md:block w-0 opacity-0 lg:group-hover:opacity-100 lg:group-hover:w-16 transition-all duration-300 ease-in-out">Tiktok</p>
              </a>
              <a href="https://www.youtube.com/channel/UCULijpXxRqM-JuwLHOpQ8yw" target="_blank" class="flex group cursor-pointer bg-[#E22C45] rounded-full items-center px-[10px] md:py-[8px] py-[10px] mr-2">
                <img src="/icon/yt_logo.svg" class="w-5 h-5" alt="YouTube" />
                <p class="hidden md:block w-0 opacity-0 lg:group-hover:ml-2 lg:group-hover:opacity-100 lg:group-hover:w-16 transition-all duration-300 ease-in-out">YouTube</p>
              </a>
              <a href="https://www.instagram.com/arirang.taste" target="_blank" class="flex group cursor-pointer bg-[#363636] text-center rounded-full items-center px-[10px] md:py-[8px] py-[10px]">
                <img src="/icon/ig_connect_logo.svg" alt="Instagram" class="w-5 h-5" />
                <p class="hidden md:block w-0 opacity-0 lg:group-hover:opacity-100 lg:group-hover:w-20 transition-all duration-300 ease-in-out">Instagram</p>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script></script>
<style>
.hover-scale:hover {
  transform: scale(1.07);
  transition: all 0.5s ease-out;
}
</style>
