<template>
  <section class="section-courses relative overflow-hidden bg-blue-50 py-24">
    <!-- 背景 -->
    <div class="absolute inset-0 pointer-events-none" style="background: radial-gradient(ellipse at 20% 50%, rgba(99,102,241,0.05) 0%, transparent 60%), radial-gradient(ellipse at 80% 50%, rgba(245,158,11,0.04) 0%, transparent 60%);"></div>
    <div class="absolute inset-0 pointer-events-none" style="background-image: radial-gradient(circle at 1px 1px, rgba(139,92,246,0.06) 1px, transparent 0); background-size: 36px 36px;"></div>

    <div class="relative z-10 max-w-7xl mx-auto px-6">
      <!-- 标题 -->
      <div class="flex flex-col md:flex-row md:items-end justify-between mb-14 gap-6">
        <div>
          <span class="inline-flex items-center gap-2 bg-amber-500/10 border border-amber-500/30 text-amber-600 text-xs font-bold px-4 py-1.5 rounded-full mb-5 uppercase tracking-wide">
            <span class="w-1.5 h-1.5 bg-amber-500 rounded-full animate-pulse"></span>
            学习中心
          </span>
          <h2 class="text-4xl lg:text-5xl font-black text-gray-900 mb-3">
            系统学习，<span class="bg-gradient-to-r from-amber-500 to-orange-500 bg-clip-text text-transparent">快速精通</span>
          </h2>
          <p class="text-gray-500 text-base max-w-lg">从入门到精通，覆盖所有主流 AI 工作流平台，结构化学习路径</p>
        </div>
        <div class="flex items-center gap-3 flex-shrink-0">
          <div class="flex items-center gap-2 bg-white border border-gray-200 rounded-xl px-4 py-2 shadow-sm">
            <span class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span>
            <span class="text-gray-600 text-sm font-medium">1,200+ 学员正在学习</span>
          </div>
        </div>
      </div>

      <!-- 学习路径可视化 -->
      <div class="relative mb-12">
        <!-- 路径连接线 -->
        <div class="hidden lg:block absolute top-1/2 left-0 right-0 h-px -translate-y-1/2 z-0"
          style="background: linear-gradient(90deg, transparent 5%, rgba(245,158,11,0.4) 15%, rgba(245,158,11,0.6) 50%, rgba(245,158,11,0.4) 85%, transparent 95%);"></div>

        <!-- 路径节点 -->
        <div class="relative z-10 grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4">
          <div v-for="(path, idx) in learningPaths" :key="path.title"
            class="group relative cursor-pointer"
            @mouseenter="activePath = idx"
            @mouseleave="activePath = null"
            @click="activePath = activePath === idx ? null : idx">

            <!-- 节点卡片 -->
            <div class="relative flex flex-col items-center text-center p-5 rounded-2xl border transition-all duration-400"
              :class="activePath === idx
                ? `bg-gray-800 border-${path.color}-500/60 shadow-xl shadow-${path.color}-500/20 -translate-y-2`
                : 'bg-white/80 border-gray-100 hover:border-gray-200 hover:-translate-y-1 shadow-sm hover:shadow-md'">

              <!-- 连接点（左右） -->
              <div v-if="idx > 0" class="hidden lg:block absolute left-0 top-1/2 -translate-y-1/2 -translate-x-2 w-4 h-4 rounded-full border-2 border-gray-200 bg-white z-10"></div>
              <div v-if="idx < learningPaths.length - 1" class="hidden lg:block absolute right-0 top-1/2 -translate-y-1/2 translate-x-2 w-4 h-4 rounded-full border-2 border-gray-200 bg-white z-10"></div>

              <!-- 等级徽章 -->
              <div class="absolute -top-3 left-1/2 -translate-x-1/2 text-xs font-bold px-3 py-1 rounded-full border"
                :class="path.levelClass">
                {{ path.level }}
              </div>

              <!-- 图标 -->
              <div class="w-14 h-14 rounded-2xl flex items-center justify-center text-2xl mb-3 mt-3 transition-all duration-300 shadow-lg"
                :class="activePath === idx ? path.iconActiveBg : path.iconBg">
                {{ path.icon }}
              </div>

              <!-- 标题 -->
              <div class="text-gray-900 font-bold text-sm mb-1">{{ path.title }}</div>
              <div class="text-gray-500 text-xs mb-3">{{ path.subtitle }}</div>

              <!-- 进度环 -->
              <div class="relative w-12 h-12 mb-2">
                <svg class="w-12 h-12 -rotate-90" viewBox="0 0 48 48">
                  <circle cx="24" cy="24" r="20" fill="none" stroke="rgba(0,0,0,0.06)" stroke-width="3"/>
                  <circle cx="24" cy="24" r="20" fill="none" :stroke="path.progressColor" stroke-width="3"
                    :stroke-dasharray="`${path.progress * 1.257} 125.7`"
                    stroke-linecap="round" class="transition-all duration-700"/>
                </svg>
                <div class="absolute inset-0 flex items-center justify-center">
                  <span class="text-xs font-bold text-gray-700">{{ path.progress }}%</span>
                </div>
              </div>
              <div class="text-gray-500 text-xs">{{ path.courseCount }} 节课</div>

              <!-- 展开内容 -->
              <Transition name="expand">
                <div v-if="activePath === idx" class="mt-4 w-full text-left border-t border-gray-100 pt-4">
                  <div class="text-xs text-gray-400 mb-2 font-medium">课程内容</div>
                  <div class="space-y-1.5">
                    <div v-for="item in path.items" :key="item" class="flex items-center gap-2 text-xs text-gray-700">
                      <span class="w-1.5 h-1.5 rounded-full flex-shrink-0" :class="`bg-${path.color}-400`"></span>
                      {{ item }}
                    </div>
                  </div>
                  <button class="mt-3 w-full text-xs font-bold py-2 rounded-xl transition-all duration-200"
                    :class="path.btnClass">
                    开始学习 →
                  </button>
                </div>
              </Transition>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部：精选课程横向滚动 -->
      <div class="mt-8">
        <div class="flex items-center justify-between mb-6">
          <h3 class="text-gray-900 text-lg font-bold">精选热门课程</h3>
          <button class="text-amber-400 text-sm font-medium hover:text-amber-300 transition-colors">查看全部 →</button>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          <div v-for="course in featuredCourses" :key="course.title"
            class="group relative bg-white border border-gray-100 rounded-2xl overflow-hidden hover:border-amber-300 shadow-sm hover:-translate-y-1 transition-all duration-300 cursor-pointer">
            <!-- 封面 -->
            <div class="relative h-36 overflow-hidden">
              <img :src="course.img" :alt="course.title" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700 opacity-90 group-hover:opacity-100"/>
              <div class="absolute inset-0 bg-gradient-to-t from-gray-800/60 to-transparent"></div>
              <!-- 难度 -->
              <div class="absolute top-3 left-3 text-xs font-bold px-2.5 py-1 rounded-full" :class="course.levelClass">{{ course.level }}</div>
              <!-- 引擎标签 -->
              <div class="absolute top-3 right-3 text-xs font-bold px-2.5 py-1 rounded-full bg-gray-900/80 text-gray-300 border border-gray-700">{{ course.engine }}</div>
            </div>
            <!-- 信息 -->
            <div class="p-4">
              <div class="text-gray-900 text-sm font-bold mb-1 line-clamp-2">{{ course.title }}</div>
              <!-- 成果标签 -->
              <div v-if="course.badge" class="inline-flex items-center gap-1 text-xs font-bold px-2 py-0.5 rounded-full mb-2" :class="course.badgeClass">
                <span>{{ course.badgeIcon }}</span>
                <span>{{ course.badge }}</span>
              </div>
              <div class="flex items-center justify-between mt-2">
                <div class="flex items-center gap-1.5">
                  <img :src="course.avatar" :alt="course.teacher" class="w-5 h-5 rounded-full object-cover"/>
                  <span class="text-gray-500 text-xs">{{ course.teacher }}</span>
                </div>
                <div class="flex items-center gap-1 text-amber-400 text-xs font-bold">
                  <span>★</span>
                  <span>{{ course.rating }}</span>
                </div>
              </div>
              <div class="flex items-center justify-between mt-2">
                <div class="flex items-center gap-1">
                  <span class="text-gray-500 text-xs">{{ course.students }} 人学习</span>
                  <!-- 学员头像堆叠 -->
                  <div class="flex -space-x-1 ml-1">
                    <div v-for="n in 3" :key="n" class="w-4 h-4 rounded-full bg-gradient-to-br from-violet-400 to-indigo-500 border border-white text-white text-xs flex items-center justify-center" style="font-size:8px">{{ n }}</div>
                  </div>
                </div>
                <span class="text-xs font-bold" :class="course.free ? 'text-green-500' : 'text-amber-500'">{{ course.price }}</span>
              </div>
              <!-- 进度条 -->
              <div class="mt-3">
                <div class="flex items-center justify-between mb-1">
                  <span class="text-gray-400 text-xs">{{ course.outcome }}</span>
                </div>
                <div class="h-1 bg-gray-100 rounded-full overflow-hidden">
                  <div class="h-full rounded-full transition-all duration-700 bg-gradient-to-r from-amber-400 to-orange-400" :style="{ width: course.completionRate + '%' }"></div>
                </div>
              </div>
            </div>
            <!-- Hover 立即开始按钒 -->
            <div class="absolute inset-0 bg-gradient-to-t from-gray-900/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center pb-4">
              <button class="bg-amber-400 text-gray-900 text-xs font-bold px-5 py-2 rounded-full shadow-lg transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
                立即开始学习 →
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref } from 'vue'

