import { a as _export_sfc, _ as __nuxt_component_0$1 } from './server.mjs';
import { a as __nuxt_component_1, _ as __nuxt_component_2 } from './GradientFullArrowRight-B3gaunpf.mjs';
import { defineComponent, ref, computed, readonly, mergeProps, unref, useSSRContext } from 'vue';
import { ssrRenderAttrs, ssrRenderList, ssrRenderClass, ssrRenderSlot, ssrInterpolate, ssrRenderComponent, ssrRenderAttr, ssrIncludeBooleanAttr } from 'vue/server-renderer';
import '../_/nitro.mjs';
import 'node:http';
import 'node:https';
import 'node:events';
import 'node:buffer';
import 'nitropack/dist/runtime/plugin';
import 'packrup';
import 'consola';
import 'node:fs';
import 'node:url';
import '@iconify/utils';
import 'node:crypto';
import 'ipx';
import 'node:path';
import 'pinia';
import '@pinia/colada';
import 'vue-router';
import '@unhead/schema-org/vue';
import 'deep-pick-omit';
import '@iconify/vue';
import '../routes/renderer.mjs';
import 'vue-bundle-renderer/runtime';
import 'unhead/server';
import 'devalue';
import 'unhead/plugins';
import 'unhead/utils';

const intervalError = "[nuxt] `setInterval` should not be used on the server. Consider wrapping it with an `onNuxtReady`, `onBeforeMount` or `onMounted` lifecycle hook, or ensure you only call it in the browser by checking `false`.";
const setInterval = () => {
  console.error(intervalError);
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "VerticalStackedCardsCarousel",
  __ssrInlineRender: true,
  props: {
    slides: { default: () => [] },
    autoPlay: { type: Boolean, default: false },
    autoPlayInterval: { default: 3e3 }
  },
  setup(__props, { expose: __expose }) {
    const props = __props;
    const currentIndex = ref(0);
    const autoPlayTimer = ref(null);
    const isAnimating = ref(false);
    const visibleSlides = computed(() => {
      const total = props.slides.length;
      const result = [];
      for (let i = 0; i < 3; i++) {
        const slideIndex = (currentIndex.value + i) % total;
        result.push(props.slides[slideIndex]);
      }
      return result;
    });
    const getCardClasses = (index) => {
      const baseClasses = "transition-all duration-700 ease-in-out";
      switch (index) {
        case 0:
          return `${baseClasses} top-0 left-0 z-20`;
        case 1:
          return `${baseClasses} top-2 right-2 sm:top-4 sm:right-4 z-10`;
        case 2:
          return `${baseClasses} top-4 right-4 sm:top-8 sm:right-8 z-0`;
        default:
          return `${baseClasses} opacity-0`;
      }
    };
    const nextSlide = () => {
      if (isAnimating.value) return;
      isAnimating.value = true;
      currentIndex.value = (currentIndex.value + 1) % props.slides.length;
      resetAutoPlay();
      setTimeout(() => {
        isAnimating.value = false;
      }, 750);
    };
    const previousSlide = () => {
      if (isAnimating.value) return;
      isAnimating.value = true;
      currentIndex.value = currentIndex.value === 0 ? props.slides.length - 1 : currentIndex.value - 1;
      resetAutoPlay();
      setTimeout(() => {
        isAnimating.value = false;
      }, 750);
    };
    const goToSlide = (index) => {
      if (index === currentIndex.value || isAnimating.value) return;
      isAnimating.value = true;
      currentIndex.value = index;
      resetAutoPlay();
      setTimeout(() => {
        isAnimating.value = false;
      }, 750);
    };
    const resetAutoPlay = () => {
      if (!props.autoPlay) return;
      stopAutoPlay();
      startAutoPlay();
    };
    const startAutoPlay = () => {
      if (props.autoPlay && !autoPlayTimer.value) {
        autoPlayTimer.value = setInterval(() => {
          if (!isAnimating.value) {
            nextSlide();
          }
        }, props.autoPlayInterval);
      }
    };
    const stopAutoPlay = () => {
      if (autoPlayTimer.value) {
        clearInterval(autoPlayTimer.value);
        autoPlayTimer.value = null;
      }
    };
    __expose({
      nextSlide,
      previousSlide,
      goToSlide,
      currentIndex: readonly(currentIndex)
    });
    return (_ctx, _push, _parent, _attrs) => {
      const _component_ClientOnly = __nuxt_component_0$1;
      const _component_SvgGradientFullArrowRight = __nuxt_component_1;
      const _component_SvgGradientFullArrowLeft = __nuxt_component_2;
      _push(`<div${ssrRenderAttrs(mergeProps({ class: "flex flex-col items-center justify-center px-4" }, _attrs))} data-v-20f9cabd><div class="relative isolate ml-4 min-h-[354px] w-full max-w-[1044px] md:ml-8" data-v-20f9cabd><div class="relative h-full w-full pb-2 sm:pr-8 sm:pb-8" data-v-20f9cabd><ul${ssrRenderAttrs({
        name: "stack",
        class: "relative h-full w-full"
      })} data-v-20f9cabd>`);
      ssrRenderList(unref(visibleSlides), (slide, index) => {
        _push(`<li class="${ssrRenderClass([getCardClasses(index), "absolute w-full transition-all duration-700 ease-in-out"])}" data-v-20f9cabd><div class="bg-surface-background border-surface-border min-h-[322px] w-full rounded-[24px] border p-6" data-v-20f9cabd>`);
        ssrRenderSlot(_ctx.$slots, "default", {
          slide,
          index
        }, () => {
          _push(`<div class="relative grid grid-cols-1 overflow-hidden md:grid-cols-6" data-v-20f9cabd><div class="col-span-6" data-v-20f9cabd><span class="dark-text-gradient text-[66px] font-bold" data-v-20f9cabd>${ssrInterpolate(`.0${(unref(currentIndex) + index) % props.slides.length + 1}`)}</span><div data-v-20f9cabd><h3 class="dark-text-gradient text-[18px] font-semibold sm:text-[30px] lg:text-[32px]" data-v-20f9cabd>${ssrInterpolate(slide.title)}</h3></div><p class="ws-scrollbar mt-6 max-h-[100px] overflow-auto pe-3 text-[16px] md:text-[18px]" data-v-20f9cabd>${ssrInterpolate(slide.description)}</p></div><div class="absolute end-0 top-0 col-span-1 my-auto ms-auto" data-v-20f9cabd><div class="lottie-container h-[100px] w-[100px] md:h-[150px] md:w-[150px]" data-v-20f9cabd>`);
          _push(ssrRenderComponent(_component_ClientOnly, null, {}, _parent));
          _push(`</div></div></div>`);
        }, _push, _parent);
        _push(`</div></li>`);
      });
      _push(`</ul></div></div><div class="mt-6 flex items-center justify-center gap-6" data-v-20f9cabd><button${ssrRenderAttr("aria-label", _ctx.$t("ariaLabels.prevBtn"))}${ssrIncludeBooleanAttr(unref(isAnimating)) ? " disabled" : ""} class="${ssrRenderClass([{ "cursor-not-allowed opacity-50": unref(isAnimating) }, "prev-button-latest-models bg-surface-background border-surface-border rounded-ws-rounded flex-shrink-0 cursor-pointer border p-3"])}" data-v-20f9cabd>`);
      _push(ssrRenderComponent(_component_SvgGradientFullArrowRight, { class: "ltr:scale-x-[-1] rtl:scale-x-[1]" }, null, _parent));
      _push(`</button><div class="custom-pagination-container" data-v-20f9cabd><!--[-->`);
      ssrRenderList(_ctx.slides, (slide, index) => {
        _push(`<div class="${ssrRenderClass([{
          active: unref(currentIndex) === index,
          "cursor-not-allowed opacity-50": unref(isAnimating)
        }, "pagination-dot"])}" data-v-20f9cabd></div>`);
      });
      _push(`<!--]--></div><button${ssrRenderAttr("aria-label", _ctx.$t("ariaLabels.nextBtn"))}${ssrIncludeBooleanAttr(unref(isAnimating)) ? " disabled" : ""} class="${ssrRenderClass([{ "cursor-not-allowed opacity-50": unref(isAnimating) }, "next-button-latest-models bg-surface-background border-surface-border rounded-ws-rounded flex-shrink-0 cursor-pointer border p-3"])}" data-v-20f9cabd>`);
      _push(ssrRenderComponent(_component_SvgGradientFullArrowLeft, { class: "ltr:scale-x-[-1] rtl:scale-x-[1]" }, null, _parent));
      _push(`</button></div></div>`);
    };
  }
});
const _sfc_setup = _sfc_main.setup;
_sfc_main.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/global/VerticalStackedCardsCarousel.vue");
  return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
};
const VerticalStackedCardsCarousel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-20f9cabd"]]);

export { VerticalStackedCardsCarousel as default };
//# sourceMappingURL=VerticalStackedCardsCarousel-BVtIaAtr.mjs.map
