<script setup>
import { onMounted, onBeforeUnmount } from 'vue'
import Lenis from 'lenis'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

gsap.registerPlugin(ScrollTrigger)

let lenis = null

onMounted(() => {
  // 初始化 Lenis 平滑滚动
  lenis = new Lenis({
    duration: 1.2,
    easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
    smoothWheel: true,
    smoothTouch: true,
  })

  // 连接 Lenis 和 GSAP ScrollTrigger
  lenis.on('scroll', ScrollTrigger.update)

  gsap.ticker.add((time) => {
    lenis.raf(time * 1000)
  })

  gsap.ticker.lagSmoothing(0)

  // 获取所有 section
  const sections = gsap.utils.toArray('.fp-section')

  // 为每个 section 设置 ScrollTrigger
  sections.forEach((section) => {
    ScrollTrigger.create({
      trigger: section,
      start: 'top top',
      end: 'bottom top',
      snap: {
        snapTo: 1,
        duration: { min: 0.2, max: 0.6 },
        ease: 'power2.inOut'
      },
      // markers: true
    })
  })
})

onBeforeUnmount(() => {
  // 清理 Lenis
  if (lenis) {
    lenis.destroy()
  }

  // 清理所有 ScrollTrigger 实例
  ScrollTrigger.getAll().forEach(st => st.kill())

  gsap.ticker.remove((time) => {
    if (lenis) lenis.raf(time * 1000)
  })
})
</script>

<template>
  <div class="fp-container">
    <slot />
  </div>
</template>

<style scoped>
.fp-container {
  width: 100%;
}

/* 全局样式，确保每个 section 占满视口 */
:deep(.fp-section) {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
</style>

......
<template>
  <FullPageScroll>
    <section class="fp-section">
      <FirstCard />
    </section>
    <SecondCard :slides="secondCardSlides" section-id="second-card-1" />
    <section class="fp-section">
      <ThirdCard />
    </section>
    <SecondCard :slides="FourthCardSlides" section-id="second-card-2" />
    <FifthCard :slides="FifthCardSlides" />
    <SixthCard :slides="SixthCardSlides" />
  </FullPageScroll>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import Matter from 'matter-js'

let live2dInitialized = false
let cellAnimation = null
let cells = [] // 存储精灵数据供 Live2D 追踪
let targetCellIndex = null // 当前追踪的精灵索引
let eyeTrackingInterval = null // 眼神追踪定时器
let idleTimer = null // 空闲计时器
let isTracking = false // 是否正在追踪
// 初始化精灵动画
const initCellAnimation = async () => {
  const canvas = document.getElementById('cell-canvas')

  canvas.width = window.innerWidth
  canvas.height = window.innerHeight
  const ctx = canvas.getContext('2d')

  const { Engine, World, Bodies, Body, Vector } = Matter

  // 创建引擎并关闭重力
  const engine = Engine.create()
  engine.gravity.scale = 0
  engine.gravity.x = 0
  engine.gravity.y = 0
  const world = engine.world

  // 默认值
  let numCells = 15
  let speedModifier = 0

  // 请求天气数据
  try {
    const response = await fetch('https://generate-cloud-image.hzchu.top/v1/image?format=json')
    const data = await response.json()
    const weatherCode = data.weather_code || 0
    console.log(`天气代码: ${weatherCode}`)

    // 根据天气代码调整参数
    numCells = Math.max(0, 15 - weatherCode)
    speedModifier = 0.03 * weatherCode
    console.log(`精灵数量: ${numCells}, 速度修正: +${speedModifier.toFixed(3)}`)
  } catch (error) {
    console.warn('天气数据获取失败，使用默认值:', error)
  }

  cells = [] // 使用全局变量
  const radius = 10

  // 初始化精灵
  for (let i = 0; i < numCells; i++) {
    const body = Bodies.circle(
      Math.random() * canvas.width,
      Math.random() * canvas.height,
      radius,
      {
        frictionAir: 0,
        friction: 0,
        restitution: 1,
      }
    )
    const speed = 0.001 + Math.random() * 0.2 + speedModifier
    const angle = Math.random() * Math.PI * 2
    Body.setVelocity(body, {
      x: Math.cos(angle) * speed,
      y: Math.sin(angle) * speed
    })
    World.add(world, body)
    cells.push({ body, speed, angle })
  }

  // 更新运动
  const updateMovement = () => {
    cells.forEach(cellData => {
      const cell = cellData.body

      // 保持恒定速度
      const currentSpeed = Vector.magnitude(cell.velocity)
      if (currentSpeed < cellData.speed * 0.9) {
        const normalizedVel = Vector.normalise(cell.velocity)
        Body.setVelocity(cell, {
          x: normalizedVel.x * cellData.speed,
          y: normalizedVel.y * cellData.speed
        })
      }

      // Wrap-around 边界穿越
      if (cell.position.x < -radius) Body.setPosition(cell, {x: canvas.width + radius, y: cell.position.y})
      if (cell.position.x > canvas.width + radius) Body.setPosition(cell, {x: -radius, y: cell.position.y})
      if (cell.position.y < -radius) Body.setPosition(cell, {x: cell.position.x, y: canvas.height + radius})
      if (cell.position.y > canvas.height + radius) Body.setPosition(cell, {x: cell.position.x, y: -radius})
    })
  }

  // 绘制
  const render = () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    cells.forEach(cellData => {
      const cell = cellData.body
      const vx = cell.velocity.x
      const vy = cell.velocity.y
      const speed = Math.sqrt(vx*vx + vy*vy)
      const stretch = 1 + Math.min(speed / 5, 0.3)
      const angle = Math.atan2(vy, vx)

      ctx.save()
      ctx.translate(cell.position.x, cell.position.y)
      ctx.rotate(angle)

      ctx.beginPath()
      ctx.ellipse(0, 0, radius * stretch, radius / stretch, 0, 0, Math.PI * 2)
      ctx.fillStyle = 'rgba(254, 254, 252, 0.6)'
      ctx.strokeStyle = 'rgba(255, 255, 255)'
      ctx.lineWidth = 1
      ctx.shadowColor = '#b8d0bd'
      ctx.shadowBlur = 10
      ctx.fill()
      ctx.stroke()
      ctx.restore()
    })
  }

  // 主循环
  const update = () => {
    updateMovement()
    Engine.update(engine, 1000 / 60)
    render()
    cellAnimation = requestAnimationFrame(update)
  }

  update()

  // 窗口大小改变时更新 canvas
  const handleResize = () => {
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
  }
  window.addEventListener('resize', handleResize)

  return () => {
    window.removeEventListener('resize', handleResize)
    if (cellAnimation) {
      cancelAnimationFrame(cellAnimation)
    }
  }
}
</script>

