<template>
  <div class="contact-page-container">
    <div class="logo-section-contact">
      <div class="logo-group-contact">
        <v-img
          src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Coat_of_arms_of_East_Java.svg/1456px-Coat_of_arms_of_East_Java.svg.png"
          width="60"
          height="60"
          class="logo-img-contact"
          contain
        />
        <v-img
          src="https://static.wikia.nocookie.net/logopedia/images/1/15/Rumah_Sakit_Umum_Daerah_Dr._Saiful_Anwar.png"
          width="60"
          height="60"
          class="logo-img-contact"
          contain
        />
        <v-img
          src="https://www.menpan.go.id/site/images/berita_foto_backup/2021/sipanday_berakhlak_bangga-melayani-bangsa/Logo_BerAKHLAK.png"
          width="60"
          height="60"
          class="logo-img-contact"
          contain
        />
        <v-img
          src="https://rsusaifulanwar.jatimprov.go.id/v2/img/KARS_RSSA.png"
          width="60"
          height="60"
          class="logo-img-contact"
          contain
        />
      </div>
    </div>

    <div class="content-section-contact">
      <div class="title-section-contact">
        <h1 class="main-title-contact">With Love We Serve</h1>
        <p class="subtitle-contact">
          Kami Menyediakan Layanan Medis yang Dapat Anda Percayai
        </p>
      </div>

      <div class="banner-carousel-container">
        <v-carousel
          v-model="currentSlide"
          :show-arrows="true"
          :hide-delimiters="false"
          :cycle="false"
          :interval="0"
          class="banner-carousel"
          height="450"
          :continuous="false"
        >
          <v-carousel-item
            v-for="(item, index) in carouselItems"
            :key="index"
            class="carousel-item"
          >
            <template v-if="item.isImage">
              <v-img :src="item.src" :alt="item.alt" cover class="fill-height">
                <div class="carousel-overlay">
                  <div class="overlay-content">
                    <h3 class="overlay-title">{{ item.title }}</h3>
                    <p class="overlay-description">{{ item.description }}</p>
                  </div>
                </div>
              </v-img>
            </template>
            <template v-else>
              <div class="video-container">
                <iframe
                  v-if="currentSlide === index"
                  :src="getYouTubeEmbedUrl(item.videoId)"
                  width="100%"
                  height="100%"
                  frameborder="0"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                  allowfullscreen
                  class="youtube-iframe"
                  @load="onVideoLoad"
                  @error="onVideoError"
                ></iframe>

                <div
                  v-else
                  class="video-thumbnail"
                  @click="currentSlide = index"
                >
                  <img
                    :src="`https://img.youtube.com/vi/${item.videoId}/maxresdefault.jpg`"
                    alt="Video thumbnail"
                    class="thumbnail-img"
                  />
                  <div class="play-button-overlay">
                    <v-icon color="white" size="64">mdi-play-circle</v-icon>
                  </div>
                </div>
              </div>
            </template>
          </v-carousel-item>
        </v-carousel>

        <div class="custom-indicators">
          <span
            v-for="(item, index) in carouselItems"
            :key="index"
            :class="['indicator-dot', { active: currentSlide === index }]"
            @click="currentSlide = index"
          />
        </div>
      </div>

      <!-- <div class="cta-section-contact">
        <v-btn
          @click="navigateToQrisPayment"
          color="#FF9248"
          class="cta-button"
          x-large
        >
          <span class="button-text">LANJUT KE PEMBAYARAN</span>
        </v-btn>
        <v-btn
          @click="navigateToDebugPage"
          color="#FF9248"
          class="cta-button debug-button"
          x-large
        >
          <span class="button-text">DEBUG KE STEP 2</span>
        </v-btn>
      </div> -->
    </div>

    <div class="orange-background-contact">
      <div class="contact-info-section-contact">
        <div class="contact-item-contact">
          <div class="contact-icon-contact whatsapp-icon">
            <v-icon color="#25D366" size="28">mdi-whatsapp</v-icon>
          </div>
          <div class="contact-text-contact">+62 815-5560-6668</div>
        </div>
        <div class="contact-item-contact">
          <div class="contact-icon-contact instagram-icon">
            <v-icon color="#E1306C" size="28">mdi-instagram</v-icon>
          </div>
          <div class="contact-text-contact">rssasaifulanwar</div>
        </div>
        <div class="contact-item-contact">
          <div class="contact-icon-contact phone-icon">
            <v-icon color="#FF9248" size="28">mdi-phone</v-icon>
          </div>
          <div class="contact-text-contact">0341-362101</div>
        </div>
        <div class="contact-item-contact">
          <div class="contact-icon-contact web-icon">
            <v-icon color="#2196F3" size="28">mdi-web</v-icon>
          </div>
          <div class="contact-text-contact">rsusaifulanwar.jatimprov.go.id</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, nextTick } from "vue";
