<template>
  <main>
    <div data-aos="fade-down" class="relative items-center">
      <div v-for="(item, index) in products.data" :key="index" v-show="currentIndex === index" class="relative">
        <img :src="item.thumbnail" alt="Kimchi Bone Marrow" class="lg:h-[87vh] md:h-[50vh] w-full object-cover" />
        <div class="lg:relative md:relative lg:px-0 px-5 lg:mt-0 mt-5">
          <div class="carousel-item lg:absolute md:absolute h-auto w-full lg:bottom-12 md:bottom-8 lg:right-12 md:right-2 md:w-96 bg-white lg:rounded-[50px] rounded-[30px] lg:p-10 p-6 shadow-lg mb-6 mr-6">
            <p class="text-[#EC2029] uppercase text-sm lg:mb-2">
              {{ item.category }}
            </p>
            <h2 class="lg:text-3xl md:text-xl text-2xl text-[#273A97] font-[Header] font-bold">
              {{ item.title }}
            </h2>
            <div class="lg:h-20 h-auto">
              <p class="mt-4 text-black lg:line-clamp-4 md:line-clamp-4 line-clamp-4" v-html="item.preview"></p>
            </div>
            <div class="flex justify-between mt-8">
              <div class="">
                <NuxtLink :to="'/article/' + item.slug">
                  <div class="button-highlight-home relative bg-[#EC2029] text-white rounded-full">
                    <div class="text-highlight-home lg:px-8 lg:py-2 px-6 py-2 lg:text-base md:text-sm text-sm">Selengkapnya</div>
                  </div>
                </NuxtLink>
              </div>
              <div class="flex">
                <div class="" @click="prevItem" :disabled="currentIndex === 0">
                  <div class="button-highlight-home relative bg-[#EC2029] text-white rounded-full mr-6 lg:px-2 lg:py-2 px-1 py-1">
                    <div class="text-highlight lg:px-2 lg:py-2 px-2 py-2">
                      <img src="/icon/icon_slide_right.svg" class="rotate-180 h-5" />
                    </div>
                  </div>
                </div>
                <div class="" @click="nextItem" :disabled="currentIndex === products.length - 1">
                  <div class="button-highlight-home relative bg-[#EC2029] text-white rounded-full lg:px-2 lg:py-2 px-1 py-1">
                    <div class="text-highlight lg:px-2 lg:py-2 px-2 py-2">
                      <img src="/icon/icon_slide_right.svg" class="h-5" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="container mx-auto article-k-buzz" id="article-k-buzz">
      <CardArticle />
    </div>

    <section class="image-grid-section lg:mt:20 md:mt-10 mt-8">
      <!-- <SectionConnectWithUs /> -->
      <div class="container mx-auto">
        <div class="grid lg:grid-cols-4 md:grid-cols-2 bg-[#fff] lg:py-20 py-10 lg:gap-5 md:gap-8 gap-5 lg:px-10 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 self-center justify-between">
            <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">
                  {{ translate("Connect with us on social media") }}
                </p>
              </div>
              <p class="lg:text-base md:text-lg text-sm text-[#959595] mt-3">
                {{ translate("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>
    </section>
  </main>
</template>

<script setup>
import { useFetch } from "nuxt/app";
import { useLanguageStore } from "~/stores/lang";

const languageStore = useLanguageStore;
const appConfig = useAppConfig();

const { data: products } = await useFetch(appConfig.api.url + "/api/articles", {
  method: "GET",
  params: {
    is_highlight: 1,
  },
});

const currentIndex = ref(0);

const prevItem = () => {
  if (currentIndex.value > 0) {
    currentIndex.value--;
  }
};

const nextItem = () => {
  if (currentIndex.value < products.value.data.length - 1) {
    currentIndex.value++;
  } else {
    currentIndex.value = 0; // kembali ke slide pertama
  }
};

function translate(params) {
  return languageStore().translateWords(params);
}
</script>

<style scoped>
.button-highlight-home {
  border-radius: 50px;
  display: block;
  background: linear-gradient(to right, #273a97 50%, #ec1f29 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all 0.5s ease-out;
}

.button-highlight-home:hover {
  background-position: left bottom;
}

.text-highlight-home {
  text-align: center;
  font-size: 16px;
  color: white;
  transition: all 0.6s ease-out;
  display: block;
}
.text-highlight {
  text-align: center;
  font-size: 16px;
  color: white;
  padding: 2px 6px;
  transition: all 0.6s ease-out;
  display: block;
}

.text-highlight-home:hover {
  color: white;
}
.hover-scale:hover {
  transform: scale(1.07);
  transition: all 0.5s ease-out;
}
</style>