<template>
    <div class="video-background">
      <img
        v-webp
        src="/assets/background.png"
        alt="背景"
        class="background-image"
      />
      <!-- 精灵动画层 -->
      <canvas id="cell-canvas" class="cell-canvas"></canvas>
      <!-- 遮罩层,增强内容可读性 -->
      <div class="video-overlay"></div>
    </div>
</template>

<style scoped>
/* 视频背景容器 */
.video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

/* 背景图片 */
.background-image {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

/* 精灵动画层 */
.cell-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* 视频遮罩层 - 增强文字可读性 */
.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.90);
}

/* 深色模式下的遮罩 */
:global(.dark) .video-overlay {
  background: rgba(0, 0, 0, 0.85);
}
</style>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { Gapless5 } from '@regosen/gapless-5'

const isPlaying = ref(false)
let gapless = null
let wasPlayingBeforeLivePhoto = false // 记录实况照片播放前的状态
let wasPlayingBeforeDPlayer = false // 记录 DPlayer 播放前的状态

// 状态图片
const imgIdle = 'https://emoticons.hzchu.top/emoticons/luo-xiao-hei/10.png'
const imgPlaying = 'https://emoticons.hzchu.top/emoticons/shen-tan-luo-xiao-hei/4.png'

// 播放/暂停控制
const togglePlay = () => {
  if (!gapless) return
  if (isPlaying.value) {
    gapless.pause()
  } else {
    gapless.play()
  }
}