const activePath = ref(null)

const learningPaths = [
  {
    icon: '🌱',
    title: 'AI 工作流入门',
    subtitle: '零基础启蒙',
    level: '入门',
    levelClass: 'bg-green-500/20 text-green-400 border-green-500/30',
    color: 'green',
    progress: 100,
    progressColor: '#4ade80',
    courseCount: 12,
    iconBg: 'bg-green-500/20',
    iconActiveBg: 'bg-green-500/30',
    items: ['什么是AI工作流', 'n8n 快速入门', '第一个自动化任务', '常见节点使用'],
    btnClass: 'bg-green-500/20 text-green-400 hover:bg-green-500/30'
  },
  {
    icon: '⚡',
    title: 'n8n 进阶实战',
    subtitle: '自动化专家',
    level: '进阶',
    levelClass: 'bg-violet-500/20 text-violet-400 border-violet-500/30',
    color: 'violet',
    progress: 78,
    progressColor: '#a78bfa',
    courseCount: 24,
    iconBg: 'bg-violet-500/20',
    iconActiveBg: 'bg-violet-500/30',
    items: ['复杂工作流设计', 'HTTP 节点深度使用', '错误处理与调试', 'API 集成实战'],
    btnClass: 'bg-violet-500/20 text-violet-400 hover:bg-violet-500/30'
  },
  {
    icon: '🤖',
    title: 'Coze Bot 开发',
    subtitle: 'AI 助手构建',
    level: '中级',
    levelClass: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
    color: 'blue',
    progress: 65,
    progressColor: '#60a5fa',
    courseCount: 18,
    iconBg: 'bg-blue-500/20',
    iconActiveBg: 'bg-blue-500/30',
    items: ['Coze 平台全解析', '多模型接入', '插件开发', '企业Bot部署'],
    btnClass: 'bg-blue-500/20 text-blue-400 hover:bg-blue-500/30'
  },
  {
    icon: '🧠',
    title: 'Dify RAG 应用',
    subtitle: '知识库构建',
    level: '高级',
    levelClass: 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30',
    color: 'emerald',
    progress: 45,
    progressColor: '#34d399',
    courseCount: 20,
    iconBg: 'bg-emerald-500/20',
    iconActiveBg: 'bg-emerald-500/30',
    items: ['RAG 原理深度解析', '向量数据库配置', 'Prompt 工程', 'Agent 编排'],
    btnClass: 'bg-emerald-500/20 text-emerald-400 hover:bg-emerald-500/30'
  },
  {
    icon: '🏆',
    title: '企业级工作流',
    subtitle: '架构师认证',
    level: '专家',
    levelClass: 'bg-amber-500/20 text-amber-400 border-amber-500/30',
    color: 'amber',
    progress: 30,
    progressColor: '#fbbf24',
    courseCount: 32,
    iconBg: 'bg-amber-500/20',
    iconActiveBg: 'bg-amber-500/30',
    items: ['企业架构设计', '多引擎协同', '安全与合规', '性能优化'],
    btnClass: 'bg-amber-500/20 text-amber-400 hover:bg-amber-500/30'
  }
]

