<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'

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)

// 监听全局加载状态，加载完成后依次播放开场和首屏动画
watch(() => appStore.isAppLoading, async (isLoading) => {
  if (!isLoading) {
    await homeIntroRef.value?.play()
    await homeHeroRef.value?.play()
    
    // 动画播放完毕后解除页面滚动锁定
    isIntroActive.value = false
  }
}, { immediate: true })
</script>

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

    <section class="grid min-h-[100svh] place-items-center">
      <h2>Next Section</h2>
    </section>
    <section id="work" class="grid min-h-[100svh] place-items-center" data-cursor-label="Read more">
      <p>{{ t('home.welcome') }}</p>
    </section>
  </main>
</template>