onMounted(() => {
  // 初始化 Gapless 5
  gapless = new Gapless5({
    tracks: ['/assets/sound/background-single.wav'],
    loop: true,
    loadLimit: 1,
    useHTML5Audio: true
  })

  // 监听播放状态
  gapless.onplayerload = () => {
    console.log('Gapless 5 加载完成')
  }

  gapless.onplay = () => {
    isPlaying.value = true
  }

  gapless.onpause = () => {
    isPlaying.value = false
  }

  gapless.onerror = (error) => {
    console.error('Gapless 5 播放错误:', error)
  }

  // 监听 DPlayer 播放/暂停事件
  const onDPlayerPlay = () => {
    if (gapless && isPlaying.value) {
      wasPlayingBeforeDPlayer = true
      gapless.pause()
      console.log('DPlayer 播放，暂停背景音乐')
    }
  }
  const onDPlayerPause = () => {
    if (gapless && !isPlaying.value && wasPlayingBeforeDPlayer) {
      wasPlayingBeforeDPlayer = false
      gapless.play()
      console.log('DPlayer 暂停，恢复背景音乐')
    }
  }
  window.addEventListener('dplayer-play', onDPlayerPlay)
  window.addEventListener('dplayer-pause', onDPlayerPause)

  // 监听 LivePhoto 播放/暂停事件
  const onLivePhotoPlay = () => {
    if (gapless && isPlaying.value) {
      wasPlayingBeforeLivePhoto = true
      gapless.pause()
      console.log('实况照片播放，暂停背景音乐')
    }
  }
  const onLivePhotoPause = () => {
    if (gapless && !isPlaying.value && wasPlayingBeforeLivePhoto) {
      wasPlayingBeforeLivePhoto = false
      gapless.play()
      console.log('实况照片结束，恢复背景音乐')
    }
  }
  window.addEventListener('livephoto-play', onLivePhotoPlay)
  window.addEventListener('livephoto-pause', onLivePhotoPause)

  onBeforeUnmount(() => {
    window.removeEventListener('dplayer-play', onDPlayerPlay)
    window.removeEventListener('dplayer-pause', onDPlayerPause)
    window.removeEventListener('livephoto-play', onLivePhotoPlay)
    window.removeEventListener('livephoto-pause', onLivePhotoPause)

    // 清理 Gapless 5
    if (gapless) {
      gapless.stop()
      gapless = null
    }
  })
})
</script>

<template>
  <div class="global-music-player">
    <button class="music-btn" @click="togglePlay" :title="isPlaying ? '暂停背景音乐' : '播放背景音乐'">
      <img :src="isPlaying ? imgPlaying : imgIdle" alt="音乐状态" class="music-status" />
    </button>
  </div>
</template>

<style scoped>
.global-music-player {
  position: fixed;
  left: 10px;
  bottom: 10px;
  z-index: 100;
  display: flex;
  align-items: flex-end;
}
.music-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none;
}
.music-status {
  height: 2.5rem;
  width: auto;
  display: block;
}
</style>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'

const logoSrc = ref('/assets/logo-256.svg')
const logoRotation = ref(0)
const isMobileMenuOpen = ref(false)
let scrollTimeout = null
let isScrolling = false

const handleScroll = () => {
  const currentScrollY = window.scrollY

  // 滚动开始时切换为奔跑 logo
  if (currentScrollY > 50 && !isScrolling) {
    isScrolling = true
    logoSrc.value = '/assets/logo-run.svg'
  } else if (currentScrollY <= 50 && !isScrolling) {
    logoSrc.value = '/assets/logo-256.svg'
  } else if (currentScrollY > 50) {
    logoSrc.value = '/assets/logo-run.svg'
  }

  // 根据滚动距离计算旋转角度
  // 每滚动 300px 旋转 360 度
  logoRotation.value = (currentScrollY / 300) * 360

  // 清除之前的定时器
  if (scrollTimeout) {
    clearTimeout(scrollTimeout)
  }

  // 停止滚动 500ms 后切换回静态 logo
  scrollTimeout = setTimeout(() => {
    isScrolling = false
    if (window.scrollY > 50) {
      logoSrc.value = '/assets/logo-256.svg'
    }
  }, 500)
}

// 打开移动端菜单
const openMobileMenu = () => {
  isMobileMenuOpen.value = true
}

// 关闭移动端菜单
const closeMobileMenu = () => {
  isMobileMenuOpen.value = false
}

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

onBeforeUnmount(() => {
  window.removeEventListener('scroll', handleScroll)
  if (scrollTimeout) {
    clearTimeout(scrollTimeout)
  }
})
</script>

<script setup>
/**
 * 横向滚动卡片组件
 *
 * 使用 GSAP ScrollTrigger 实现垂直滚动驱动横向内容移动
 * 支持视频随滚动进度播放
 *
 * @example
 * <SecondCard :slides="slidesData" />
 *
 * slidesData 格式:
 * [
 *   {
 *     id: 1,                    // 唯一标识
 *     title: '标题',            // 可选，标题文字
 *     description: '描述',      // 可选，描述文字
 *     image: '/path/to/bg.jpg', // 背景图片路径
 *     video: '/path/to/video.mp4' // 视频路径
 *   }
 * ]
 */