const featuredCourses = [
  {
    title: 'n8n 从零到精通：构建你的第一个 AI 自动化工作流',
    img: 'https://images.unsplash.com/photo-1518770660439-4636190af475?w=400&h=250&fit=crop&q=80',
    level: '入门', levelClass: 'bg-green-500/80 text-white',
    engine: 'n8n',
    teacher: '暴米讲师', avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=40&h=40&fit=crop',
    rating: '4.9', students: '12,500', price: '免费', free: true,
    badge: '最受欢迎', badgeIcon: '🔥', badgeClass: 'bg-orange-100 text-orange-600',
    outcome: '完成后可独立构建工作流', completionRate: 92
  },
  {
    title: 'Coze 智能 Bot 开发：从对话到多模态 AI 助手',
    img: 'https://images.unsplash.com/photo-1677442135703-1787eea5ce01?w=400&h=250&fit=crop&q=80',
    level: '中级', levelClass: 'bg-blue-500/80 text-white',
    engine: 'Coze',
    teacher: 'AI 导师', avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=40&h=40&fit=crop',
    rating: '4.8', students: '8,200', price: '¥199', free: false,
    badge: '新人首选', badgeIcon: '⭐', badgeClass: 'bg-blue-100 text-blue-600',
    outcome: '掌握 Bot 开发全流程', completionRate: 78
  },
  {
    title: 'Dify RAG 知识库：让 AI 精准回答你的业务问题',
    img: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400&h=250&fit=crop&q=80',
    level: '高级', levelClass: 'bg-emerald-500/80 text-white',
    engine: 'Dify',
    teacher: '技术专家', avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=40&h=40&fit=crop',
    rating: '4.9', students: '5,600', price: '¥299', free: false,
    badge: '高分好评', badgeIcon: '🏆', badgeClass: 'bg-emerald-100 text-emerald-600',
    outcome: '构建企业级知识问答系统', completionRate: 85
  },
  {
    title: 'FastGPT 企业知识库：私有化部署与高精度问答',
    img: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=250&fit=crop&q=80',
    level: '专家', levelClass: 'bg-amber-500/80 text-white',
    engine: 'FastGPT',
    teacher: '架构师', avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=40&h=40&fit=crop',
    rating: '4.7', students: '3,800', price: '¥399', free: false,
    badge: '企业首选', badgeIcon: '🏢', badgeClass: 'bg-amber-100 text-amber-600',
    outcome: '私有化部署全掌握', completionRate: 70
  }
]
</script>

