import { _ as _sfc_main$g } from './server.mjs';
import { useSSRContext, reactive, ref, mergeProps, unref } from 'vue';
import { ssrRenderAttrs, ssrRenderList, ssrRenderClass, ssrRenderComponent, ssrInterpolate, ssrRenderAttr } from 'vue/server-renderer';
import { u as useAPIFetch } from './useAPIFetch-Bdd4OwYk.mjs';

const _sfc_main = {
  __name: "AboutCards",
  __ssrInlineRender: true,
  props: {
    item: {
      required: false
    }
  },
  setup(__props) {
    const { data: items } = useAPIFetch(`branches_index`, {
      server: false,
      lazy: true
    });
    const coord = reactive({
      lat: 31,
      lng: 31
    });
    const direction = ref(false);
    function getDirection(url) {
      const mapObj = { start_lng: coord.lng, start_lat: coord.lat };
      const re = new RegExp(Object.keys(mapObj).join("|"), "gi");
      url = url.replace(re, function(matched) {
        return mapObj[matched];
      });
      return url;
    }
    return (_ctx, _push, _parent, _attrs) => {
      var _a;
      const _component_nuxt_img = _sfc_main$g;
      _push(`<div${ssrRenderAttrs(mergeProps({ class: "container" }, _attrs))}>`);
      if (__props.item && __props.item.title) {
        _push(`<h2 class="text-2xl lg:text-3xl max-w-[500px] mb-5 lg:leading-[2.4rem] text-text font-semibold leading-[2.5rem] capitalize">${(_a = __props.item.title) != null ? _a : ""}</h2>`);
      } else {
        _push(`<!---->`);
      }
      if (unref(items)) {
        _push(`<div class="grid lg:grid-cols-2 grid-cols-1 gap-2 pb-20"><!--[-->`);
        ssrRenderList(unref(items).data.branches, (item, i) => {
          _push(`<div data-wow-duration="1.3s" data-wow-delay="0s" class="${ssrRenderClass([i % 2 == 0 ? "fadeInUp" : "fadeInDown", "p-3 flex flex-col h-full rounded-3xl animated wow"])}"><div class="h-[350px] relative">`);
          _push(ssrRenderComponent(_component_nuxt_img, {
            format: "webp",
            width: "300",
            class: "w-full h-full rounded-3xl object-cover",
            height: "300",
            src: item.main_image,
            alt: "",
            loading: "lazy",
            srcset: `${item.main_image} 480w, ${item.main_image} 1080w`
          }, null, _parent));
          _push(`<p class="absolute left-[5%] bottom-[5%] text-white font-semibold text-2xl">${ssrInterpolate(item.title)}</p></div><div class="pt-4 text-sm space-y-2"><p class="flex items-center gap-3"><i class="fas fa-location-dot"></i> ${ssrInterpolate(item.description)}</p><p class="flex items-center gap-3"><i class="fa-solid fa-envelope"></i> ${ssrInterpolate(item.email.email)}</p><!--[-->`);
          ssrRenderList(item.phones, (phone) => {
            _push(`<p class="flex gap-3 items-center"><i class="fa-solid fa-phone-volume"></i><bdi> +${ssrInterpolate(item.phone_code)} ${ssrInterpolate(phone.phone)}</bdi></p>`);
          });
          _push(`<!--]-->`);
          if (item.location_url && unref(direction)) {
            _push(`<div class="flex items-center justify-end !mt-0 -translate-y-6"><a target="_blank" class="text-primary flex items-center text-sm font-bold gap-3"${ssrRenderAttr("href", getDirection(item.location_url))}>${ssrInterpolate(_ctx.$t("BUTTONS.getDirection"))} <i class="fa-solid fa-share"></i></a></div>`);
          } else {
            _push(`<!---->`);
          }
          _push(`</div></div>`);
        });
        _push(`<!--]--></div>`);
      } else {
        _push(`<!---->`);
      }
      _push(`</div>`);
    };
  }
};
const _sfc_setup = _sfc_main.setup;
_sfc_main.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/about/AboutCards.vue");
  return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
};

export { _sfc_main as _ };
//# sourceMappingURL=AboutCards-Dt9tMbfm.mjs.map
