<template>
  <section class="section-platforms relative overflow-hidden bg-white py-24">
    <!-- 背景 -->
    <div class="absolute inset-0 pointer-events-none" style="background: linear-gradient(180deg, #f8faff 0%, #ffffff 50%, #f0fdf4 100%);"></div>

    <div class="relative z-10 max-w-7xl mx-auto px-6">
      <!-- 标题 -->
      <div class="text-center mb-14">
        <span class="inline-flex items-center gap-2 bg-indigo-50 border border-indigo-200 text-indigo-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-indigo-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-indigo-600 to-violet-600 bg-clip-text text-transparent">一站掌控</span>
        </h2>
        <p class="text-gray-500 text-lg max-w-2xl mx-auto">深度整合四大顶级 AI 工作流平台，统一学习、统一管理、统一部署</p>
      </div>

      <!-- 引擎选择器 -->
      <div class="flex justify-center gap-3 mb-10 flex-wrap">
        <button
          v-for="(engine, idx) in engines"
          :key="engine.id"
          @click="activeEngine = idx"
          class="group flex items-center gap-3 px-5 py-3 rounded-2xl border-2 transition-all duration-300 font-semibold text-sm"
          :class="activeEngine === idx
            ? `border-${engine.color}-400 bg-${engine.color}-50 text-${engine.color}-700 shadow-lg`
            : 'border-gray-200 bg-white text-gray-500 hover:border-gray-300 hover:bg-gray-50'"
        >
          <span class="text-xl">{{ engine.logo }}</span>
          <span>{{ engine.name }}</span>
          <span class="text-xs px-2 py-0.5 rounded-full font-bold"
            :class="activeEngine === idx ? `bg-${engine.color}-100 text-${engine.color}-600` : 'bg-gray-100 text-gray-400'">
            {{ engine.tag }}
          </span>
        </button>
      </div>

      <!-- 主展示区：左侧详情 + 右侧对比矩阵 -->
      <div class="grid grid-cols-1 lg:grid-cols-5 gap-8 items-start">

        <!-- 左侧：引擎详情卡片 -->
        <div class="lg:col-span-2">
          <Transition name="engine-slide" mode="out-in">
            <div :key="activeEngine" class="relative rounded-3xl overflow-hidden bg-gray-900 shadow-2xl">
              <!-- 封面图 -->
              <div class="relative h-52 overflow-hidden">
                <img :src="currentEngine.img" :alt="currentEngine.name"
                  class="w-full h-full object-cover opacity-60"/>
                <div class="absolute inset-0" :style="`background: linear-gradient(to bottom, ${currentEngine.gradientFrom}, ${currentEngine.gradientTo});`"></div>
                <!-- Logo -->
                <div class="absolute top-5 left-5 flex items-center gap-3">
                  <div class="w-12 h-12 rounded-2xl flex items-center justify-center text-2xl bg-white/10 backdrop-blur-sm border border-white/20">
                    {{ currentEngine.logo }}
                  </div>
                  <div>
                    <div class="text-white font-black text-xl">{{ currentEngine.name }}</div>
                    <div class="text-white/60 text-xs">{{ currentEngine.subtitle }}</div>
                  </div>
                </div>
                <!-- 适用标签 -->
                <div class="absolute bottom-4 left-5 right-5 flex flex-wrap gap-1.5">
                  <span v-for="use in currentEngine.useCases" :key="use"
                    class="text-xs bg-white/15 backdrop-blur-sm text-white border border-white/20 px-2.5 py-1 rounded-full">
                    {{ use }}
                  </span>
                </div>
              </div>

              <!-- 详情内容 -->
              <div class="p-6">
                <p class="text-gray-300 text-sm leading-relaxed mb-5">{{ currentEngine.desc }}</p>

                <!-- 核心指标 -->
                <div class="grid grid-cols-3 gap-3 mb-5">
                  <div v-for="metric in currentEngine.metrics" :key="metric.label"
                    class="text-center p-3 rounded-2xl bg-white/10 border border-white/20">
                    <div class="font-black text-base mb-0.5" :class="metric.color">{{ metric.value }}</div>
                    <div class="text-gray-500 text-xs">{{ metric.label }}</div>
                  </div>
                </div>

                <!-- 优势列表 -->
                <div class="space-y-2 mb-5">
                  <div v-for="pro in currentEngine.pros" :key="pro"
                    class="flex items-center gap-2 text-sm text-gray-300">
                    <span class="w-4 h-4 rounded-full flex items-center justify-center text-xs flex-shrink-0" :class="currentEngine.checkBg">✓</span>
                    {{ pro }}
                  </div>
                </div>

                <!-- CTA -->
                <button class="w-full py-3 rounded-2xl font-bold text-sm transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg"
                  :class="currentEngine.btnClass">
                  开始学习 {{ currentEngine.name }} →
                </button>
              </div>
            </div>
          </Transition>
        </div>

        <!-- 右侧：功能对比矩阵 -->
        <div class="lg:col-span-3">
          <div class="bg-white border border-gray-100 rounded-3xl overflow-hidden shadow-lg">
            <!-- 矩阵标题行 -->
            <div class="grid grid-cols-5 bg-gray-50 border-b border-gray-100">
              <div class="col-span-1 p-4 text-xs font-bold text-gray-400 uppercase">功能特性</div>
              <div v-for="engine in engines" :key="engine.id"
                class="p-4 text-center transition-all duration-300"
                :class="activeEngine === engines.indexOf(engine) ? `bg-${engine.color}-50` : ''">
                <div class="text-lg mb-1">{{ engine.logo }}</div>
                <div class="text-xs font-bold text-gray-700">{{ engine.name }}</div>
              </div>
            </div>

            <!-- 矩阵内容行 -->
            <div v-for="(feature, fIdx) in comparisonFeatures" :key="feature.name"
              class="grid grid-cols-5 border-b border-gray-50 transition-all duration-200 cursor-default"
              :class="[
                fIdx % 2 === 0 ? '' : 'bg-gray-50/30',
                hoveredRow === fIdx ? 'bg-indigo-50/60 shadow-sm' : 'hover:bg-gray-50/50'
              ]"
              @mouseenter="hoveredRow = fIdx"
              @mouseleave="hoveredRow = null">
              <!-- 功能名 -->
              <div class="col-span-1 p-4 flex items-center gap-2 relative group">
                <span class="text-base">{{ feature.icon }}</span>
                <div>
                  <div class="text-sm font-semibold text-gray-700 flex items-center gap-1">
                    {{ feature.name }}
                    <span v-if="feature.tip" class="w-3.5 h-3.5 bg-gray-200 text-gray-500 rounded-full text-xs flex items-center justify-center cursor-help flex-shrink-0">?</span>
                  </div>
                  <div class="text-xs text-gray-400">{{ feature.desc }}</div>
                </div>
                <!-- Tooltip -->
                <div v-if="feature.tip" class="compare-tooltip">
                  {{ feature.tip }}
                </div>
              </div>
              <!-- 各引擎支持情况 -->
              <div v-for="(engine, eIdx) in engines" :key="engine.id"
                class="p-4 flex items-center justify-center transition-all duration-300"
                :class="activeEngine === eIdx ? `bg-${engine.color}-50/50` : ''">
                <div class="flex flex-col items-center gap-1">
                  <span v-if="feature.support[eIdx] === 'full'" class="w-6 h-6 bg-green-100 text-green-600 rounded-full flex items-center justify-center text-xs font-bold">✓</span>
                  <span v-else-if="feature.support[eIdx] === 'partial'" class="w-6 h-6 bg-amber-100 text-amber-600 rounded-full flex items-center justify-center text-xs font-bold">~</span>
                  <span v-else class="w-6 h-6 bg-gray-100 text-gray-400 rounded-full flex items-center justify-center text-xs">—</span>
                  <span v-if="feature.notes && feature.notes[eIdx]" class="text-xs text-gray-400 text-center leading-tight max-w-[70px]">{{ feature.notes[eIdx] }}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 底部推荐 -->
          <div class="mt-6 p-5 bg-gradient-to-r from-indigo-50 to-violet-50 rounded-2xl border border-indigo-100">
            <div class="flex items-start gap-3">
              <span class="text-2xl flex-shrink-0">💡</span>
              <div>
                <div class="font-bold text-gray-800 mb-1 text-sm">如何选择适合你的引擎？</div>
                <div class="text-gray-500 text-xs leading-relaxed">
                  <span class="font-semibold text-gray-700">n8n</span> 适合技术团队做复杂自动化；
                  <span class="font-semibold text-gray-700">Coze</span> 适合快速构建 AI Bot；
                  <span class="font-semibold text-gray-700">Dify</span> 适合 LLM 应用开发；
                  <span class="font-semibold text-gray-700">FastGPT</span> 适合企业知识库问答。
                  <a href="#" class="text-indigo-600 font-semibold ml-1 hover:underline">查看选型指南 →</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

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

