<template>
  <dialog-loading ref="dialogLoading"></dialog-loading>
  <main>
    <!-- <div class="bg-black">
      <CarouselBanner :data="banner.data" />
    </div> -->

    <div v-if="listBanner != false" class="">
      <SwiperBanner :data="listBanner.data" />
    </div>

    <div class="bg-[url('/images/bg.svg')] bg-cover bg-[left_calc(50%)_top_calc(15%)]">
      <div class="container mx-auto">
        <div data-aos="fade-in" class="text-center lg:text-4xl md:text-3xl text-2xl text-[#273A97] font-bold lg:py-16 md:py-16 py-10">
          {{ translate("Our Products") }}
        </div>
        <div data-aos="fade-up">
          <CardProducts></CardProducts>
        </div>
      </div>

      <!-- <div class="container mx-auto pt-16">
        <div class="lg:flex md:flex justify-between items-center">
          <div class="lg:px-24 md:px-10 px-5 text-white">
            <div class="lg:text-4xl md:text-xl text-2xl font-bold py-6">
              {{ translate("Special Recipes") }}
            </div>
            <p class="lg:text-xl md:text-lg text-base">
              {{
                translate(
                  "Whether you’re a noodle newbie or a noodle master, this collection of noodle recipes are designed to inspire and easy for everyone."
                )
              }}
            </p>
          </div>
          <div class="content-right px-20 lg:mt-0 md:mt-0 mt-5">
            <div
              class="btn-home relative bg-[#F7FF00] text-white rounded-full w-max mx-auto"
            >
              <div
                class="txt-home lg:px-12 lg:py-3 px-6 py-3 font-bold text lg:text-2xl md:text-lg text-base"
              >
                {{ translate("See All Recipes") }}
              </div>
            </div>
          </div>
        </div>
      </div> -->

      <!-- <div class="container mx-auto lg:px-20 md:px-20">
        <CarouselNoodles />
      </div> -->

      <div>
        <div style="overflow-x: hidden" class="lg:py-16 md:py-16 py-10">
          <div class="text-center text-white lg:text-4xl md:text-3xl text-2xl font-bold md:my-10 my-0">
            {{ translate("Our Videos") }}
          </div>
          <div data-aos="fade-left">
            <SectionOurVideos></SectionOurVideos>
          </div>
        </div>
      </div>
    </div>

    <div v-if="listArticles != false" class="bg-[#273A97]">
      <div class="container mx-auto lg:px-10 md:px-10 px-5">
        <div class="lg:py-16 md:py-10 py-10">
          <div data-aos="fade-in" class="text-center lg:text-4xl md:text-3xl text-2xl text-white font-bold">
            {{ translate("Recent Articles") }}
          </div>
          <div data-aos="fade-right" class="grid lg:grid-cols-3 md:grid-cols-2 gap-5 rounded-xl lg:mt-16 md:mt-10 mt-8">
            <div class="card-article relative lg:col-span-2 rounded-[30px] w-full lg:h-[70vh] md:h-52 h-52">
              <NuxtLink :to="'/article/' + listArticles.data[0].slug">
                <img :src="listArticles.data[0].thumbnail" :alt="listArticles.data[0].title" class="w-full h-full object-cover rounded-[30px]" />
                <div class="absolute inset-0 bg-black bg-opacity-50 flex flex-col justify-end p-4 rounded-[30px]">
                  <div class="text-article absolute lg:left-8 md:left-4 lg:bottom-8 md:bottom-4">
                    <h2 class="text-white lg:text-2xl md:text-xl text-lg">
                      {{ listArticles.data[0].title }}
                    </h2>
                    <p class="text-white text-sm line-clamp-2 lg:pr-40 md:pr-40 pr-8" v-html="listArticles.data[0].preview"></p>
                  </div>
                </div>
              </NuxtLink>
            </div>

            <div class="card-article relative rounded-[20px] overflow-hidden w-full lg:h-[70vh] md:h-52 h-52">
              <NuxtLink :to="'/article/' + listArticles.data[1].slug">
                <img :src="listArticles.data[1].thumbnail" :alt="listArticles.data[1].title" class="w-full h-full object-cover rounded-[20px]" />
                <div class="absolute inset-0 bg-black bg-opacity-50 flex flex-col justify-end p-4 rounded-[20px]">
                  <div class="text-article absolute lg:left-8 md:left-4 lg:bottom-8 md:bottom-4">
                    <h2 class="text-white lg:text-2xl md:text-xl text-lg">
                      {{ listArticles.data[1].title }}
                    </h2>
                    <p class="text-white text-sm line-clamp-2 lg:pr-14 md:pr-20 pr-8" v-html="listArticles.data[1].preview"></p>
                  </div>
                </div>
              </NuxtLink>
            </div>

            <div class="card-article relative rounded-[30px] overflow-hidden w-full lg:h-[70vh] md:h-52 h-52">
              <NuxtLink :to="'/article/' + listArticles.data[2].slug">
                <img v-if="listArticles.data?.[2]?.thumbnail" :src="listArticles.data[2].thumbnail" :alt="listArticles.data[2].title" class="w-full h-full object-cover rounded-[30px]" />
                <div class="absolute inset-0 bg-black bg-opacity-50 flex flex-col justify-end p-4 rounded-[30px]">
                  <div class="text-article absolute lg:left-8 md:left-4 lg:bottom-8 md:bottom-4">
                    <h2 v-if="listArticles.data?.[2]?.title" class="text-white lg:text-2xl md:text-xl text-lg">
                      {{ listArticles.data[2].title }}
                    </h2>
                    <p v-if="listArticles.data?.[2]?.preview" class="text-white text-sm line-clamp-2 lg:pr-14 md:pr-20 pr-8" v-html="listArticles.data[2].preview"></p>
                  </div>
                </div>
              </NuxtLink>
            </div>

            <div class="card-article relative lg:col-span-2 rounded-[30px] overflow-hidden w-full lg:h-[70vh] md:h-52 h-52">
              <NuxtLink :to="'/article/' + listArticles.data[3].slug">
                <img v-if="listArticles.data?.[3]?.thumbnail" :src="listArticles.data[3].thumbnail" :alt="listArticles.data[3].title" class="w-full h-full object-cover rounded-[30px]" />
                <div class="absolute inset-0 bg-black bg-opacity-50 flex flex-col justify-end p-4 rounded-[30px]">
                  <div class="text-article absolute lg:left-8 md:left-4 lg:bottom-8 md:bottom-4">
                    <h2 v-if="listArticles.data?.[3]?.title" class="text-white lg:text-2xl md:text-xl text-lg">
                      {{ listArticles.data[3].title }}
                    </h2>
                    <p v-if="listArticles.data?.[3]?.preview" class="text-white text-sm line-clamp-2 lg:pr-40 md:pr-40 pr-8" v-html="listArticles.data[3].preview"></p>
                  </div>
                </div>
              </NuxtLink>
            </div>
          </div>
          <div data-aos="fade-up" v-if="listArticles.data?.length > 4" class="text-center py-10 text-white">
            <NuxtLink to="/k-buzz">
              <div class="btn-type-1 text-center relative bg-[#F7FF00] text-white rounded-full w-64 mx-auto">
                <div class="text-type-1 lg:px-14 lg:py-3 px-6 py-3 font-bold text lg:text-xl md:text-lg text-base">
                  <div class="flex text-center justify-center items-center space-x-3">
                    <div>{{ translate("View All") }}</div>
                    <img src="/icon/icon_arrow.svg" class="w-5" />
                  </div>
                </div>
              </div>
            </NuxtLink>
          </div>
        </div>
      </div>
    </div>

    <section class="connect-with-us">
      <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] py-[8px] mr-2">
                    <img :src="'/icon/tiktok_logo.svg'" alt="Tiktok" class="w-5 h-5" />
                    <p class="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] py-[8px] mr-2">
                    <img src="/icon/yt_logo.svg" class="w-5 h-5" alt="YouTube" />
                    <p class="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] py-[8px]">
                    <img src="/icon/ig_connect_logo.svg" alt="Instagram" class="w-5 h-5" />
                    <p class="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 lang="ts">
