<script setup lang="ts">
import { ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { useSeoMeta } from '#imports'
import { useAppStore } from '~/stores/app'
import { usePageScrollLock } from '~/composables/usePageScrollLock'
import HomeIntro from '~/components/home/HomeIntro.vue'
import HomeHero from '~/components/home/HomeHero.vue'
import HomePartnersWork from '~/components/home/HomePartnersWork.vue'

const { t } = useI18n()
const appStore = useAppStore()

const isIntroActive = ref(true)

// 使用组合式函数管理 Lenis 滚动锁定（已包含 useHead 配置）
usePageScrollLock(isIntroActive)

// 首页的 SEO 和 Meta 优化，支持国际化响应式
useSeoMeta({
  title: () => t('home.title'),
  description: () => t('home.welcome'),
  ogTitle: () => `${t('home.title')} - ${t('app.name')}`,
  ogDescription: () => t('home.welcome'),
  twitterTitle: () => `${t('home.title')} - ${t('app.name')}`,
  twitterDescription: () => t('home.welcome'),
})

const homeIntroRef = ref<InstanceType<typeof HomeIntro> | null>(null)
const homeHeroRef = ref<InstanceType<typeof HomeHero> | null>(null)
const hasPlayedIntro = ref(false)

// 监听全局加载状态，加载完成后依次播放开场和首屏动画
watch(
  () => [appStore.isAppLoading, homeIntroRef.value, homeHeroRef.value] as const,
  async ([isLoading, intro, hero]) => {
    if (hasPlayedIntro.value) return
    if (isLoading || !intro || !hero) return

    hasPlayedIntro.value = true

    await intro.play()
    await hero.play()

    isIntroActive.value = false
  },
  { immediate: true }
)
</script>

<template>
  <main id="top">
    <HomeIntro ref="homeIntroRef" />
    <HomeHero ref="homeHeroRef" />
    <HomePartnersWork />
  </main>
</template>