const activeEngine = ref(0)
const hoveredRow = ref(null)

const engines = [
  {
    id: 'n8n', name: 'n8n', logo: '🔧', tag: '开源', subtitle: '可视化自动化平台',
    color: 'red',
    img: 'https://images.unsplash.com/photo-1518770660439-4636190af475?w=600&h=350&fit=crop&q=80',
    gradientFrom: 'rgba(239,68,68,0.4)', gradientTo: 'rgba(17,24,39,0.95)',
    desc: 'n8n 是强大的开源工作流自动化平台，拥有 400+ 内置节点，支持自托管，适合技术团队构建复杂的企业级自动化流程。',
    useCases: ['企业自动化', '数据管道', 'API 集成'],
    metrics: [
      { value: '400+', label: '集成节点', color: 'text-red-400' },
      { value: '开源', label: '可自托管', color: 'text-green-400' },
      { value: '99.9%', label: '在线率', color: 'text-blue-400' }
    ],
    pros: ['可视化拖拽，无需编程', '400+ 内置集成节点', '支持私有化部署', '强大的条件逻辑处理'],
    checkBg: 'bg-red-100 text-red-600',
    btnClass: 'bg-gradient-to-r from-red-500 to-orange-500 text-white shadow-lg shadow-red-200/50'
  },
  {
    id: 'coze', name: 'Coze', logo: '🤖', tag: 'Bot平台', subtitle: 'AI Bot 构建平台',
    color: 'blue',
    img: 'https://images.unsplash.com/photo-1677442135703-1787eea5ce01?w=600&h=350&fit=crop&q=80',
    gradientFrom: 'rgba(59,130,246,0.4)', gradientTo: 'rgba(17,24,39,0.95)',
    desc: 'Coze 是字节跳动推出的 AI Bot 开发平台，零代码快速构建多模态 AI 助手，支持接入飞书、微信等主流渠道。',
    useCases: ['AI 客服', '智能助手', '多渠道Bot'],
    metrics: [
      { value: '零代码', label: '快速搭建', color: 'text-blue-400' },
      { value: '10+', label: '接入渠道', color: 'text-green-400' },
      { value: '多模态', label: '能力支持', color: 'text-violet-400' }
    ],
    pros: ['零代码快速构建Bot', '支持多模态交互', '丰富的插件生态', '一键部署到多渠道'],
    checkBg: 'bg-blue-100 text-blue-600',
    btnClass: 'bg-gradient-to-r from-blue-500 to-cyan-500 text-white shadow-lg shadow-blue-200/50'
  },
  {
    id: 'dify', name: 'Dify', logo: '🧠', tag: 'LLM应用', subtitle: 'LLM 应用开发平台',
    color: 'emerald',
    img: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=600&h=350&fit=crop&q=80',
    gradientFrom: 'rgba(16,185,129,0.4)', gradientTo: 'rgba(17,24,39,0.95)',
    desc: 'Dify 是专业的 LLM 应用开发平台，支持 RAG 知识库、Agent 编排和 Prompt 工程，适合构建复杂的 AI 应用。',
    useCases: ['RAG知识库', 'Agent编排', 'LLM应用'],
    metrics: [
      { value: 'RAG', label: '知识检索', color: 'text-emerald-400' },
      { value: 'Agent', label: '智能编排', color: 'text-green-400' },
      { value: '开源', label: '可私有化', color: 'text-blue-400' }
    ],
    pros: ['强大的 RAG 知识库', 'Agent 工作流编排', '多模型统一管理', '完整的 API 接口'],
    checkBg: 'bg-emerald-100 text-emerald-600',
    btnClass: 'bg-gradient-to-r from-emerald-500 to-teal-500 text-white shadow-lg shadow-emerald-200/50'
  },
  {
    id: 'fastgpt', name: 'FastGPT', logo: '⚡', tag: '知识库', subtitle: '企业知识库问答',
    color: 'amber',
    img: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=600&h=350&fit=crop&q=80',
    gradientFrom: 'rgba(245,158,11,0.4)', gradientTo: 'rgba(17,24,39,0.95)',
    desc: 'FastGPT 专注于企业知识库问答场景，支持私有化部署，高精度文档解析和问答，是企业 AI 知识管理的首选方案。',
    useCases: ['企业知识库', '文档问答', '私有化部署'],
    metrics: [
      { value: '95%+', label: '问答准确率', color: 'text-amber-400' },
      { value: '私有化', label: '数据安全', color: 'text-green-400' },
      { value: '多格式', label: '文档支持', color: 'text-blue-400' }
    ],
    pros: ['高精度文档解析', '支持私有化部署', '多格式文件支持', '企业级权限管理'],
    checkBg: 'bg-amber-100 text-amber-600',
    btnClass: 'bg-gradient-to-r from-amber-500 to-orange-500 text-white shadow-lg shadow-amber-200/50'
  }
]

