<template>
    <div>
        <navBar />
        <NetworkConnction v-if="checkInt" />
        <!-- Content shown immediately - no loading overlay delay for better LCP -->
        <main id="main-content" role="main">
          <slot></slot>
        </main>
        <div class="icon-sticky" :class="{'active':activeIcon}">
          <a aria-label="Contact us on WhatsApp" target="_blank" :href="store2.social?.whatsapp ? store2.social?.whatsapp : 'https://api.whatsapp.com/send?phone=' + store2.websiteData?.phone" class="whats-app-icon">
            <client-only>
              <div style="width: 70px; height: 70px;">
                <lottie src="/animations/whatsapp.json"></lottie>
              </div>
            </client-only>
          </a>
        </div>
        <mainFooter />
    </div>
</template>



<script setup>
import { useContactStore } from "@/stores/contact";
import { useHomeStore } from "@/stores/home";
import { useCareerStore } from "@/stores/career";

let store3 = useCareerStore();
let store = useContactStore();
let store2 = useHomeStore();
const checkInt = ref(false);
const { locale, setLocale } = useI18n();

const handleOffline = () => {
  checkInt.value = true;
};
const handleOnline = () => {
  checkInt.value = false;
};


let activeIcon = ref(false);


onMounted(() => {
  window.addEventListener('online', handleOnline);
  window.addEventListener('offline', handleOffline);
  window.addEventListener("scroll", function () {
    if (this.window.scrollY >= 200) {
      activeIcon.value = true;
    } else if (window.scrollY == 0) {
      activeIcon.value = false;
    }
  });
  useHead({
    htmlAttrs: {
      lang: locale.value == 'en' ? "en" : "ar",
      dir: locale.value == "en" ? "ltr" : "rtl",
    },
  });
});

onBeforeMount(() => {
  useHead({
      htmlAttrs: {
        lang: locale.value == 'en' ? "en" : "ar",
        dir: locale.value == "en" ? "ltr" : "rtl",
      },
    });
});

watch(
  [() => locale.value],
  ([val]) => {
    store.questions = [];
    store.page = 1;
    store3.careers = [];
    store3.page = 1;
    useHead({
      htmlAttrs: {
        lang: val == 'en' ? "en" : "ar",
        dir: val == "en" ? "ltr" : "rtl",
      },
    });
  }
);
onUnmounted(() => {
  window.removeEventListener('online', handleOnline);
  window.removeEventListener('offline', handleOffline);

});
</script>


<style>

</style>