<template>
  <section class="h-[100vh] flex items-center w-full relative">
    <Motion
      class="top-anime flex flex-col items-center justify-center text-center w-full h-full"
      as="div"
      :initial="{
        opacity: 0,
        y: 30,
      }"
      :animate="isLoaded ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }"
      :transition="{
        duration: 1.2,
        ease: 'easeOut',
        delay: 0.3,
      }"
    >
      <h1
        class="text-5xl md:text-6xl font-bold text-center text-white mb-8 drop-shadow-lg"
      >
        让文字自然发声
      </h1>
      
      <!-- 波浪特效 -->
      <div
        class="relative h-52 w-full max-w-2xl flex items-end justify-center space-x-1.5 mb-12"
      >
        <Motion
          v-for="(bar, index) in waveConfig"
          :key="index"
          class="rounded-t-lg"
          :animate="bar.animateState"
          :transition="{
            duration: bar.duration,
            repeat: Infinity,
            repeatType: 'mirror',
            delay: bar.delay,
            ease: 'easeInOut'
          }"
          :style="{
            width: `${bar.width}px`,
            height: '30%',
            backgroundColor: `rgba(255, 255, 255, ${0.7 + (index % 5) * 0.06})`,
          }"
        />
      </div>
      <h1 class="text-5xl md:text-6xl font-bold text-center text-white mb-8 drop-shadow-lg" mt-6>拟真级语音 · 多场景适配</h1>
    </Motion>
  </section>
</template>

<script setup lang="ts">
import { Motion } from 'motion-v';
import { ref, onMounted, computed } from 'vue';

defineOptions({
  name: 'TopAnime',
});

const containerRef = ref<HTMLElement | null>(null);
const isLoaded = ref(false);

// 生成波形配置
const waveConfig = computed(() => {
  const bars = [];
  const totalBars = 45;
  
  for (let i = 0; i < totalBars; i++) {
    // 生成不同高度的随机值，使波形看起来更自然
    const minHeight = 20 + (i % 3) * 5; // 基础最小高度
    const maxHeight = 65 + (i % 5) * 8; // 增加最大高度
    
    // 在中间位置创建一个波峰
    const positionFactor = Math.abs((i - totalBars / 2) / (totalBars / 2));
    const heightModifier = 1 - positionFactor * 0.5; // 中间高，两边低
    
    // 波形宽度，中间的柱子更宽一些
    const width = 6 + (1 - positionFactor) * 3;
    
    bars.push({
      // 自动动画状态
      animateState: {
        height: [
          `${minHeight * heightModifier}%`,
          `${maxHeight * heightModifier}%`,
          `${minHeight * heightModifier}%`,
        ],
      },
      // 动画参数
      duration: 1.0 + Math.random() * 0.8,
      delay: i * 0.02,
      width: width
    });
  }
  
  return bars;
});

// 页面加载完成后触发动画
onMounted(() => {
  // 等待资源加载完成
  window.addEventListener('load', startAnimation);

  // 如果页面已经加载完毕，或者2秒后仍未触发load事件，则直接开始动画
  if (document.readyState === 'complete') {
    startAnimation();
  } else {
    setTimeout(startAnimation, 2000);
  }
});

function startAnimation() {
  // 移除可能重复的监听器
  window.removeEventListener('load', startAnimation);

  // 开始动画
  isLoaded.value = true;
}
</script>

<style lang="scss" scoped>
.top-anime {
  h1 {
    background: linear-gradient(135deg, #ffffff, #e0e0ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  }
}
</style>
