<template>
  <div class="lg:px-10 px-5 items-center justify-center mb-32">
    <div class="grid lg:grid-cols-3 grid-cols-1 md:grid-cols-2 gap-8 mb-6">
      <div class="">
        <div
          class="group group-hosea bg-white p-5 rounded-[30px] shadow-xl"
          style="box-shadow: 0px 8px 20px #0000001f"
        >
          <div>
            <div
              class="relative img-wrapper relative w-full h-0 rounded-[30px]"
              style="padding-top: 66.67%"
            >
              <img
                class="inner-img absolute top-0 left-0 w-full h-full object-cover rounded-[30px]"
                src="/images/voucher-1.png"
              />
            </div>
          </div>

          <div class="mt-5 leading-8">
            <p class="text-hosea text-base text-[#131313]">
              Diskon 50% untuk pembelian produk
              <b>Ariang Rice Series Bulgogi Rice Vermicelli</b>
            </p>
            <p
              v-for="(hours, day) in formattedHours"
              :key="day"
              class="text-[#131313]"
            >
              <strong>{{ day }}:</strong> {{ hours }}
            </p>

            <div class="flex items-center justify-between mt-6">
              <p class="text-[13px]">Periode: 1-15 Oktober 2025</p>
              <div
                class="button-highlight relative bg-[#EC2029] text-white rounded-full lg:px-8 lg:py-3 md:px-8 lg:px-8 lg:py-3 md:py-3 px-6 py-2"
              >
                <div v-on:click="toggleLogin()" class="text-highlight text-sm">
                  {{ translate("See Details") }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="">
        <div
          class="group group-hosea bg-white p-5 rounded-[30px] shadow-xl"
          style="box-shadow: 0px 8px 20px #0000001f"
        >
          <div>
            <div
              class="relative img-wrapper relative w-full h-0 rounded-[30px]"
              style="padding-top: 66.67%"
            >
              <img
                class="inner-img absolute top-0 left-0 w-full h-full object-cover rounded-[30px]"
                src="/images/voucher-2.png"
              />
            </div>
          </div>

          <div class="mt-5 leading-8">
            <p class="text-hosea text-base text-[#131313]">
              Diskon 50% untuk pembelian produk
              <b>Ariang Rice Series Bulgogi Rice Vermicelli</b>
            </p>
            <p
              v-for="(hours, day) in formattedHours"
              :key="day"
              class="text-[#131313]"
            >
              <strong>{{ day }}:</strong> {{ hours }}
            </p>

            <div class="flex items-center justify-between mt-6">
              <p class="text-[13px]">Periode: 1-15 Oktober 2025</p>
              <div
                class="button-highlight relative bg-[#EC2029] text-white rounded-full lg:px-8 lg:py-3 md:px-8 lg:px-8 lg:py-3 md:py-3 px-6 py-2"
              >
                <div v-on:click="toggleLogin()" class="text-highlight text-sm">
                  {{ translate("See Details") }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="">
        <div
          class="group group-hosea bg-white p-5 rounded-[30px] shadow-xl"
          style="box-shadow: 0px 8px 20px #0000001f"
        >
          <div>
            <div
              class="relative img-wrapper relative w-full h-0 rounded-[30px]"
              style="padding-top: 66.67%"
            >
              <img
                class="inner-img absolute top-0 left-0 w-full h-full object-cover rounded-[30px]"
                src="/images/voucher-3.png"
              />
            </div>
          </div>

          <div class="mt-5 leading-8">
            <p class="text-hosea text-base text-[#131313]">
              Diskon 50% untuk pembelian produk
              <b>Ariang Rice Series Bulgogi Rice Vermicelli</b>
            </p>
            <p
              v-for="(hours, day) in formattedHours"
              :key="day"
              class="text-[#131313]"
            >
              <strong>{{ day }}:</strong> {{ hours }}
            </p>

            <div class="flex items-center justify-between mt-6">
              <p class="text-[13px]">Periode: 1-15 Oktober 2025</p>
              <div
                class="button-highlight relative bg-[#EC2029] text-white rounded-full lg:px-8 lg:py-3 md:px-8 lg:px-8 lg:py-3 md:py-3 px-6 py-2"
              >
                <div v-on:click="toggleLogin()" class="text-highlight text-sm">
                  {{ translate("See Details") }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="">
        <div
          class="group group-hosea bg-white p-5 rounded-[30px] shadow-xl"
          style="box-shadow: 0px 8px 20px #0000001f"
        >
          <div>
            <div
              class="relative img-wrapper relative w-full h-0 rounded-[30px]"
              style="padding-top: 66.67%"
            >
              <img
                class="inner-img absolute top-0 left-0 w-full h-full object-cover rounded-[30px]"
                src="/images/voucher-1.png"
              />
            </div>
          </div>

          <div class="mt-5 leading-8">
            <p class="text-hosea text-base text-[#131313]">
              Diskon 50% untuk pembelian produk
              <b>Ariang Rice Series Bulgogi Rice Vermicelli</b>
            </p>
            <p
              v-for="(hours, day) in formattedHours"
              :key="day"
              class="text-[#131313]"
            >
              <strong>{{ day }}:</strong> {{ hours }}
            </p>

            <div class="flex items-center justify-between mt-6">
              <p class="text-[13px]">Periode: 1-15 Oktober 2025</p>
              <div
                class="button-highlight relative bg-[#EC2029] text-white rounded-full lg:px-8 lg:py-3 md:px-8 lg:px-8 lg:py-3 md:py-3 px-6 py-2"
              >
                <div v-on:click="toggleLogin()" class="text-highlight text-sm">
                  {{ translate("See Details") }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="">
        <div
          class="group group-hosea bg-white p-5 rounded-[30px] shadow-xl"
          style="box-shadow: 0px 8px 20px #0000001f"
        >
          <div>
            <div
              class="relative img-wrapper relative w-full h-0 rounded-[30px]"
              style="padding-top: 66.67%"
            >
              <img
                class="inner-img absolute top-0 left-0 w-full h-full object-cover rounded-[30px]"
                src="/images/voucher-2.png"
              />
            </div>
          </div>

          <div class="mt-5 leading-8">
            <p class="text-hosea text-base text-[#131313]">
              Diskon 50% untuk pembelian produk
              <b>Ariang Rice Series Bulgogi Rice Vermicelli</b>
            </p>
            <p
              v-for="(hours, day) in formattedHours"
              :key="day"
              class="text-[#131313]"
            >
              <strong>{{ day }}:</strong> {{ hours }}
            </p>

            <div class="flex items-center justify-between mt-6">
              <p class="text-[13px]">Periode: 1-15 Oktober 2025</p>
              <div
                class="button-highlight relative bg-[#EC2029] text-white rounded-full lg:px-8 lg:py-3 md:px-8 lg:px-8 lg:py-3 md:py-3 px-6 py-2"
              >
                <div v-on:click="toggleLogin()" class="text-highlight text-sm">
                  {{ translate("See Details") }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="">
        <div
          class="group group-hosea bg-white p-5 rounded-[30px] shadow-xl"
          style="box-shadow: 0px 8px 20px #0000001f"
        >
          <div>
            <div
              class="relative img-wrapper relative w-full h-0 rounded-[30px]"
              style="padding-top: 66.67%"
            >
              <img
                class="inner-img absolute top-0 left-0 w-full h-full object-cover rounded-[30px]"
                src="/images/voucher-3.png"
              />
            </div>
          </div>

          <div class="mt-5 leading-8">
            <p class="text-hosea text-base text-[#131313]">
              Diskon 50% untuk pembelian produk
              <b>Ariang Rice Series Bulgogi Rice Vermicelli</b>
            </p>
            <p
              v-for="(hours, day) in formattedHours"
              :key="day"
              class="text-[#131313]"
            >
              <strong>{{ day }}:</strong> {{ hours }}
            </p>

            <div class="flex items-center justify-between mt-6">
              <p class="text-[13px]">Periode: 1-15 Oktober 2025</p>
              <div
                class="button-highlight relative bg-[#EC2029] text-white rounded-full lg:px-8 lg:py-3 md:px-8 lg:px-8 lg:py-3 md:py-3 px-6 py-2"
              >
                <div v-on:click="toggleLogin()" class="text-highlight text-sm">
                  {{ translate("See Details") }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="">
        <div
          class="group group-hosea bg-white p-5 rounded-[30px] shadow-xl"
          style="box-shadow: 0px 8px 20px #0000001f"
        >
          <div>
            <div
              class="relative img-wrapper relative w-full h-0 rounded-[30px]"
              style="padding-top: 66.67%"
            >
              <img
                class="inner-img absolute top-0 left-0 w-full h-full object-cover rounded-[30px]"
                src="/images/voucher-1.png"
              />
            </div>
          </div>

          <div class="mt-5 leading-8">
            <p class="text-hosea text-base text-[#131313]">
              Diskon 50% untuk pembelian produk
              <b>Ariang Rice Series Bulgogi Rice Vermicelli</b>
            </p>
            <p
              v-for="(hours, day) in formattedHours"
              :key="day"
              class="text-[#131313]"
            >
              <strong>{{ day }}:</strong> {{ hours }}
            </p>

            <div class="flex items-center justify-between mt-6">
              <p class="text-[13px]">Periode: 1-15 Oktober 2025</p>
              <div
                class="button-highlight relative bg-[#EC2029] text-white rounded-full lg:px-8 lg:py-3 md:px-8 lg:px-8 lg:py-3 md:py-3 px-6 py-2"
              >
                <div v-on:click="toggleLogin()" class="text-highlight text-sm">
                  {{ translate("See Details") }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="">
        <div
          class="group group-hosea bg-white p-5 rounded-[30px] shadow-xl"
          style="box-shadow: 0px 8px 20px #0000001f"
        >
          <div>
            <div
              class="relative img-wrapper relative w-full h-0 rounded-[30px]"
              style="padding-top: 66.67%"
            >
              <img
                class="inner-img absolute top-0 left-0 w-full h-full object-cover rounded-[30px]"
                src="/images/voucher-2.png"
              />
            </div>
          </div>

          <div class="mt-5 leading-8">
            <p class="text-hosea text-base text-[#131313]">
              Diskon 50% untuk pembelian produk
              <b>Ariang Rice Series Bulgogi Rice Vermicelli</b>
            </p>
            <p
              v-for="(hours, day) in formattedHours"
              :key="day"
              class="text-[#131313]"
            >
              <strong>{{ day }}:</strong> {{ hours }}
            </p>

            <div class="flex items-center justify-between mt-6">
              <p class="text-[13px]">Periode: 1-15 Oktober 2025</p>
              <div
                class="button-highlight relative bg-[#EC2029] text-white rounded-full lg:px-8 lg:py-3 md:px-8 lg:px-8 lg:py-3 md:py-3 px-6 py-2"
              >
                <div v-on:click="toggleLogin()" class="text-highlight text-sm">
                  {{ translate("See Details") }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="">
        <div
          class="group group-hosea bg-white p-5 rounded-[30px] shadow-xl"
          style="box-shadow: 0px 8px 20px #0000001f"
        >
          <div>
            <div
              class="relative img-wrapper relative w-full h-0 rounded-[30px]"
              style="padding-top: 66.67%"
            >
              <img
                class="inner-img absolute top-0 left-0 w-full h-full object-cover rounded-[30px]"
                src="/images/voucher-3.png"
              />
            </div>
          </div>

          <div class="mt-5 leading-8">
            <p class="text-hosea text-base text-[#131313]">
              Diskon 50% untuk pembelian produk
              <b>Ariang Rice Series Bulgogi Rice Vermicelli</b>
            </p>
            <p
              v-for="(hours, day) in formattedHours"
              :key="day"
              class="text-[#131313]"
            >
              <strong>{{ day }}:</strong> {{ hours }}
            </p>

            <div class="flex items-center justify-between mt-6">
              <p class="text-[13px]">Periode: 1-15 Oktober 2025</p>
              <div
                class="button-highlight relative bg-[#EC2029] text-white rounded-full lg:px-8 lg:py-3 md:px-8 lg:px-8 lg:py-3 md:py-3 px-6 py-2"
              >
                <div v-on:click="toggleLogin()" class="text-highlight text-sm">
                  {{ translate("See Details") }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="">
        <div
          class="group group-hosea bg-white p-5 rounded-[30px] shadow-xl"
          style="box-shadow: 0px 8px 20px #0000001f"
        >
          <div>
            <div
              class="relative img-wrapper relative w-full h-0 rounded-[30px]"
              style="padding-top: 66.67%"
            >
              <img
                class="inner-img absolute top-0 left-0 w-full h-full object-cover rounded-[30px]"
                src="/images/voucher-1.png"
              />
            </div>
          </div>

          <div class="mt-5 leading-8">
            <p class="text-hosea text-base text-[#131313]">
              Diskon 50% untuk pembelian produk
              <b>Ariang Rice Series Bulgogi Rice Vermicelli</b>
            </p>
            <p
              v-for="(hours, day) in formattedHours"
              :key="day"
              class="text-[#131313]"
            >
              <strong>{{ day }}:</strong> {{ hours }}
            </p>

            <div class="flex items-center justify-between mt-6">
              <p class="text-[13px]">Periode: 1-15 Oktober 2025</p>
              <div
                class="button-highlight relative bg-[#EC2029] text-white rounded-full lg:px-8 lg:py-3 md:px-8 lg:px-8 lg:py-3 md:py-3 px-6 py-2"
              >
                <div v-on:click="toggleLogin()" class="text-highlight text-sm">
                  {{ translate("See Details") }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="">
        <div
          class="group group-hosea bg-white p-5 rounded-[30px] shadow-xl"
          style="box-shadow: 0px 8px 20px #0000001f"
        >
          <div>
            <div
              class="relative img-wrapper relative w-full h-0 rounded-[30px]"
              style="padding-top: 66.67%"
            >
              <img
                class="inner-img absolute top-0 left-0 w-full h-full object-cover rounded-[30px]"
                src="/images/voucher-2.png"
              />
            </div>
          </div>

          <div class="mt-5 leading-8">
            <p class="text-hosea text-base text-[#131313]">
              Diskon 50% untuk pembelian produk
              <b>Ariang Rice Series Bulgogi Rice Vermicelli</b>
            </p>
            <p
              v-for="(hours, day) in formattedHours"
              :key="day"
              class="text-[#131313]"
            >
              <strong>{{ day }}:</strong> {{ hours }}
            </p>

            <div class="flex items-center justify-between mt-6">
              <p class="text-[13px]">Periode: 1-15 Oktober 2025</p>
              <div
                class="button-highlight relative bg-[#EC2029] text-white rounded-full lg:px-8 lg:py-3 md:px-8 lg:px-8 lg:py-3 md:py-3 px-6 py-2"
              >
                <div v-on:click="toggleLogin()" class="text-highlight text-sm">
                  {{ translate("See Details") }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="">
        <div
          class="group group-hosea bg-white p-5 rounded-[30px] shadow-xl"
          style="box-shadow: 0px 8px 20px #0000001f"
        >
          <div>
            <div
              class="relative img-wrapper relative w-full h-0 rounded-[30px]"
              style="padding-top: 66.67%"
            >
              <img
                class="inner-img absolute top-0 left-0 w-full h-full object-cover rounded-[30px]"
                src="/images/voucher-3.png"
              />
            </div>
          </div>

          <div class="mt-5 leading-8">
            <p class="text-hosea text-base text-[#131313]">
              Diskon 50% untuk pembelian produk
              <b>Ariang Rice Series Bulgogi Rice Vermicelli</b>
            </p>
            <p
              v-for="(hours, day) in formattedHours"
              :key="day"
              class="text-[#131313]"
            >
              <strong>{{ day }}:</strong> {{ hours }}
            </p>

            <div class="flex items-center justify-between mt-6">
              <p class="text-[13px]">Periode: 1-15 Oktober 2025</p>
              <div
                class="button-highlight relative bg-[#EC2029] text-white rounded-full lg:px-8 lg:py-3 md:px-8 lg:px-8 lg:py-3 md:py-3 px-6 py-2"
              >
                <div v-on:click="toggleLogin()" class="text-highlight text-sm">
                  {{ translate("See Details") }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Pop Up Detail Voucher -->
  <div>
    <div
      v-if="showDetail"
      class="overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex"
    >
      <!-- Background Overlay -->
      <div
        class="absolute mx-10 w-full h-full bg-gray-900 opacity-50"
        v-on:click="closeDetail()"
      ></div>

      <!-- Modal Content -->
      <div class="relative w-auto my-6 mx-5 max-w-4xl">
        <div
          class="border-0 mx-auto rounded-[30px] shadow-lg relative w-[140vh] bg-white outline-none focus:outline-none"
        >
          <!-- Close Button -->
          <button
            @click="closeDetail()"
            class="absolute top-4 right-4 text-gray-400 hover:text-gray-700 focus:outline-none"
          >
            <!-- Inline SVG for Close Icon -->
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
              class="w-5 h-5"
            >
              <path
                d="M6.225 4.811a1 1 0 011.414 0L12 9.172l4.361-4.36a1 1 0 111.414 1.415L13.414 10.586l4.36 4.361a1 1 0 11-1.414 1.414L12 12.001l-4.361 4.36a1 1 0 01-1.414-1.414l4.36-4.361-4.36-4.361a1 1 0 010-1.414z"
              />
            </svg>
          </button>
          <div class="flex items-stretch rounded-[30px]">
            <!-- Left Section -->
            <div class="flex flex-col justify-between p-5 rounded-l-[30px]">
              <img
                src="/images/img-voucher.png"
                alt="Noodle Package"
                class="w-60 h-auto mx-auto rounded-md shadow-md"
              />
              <div class="mt-4">
                <span class="text-sm py-2">Kode Promo</span>
                <div
                  class="bg-[#EBEBEB] font-bold rounded-xl p-2 flex items-center justify-center w-full max-w-xs"
                >
                  <span class="text-sm">GHAOSUYDAK9</span>
                  <button
                    class="ml-2 p-1 bg-blue-100 text-blue-600 rounded-full"
                    @click="copyPromoCode()"
                  >
                    <!-- Inline SVG for Copy Icon -->
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor"
                      class="w-4 h-4"
                    >
                      <path
                        d="M16 1H4C2.89 1 2 1.89 2 3v14c0 1.1.89 2 2 2h4v2H6c-.55 0-1 .45-1 1s.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1h-2v-2h4c1.1 0 2-.9 2-2V7l-6-6zm-1 19H9v-2h6v2zm5-4H4V3h10v5h5v8z"
                      />
                    </svg>
                  </button>
                </div>
              </div>
            </div>

            <!-- Right Section -->
            <div class="flex-1 p-8">
              <div
                class="bg-[#EBEBEB] rounded-full max-w-max py-2 px-6 text-[10px] text-center text-black"
              >
                Periode: 1-15 Oktober 2024
              </div>
              <div class="text-sm font-bold py-4">
                Exclusive Flavor Arirang Noodle: Apply Code for 15% Off Arirang
                Noodles!
              </div>
              <p class="text-gray-500 text-[12px] mb-4">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Phasellus imperdiet, nulla et dictum interdum, nisi lorem
                egestas odio, vitae scelerisque enim ligula venenatis dolor.
              </p>
              <h3 class="font-bold text-sm mb-2">Cara penggunaan kode</h3>
              <ul class="text-gray-500 text-[12px] list-disc pl-5 mb-4">
                <li>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </li>
                <li>
                  Maecenas nisl est, ultrices nec congue eget, auctor vitae
                  massa.
                </li>
                <li>
                  Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac.
                </li>
                <li>
                  Donec vitae dui eget tellus gravida venenatis. Integer
                  fringilla congue eros non fermentum.
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Background Blur -->
    <div v-if="showDetail" class="opacity-25 fixed inset-0 z-40 bg-black"></div>
  </div>

  <!-- Pop Up Detail Voucher -->
</template>

<script setup>
import { ref } from "vue";
import { useRoute } from "vue-router";
import { useLanguageStore } from "~/stores/lang";
const appConfig = useAppConfig();

const languageStore = useLanguageStore;

const route = useRoute();
const showDetail = ref(false);

function toggleLogin() {
  showDetail.value = !showDetail.value;
  showSignUp.value = false;
}
function closeDetail() {
  showDetail.value = false;
}

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

<style>
.img-wrapper {
  overflow: hidden;
}

.inner-img {
  transition: 0.3s;
}

.inner-img:hover {
  transform: scale(1.1);
}

.button-highlight {
  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:hover {
  background-position: left bottom;
}

.text-highlight {
  text-align: center;
  color: white;
  transition: all 0.6s ease-out;
  display: block;
}

.text-highlight:hover {
  color: white;
}

.group-hosea {
  &:hover {
    transition: all 1s;
    & .text-hosea {
      color: #16256e;
    }
    & .inner-img {
      transform: scale(1.1);
    }
    & .button-highlight {
      background-position: left bottom;
    }
  }
}
</style>
