<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
import { useRoute } from 'vitepress'
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'
import FloatingService from './components/FloatingService.vue'
import { Content } from 'vitepress'

const isScrolled = ref(false)
const route = useRoute()

const handleScroll = () => {
  isScrolled.value = window.scrollY > 20
}

onMounted(() => {
  handleScroll()
  window.addEventListener('scroll', handleScroll)
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})

// 路由切换后滚动到顶部
watch(
  () => route.path,
  () => {
    nextTick(() => {
      window.scrollTo({ top: 0, behavior: 'smooth' })
    })
  }
)
</script>

<template>
  <div class="font-sans antialiased text-apple-dark bg-white min-h-screen flex flex-col relative">
    <Header :scrolled="isScrolled" />

    <main class="flex-grow">
      <Content />
    </main>

    <Footer />
    <FloatingService />
  </div>
</template>
