<template>
  <section class="section-how relative overflow-hidden bg-violet-50 py-24">
    <!-- 背景装饰 -->
    <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: 32px 32px;"></div>

    <div class="relative z-10 max-w-7xl mx-auto px-6">
      <!-- 标题 -->
      <div class="text-center mb-20">
        <span class="inline-flex items-center gap-2 bg-green-50 border border-green-200 text-green-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-green-500 rounded-full animate-pulse"></span>
          快速上手
        </span>
        <h2 class="text-4xl lg:text-5xl font-black text-gray-900 mb-4">
          三步，<span class="bg-gradient-to-r from-green-600 to-teal-500 bg-clip-text text-transparent">快速上手</span>
        </h2>
        <p class="text-gray-500 text-lg max-w-xl mx-auto">无需技术背景，5 分钟搭建你的第一个 AI 工作流</p>
      </div>

      <!-- 时间轴主体 -->
      <div class="relative">
        <!-- 中央连接线 -->
        <div class="hidden lg:block absolute left-1/2 top-0 bottom-0 w-px -translate-x-1/2" style="background: linear-gradient(180deg, transparent 0%, #d1fae5 10%, #6ee7b7 30%, #34d399 50%, #6ee7b7 70%, #d1fae5 90%, transparent 100%);"></div>

        <!-- 流动粒子 -->
        <div class="hidden lg:block absolute left-1/2 -translate-x-1/2 top-0 bottom-0 overflow-hidden w-px pointer-events-none">
          <div class="timeline-particle"></div>
          <div class="timeline-particle" style="animation-delay: 1.5s;"></div>
          <div class="timeline-particle" style="animation-delay: 3s;"></div>
        </div>

        <!-- 步骤列表 -->
        <div class="space-y-16 lg:space-y-24">
          <div v-for="(step, idx) in steps" :key="step.title"
            class="relative flex flex-col lg:flex-row items-center gap-8 lg:gap-0"
            :class="idx % 2 === 1 ? 'lg:flex-row-reverse' : ''">

            <!-- 内容侧 -->
            <div class="w-full lg:w-5/12 group"
              :class="idx % 2 === 0 ? 'lg:pr-16 lg:text-right' : 'lg:pl-16'">
              <div class="inline-flex items-center gap-2 mb-4"
                :class="idx % 2 === 0 ? 'lg:flex-row-reverse' : ''">
                <span class="text-xs font-bold px-3 py-1 rounded-full" :class="step.badgeClass">{{ step.badge }}</span>
                <span class="text-gray-400 text-xs">Step {{ idx + 1 }}</span>
              </div>
              <h3 class="text-2xl lg:text-3xl font-black text-gray-900 mb-3">{{ step.title }}</h3>
              <p class="text-gray-500 text-base leading-relaxed mb-5">{{ step.desc }}</p>

              <!-- 特性标签 -->
              <div class="flex flex-wrap gap-2"
                :class="idx % 2 === 0 ? 'lg:justify-end' : ''">
                <span v-for="tag in step.tags" :key="tag"
                  class="flex items-center gap-1.5 text-xs font-medium px-3 py-1.5 rounded-xl border"
                  :class="step.tagClass">
                  <span class="w-1.5 h-1.5 rounded-full" :class="step.dotClass"></span>
                  {{ tag }}
                </span>
              </div>

              <!-- 时间指标 -->
              <div class="mt-5 inline-flex items-center gap-2 px-4 py-2 rounded-2xl"
                :class="step.timeClass">
                <span class="text-lg font-black" :class="step.timeNumClass">{{ step.time }}</span>
                <span class="text-xs font-medium opacity-70">{{ step.timeLabel }}</span>
              </div>
            </div>

            <!-- 中央节点 -->
            <div class="relative z-10 flex-shrink-0 lg:absolute lg:left-1/2 lg:-translate-x-1/2">
              <div class="w-16 h-16 rounded-2xl flex items-center justify-center text-2xl shadow-xl border-4 border-white transition-transform duration-300 hover:scale-110"
                :class="step.nodeBg">
                {{ step.icon }}
              </div>
              <!-- 步骤序号 -->
              <div class="absolute -top-2 -right-2 w-6 h-6 rounded-full flex items-center justify-center text-xs font-black text-white shadow-md"
                :class="step.numBg">
                {{ idx + 1 }}
              </div>
            </div>

            <!-- 预览侧 -->
            <div class="w-full lg:w-5/12"
              :class="idx % 2 === 0 ? 'lg:pl-16' : 'lg:pr-16'">
              <div class="relative rounded-2xl overflow-hidden shadow-xl border border-gray-100 group cursor-pointer hover:shadow-2xl transition-all duration-500 hover:-translate-y-1">
                <!-- 图片 -->
                <div class="relative h-52 overflow-hidden">
                  <img :src="step.img" :alt="step.title"
                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" />
                  <div class="absolute inset-0" :class="step.imgOverlay"></div>
                </div>
                <!-- 底部信息条 -->
                <div class="bg-white px-5 py-3 flex items-center justify-between border-t border-gray-50">
                  <div class="flex items-center gap-2">
                    <span class="w-2 h-2 rounded-full" :class="step.dotClass"></span>
                    <span class="text-sm font-semibold text-gray-700">{{ step.previewLabel }}</span>
                  </div>
                  <span class="text-xs text-gray-400">{{ step.previewSub }}</span>
                </div>
                <!-- 悬停播放按钮 -->
                <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                  <div class="w-14 h-14 bg-white/90 rounded-full flex items-center justify-center shadow-xl">
                    <svg class="w-6 h-6 text-gray-700 ml-1" fill="currentColor" viewBox="0 0 20 20">
                      <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"/>
                    </svg>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部 CTA -->
      <div class="text-center mt-20">
        <div class="inline-flex flex-col items-center gap-4">
          <div class="flex items-center gap-3 text-sm text-gray-500">
            <span class="flex items-center gap-1.5"><span class="w-2 h-2 bg-green-400 rounded-full"></span>无需信用卡</span>
            <span class="w-px h-4 bg-gray-200"></span>
            <span class="flex items-center gap-1.5"><span class="w-2 h-2 bg-blue-400 rounded-full"></span>5 分钟上手</span>
            <span class="w-px h-4 bg-gray-200"></span>
            <span class="flex items-center gap-1.5"><span class="w-2 h-2 bg-violet-400 rounded-full"></span>永久免费基础版</span>
          </div>
          <button class="bg-gradient-to-r from-green-500 to-teal-500 text-white font-bold text-base px-8 py-4 rounded-2xl shadow-xl shadow-green-200/60 hover:shadow-green-300/60 hover:-translate-y-0.5 transition-all duration-300">
            立即免费开始 →
          </button>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
