<template>
  <div class="relative w-full home-page">
    <!-- 导航栏 -->
    <HomeNav @login="showLoginDialog" />
    <!-- 视差背景 -->
    <ParallaxBackground />

    <!-- 第一屏动画-->
    <TopAnime />

    <!--功能介绍区-->
    <section class="h-[100vh] flex items-center w-full relative" id="product" ref="productSection">
      <div class="py-20 container mx-auto px-6">
        <h2 class="text-4xl font-bold text-white mb-10 text-center">我们的特色</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          <div
            v-for="(item, index) in products"
            :key="item.title"
            class="group gradient-border-wrapper opacity-0 transform translate-y-10"
            :class="{'animate-fade-in-up': isProductVisible}"
            :style="{animationDelay: `${index * 0.15}s`}"
          >
            <div class="gradient-border-content bg-white rounded-xl p-6 shadow-lg transition-all duration-300 text-left product-card relative z-10">
              <div class="text-3xl mb-4 transition-all duration-300 group-hover:text-blue-600 group-hover:scale-110">
                <SvgIcon :name="item.icon" type="svg" size="2em" color="currentColor" />
              </div>
              <h3 class="text-xl font-semibold mb-2 text-gray-800 group-hover:text-blue-600">{{ item.title }}</h3>
              <p class="text-gray-600 group-hover:text-gray-700">{{ item.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="h-[100vh] flex items-center w-full relative bg-white" >
      <div class="container mx-auto px-6 text-center">
        <div class="flex flex-col items-center justify-center">
          <div class="text-6xl mb-8 text-blue-600">
            <SvgIcon name="ai-banner" type="svg" size="4em" color="currentColor" />
          </div>
          <h2 class="text-4xl font-bold mb-6">让文字自然发声</h2>
          <p class="text-xl text-gray-600 max-w-2xl mx-auto mb-10">用科技让沟通更自然，让信息传递更高效</p>
          <button class="lightning-button bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-lg font-medium transition text-xl relative overflow-hidden">
            <span class="relative z-10">立即免费试用</span>
            <span class="lightning" />
          </button>
        </div>
      </div>
    </section>

    <!-- 页脚版权信息 -->
    <footer class="bg-white-900 text-black py-6">
      <div class="container mx-auto px-6 text-center">
        <p class="text-sm text-black-400">© 2024 声音AI平台 版权所有</p>
      </div>
    </footer>
  </div>
</template>
<script setup lang="ts">
import HomeNav from './components/nav.vue';
import ParallaxBackground from './components/ParallaxBackground.vue';
import TopAnime from './components/topAnime.vue';
import { onMounted, onUnmounted, ref } from 'vue';
import { useIntersectionObserver } from '@vueuse/core';
import useDialog from '@/components/Dialog/useDialog';
import { ElMessage } from 'element-plus';

// 产品区域的引用
const productSection = ref(null);
// 控制产品区域动画的变量
const isProductVisible = ref(false);

// 动态导入登录页面
const LoginView = () => import('@/views/login/index.vue');

// 使用VueUse的useIntersectionObserver监听元素可见性
useIntersectionObserver(
  productSection,
  ([{ isIntersecting }]) => {
    if (isIntersecting) {
      isProductVisible.value = true;
    }
  },
  { threshold: 0.3 } // 当元素30%进入视口时触发
);

const products = [
  {
    title: '智能语音合成',
    description: '提供自然流畅的语音合成服务，支持多种语言和音色选择。',
    icon: 'ai',
  },
  {
    title: '语音克隆',
    description:
      '只需少量语音样本，即可克隆出与原始声音高度相似的个性化语音模型。',
    icon: 'mark',
  },
  {
    title: '语音编辑',
    description:
      '强大的语音编辑工具，可调整语速、音调、情感等参数，满足专业需求。',
    icon: 'reader',
  },
  {
    title: '批量处理',
    description: '支持大规模文本批量转换为语音，提高工作效率，节省时间成本。',
    icon: 'fast',
  },
];

// 页面进入时隐藏滚动条
onMounted(() => {
  // 保存原始滚动条样式
  const originalStyle = document.body.style.overflow;

  // 隐藏滚动条
  document.documentElement.style.setProperty('scrollbar-width', 'none'); // Firefox

  document.body.style.overflow = 'auto'; // 保持可以滚动

  // 在组件销毁时恢复滚动条
  onUnmounted(() => {
    // 恢复原始滚动条样式
    document.body.style.overflow = originalStyle;
    document.documentElement.style.removeProperty('scrollbar-width');
  });
});

// 初始化弹窗
const loginDialog = useDialog({
  content: LoginView,
  modalProps: {
    title: '',
    width: '520px',
    showClose: true,
    closeOnClickModal: false,
    header: false,
    footer: false,
    customClass: 'login-dialog'
  }
});

// 显示登录弹窗
const showLoginDialog = () => {
  // 打开登录弹窗
  loginDialog.openModal();
  ElMessage.info('登录中，请稍候...');
  
  // 4秒后自动关闭
  setTimeout(() => {
    loginDialog.closeModal();
    ElMessage.success('登录成功');
  }, 4000);
};
</script>
<style lang="scss" scoped>
.home-page {
 
  /* 组件级别的滚动条隐藏 */
  &::-webkit-scrollbar {
    display: none;
  }

  #product {
    
    .product-card {
     
      
    }
  }
}

/* 闪电特效 */
.lightning-button {
  position: relative;
  overflow: hidden;
}

.lightning {
  position: absolute;
  top: -50%;
  left: -100%;
  width: 20px;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: rotate(-15deg);
  z-index: 1;
  animation: lightning-animation 2s infinite;
}

@keyframes lightning-animation {
  0% {
    left: -100px;
  }
  100% {
    left: calc(100% + 100px);
  }
}

/* 过渡区域样式 */
.transition-bg {
  position: relative;
  overflow: hidden;
}

/* 渐入动画 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s ease forwards;
}

/* 旋转边框效果 */
.gradient-border-wrapper {
  position: relative;
  border-radius: 12px;
  padding: 3px;
  overflow: hidden;
  isolation: isolate;
}

.gradient-border-wrapper::before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200%;
  padding-bottom: 200%;
  transform: translate(-50%, -50%);
  background: transparent;
  z-index: 0;
  transition: background 0.3s ease;
}

.gradient-border-wrapper:hover::before {
  animation: rotate-gradient 8s linear infinite;
  background: conic-gradient(
    from 180deg at 50% 50%,
    #9a8bff 0deg,
    #ffac8b 45deg,
    transparent 90deg,
    transparent 180deg,
    #9a8bff 180deg,
    #ffac8b 225deg,
    transparent 270deg
  );
}

.gradient-border-content {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 100%;
}

@keyframes rotate-gradient {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
</style>