import axios from "axios";
import { useFetch } from "nuxt/app";
import { ref, computed, onMounted } from "vue";
import DialogLoading from "@/components/DialogLoading.vue";
import { useLanguageStore } from "~/stores/lang";
import { useInterfaceStore } from "@/stores/interface";
const interfaceStore = useInterfaceStore();

const appConfig = useAppConfig();

const languageStore = useLanguageStore;
const dialogLoading = ref();
const listArticles = ref(false);
const listBanner = ref(false);

// console.log("User LanguageHome: ", languageStore().activeLang);

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

// const { data: banner } = await useFetch(appConfig.api.url + "/api/banner", {
//   method: "GET",
// });

// const items = [
//   "https://picsum.photos/1920/1080?random=1",
//   "https://picsum.photos/1920/1080?random=2",
//   "https://picsum.photos/1920/1080?random=3",
//   "https://picsum.photos/1920/1080?random=4",
//   "https://picsum.photos/1920/1080?random=5",
//   "https://picsum.photos/1920/1080?random=6",
// ];

function getArticles() {
  axios
    .get(appConfig.api.url + "/api/home-articles", {
      params: "",
    })
    .then((response) => {
      //console.log("theArticles = " + JSON.stringify(response));
      listArticles.value = response.data;

      //getBanner();
    })
    .catch((error) => {
      //console.log("theArticles = error");
    });
}