const steps = [
  {
    icon: '🎯',
    title: '选择工作流模板',
    desc: '从 5,700+ 精选模板中挑选最适合你的场景，一键导入，开箱即用，无需从零开始。',
    badge: '5 分钟',
    badgeClass: 'bg-green-100 text-green-700',
    tags: ['5,700+ 模板', '一键导入', '分类筛选'],
    tagClass: 'bg-green-50 text-green-600 border-green-100',
    dotClass: 'bg-green-400',
    time: '< 5 min',
    timeLabel: '完成模板选择',
    timeClass: 'bg-green-50',
    timeNumClass: 'text-green-600',
    nodeBg: 'bg-gradient-to-br from-green-400 to-teal-500',
    numBg: 'bg-green-500',
    img: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=600&h=350&fit=crop&q=80',
    imgOverlay: 'bg-gradient-to-t from-green-900/40 to-transparent',
    previewLabel: '模板市场',
    previewSub: '5,700+ 精选模板'
  },
  {
    icon: '⚙️',
    title: '配置 AI 引擎与节点',
    desc: '拖拽式可视化编辑器，连接 n8n、Coze、Dify、FastGPT 等引擎，设置触发条件和处理逻辑。',
    badge: '零代码',
    badgeClass: 'bg-violet-100 text-violet-700',
    tags: ['拖拽编辑', '400+ 集成', 'AI 智能建议'],
    tagClass: 'bg-violet-50 text-violet-600 border-violet-100',
    dotClass: 'bg-violet-400',
    time: '可视化',
    timeLabel: '拖拽式配置',
    timeClass: 'bg-violet-50',
    timeNumClass: 'text-violet-600',
    nodeBg: 'bg-gradient-to-br from-violet-500 to-blue-500',
    numBg: 'bg-violet-500',
    img: 'https://images.unsplash.com/photo-1518770660439-4636190af475?w=600&h=350&fit=crop&q=80',
    imgOverlay: 'bg-gradient-to-t from-violet-900/40 to-transparent',
    previewLabel: '可视化编辑器',
    previewSub: '拖拽式节点配置'
  },
  {
    icon: '🚀',
    title: '一键部署，自动运行',
    desc: '点击发布，工作流立即在云端运行，7×24h 全自动执行，支持微信、飞书、API 等多端触发。',
    badge: '7×24h',
    badgeClass: 'bg-blue-100 text-blue-700',
    tags: ['云端运行', '多端触发', '实时监控'],
    tagClass: 'bg-blue-50 text-blue-600 border-blue-100',
    dotClass: 'bg-blue-400',
    time: '99.9%',
    timeLabel: '在线率保障',
    timeClass: 'bg-blue-50',
    timeNumClass: 'text-blue-600',
    nodeBg: 'bg-gradient-to-br from-blue-500 to-cyan-500',
    numBg: 'bg-blue-500',
    img: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=600&h=350&fit=crop&q=80',
    imgOverlay: 'bg-gradient-to-t from-blue-900/40 to-transparent',
    previewLabel: '执行监控台',
    previewSub: '实时查看运行状态'
  }
]
</script>

<style scoped>
.timeline-particle {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px #34d399;
  animation: particleFall 4.5s linear infinite;
}
@keyframes particleFall {
  0% { top: -8px; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
</style>