const currentEngine = computed(() => engines[activeEngine.value])

const comparisonFeatures = [
  {
    icon: '🎨', name: '可视化编辑', desc: '拖拽式界面',
    tip: '通过拖拽节点即可构建工作流，无需编程基础',
    support: ['full', 'full', 'full', 'partial'],
    notes: ['', '', '', '基础版']
  },
  {
    icon: '🔌', name: '集成节点数', desc: '第三方服务',
    tip: '内置的第三方平台集成数量，节点越多连接能力越强',
    support: ['full', 'partial', 'partial', 'partial'],
    notes: ['400+', '50+', '100+', '30+']
  },
  {
    icon: '🧠', name: 'RAG 知识库', desc: '文档问答',
    tip: '基于检索增强生成，将文档转化为 AI 可检索知识库',
    support: ['partial', 'partial', 'full', 'full'],
    notes: ['基础', '基础', '完整', '完整']
  },
  {
    icon: '🤖', name: 'Agent 编排', desc: '智能体工作流',
    tip: 'AI 智能体自主规划并执行多步骤任务，具备自主决策能力',
    support: ['full', 'full', 'full', 'partial'],
    notes: ['', '', '', '基础']
  },
  {
    icon: '🏠', name: '私有化部署', desc: '本地/云端',
    tip: '支持将工作流引擎部署到自己的服务器，数据不离境',
    support: ['full', 'none', 'full', 'full'],
    notes: ['', '仅云端', '', '']
  },
  {
    icon: '📱', name: '多渠道发布', desc: '微信/飞书等',
    tip: '工作流输出可同时推送到微信、飞书、钉钉等多个渠道',
    support: ['partial', 'full', 'partial', 'partial'],
    notes: ['需配置', '原生支持', '需配置', '需配置']
  },
  {
    icon: '💰', name: '免费额度', desc: '基础使用',
    tip: '开源项目可免费自部署，商业产品有免费层和付费升级选项',
    support: ['full', 'full', 'full', 'full'],
    notes: ['开源免费', '有免费额度', '开源免费', '开源免费']
  }
]
</script>

