<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Database, TrendingUp, Target, Sparkles, ArrowRight, BarChart3, Brain, LineChart, PieChart, Zap } from 'lucide-vue-next'

const particles = ref<{ left: number; top: number; delay: number; duration: number }[]>([])

onMounted(() => {
  particles.value = Array.from({ length: 15 }, () => ({
    left: Math.random() * 100,
    top: Math.random() * 100,
    delay: Math.random() * 2,
    duration: 4 + Math.random() * 3,
  }))
})

const coreCards = [
  { icon: Target, color: 'indigo', bgColor: 'bg-indigo-100', iconColor: 'text-indigo-600', title: '紧扣考纲动向', desc: '实时跟踪考试政策变化\n精准把握命题趋势' },
  { icon: TrendingUp, color: 'blue', bgColor: 'bg-blue-100', iconColor: 'text-blue-600', title: '持续优化模型', desc: '迭代教学内容体系\n打造精准预测能力' },
  { icon: Sparkles, color: 'purple', bgColor: 'bg-purple-100', iconColor: 'text-purple-600', title: '数据驱动提升', desc: '智能分析学习行为\n个性化定制学习路径' },
]

const capabilities = [
  { icon: BarChart3, title: '考点分布分析', value: '10万+', desc: '真题数据样本' },
  { icon: Brain, title: '智能诊断引擎', value: '98%', desc: '诊断准确率' },
  { icon: LineChart, title: '趋势预测模型', value: '5年', desc: '历史数据追溯' },
  { icon: PieChart, title: '学情画像系统', value: '360°', desc: '全维度分析' },
]

const scenarios = [
  {
    title: '智能题库推荐',
    desc: '基于学员答题数据，AI自动识别薄弱知识点，精准推送强化练习题目，避免无效刷题',
    features: ['个性化推荐', '错题智能归类', '知识图谱分析']
  },
  {
    title: '考情趋势预测',
    desc: '分析历年真题命题规律，结合最新考纲变化，预测高频考点和题型分布',
    features: ['命题趋势分析', '考点权重计算', '模拟试卷生成']
  },
  {
    title: '学习路径规划',
    desc: '根据目标分数和剩余时间，智能规划最优学习路径，合理分配各科复习时间',
    features: ['目标分解', '进度追踪', '动态调整']
  },
  {
    title: '教学效果评估',
    desc: '多维度评估教学效果，为教研团队提供改进依据，持续优化课程内容',
    features: ['效果量化', '对比分析', '优化建议']
  },
]
</script>

