import { _ as _sfc_main$2, a as _sfc_main$3, b as _sfc_main$4, c as _sfc_main$5 } from "./TabsTrigger-Dzpk3vN1.js";
import { a as _export_sfc, d as useI18n, _ as __nuxt_component_0 } from "../server.mjs";
import { _ as __nuxt_component_2 } from "./ArrowUpIcon-CPulX-6W.js";
import { _ as __nuxt_component_3 } from "./ArrowDownIcon-Bp8y2Jec.js";
import { a as __nuxt_component_4, _ as __nuxt_component_5 } from "./ArrowLeftIcon-Dfw2cv7V.js";
import { _ as _sfc_main$6, a as _sfc_main$7, c as _sfc_main$8, b as _sfc_main$a } from "./CardTitle-CK392g0A.js";
import { _ as _sfc_main$9 } from "./CardDescription-SL_8-N0k.js";
import { mergeProps, useSSRContext, defineComponent, computed, ref, watch, nextTick, unref, withCtx, createVNode, toDisplayString, createBlock, openBlock, Fragment, renderList, createTextVNode, createCommentVNode } from "vue";
import { ssrRenderAttrs, ssrInterpolate, ssrRenderComponent, ssrRenderList } from "vue/server-renderer";
import { f as useWindowSize, g as useScroll } from "./index-Cce4iXMN.js";
import { f as useDebounceFn } from "./index-B_IDLhd1.js";
import "reka-ui";
import "./utils-H80jjgLf.js";
import "clsx";
import "tailwind-merge";
import "ofetch";
import "#internal/nuxt/paths";
import "D:/marwa/front/webstdy-v2-frontend/node_modules/hookable/dist/index.mjs";
import "D:/marwa/front/webstdy-v2-frontend/node_modules/unctx/dist/index.mjs";
import "D:/marwa/front/webstdy-v2-frontend/node_modules/h3/dist/index.mjs";
import "pinia";
import "D:/marwa/front/webstdy-v2-frontend/node_modules/defu/dist/defu.mjs";
import "@pinia/colada";
import "D:/marwa/front/webstdy-v2-frontend/node_modules/klona/dist/index.mjs";
import "vue-router";
import "D:/marwa/front/webstdy-v2-frontend/node_modules/radix3/dist/index.mjs";
import "D:/marwa/front/webstdy-v2-frontend/node_modules/cookie-es/dist/index.mjs";
import "D:/marwa/front/webstdy-v2-frontend/node_modules/destr/dist/index.mjs";
import "D:/marwa/front/webstdy-v2-frontend/node_modules/ohash/dist/index.mjs";
import "D:/marwa/front/webstdy-v2-frontend/node_modules/@unhead/vue/dist/index.mjs";
import "@vue/devtools-api";
import "@unhead/schema-org/vue";
import "scule";
import "deep-pick-omit";
import "@iconify/vue";
const _sfc_main$1 = {};
function _sfc_ssrRender(_ctx, _push, _parent, _attrs) {
  _push(`<svg${ssrRenderAttrs(mergeProps({
    width: "20",
    height: "20",
    viewBox: "0 0 20 20",
    fill: "none",
    xmlns: "http://www.w3.org/2000/svg"
  }, _attrs))}><path d="M3.75 10.625L8.75 15.625L16.25 4.375" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>`);
}
const _sfc_setup$1 = _sfc_main$1.setup;
_sfc_main$1.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/svg/CheckMarkIcon.vue");
  return _sfc_setup$1 ? _sfc_setup$1(props, ctx) : void 0;
};
const __nuxt_component_14 = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["ssrRender", _sfc_ssrRender]]);
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "VerticalTabsWithContent",
  __ssrInlineRender: true,
  props: {
    services: {}
  },
  setup(__props) {
    const { locale } = useI18n();
    const props = __props;
    const safeServices = computed(() => props.services || []);
    const tabsListRef = ref();
    const currentTabContentRef = ref();
    const tabsArrivedState = ref({
      top: true,
      bottom: true,
      left: true,
      right: true
    });
    const contentArrivedState = ref({
      top: true,
      bottom: true
    });
    const { width } = useWindowSize();
    const isMobile = computed(() => width.value < 1024);
    const isHydrated = ref(false);
    const getScrollElement = (ref2) => {
      if (!ref2) return null;
      if (typeof ref2 === "object" && "$el" in ref2 && ref2.$el instanceof HTMLElement) {
        return ref2.$el;
      }
      if (ref2 instanceof HTMLElement) {
        return ref2;
      }
      return null;
    };
    const scrollWatcherCleanup = {
      tabs: null,
      content: null
    };
    const initializeScrollWatcher = (elementRef, stateRef, offset, cleanupKey) => {
      if (scrollWatcherCleanup[cleanupKey]) {
        scrollWatcherCleanup[cleanupKey]();
        scrollWatcherCleanup[cleanupKey] = null;
      }
      const scrollElement2 = getScrollElement(elementRef);
      if (!scrollElement2) return;
      try {
        const { arrivedState } = useScroll(scrollElement2, { offset });
        const stopWatcher = watch(
          arrivedState,
          (newState) => stateRef.value = newState,
          {
            immediate: true
          }
        );
        scrollWatcherCleanup[cleanupKey] = stopWatcher;
      } catch (error) {
        console.warn("Failed to initialize scroll watcher:", error);
      }
    };
    const reinitializeScrollWatchers = () => {
      initializeScrollWatcher(
        tabsListRef.value,
        tabsArrivedState,
        { top: 10, bottom: 10, left: 10, right: 10 },
        "tabs"
      );
      initializeScrollWatcher(
        currentTabContentRef.value,
        contentArrivedState,
        { top: 10, bottom: 10 },
        "content"
      );
    };
    const debouncedReinitializeScrollWatchers = useDebounceFn(() => {
      reinitializeScrollWatchers();
    }, 150);
    watch(width, () => {
      nextTick(() => {
        debouncedReinitializeScrollWatchers();
      });
    });
    const tabsScrollClasses = computed(() => {
      if (!isHydrated.value) return {};
      if (isMobile.value) {
        const canScrollLeft = !tabsArrivedState.value.left;
        const canScrollRight = !tabsArrivedState.value.right;
        const isRTL = locale.value === "ar";
        if (isRTL) {
          return {
            "scroll-fade-left-rtl": canScrollLeft,
            "scroll-fade-right-rtl": canScrollRight,
            "scroll-fade-both-horizontal-rtl": canScrollLeft && canScrollRight
          };
        } else {
          return {
            "scroll-fade-left": canScrollLeft,
            "scroll-fade-right": canScrollRight,
            "scroll-fade-both-horizontal": canScrollLeft && canScrollRight
          };
        }
      } else {
        return {
          "scroll-fade-top": !tabsArrivedState.value.top,
          "scroll-fade-bottom": !tabsArrivedState.value.bottom,
          "scroll-fade-both": !tabsArrivedState.value.top && !tabsArrivedState.value.bottom
        };
      }
    });
    const contentScrollClasses = computed(() => {
      if (!isHydrated.value) return {};
      return {
        "scroll-fade-top": !contentArrivedState.value.top,
        "scroll-fade-bottom": !contentArrivedState.value.bottom,
        "scroll-fade-both": !contentArrivedState.value.top && !contentArrivedState.value.bottom
      };
    });
    const scrollElement = (elementRef, direction, amount = 200) => {
      if (!elementRef.value) return;
      const element = getScrollElement(elementRef.value);
      if (!(element == null ? void 0 : element.scrollBy)) {
        console.warn("Invalid scroll element");
        return;
      }
      try {
        const scrollOptions = { behavior: "smooth" };
        if (direction === "up") scrollOptions.top = -amount;
        else if (direction === "down") scrollOptions.top = amount;
        else if (direction === "left") scrollOptions.left = -amount;
        else if (direction === "right") scrollOptions.left = amount;
        element.scrollBy(scrollOptions);
      } catch (error) {
        console.warn("Failed to scroll:", error);
      }
    };
    const scrollTabs = (direction) => scrollElement(tabsListRef, direction);
    const scrollContent = (direction) => scrollElement(currentTabContentRef, direction);
    return (_ctx, _push, _parent, _attrs) => {
      var _a;
      const _component_Tabs = _sfc_main$2;
      const _component_ClientOnly = __nuxt_component_0;
      const _component_SvgArrowUpIcon = __nuxt_component_2;
      const _component_SvgArrowDownIcon = __nuxt_component_3;
      const _component_SvgArrowLeftIcon = __nuxt_component_4;
      const _component_SvgArrowRightIcon = __nuxt_component_5;
      const _component_TabsList = _sfc_main$3;
      const _component_TabsTrigger = _sfc_main$4;
      const _component_TabsContent = _sfc_main$5;
      const _component_Card = _sfc_main$6;
      const _component_CardHeader = _sfc_main$7;
      const _component_CardTitle = _sfc_main$8;
      const _component_CardDescription = _sfc_main$9;
      const _component_CardContent = _sfc_main$a;
      const _component_SvgCheckMarkIcon = __nuxt_component_14;
      if (unref(safeServices).length === 0) {
        _push(`<div${ssrRenderAttrs(mergeProps({ class: "flex min-h-[29.5625rem] w-full items-center justify-center" }, _attrs))} data-v-e7720da3><p class="text-muted-foreground" data-v-e7720da3>${ssrInterpolate(_ctx.$t("noServicesAvailable") || "No services available")}</p></div>`);
      } else {
        _push(ssrRenderComponent(_component_Tabs, mergeProps({
          orientation: "vertical",
          "default-value": (_a = unref(safeServices)[0]) == null ? void 0 : _a.value,
          class: "min-h-[29.5625rem] w-full"
        }, _attrs), {
          default: withCtx((_, _push2, _parent2, _scopeId) => {
            if (_push2) {
              _push2(`<div class="flex flex-col gap-2 lg:flex-row lg:gap-6 rtl:lg:flex-row-reverse" data-v-e7720da3${_scopeId}><div class="relative w-full lg:max-w-[19.8125rem]" data-v-e7720da3${_scopeId}>`);
              _push2(ssrRenderComponent(_component_ClientOnly, { "fallback-tag": "div" }, {
                fallback: withCtx((_2, _push3, _parent3, _scopeId2) => {
                  if (_push3) {
                    _push3(`<div class="pointer-events-none absolute inset-0 z-10" data-v-e7720da3${_scopeId2}><div class="absolute top-2 left-1/2 h-10 w-10 -translate-x-1/2 transform rounded-full p-2 opacity-0" data-v-e7720da3${_scopeId2}></div><div class="absolute bottom-2 left-1/2 h-10 w-10 -translate-x-1/2 transform rounded-full p-2 opacity-0" data-v-e7720da3${_scopeId2}></div></div>`);
                  } else {
                    return [
                      createVNode("div", { class: "pointer-events-none absolute inset-0 z-10" }, [
                        createVNode("div", { class: "absolute top-2 left-1/2 h-10 w-10 -translate-x-1/2 transform rounded-full p-2 opacity-0" }),
                        createVNode("div", { class: "absolute bottom-2 left-1/2 h-10 w-10 -translate-x-1/2 transform rounded-full p-2 opacity-0" })
                      ])
                    ];
                  }
                })
              }, _parent2, _scopeId));
              _push2(ssrRenderComponent(_component_TabsList, {
                id: "tabs-container",
                ref_key: "tabsListRef",
                ref: tabsListRef,
                dir: unref(locale) === "ar" ? "rtl" : "ltr",
                class: ["rounded-ws-rounded ws-no-scrollbar flex h-auto w-full flex-row gap-3 overflow-x-auto overflow-y-visible bg-transparent transition-[mask] duration-300 will-change-scroll lg:grid lg:h-[29.5625rem] lg:grid-cols-1 lg:flex-col lg:gap-6 lg:overflow-x-visible lg:overflow-y-auto", unref(tabsScrollClasses)]
              }, {
                default: withCtx((_2, _push3, _parent3, _scopeId2) => {
                  if (_push3) {
                    _push3(`<!--[-->`);
                    ssrRenderList(unref(safeServices), (tab) => {
                      _push3(ssrRenderComponent(_component_TabsTrigger, {
                        key: tab.value,
                        value: tab.value,
                        gradient: true,
                        class: "rounded-ws-rounded bg-surface-background border-surface-border w-full px-4 py-4 lg:py-6 transition-all duration-300"
                      }, {
                        default: withCtx((_3, _push4, _parent4, _scopeId3) => {
                          if (_push4) {
                            _push4(`<div class="text-center" data-v-e7720da3${_scopeId3}><span class="text-base leading-6 font-medium" data-v-e7720da3${_scopeId3}>${ssrInterpolate(tab.title)}</span></div>`);
                          } else {
                            return [
                              createVNode("div", { class: "text-center" }, [
                                createVNode("span", { class: "text-base leading-6 font-medium" }, toDisplayString(tab.title), 1)
                              ])
                            ];
                          }
                        }),
                        _: 2
                      }, _parent3, _scopeId2));
                    });
                    _push3(`<!--]-->`);
                  } else {
                    return [
                      (openBlock(true), createBlock(Fragment, null, renderList(unref(safeServices), (tab) => {
                        return openBlock(), createBlock(_component_TabsTrigger, {
                          key: tab.value,
                          value: tab.value,
                          gradient: true,
                          class: "rounded-ws-rounded bg-surface-background border-surface-border w-full px-4 py-4 lg:py-6 transition-all duration-300"
                        }, {
                          default: withCtx(() => [
                            createVNode("div", { class: "text-center" }, [
                              createVNode("span", { class: "text-base leading-6 font-medium" }, toDisplayString(tab.title), 1)
                            ])
                          ]),
                          _: 2
                        }, 1032, ["value"]);
                      }), 128))
                    ];
                  }
                }),
                _: 1
              }, _parent2, _scopeId));
              _push2(`</div><div class="relative flex-1" data-v-e7720da3${_scopeId}>`);
              _push2(ssrRenderComponent(_component_ClientOnly, { "fallback-tag": "div" }, {
                fallback: withCtx((_2, _push3, _parent3, _scopeId2) => {
                  if (_push3) {
                    _push3(`<div class="pointer-events-none absolute inset-0 z-10" data-v-e7720da3${_scopeId2}><div class="absolute top-2 left-1/2 h-10 w-10 -translate-x-1/2 transform rounded-full p-2 opacity-0" data-v-e7720da3${_scopeId2}></div><div class="absolute bottom-2 left-1/2 h-10 w-10 -translate-x-1/2 transform rounded-full p-2 opacity-0" data-v-e7720da3${_scopeId2}></div></div>`);
                  } else {
                    return [
                      createVNode("div", { class: "pointer-events-none absolute inset-0 z-10" }, [
                        createVNode("div", { class: "absolute top-2 left-1/2 h-10 w-10 -translate-x-1/2 transform rounded-full p-2 opacity-0" }),
                        createVNode("div", { class: "absolute bottom-2 left-1/2 h-10 w-10 -translate-x-1/2 transform rounded-full p-2 opacity-0" })
                      ])
                    ];
                  }
                })
              }, _parent2, _scopeId));
              _push2(`<!--[-->`);
              ssrRenderList(unref(safeServices), (tab) => {
                _push2(ssrRenderComponent(_component_TabsContent, {
                  key: tab.value,
                  value: tab.value
                }, {
                  default: withCtx((_2, _push3, _parent3, _scopeId2) => {
                    if (_push3) {
                      _push3(ssrRenderComponent(_component_Card, {
                        dir: unref(locale) === "ar" ? "rtl" : "ltr",
                        class: "border-surface-border bg-surface-background min-h-[29.5625rem] gap-0 lg:h-[29.5625rem]"
                      }, {
                        default: withCtx((_3, _push4, _parent4, _scopeId3) => {
                          if (_push4) {
                            _push4(ssrRenderComponent(_component_CardHeader, { class: "pb-6" }, {
                              default: withCtx((_4, _push5, _parent5, _scopeId4) => {
                                if (_push5) {
                                  _push5(ssrRenderComponent(_component_CardTitle, { class: "text-2xl font-bold" }, {
                                    default: withCtx((_5, _push6, _parent6, _scopeId5) => {
                                      if (_push6) {
                                        _push6(`${ssrInterpolate(tab.content.title)}`);
                                      } else {
                                        return [
                                          createTextVNode(toDisplayString(tab.content.title), 1)
                                        ];
                                      }
                                    }),
                                    _: 2
                                  }, _parent5, _scopeId4));
                                  _push5(ssrRenderComponent(_component_CardDescription, { class: "mt-4 text-[1.125rem] leading-7" }, {
                                    default: withCtx((_5, _push6, _parent6, _scopeId5) => {
                                      if (_push6) {
                                        _push6(`${ssrInterpolate(tab.content.description)}`);
                                      } else {
                                        return [
                                          createTextVNode(toDisplayString(tab.content.description), 1)
                                        ];
                                      }
                                    }),
                                    _: 2
                                  }, _parent5, _scopeId4));
                                } else {
                                  return [
                                    createVNode(_component_CardTitle, { class: "text-2xl font-bold" }, {
                                      default: withCtx(() => [
                                        createTextVNode(toDisplayString(tab.content.title), 1)
                                      ]),
                                      _: 2
                                    }, 1024),
                                    createVNode(_component_CardDescription, { class: "mt-4 text-[1.125rem] leading-7" }, {
                                      default: withCtx(() => [
                                        createTextVNode(toDisplayString(tab.content.description), 1)
                                      ]),
                                      _: 2
                                    }, 1024)
                                  ];
                                }
                              }),
                              _: 2
                            }, _parent4, _scopeId3));
                            _push4(ssrRenderComponent(_component_CardContent, {
                              ref_for: true,
                              ref_key: "currentTabContentRef",
                              ref: currentTabContentRef,
                              class: ["ws-scrollbar space-y-6 overflow-x-hidden overflow-y-auto transition-[mask] duration-300 will-change-scroll", unref(contentScrollClasses)]
                            }, {
                              default: withCtx((_4, _push5, _parent5, _scopeId4) => {
                                if (_push5) {
                                  if (tab.content.features) {
                                    _push5(`<div class="space-y-6" data-v-e7720da3${_scopeId4}><!--[-->`);
                                    ssrRenderList(tab.content.features, (feature, index) => {
                                      _push5(`<div class="flex items-center gap-4 pb-2" data-v-e7720da3${_scopeId4}><span data-v-e7720da3${_scopeId4}>`);
                                      _push5(ssrRenderComponent(_component_SvgCheckMarkIcon, null, null, _parent5, _scopeId4));
                                      _push5(`</span><p class="leading-relaxed" data-v-e7720da3${_scopeId4}>${ssrInterpolate(feature.text)}</p></div>`);
                                    });
                                    _push5(`<!--]--></div>`);
                                  } else {
                                    _push5(`<!---->`);
                                  }
                                } else {
                                  return [
                                    tab.content.features ? (openBlock(), createBlock("div", {
                                      key: 0,
                                      class: "space-y-6"
                                    }, [
                                      (openBlock(true), createBlock(Fragment, null, renderList(tab.content.features, (feature, index) => {
                                        return openBlock(), createBlock("div", {
                                          key: index,
                                          class: "flex items-center gap-4 pb-2"
                                        }, [
                                          createVNode("span", null, [
                                            createVNode(_component_SvgCheckMarkIcon)
                                          ]),
                                          createVNode("p", { class: "leading-relaxed" }, toDisplayString(feature.text), 1)
                                        ]);
                                      }), 128))
                                    ])) : createCommentVNode("", true)
                                  ];
                                }
                              }),
                              _: 2
                            }, _parent4, _scopeId3));
                          } else {
                            return [
                              createVNode(_component_CardHeader, { class: "pb-6" }, {
                                default: withCtx(() => [
                                  createVNode(_component_CardTitle, { class: "text-2xl font-bold" }, {
                                    default: withCtx(() => [
                                      createTextVNode(toDisplayString(tab.content.title), 1)
                                    ]),
                                    _: 2
                                  }, 1024),
                                  createVNode(_component_CardDescription, { class: "mt-4 text-[1.125rem] leading-7" }, {
                                    default: withCtx(() => [
                                      createTextVNode(toDisplayString(tab.content.description), 1)
                                    ]),
                                    _: 2
                                  }, 1024)
                                ]),
                                _: 2
                              }, 1024),
                              createVNode(_component_CardContent, {
                                ref_for: true,
                                ref_key: "currentTabContentRef",
                                ref: currentTabContentRef,
                                class: ["ws-scrollbar space-y-6 overflow-x-hidden overflow-y-auto transition-[mask] duration-300 will-change-scroll", unref(contentScrollClasses)]
                              }, {
                                default: withCtx(() => [
                                  tab.content.features ? (openBlock(), createBlock("div", {
                                    key: 0,
                                    class: "space-y-6"
                                  }, [
                                    (openBlock(true), createBlock(Fragment, null, renderList(tab.content.features, (feature, index) => {
                                      return openBlock(), createBlock("div", {
                                        key: index,
                                        class: "flex items-center gap-4 pb-2"
                                      }, [
                                        createVNode("span", null, [
                                          createVNode(_component_SvgCheckMarkIcon)
                                        ]),
                                        createVNode("p", { class: "leading-relaxed" }, toDisplayString(feature.text), 1)
                                      ]);
                                    }), 128))
                                  ])) : createCommentVNode("", true)
                                ]),
                                _: 2
                              }, 1032, ["class"])
                            ];
                          }
                        }),
                        _: 2
                      }, _parent3, _scopeId2));
                    } else {
                      return [
                        createVNode(_component_Card, {
                          dir: unref(locale) === "ar" ? "rtl" : "ltr",
                          class: "border-surface-border bg-surface-background min-h-[29.5625rem] gap-0 lg:h-[29.5625rem]"
                        }, {
                          default: withCtx(() => [
                            createVNode(_component_CardHeader, { class: "pb-6" }, {
                              default: withCtx(() => [
                                createVNode(_component_CardTitle, { class: "text-2xl font-bold" }, {
                                  default: withCtx(() => [
                                    createTextVNode(toDisplayString(tab.content.title), 1)
                                  ]),
                                  _: 2
                                }, 1024),
                                createVNode(_component_CardDescription, { class: "mt-4 text-[1.125rem] leading-7" }, {
                                  default: withCtx(() => [
                                    createTextVNode(toDisplayString(tab.content.description), 1)
                                  ]),
                                  _: 2
                                }, 1024)
                              ]),
                              _: 2
                            }, 1024),
                            createVNode(_component_CardContent, {
                              ref_for: true,
                              ref_key: "currentTabContentRef",
                              ref: currentTabContentRef,
                              class: ["ws-scrollbar space-y-6 overflow-x-hidden overflow-y-auto transition-[mask] duration-300 will-change-scroll", unref(contentScrollClasses)]
                            }, {
                              default: withCtx(() => [
                                tab.content.features ? (openBlock(), createBlock("div", {
                                  key: 0,
                                  class: "space-y-6"
                                }, [
                                  (openBlock(true), createBlock(Fragment, null, renderList(tab.content.features, (feature, index) => {
                                    return openBlock(), createBlock("div", {
                                      key: index,
                                      class: "flex items-center gap-4 pb-2"
                                    }, [
                                      createVNode("span", null, [
                                        createVNode(_component_SvgCheckMarkIcon)
                                      ]),
                                      createVNode("p", { class: "leading-relaxed" }, toDisplayString(feature.text), 1)
                                    ]);
                                  }), 128))
                                ])) : createCommentVNode("", true)
                              ]),
                              _: 2
                            }, 1032, ["class"])
                          ]),
                          _: 2
                        }, 1032, ["dir"])
                      ];
                    }
                  }),
                  _: 2
                }, _parent2, _scopeId));
              });
              _push2(`<!--]--></div></div>`);
            } else {
              return [
                createVNode("div", { class: "flex flex-col gap-2 lg:flex-row lg:gap-6 rtl:lg:flex-row-reverse" }, [
                  createVNode("div", { class: "relative w-full lg:max-w-[19.8125rem]" }, [
                    createVNode(_component_ClientOnly, { "fallback-tag": "div" }, {
                      fallback: withCtx(() => [
                        createVNode("div", { class: "pointer-events-none absolute inset-0 z-10" }, [
                          createVNode("div", { class: "absolute top-2 left-1/2 h-10 w-10 -translate-x-1/2 transform rounded-full p-2 opacity-0" }),
                          createVNode("div", { class: "absolute bottom-2 left-1/2 h-10 w-10 -translate-x-1/2 transform rounded-full p-2 opacity-0" })
                        ])
                      ]),
                      default: withCtx(() => [
                        !unref(isMobile) && unref(isHydrated) ? (openBlock(), createBlock("div", {
                          key: 0,
                          class: "pointer-events-none absolute inset-0 z-10"
                        }, [
                          !unref(tabsArrivedState).top ? (openBlock(), createBlock("div", {
                            key: 0,
                            class: "bg-surface-background hover:bg-surface-background/90 border-surface-border pointer-events-auto absolute top-2 left-1/2 -translate-x-1/2 transform animate-pulse cursor-pointer rounded-full border p-2 shadow-lg backdrop-blur-sm transition-colors hover:shadow-xl",
                            onClick: ($event) => scrollTabs("up")
                          }, [
                            createVNode(_component_SvgArrowUpIcon, { class: "text-foreground" })
                          ], 8, ["onClick"])) : createCommentVNode("", true),
                          !unref(tabsArrivedState).bottom ? (openBlock(), createBlock("div", {
                            key: 1,
                            class: "bg-surface-background hover:bg-surface-background/90 border-surface-border pointer-events-auto absolute bottom-2 left-1/2 -translate-x-1/2 transform animate-pulse cursor-pointer rounded-full border p-2 shadow-lg backdrop-blur-sm transition-colors hover:shadow-xl",
                            onClick: ($event) => scrollTabs("down")
                          }, [
                            createVNode(_component_SvgArrowDownIcon, { class: "text-foreground" })
                          ], 8, ["onClick"])) : createCommentVNode("", true)
                        ])) : unref(isMobile) && unref(isHydrated) ? (openBlock(), createBlock("div", {
                          key: 1,
                          class: "pointer-events-none absolute inset-0 z-10"
                        }, [
                          !unref(tabsArrivedState).left ? (openBlock(), createBlock("div", {
                            key: 0,
                            class: ["bg-surface-background hover:bg-surface-background/90 border-surface-border pointer-events-auto absolute top-1/2 -translate-y-1/2 transform animate-pulse cursor-pointer rounded-full border p-2 shadow-lg backdrop-blur-sm transition-colors hover:shadow-xl", unref(locale) === "ar" ? "right-2" : "left-2"],
                            onClick: ($event) => scrollTabs(unref(locale) === "ar" ? "right" : "left")
                          }, [
                            unref(locale) !== "ar" ? (openBlock(), createBlock(_component_SvgArrowLeftIcon, {
                              key: 0,
                              class: "text-foreground"
                            })) : (openBlock(), createBlock(_component_SvgArrowRightIcon, {
                              key: 1,
                              class: "text-foreground"
                            }))
                          ], 10, ["onClick"])) : createCommentVNode("", true),
                          !unref(tabsArrivedState).right ? (openBlock(), createBlock("div", {
                            key: 1,
                            class: ["bg-surface-background hover:bg-surface-background/90 border-surface-border pointer-events-auto absolute top-1/2 -translate-y-1/2 transform animate-pulse cursor-pointer rounded-full border p-2 shadow-lg backdrop-blur-sm transition-colors hover:shadow-xl", unref(locale) === "ar" ? "left-2" : "right-2"],
                            onClick: ($event) => scrollTabs(unref(locale) === "ar" ? "left" : "right")
                          }, [
                            unref(locale) !== "ar" ? (openBlock(), createBlock(_component_SvgArrowRightIcon, {
                              key: 0,
                              class: "text-foreground"
                            })) : (openBlock(), createBlock(_component_SvgArrowLeftIcon, {
                              key: 1,
                              class: "text-foreground"
                            }))
                          ], 10, ["onClick"])) : createCommentVNode("", true)
                        ])) : createCommentVNode("", true)
                      ]),
                      _: 1
                    }),
                    createVNode(_component_TabsList, {
                      id: "tabs-container",
                      ref_key: "tabsListRef",
                      ref: tabsListRef,
                      dir: unref(locale) === "ar" ? "rtl" : "ltr",
                      class: ["rounded-ws-rounded ws-no-scrollbar flex h-auto w-full flex-row gap-3 overflow-x-auto overflow-y-visible bg-transparent transition-[mask] duration-300 will-change-scroll lg:grid lg:h-[29.5625rem] lg:grid-cols-1 lg:flex-col lg:gap-6 lg:overflow-x-visible lg:overflow-y-auto", unref(tabsScrollClasses)]
                    }, {
                      default: withCtx(() => [
                        (openBlock(true), createBlock(Fragment, null, renderList(unref(safeServices), (tab) => {
                          return openBlock(), createBlock(_component_TabsTrigger, {
                            key: tab.value,
                            value: tab.value,
                            gradient: true,
                            class: "rounded-ws-rounded bg-surface-background border-surface-border w-full px-4 py-4 lg:py-6 transition-all duration-300"
                          }, {
                            default: withCtx(() => [
                              createVNode("div", { class: "text-center" }, [
                                createVNode("span", { class: "text-base leading-6 font-medium" }, toDisplayString(tab.title), 1)
                              ])
                            ]),
                            _: 2
                          }, 1032, ["value"]);
                        }), 128))
                      ]),
                      _: 1
                    }, 8, ["dir", "class"])
                  ]),
                  createVNode("div", { class: "relative flex-1" }, [
                    createVNode(_component_ClientOnly, { "fallback-tag": "div" }, {
                      fallback: withCtx(() => [
                        createVNode("div", { class: "pointer-events-none absolute inset-0 z-10" }, [
                          createVNode("div", { class: "absolute top-2 left-1/2 h-10 w-10 -translate-x-1/2 transform rounded-full p-2 opacity-0" }),
                          createVNode("div", { class: "absolute bottom-2 left-1/2 h-10 w-10 -translate-x-1/2 transform rounded-full p-2 opacity-0" })
                        ])
                      ]),
                      default: withCtx(() => [
                        unref(isHydrated) ? (openBlock(), createBlock("div", {
                          key: 0,
                          class: "pointer-events-none absolute inset-0 z-10"
                        }, [
                          !unref(contentArrivedState).top ? (openBlock(), createBlock("div", {
                            key: 0,
                            class: "bg-surface-background/90 hover:bg-surface-background border-surface-border pointer-events-auto absolute top-2 left-1/2 -translate-x-1/2 transform animate-pulse cursor-pointer rounded-full border p-2 shadow-md backdrop-blur-sm transition-colors hover:shadow-lg",
                            onClick: ($event) => scrollContent("up")
                          }, [
                            createVNode(_component_SvgArrowUpIcon, { class: "text-foreground/60" })
                          ], 8, ["onClick"])) : createCommentVNode("", true),
                          !unref(contentArrivedState).bottom ? (openBlock(), createBlock("div", {
                            key: 1,
                            class: "bg-surface-background/90 hover:bg-surface-background border-surface-border pointer-events-auto absolute bottom-2 left-1/2 -translate-x-1/2 transform animate-pulse cursor-pointer rounded-full border p-2 shadow-md backdrop-blur-sm transition-colors hover:shadow-lg",
                            onClick: ($event) => scrollContent("down")
                          }, [
                            createVNode(_component_SvgArrowDownIcon, { class: "text-foreground/60" })
                          ], 8, ["onClick"])) : createCommentVNode("", true)
                        ])) : createCommentVNode("", true)
                      ]),
                      _: 1
                    }),
                    (openBlock(true), createBlock(Fragment, null, renderList(unref(safeServices), (tab) => {
                      return openBlock(), createBlock(_component_TabsContent, {
                        key: tab.value,
                        value: tab.value
                      }, {
                        default: withCtx(() => [
                          createVNode(_component_Card, {
                            dir: unref(locale) === "ar" ? "rtl" : "ltr",
                            class: "border-surface-border bg-surface-background min-h-[29.5625rem] gap-0 lg:h-[29.5625rem]"
                          }, {
                            default: withCtx(() => [
                              createVNode(_component_CardHeader, { class: "pb-6" }, {
                                default: withCtx(() => [
                                  createVNode(_component_CardTitle, { class: "text-2xl font-bold" }, {
                                    default: withCtx(() => [
                                      createTextVNode(toDisplayString(tab.content.title), 1)
                                    ]),
                                    _: 2
                                  }, 1024),
                                  createVNode(_component_CardDescription, { class: "mt-4 text-[1.125rem] leading-7" }, {
                                    default: withCtx(() => [
                                      createTextVNode(toDisplayString(tab.content.description), 1)
                                    ]),
                                    _: 2
                                  }, 1024)
                                ]),
                                _: 2
                              }, 1024),
                              createVNode(_component_CardContent, {
                                ref_for: true,
                                ref_key: "currentTabContentRef",
                                ref: currentTabContentRef,
                                class: ["ws-scrollbar space-y-6 overflow-x-hidden overflow-y-auto transition-[mask] duration-300 will-change-scroll", unref(contentScrollClasses)]
                              }, {
                                default: withCtx(() => [
                                  tab.content.features ? (openBlock(), createBlock("div", {
                                    key: 0,
                                    class: "space-y-6"
                                  }, [
                                    (openBlock(true), createBlock(Fragment, null, renderList(tab.content.features, (feature, index) => {
                                      return openBlock(), createBlock("div", {
                                        key: index,
                                        class: "flex items-center gap-4 pb-2"
                                      }, [
                                        createVNode("span", null, [
                                          createVNode(_component_SvgCheckMarkIcon)
                                        ]),
                                        createVNode("p", { class: "leading-relaxed" }, toDisplayString(feature.text), 1)
                                      ]);
                                    }), 128))
                                  ])) : createCommentVNode("", true)
                                ]),
                                _: 2
                              }, 1032, ["class"])
                            ]),
                            _: 2
                          }, 1032, ["dir"])
                        ]),
                        _: 2
                      }, 1032, ["value"]);
                    }), 128))
                  ])
                ])
              ];
            }
          }),
          _: 1
        }, _parent));
      }
    };
  }
});
const _sfc_setup = _sfc_main.setup;
_sfc_main.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/global/VerticalTabsWithContent.vue");
  return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
};
const __nuxt_component_1 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e7720da3"]]);
export {
  __nuxt_component_1 as default
};
//# sourceMappingURL=VerticalTabsWithContent-DGT0LoPh.js.map
