<template>
  <div style="min-height: 100vh">
    <!-- Hero must be eager so LCP image is in initial HTML (not lazy-loaded) -->
    <HomeSlider />
    <LazyHomeSearch></LazyHomeSearch>
    <LazyHomeBrands></LazyHomeBrands>

    <!-- Below the fold - defer loading for better Speed Index -->
    <LazyHomeWhy v-if="showBelowFold"></LazyHomeWhy>
    <LazyHomeCars v-if="showBelowFold"></LazyHomeCars>
    <LazyHomeOrder v-if="showDeferred"></LazyHomeOrder>
    <LazyHomeHow v-if="showDeferred"></LazyHomeHow>
    <LazyHomeBanks v-if="showDeferred"></LazyHomeBanks>
  </div>
</template>

<script setup>
const { locale } = useI18n();
import { useHomeStore } from "@/stores/home";

let store = useHomeStore();

// Deferred loading flags for Speed Index optimization
const showBelowFold = ref(false);
const showDeferred = ref(false);

// SEO Configuration
const { setPageSeo } = useSeoConfig();

setPageSeo({
  title: locale.value === "ar" ? "الرئيسية - خليج أوتو" : "Home - Khalej Auto",
  description:
    locale.value === "ar"
      ? "خليج أوتو - وجهتك الأولى لشراء السيارات الجديدة والمستعملة في السعودية. تصفح أوسع مجموعة من السيارات بأفضل الأسعار والعروض الحصرية"
      : "Khalej Auto - Your first destination for buying new and used cars in Saudi Arabia. Browse the widest collection of cars with the best prices and exclusive offers",
  path: "",
});

onMounted(() => {
  // Load critical data immediately
  store.getBrands();
  store.getWebsiteData();

  // Show below-fold content after first paint
  requestAnimationFrame(() => {
    showBelowFold.value = true;
    store.getBrands2();
    store.getCars();
    store.getChoose();
  });

  // Defer non-critical content
  setTimeout(() => {
    showDeferred.value = true;
    store.getBanks();
  }, 100);
});
</script>

<style></style>