<template>
  <div class="pt-16">
    <div class="relative min-h-screen bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 overflow-hidden">
      <div class="absolute inset-0 overflow-hidden opacity-30 pointer-events-none">
        <div class="dc-grid absolute w-[200%] h-[200%] -top-1/2 -left-1/2 bg-[linear-gradient(to_right,#6366f1_1px,transparent_1px),linear-gradient(to_bottom,#6366f1_1px,transparent_1px)] bg-[size:6rem_6rem]"></div>
      </div>

      <div class="absolute inset-0 overflow-hidden pointer-events-none">
        <div
          v-for="(particle, i) in particles"
          :key="i"
          class="absolute w-3 h-3 bg-gradient-to-br from-blue-400 to-indigo-500 rounded-full opacity-20 dc-particle"
          :style="{ left: `${particle.left}%`, top: `${particle.top}%`, animationDelay: `${particle.delay}s`, animationDuration: `${particle.duration}s` }"
        ></div>
      </div>

      <div class="relative z-10 max-w-7xl mx-auto px-6 md:px-8 py-20 md:py-28">
        <div class="text-center mb-16 md:mb-20">
          <div class="inline-flex items-center gap-3 px-5 py-2.5 md:px-6 md:py-3 rounded-full bg-indigo-600 text-white text-xs md:text-sm font-bold mb-8 md:mb-10 shadow-xl shadow-indigo-500/30 dc-pulse">
            <Database :size="18" />
            <span>数据驱动教学创新</span>
            <Sparkles :size="18" />
          </div>
          
          <h1 class="text-4xl md:text-5xl lg:text-7xl font-bold text-slate-900 mb-6 md:mb-8">
            专升本<span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-blue-600">大数据研究中心</span>
          </h1>
          <p class="text-lg md:text-xl text-slate-600 max-w-2xl mx-auto mb-8">
            依托海量真实数据，深度洞察考试趋势，为每一位学员提供精准、高效的学习方案
          </p>
          <div class="w-24 md:w-32 h-1 bg-gradient-to-r from-transparent via-indigo-400 to-transparent mx-auto rounded-full"></div>
        </div>

        <div class="grid md:grid-cols-3 gap-6 md:gap-8 mb-20">
          <div
            v-for="(item, i) in coreCards"
            :key="i"
            class="bg-white border border-slate-100 p-8 md:p-10 rounded-3xl shadow-xl hover:shadow-2xl transition-shadow duration-300 dc-slide-up"
            :style="{ animationDelay: `${i * 0.2}s` }"
          >
            <div :class="['p-4 rounded-2xl w-16 h-16 flex items-center justify-center mb-6', item.bgColor]">
              <component :is="item.icon" :class="item.iconColor" :size="32" />
            </div>
            <h3 class="text-2xl md:text-3xl font-bold text-slate-900 mb-4">{{ item.title }}</h3>
            <p class="text-slate-600 text-base md:text-lg leading-loose whitespace-pre-line">{{ item.desc }}</p>
          </div>
        </div>
      </div>
    </div>

    <section class="py-20 md:py-28 bg-white">
      <div class="max-w-7xl mx-auto px-6 md:px-8">
        <div class="text-center mb-16 dc-slide-up">
          <span class="inline-block px-4 py-1.5 rounded-full bg-slate-100 text-slate-600 text-xs font-bold mb-4 uppercase tracking-wider">
            Core Capabilities
          </span>
          <h2 class="text-3xl md:text-4xl font-bold text-slate-900 mb-4">核心数据能力</h2>
          <p class="text-slate-500 max-w-xl mx-auto">
            基于多年积累的海量教育数据，构建智能分析体系
          </p>
        </div>

        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
          <div
            v-for="(item, i) in capabilities"
            :key="i"
            class="bg-gradient-to-br from-slate-50 to-white p-6 rounded-2xl border border-slate-100 hover:border-indigo-200 hover:shadow-lg transition-all duration-300 group dc-scale-in"
            :style="{ animationDelay: `${i * 0.1}s` }"
          >
            <div class="w-12 h-12 bg-indigo-100 rounded-xl flex items-center justify-center mb-4 group-hover:bg-indigo-600 transition-colors">
              <component :is="item.icon" class="text-indigo-600 group-hover:text-white transition-colors" :size="24" />
            </div>
            <h3 class="font-bold text-slate-900 mb-2">{{ item.title }}</h3>
            <div class="text-3xl font-bold text-indigo-600 mb-1">{{ item.value }}</div>
            <p class="text-sm text-slate-500">{{ item.desc }}</p>
          </div>
        </div>
      </div>
    </section>

    <section class="py-20 md:py-28 bg-slate-50">
      <div class="max-w-7xl mx-auto px-6 md:px-8">
        <div class="text-center mb-16 dc-slide-up">
          <span class="inline-block px-4 py-1.5 rounded-full bg-white text-slate-600 text-xs font-bold mb-4 uppercase tracking-wider">
            Application Scenarios
          </span>
          <h2 class="text-3xl md:text-4xl font-bold text-slate-900 mb-4">数据赋能场景</h2>
          <p class="text-slate-500 max-w-xl mx-auto">
            将数据洞察转化为实际教学效果提升
          </p>
        </div>

        <div class="grid md:grid-cols-2 gap-8">
          <div
            v-for="(item, i) in scenarios"
            :key="i"
            class="bg-white p-8 rounded-3xl shadow-lg hover:shadow-xl transition-shadow dc-slide-x"
            :style="{ animationDelay: `${i * 0.1}s` }"
          >
            <div class="flex items-start gap-4 mb-4">
              <div class="w-10 h-10 bg-indigo-100 rounded-xl flex items-center justify-center flex-shrink-0">
                <Zap class="text-indigo-600" :size="20" />
              </div>
              <div>
                <h3 class="text-xl font-bold text-slate-900 mb-2">{{ item.title }}</h3>
                <p class="text-slate-600 leading-relaxed">{{ item.desc }}</p>
              </div>
            </div>
            <div class="flex flex-wrap gap-2 mt-4">
              <span v-for="(feature, j) in item.features" :key="j" class="px-3 py-1 bg-slate-100 text-slate-600 text-xs rounded-full">
                {{ feature }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="py-20 md:py-28 bg-gradient-to-br from-indigo-600 to-purple-700">
      <div class="max-w-4xl mx-auto px-6 md:px-8 text-center">
        <div class="dc-slide-up">
          <h2 class="text-3xl md:text-4xl font-bold text-white mb-6">
            用数据驱动你的升本之路
          </h2>
          <p class="text-indigo-100 text-lg mb-10 max-w-2xl mx-auto">
            加入恭学，体验数据赋能的智能学习方式，让备考更高效、更精准
          </p>
          <div class="flex flex-wrap gap-4 justify-center">
            <a
              href="/question-bank"
              class="px-8 py-4 bg-white text-indigo-600 rounded-full font-bold hover:bg-indigo-50 transition-colors shadow-lg flex items-center gap-2"
            >
              体验刷题系统 <ArrowRight :size="18" />
            </a>
            <a
              href="/online-school"
              class="px-8 py-4 bg-indigo-500/30 text-white rounded-full font-bold hover:bg-indigo-500/50 transition-colors border border-white/30 flex items-center gap-2"
            >
              了解在线课程
            </a>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
.dc-grid {
  animation: dcGridMove 30s linear infinite;
}

@keyframes dcGridMove {
  0% { transform: translate(0, 0); }
  50% { transform: translate(100px, 100px); }
  100% { transform: translate(0, 0); }
}

.dc-particle {
  animation: dcParticleFloat 4s ease-in-out infinite;
}

@keyframes dcParticleFloat {
  0%, 100% { transform: translateY(0); opacity: 0.2; }
  50% { transform: translateY(-40px); opacity: 0.5; }
}

.dc-pulse {
  animation: dcPulse 2s ease-in-out infinite;
}

@keyframes dcPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.dc-slide-up {
  animation: dcSlideUp 0.6s ease-out forwards;
  opacity: 0;
}

@keyframes dcSlideUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

.dc-scale-in {
  animation: dcScaleIn 0.5s ease-out forwards;
  opacity: 0;
}

@keyframes dcScaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.dc-slide-x {
  animation: dcSlideX 0.5s ease-out forwards;
  opacity: 0;
}

@keyframes dcSlideX {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
</style>