import { ref, onMounted, onBeforeUnmount } from 'vue'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

gsap.registerPlugin(ScrollTrigger)

// 定义 props
const props = defineProps({
  slides: {
    type: Array,
    required: true,
    validator: (value) => {
      return value.every(slide =>
        slide.id !== undefined &&
        slide.image !== undefined &&
        slide.video !== undefined
      )
    }
  },
  // 添加唯一标识符，用于区分多个实例
  sectionId: {
    type: String,
    default: () => `section-${Math.random().toString(36).substr(2, 9)}`
  }
})

const currentSlide = ref(0)
const videoRefs = ref({})
const wrapperElement = ref(null)
const cardsboxElement = ref(null)
let scrollTriggerInstance = null
let resizeObserver = null
let distance = 0// 计算横向滚动距离
const calculateDistance = () => {
  if (cardsboxElement.value) {
    distance = cardsboxElement.value.scrollWidth - window.innerWidth
    if (wrapperElement.value) {
      wrapperElement.value.style.height = `${distance + window.innerHeight}px`
      console.log('横向滚动距离:', distance, 'wrapper高度:', wrapperElement.value.style.height)
    }
  }
}

// 更新当前 slide 和视频进度
const updateSlideAndVideos = (progress) => {
  const slideCount = props.slides.length
  const slideIndex = Math.floor(progress * slideCount)
  currentSlide.value = Math.min(slideIndex, slideCount - 1)

  // 为每个slide更新视频进度
  props.slides.forEach((slide, index) => {
    const slideProgress = (progress * slideCount) - index
    const clampedProgress = Math.max(0, Math.min(1, slideProgress))

    // 获取对应的视频元素并更新播放进度
    const videoElement = videoRefs.value[slide.id]
    if (videoElement && videoElement.duration) {
      const targetTime = clampedProgress * videoElement.duration
      // 只有当时间差异较大时才更新，避免频繁操作
      if (Math.abs(videoElement.currentTime - targetTime) > 0.1) {
        videoElement.currentTime = targetTime
      }
    }
  })
}

// 点击指示器跳转
const goToSlide = (index) => {
  if (scrollTriggerInstance) {
    const targetProgress = index / props.slides.length
    const scrollPosition = scrollTriggerInstance.start + (scrollTriggerInstance.end - scrollTriggerInstance.start) * targetProgress
    window.scrollTo({
      top: scrollPosition,
      behavior: 'smooth'
    })
  }
}

// 初始化 ScrollTrigger
const initScrollTrigger = () => {
  if (!wrapperElement.value || !cardsboxElement.value) return

  calculateDistance()

  // 创建横向移动动画
  const animation = gsap.to(cardsboxElement.value, {
    x: () => -distance,
    ease: 'none'
  })

  scrollTriggerInstance = ScrollTrigger.create({
    trigger: wrapperElement.value,
    start: 'top top',
    end: 'bottom bottom',
    animation: animation,
    scrub: 1,
    id: props.sectionId, // 添加唯一 ID
    onUpdate: (self) => {
      updateSlideAndVideos(self.progress)
    },
    onRefresh: () => {
      calculateDistance() // 刷新时重新计算距离
    },
    invalidateOnRefresh: true
  })
}

// 处理窗口大小变化
const handleResize = () => {
  if (scrollTriggerInstance) {
    scrollTriggerInstance.kill()
  }
  initScrollTrigger()
}

onMounted(() => {
  // 延迟初始化，确保 DOM 已渲染
  setTimeout(() => {
    console.log('初始化 ScrollTrigger...', {
      wrapper: wrapperElement.value,
      cardsbox: cardsboxElement.value,
      scrollWidth: cardsboxElement.value?.scrollWidth,
      innerWidth: window.innerWidth
    })

    initScrollTrigger()

    // 监听窗口大小变化
    window.addEventListener('resize', handleResize)

    // 使用 ResizeObserver 监听容器大小变化
    if (cardsboxElement.value) {
      resizeObserver = new ResizeObserver(handleResize)
      resizeObserver.observe(cardsboxElement.value)
    }
  }, 100)
})

