<script setup>
import { useHomeContent } from '~/content/home'
import { buildPublicSeoLinks } from '~/utils/public-seo'

const LazySimpleCarListSection = defineLazyHydrationComponent('visible', () => import('~/components/home/SimpleCarListSection.vue'))
const LazyHero = defineLazyHydrationComponent('visible', () => import('~/components/home/Hero.vue'))
const LazyAboutSection = defineLazyHydrationComponent('visible', () => import('~/components/home/AboutSection.vue'))
const LazyFleetSection = defineLazyHydrationComponent('visible', () => import('~/components/home/FleetSection.vue'))
const LazyExtrasSection = defineLazyHydrationComponent('visible', () => import('~/components/home/ExtrasSection.vue'))
const LazyFeaturesSection = defineLazyHydrationComponent('never', () => import('~/components/home/FeaturesSection.vue'))
const LazyArticlesSection = defineLazyHydrationComponent('visible', () => import('~/components/home/ArticlesSection.vue'))
const LazyFollowUsSection = defineLazyHydrationComponent('never', () => import('~/components/home/FollowUsSection.vue'))
const LazySeoSection = defineLazyHydrationComponent('never', () => import('~/components/home/SeoSection.vue'))
const showFleetSection = false

const { homeHeroContent, homePageContent } = useHomeContent()
const homePageSeo = computed(() => homePageContent.value?.seo || null)

useSeoMeta({
  title: () => homePageSeo.value?.title || homeHeroContent.value?.rightTitle || 'bent.ge',
  description: () => homePageSeo.value?.description || homeHeroContent.value?.rightDescription || '',
  ogTitle: () => homePageSeo.value?.ogTitle || homePageSeo.value?.title || homeHeroContent.value?.rightTitle || '',
  ogDescription: () => homePageSeo.value?.ogDescription || homePageSeo.value?.description || homeHeroContent.value?.rightDescription || '',
  ogImage: () => homePageSeo.value?.ogImage || homePageContent.value?.heroImage || homePageContent.value?.featuredImage || '',
  robots: () => homePageSeo.value?.robots || 'index,follow',
})

useHead(() => ({
  link: buildPublicSeoLinks(homePageSeo.value),
}))
</script>

<template>
  <div>
    <LazySimpleCarListSection :hydrate-on-visible="{ rootMargin: '700px' }" />
    <div class="max-w-6xl mx-auto px-4 sm:px-6 py-4 md:py-8 flex flex-col">
      <LazyHero :hydrate-on-visible="{ rootMargin: '700px' }" />
    </div>
    <LazyFeaturesSection hydrate-never />
    <LazyFleetSection v-if="showFleetSection" :hydrate-on-visible="{ rootMargin: '200px' }" />
    <LazyExtrasSection :hydrate-on-visible="{ rootMargin: '200px' }" />
    <LazyArticlesSection :hydrate-on-visible="{ rootMargin: '200px' }" />
    <div class="max-w-6xl mx-auto px-4 sm:px-6 py-4 md:py-8 flex flex-col">
      <LazyAboutSection :hydrate-on-visible="{ rootMargin: '300px' }" />
    </div>
    <LazyFollowUsSection hydrate-never />
    <LazySeoSection hydrate-never />
  </div>
</template>