<style scoped>
.expand-enter-active, .expand-leave-active {
  transition: all 0.3s ease;
  overflow: hidden;
}
.expand-enter-from, .expand-leave-to {
  opacity: 0;
  max-height: 0;
}
.expand-enter-to, .expand-leave-from {
  opacity: 1;
  max-height: 300px;
}

/* ===== 响应式 ===== */

/* 标题自适应 */
.section-courses h2 {
  font-size: clamp(1.75rem, 4.5vw, 3rem);
}

/* 平板（≤1024px）*/
@media (max-width: 1024px) {
  .section-courses { padding-top: 4rem; padding-bottom: 4rem; }
  .section-courses .max-w-7xl { padding-left: 1rem; padding-right: 1rem; }
}

/* 手机横屏 / 小平板（≤768px）*/
@media (max-width: 768px) {
  .section-courses { padding-top: 3rem; padding-bottom: 3rem; }
  /* 标题区域布局调整 */
  .section-courses .flex-col { gap: 1rem; }
  /* 路径节点卡片 */
  .section-courses .p-5 { padding: 1rem; }
  .section-courses .w-14 { width: 3rem; height: 3rem; }
  .section-courses .text-2xl { font-size: 1.25rem; }
  /* 课程卡片 */
  .section-courses .h-36 { height: 8rem; }
}

/* 手机竖屏（≤480px）*/
@media (max-width: 480px) {
  .section-courses { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  /* 路径节点简化 */
  .section-courses .w-14 { width: 2.5rem; height: 2.5rem; font-size: 1.1rem; }
  .section-courses .w-12.h-12 { width: 2.25rem; height: 2.25rem; }
  .section-courses .text-sm.font-bold { font-size: 0.75rem; }
  /* 课程卡片 */
  .section-courses .h-36 { height: 7rem; }
  .section-courses .p-4 { padding: 0.75rem; }
  /* 学员数标签 */
  .section-courses .flex.items-center.gap-2 span:last-child { font-size: 0.7rem; }
}

/* 极小屏（≤360px）*/
@media (max-width: 360px) {
  .section-courses .h-36 { height: 6rem; }
  .section-courses .p-4 { padding: 0.6rem; }
  .section-courses h3 { font-size: 1rem; }
}
</style>