onBeforeUnmount(() => {
  if (scrollTriggerInstance) {
    scrollTriggerInstance.kill()
  }

  window.removeEventListener('resize', handleResize)

  if (resizeObserver) {
    resizeObserver.disconnect()
  }
})
</script><template>
  <div ref="wrapperElement" class="horizontal-scroll-wrapper" :data-section-id="props.sectionId">
    <div class="horizontal-scroll-container">
      <div ref="cardsboxElement" class="cardsbox">
        <!-- 每个滑块 -->
        <div
          v-for="slide in props.slides"
          :key="slide.id"
          class="slide-item"
        >
          <!-- 图片背景 -->
          <div class="slide-background">
            <img
              v-webp
              :src="slide.image"
              :alt="slide.title"
              class="background-image"
            />
            <div class="background-overlay"></div>
          </div>

          <!-- 内容层 -->
          <div class="slide-content">
            <!-- 左侧文字 -->
            <div class="w-1/2 px-6 flex items-center">
              <div class="dialog-box">
                <h1 v-if="slide.title" class="mb-4 text-4xl font-bold leading-tight md:text-5xl lg:text-6xl text-neutral-700 dark:text-neutral-200" v-html="slide.title">
                </h1>
                <p v-if="slide.description" class="text-lg md:text-xl text-neutral-600 dark:text-neutral-300 leading-relaxed" v-html="slide.description">
                </p>
              </div>
            </div>

            <!-- 右侧视频 -->
            <div class="w-1/2 h-full flex items-center justify-center p-6">
              <video
                :ref="el => { if (el) videoRefs[slide.id] = el }"
                :src="slide.video"
                class="max-w-full max-h-full object-contain rounded-lg shadow-2xl"
                muted
                playsinline
                preload="auto"
              />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 滚动指示器 -->
    <div class="scroll-indicator">
      <div
        v-for="(slide, index) in props.slides"
        :key="slide.id"
        class="indicator-dot"
        :class="{ active: currentSlide === index }"
        @click="goToSlide(index)"
      ></div>
    </div>

    <!-- 滚动提示 -->
    <div class="scroll-hint">
      <span class="text-sm text-neutral-500 dark:text-neutral-400">滚动查看更多</span>
    </div>
  </div>
</template>

<style scoped>
/* 横向滚动包装器 */
.horizontal-scroll-wrapper {
  position: relative;
  width: 100%;
}

/* 横向滚动容器 - sticky 定位 */
.horizontal-scroll-container {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: transparent;
}

/* 卡片盒子 */
.cardsbox {
  display: flex;
  align-items: center;
  height: 100%;
  will-change: transform;
}

/* 每个滑块 */
.slide-item {
  flex-shrink: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* 滑块背景 */
.slide-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

.background-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.80);
}

/* 深色模式下的遮罩 */
:global(.dark) .background-overlay {
  background: rgba(0, 0, 0, 0.80);
}

/* 内容层 */
.slide-content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 对话框样式 */
.dialog-box {
  position: relative;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 2rem 2.5rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  max-width: 600px;
}

/* 深色模式下的对话框 */
:global(.dark) .dialog-box {
  background: rgba(30, 30, 30, 0.95);
  border-color: rgba(60, 60, 60, 0.8);
}

/* 滚动指示器 */
.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 10;
}

.indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(163, 163, 163, 0.5);
  transition: all 0.3s ease;
  cursor: pointer;
}

.indicator-dot.active {
  width: 24px;
  border-radius: 4px;
  background-color: rgba(82, 82, 82, 0.9);
}

:global(.dark) .indicator-dot {
  background-color: rgba(163, 163, 163, 0.3);
}

:global(.dark) .indicator-dot.active {
  background-color: rgba(229, 229, 229, 0.9);
}

/* 滚动提示 */
.scroll-hint {
  position: absolute;
  bottom: 4rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  animation: fadeInOut 3s ease-in-out infinite;
}

@keyframes fadeInOut {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}

/* 移动端优化 */
@media (max-width: 768px) {
  .slide-item {
    padding: 1rem 0;
  }

  .slide-content {
    flex-direction: column;
  }

  .slide-content > div {
    width: 100% !important;
    max-height: 50%;
  }

  .dialog-box {
    padding: 1.5rem;
    font-size: 0.9rem;
  }

  .scroll-hint {
    bottom: 3rem;
  }

  .scroll-indicator {
    bottom: 1.5rem;
  }
}
</style>