function getBanner() {
  axios
    .get(appConfig.api.url + "/api/banner", {
      params: "",
    })
    .then((response) => {
      //console.log("getBanner = " + JSON.stringify(response));
      listBanner.value = response.data;

      getArticles();
    })
    .catch((error) => {
      //console.log("getBanner = error");
    });
}

function translate(params) {
  return languageStore().translateWords(params);
}

onMounted(() => {
  interfaceStore.isLoad = true;
  //getArticles();  
  getBanner();  
});
</script>

<script lang="ts">
import "vue3-carousel/dist/carousel.css";
import "vue-slick-carousel/dist/vue-slick-carousel.css";
import "vue-slick-carousel/dist/vue-slick-carousel-theme.css";
import NoodleList from "../components/CarouselNoodles.vue";

export default {
  components: {
    NoodleList,
  },
};
</script>

<style>
.carousel__item {
  text-align: left;
}

.carousel__icon {
  @apply text-black;
  width: 100px;
  height: 100px;
}

.carousel__prev {
  width: 80px;
  height: 80px;
  margin-left: -70px;

  svg {
    color: #fff;
    opacity: 0.5;
    border-radius: 10px;
  }
}

.carousel__next {
  width: 80px;
  height: 80px;
  margin-right: -70px;
  svg {
    color: #fff;
    opacity: 0.5;
    border-radius: 10px;
  }
}

.pagination-white {
  button::after {
    @apply bg-white;
    @apply rounded-full;
    @apply w-2.5; /* 10px width */
    @apply h-2.5;
  }

  button:hover::after {
    @apply bg-[#F7FF00];
    @apply rounded-full;
    @apply w-2.5; /* 10px width */
    @apply h-2.5;
  }

  .carousel__pagination-button--active::after {
    @apply bg-[#F7FF00];
    @apply rounded-full;
    @apply w-2.5; /* 10px width */
    @apply h-2.5;
  }
}

.card-article {
  border-radius: 30px;
  &:hover {
    transform: scale(1.03);
    transition: all 0.5s ease-out;
  }
}
.btn-home {
  border-radius: 50px;
  background: linear-gradient(to right, #273a97 50%, #f7ff00 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all 0.5s ease-out;
}

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

.txt-home {
  color: black;
  transition: all 0.6s ease-out;
}
.text-resep {
  color: black;
  transition: all 0.6s ease-out;
}

.txt-home:hover {
  color: white;
}

.button-resep-home {
  border-radius: 50px;
  background: linear-gradient(to right, #ec2029 50%, #273a97 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all 0.5s ease-out;
}

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

.text-resep-home {
  color: white;
  transition: all 0.6s ease-out;
}
.text-resep {
  color: white;
  transition: all 0.6s ease-out;
}

.text-resep-home:hover {
  color: white;
}

.image-grid-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}

.social-connect {
  text-align: left;
}

.social-connect h3 {
  margin-bottom: 10px;
}

.social-buttons {
  display: flex;
  gap: 10px;
}

.social-buttons button {
  border: none;
  padding: 7px 40px;
  font-size: 16px;
  cursor: pointer;
}

.inset-x-20 {
  left: -32px;
  right: 0;
  position: absolute; /* Ensure it's positioned absolutely */
}

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