<template>
  <!-- Wrapper with overflow hidden to prevent slider/iframe from causing page scrollbars -->
  <div class="hero-section">
    <div class="slider">
      <!-- Hero placeholder image - loads instantly for good LCP (WebP with PNG fallback) -->
      <picture v-if="!iframeLoaded" class="hero-picture">
        <source srcset="/images/hero.webp" type="image/webp" />
        <img
          src="/images/hero.png"
          alt="Khalej Auto - Your destination for cars in Saudi Arabia"
          class="hero-placeholder"
          fetchpriority="high"
          width="1920"
          height="1080"
          decoding="sync"
        />
      </picture>
      <!-- Loading spinner overlay -->
      <div v-if="pending && !iframeLoaded" class="loading-overlay">
        <ClientOnly>
          <v-progress-circular
            indeterminate
            :size="50"
            color="#00A0B4"
            :width="5"
          ></v-progress-circular>
          <template #fallback>
            <div class="loading-spinner-fallback"></div>
          </template>
        </ClientOnly>
      </div>
      <!-- Iframe loads in background, shown when ready - contained to prevent scrollbars -->
      <div
        v-if="!pending"
        class="slider-iframe-wrap"
        :style="{ opacity: iframeLoaded ? 1 : 0, transition: 'opacity 0.3s' }"
      >
        <iframe
          v-if="locale == 'ar'"
          :src="sliderAr"
          title="Khalej Auto Slider Arabic"
          frameborder="0"
          scrolling="no"
          @load="onIframeLoad"
          class="slider-iframe"
        />
        <iframe
          v-else
          :src="sliderEn"
          title="Khalej Auto Slider English"
          frameborder="0"
          scrolling="no"
          @load="onIframeLoad"
          class="slider-iframe"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
const { $axios } = useNuxtApp();
let sliderAr = ref("");
let sliderEn = ref("");
const { locale } = useI18n();
const pending = ref(true);
const iframeLoaded = ref(false);

const onIframeLoad = () => {
  iframeLoaded.value = true;
};

const getSliders = async () => {
  try {
    const result = await $axios.get(`sliders`);
    if (result.status == 200) {
      sliderAr.value = result.data.slide_ar;
      sliderEn.value = result.data.slide_ar;
      pending.value = false;
    }
  } catch (error) {
    // If API fails, still show the hero image
    pending.value = false;
  }
};

onMounted(() => {
  // Defer slider load until after first paint to avoid blocking TBT and Speed Index.
  // Hero placeholder shows immediately; iframe loads when browser is idle.
  const loadWhenIdle = () => {
    if (typeof requestIdleCallback !== "undefined") {
      requestIdleCallback(() => getSliders(), { timeout: 1200 });
    } else {
      setTimeout(() => getSliders(), 300);
    }
  };
  loadWhenIdle();
});
</script>

<style lang="scss">
.hero-section {
  width: 100%;
  overflow: hidden;
  min-height: 100vh;

  .slider {
    width: 100%;
    height: 100vh;
    min-height: 400px;
    margin-top: -10px;
    position: relative;
    overflow: hidden;
  }

  .hero-picture,
  .hero-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
  }

  .hero-placeholder {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  }

  .slider-iframe-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    overflow: hidden;
    pointer-events: auto;
  }

  .slider-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    /* Force iframe to not show scrollbars; content should fit or be clipped */
    overflow: hidden;
  }

  .loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    z-index: 3;
  }

  .loading-spinner-fallback {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(0, 160, 180, 0.3);
    border-top-color: #00a0b4;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
}

@media (max-width: 1100px) {
  .hero-section .slider {
    height: 100vh;
    min-height: 360px;
  }
}

@media (max-width: 600px) {
  .hero-section .slider {
    height: 100vh;
    min-height: 320px;
  }
}
</style>