<style scoped>
.engine-slide-enter-active, .engine-slide-leave-active {
  transition: all 0.3s ease;
}
.engine-slide-enter-from {
  opacity: 0;
  transform: translateX(-20px);
}
.engine-slide-leave-to {
  opacity: 0;
  transform: translateX(20px);
}

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

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

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

/* 手机横屏 / 小平板（≤768px）*/
@media (max-width: 768px) {
  .section-platforms { padding-top: 3rem; padding-bottom: 3rem; }
  /* 引擎选择器按钮 */
  .section-platforms button.group { padding: 8px 14px; font-size: 12px; gap: 8px; }
  /* 对比矩阵改为可滚动 */
  .section-platforms .lg\:col-span-3 > .bg-white {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .section-platforms .grid-cols-5 {
    min-width: 480px;
  }
  /* 封面图高度缩小 */
  .section-platforms .h-52 { height: 10rem; }
  /* 内容区域内边距 */
  .section-platforms .p-6 { padding: 1rem; }
  /* 指标卡片 */
  .section-platforms .grid-cols-3 { gap: 0.5rem; }
}

/* 手机竖屏（≤480px）*/
@media (max-width: 480px) {
  .section-platforms { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  /* 引擎选择器按钮隐藏 tag */
  .section-platforms button.group span:last-child { display: none; }
  .section-platforms button.group { padding: 7px 12px; font-size: 11px; gap: 6px; }
  /* 封面图 */
  .section-platforms .h-52 { height: 8rem; }
  /* 底部推荐框 */
  .section-platforms .mt-6.p-5 { padding: 0.75rem; }
  /* 对比矩阵单元格内边距 */
  .section-platforms .p-4 { padding: 0.5rem; }
  .section-platforms .text-sm { font-size: 0.75rem; }
  .section-platforms .text-xs { font-size: 0.65rem; }
}

/* 极小屏（≤360px）*/
@media (max-width: 360px) {
  .section-platforms button.group span:nth-child(2) { display: none; }
  .section-platforms button.group { padding: 6px 10px; }
}

/* 对比表格 Tooltip */
.compare-tooltip {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 8px;
  background: rgba(15, 10, 35, 0.92);
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  padding: 6px 12px;
  border-radius: 8px;
  white-space: nowrap;
  max-width: 220px;
  white-space: normal;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  border: 1px solid rgba(99, 102, 241, 0.3);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.group:hover .compare-tooltip {
  opacity: 1;
}
</style>