import { usePaymentStore } from "~/stores/payment";

const paymentStore = usePaymentStore();
const currentSlide = ref(0);
const videoLoaded = ref({});

const carouselItems = ref([
  {
    src: "https://i.ytimg.com/vi/4LRCHhepGmw/maxresdefault.jpg",
    alt: "RSUD Dr. Saiful Anwar Main Building",
    title: "Fasilitas Modern",
    description: "Rumah sakit dengan teknologi medis terdepan",
    isImage: true,
  },
  {
    videoId: "KQZFfRtMHe0",
    isImage: false,
    loaded: false,
  },
  {
    src: "https://rsusaifulanwar.jatimprov.go.id/v2/img/slider/slide1.jpg",
    alt: "Medical Services",
    title: "Pelayanan Terbaik",
    description: "Tim medis profesional siap melayani 24 jam",
    isImage: true,
  },
]);

const getYouTubeEmbedUrl = (videoId) => {
  const baseUrl = 'https://www.youtube.com/embed/';
  const params = new URLSearchParams({
    autoplay: '1',
    mute: '0',
    controls: '1',
    modestbranding: '1',
    rel: '0',
    showinfo: '0',
    fs: '1',
    cc_load_policy: '0',
    iv_load_policy: '3',
    autohide: '0'
  });
  return `${baseUrl}${videoId}?${params.toString()}`;
};

const onVideoLoad = () => {
  console.log('Video iframe loaded successfully');
};

const onVideoError = (error) => {
  console.error('Video iframe error:', error);
};

const navigateToQrisPayment = () => {
  console.log("Navigating to QRIS Payment...");

};

const navigateToDebugPage = () => {
  console.log("Navigating to Debug Page...");

};

watch(currentSlide, (newSlide, oldSlide) => {

});
</script>

<style scoped>

.contact-page-container {
  min-height: 100vh;
  width: 100%;
  background: white;
  display: flex;
  flex-direction: column;
}

.orange-background-contact {
  width: 100%;
  height: clamp(120px, 15vh, 200px);
  background: #ff9248;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 20px;
  margin-top: 2rem;
}

.logo-section-contact {
  position: relative;
  z-index: 2;
  padding: 15px 20px;
  display: flex;
  justify-content: center;
}

.logo-group-contact {
  display: flex;
  gap: 2rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.logo-img-contact {
  transition: transform 0.3s ease;
  width: clamp(40px, 6vw, 60px) !important;
  height: clamp(40px, 6vw, 60px) !important;
}

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

.content-section-contact {
  position: relative;
  z-index: 2;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 20px;
}

.title-section-contact {
  text-align: center;
  margin-bottom: 20px;
}

.main-title-contact {
  color: #ff9248;
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-family: "Roboto", sans-serif;
  font-weight: 800;
  margin-bottom: 12px;
  line-height: 1.2;
}

.subtitle-contact {
  color: black;
  font-size: clamp(0.9rem, 2vw, 1.1rem);
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  margin: 0;
  max-width: 600px;
}

.banner-carousel-container {
  width: 90%;
  max-width: 900px;
  margin-bottom: 30px;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.banner-carousel {
  border-radius: 20px;
  overflow: hidden;
  height: 450px;
}

.carousel-item {
  position: relative;
  width: 100%;
  height: 450px;
}

.video-container {
  width: 100%;
  height: 100%;
  position: relative;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.youtube-iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 20px;
}

.video-thumbnail {
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.thumbnail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

.play-button-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  padding: 20px;
  transition: all 0.3s ease;
}

.play-button-overlay:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: translate(-50%, -50%) scale(1.1);
}

.carousel-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: white;
  padding: 40px 30px 30px;
  z-index: 2;
}

.overlay-content {
  max-width: 600px;
}

.overlay-title {
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  font-weight: 700;
  margin-bottom: 8px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.overlay-description {
  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
  font-weight: 400;
  margin: 0;
  opacity: 0.9;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.custom-indicators {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 3;
}

.indicator-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator-dot.active {
  background: #ff9248;
  transform: scale(1.2);
}

.indicator-dot:hover {
  background: rgba(255, 255, 255, 0.8);
}

.contact-info-section-contact {
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}

.contact-item-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.contact-icon-contact {
  width: clamp(40px, 8vw, 50px);
  height: clamp(40px, 8vw, 50px);
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.contact-icon-contact:hover {
  transform: scale(1.1);
}

.contact-text-contact {
  color: white;
  font-size: clamp(12px, 2vw, 14px);
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  white-space: nowrap;
}

.cta-section-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}

.cta-button {
  width: 100%;
  max-width: 300px;
  font-weight: 700;
  letter-spacing: 1px;
}

.debug-button {
  background: #808080 !important;
}

:deep(.v-carousel__controls) {
  display: none;
}

:deep(.v-carousel__controls--bottom) {
  bottom: 50px !important;
}
</style>