<template>
  <section class="section-about relative overflow-hidden py-28" ref="sectionRef" style="background: linear-gradient(180deg, oklch(0.96 0.03 280) 0%, oklch(0.98 0.015 270) 50%, oklch(0.97 0.025 260) 100%);">
    <!-- 背景装饰 -->
    <div class="absolute inset-0 pointer-events-none overflow-hidden">
      <!-- 网格线 -->
      <div class="absolute inset-0" style="background-image: linear-gradient(rgba(124,58,237,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(124,58,237,0.05) 1px, transparent 1px); background-size: 48px 48px;"></div>
      <!-- 左上光晓 -->
      <div class="absolute top-0 left-0 w-96 h-96 rounded-full opacity-40" style="background: radial-gradient(circle, rgba(124,58,237,0.15) 0%, transparent 70%); filter: blur(60px);"></div>
      <!-- 右下光晓 -->
      <div class="absolute bottom-0 right-0 w-96 h-96 rounded-full opacity-30" style="background: radial-gradient(circle, rgba(79,70,229,0.12) 0%, transparent 70%); filter: blur(80px);"></div>
    </div>

    <div class="relative z-10 max-w-7xl mx-auto px-6">
      <!-- 标题 -->
      <div class="text-center mb-16 reveal-up" :class="{ 'is-visible': isVisible }">
        <span class="inline-flex items-center gap-2 bg-violet-50 border border-violet-200 text-violet-600 text-xs font-bold px-4 py-1.5 rounded-full mb-5 tracking-wide uppercase">
          <span class="w-1.5 h-1.5 bg-violet-500 rounded-full animate-pulse"></span>
          平台介绍
        </span>
        <h2 class="text-4xl lg:text-5xl font-black text-gray-900 mb-4 leading-tight">
          一个平台，驾驭<br/>
          <span class="bg-gradient-to-r from-violet-600 via-blue-600 to-cyan-500 bg-clip-text text-transparent">所有 AI 引擎</span>
        </h2>
        <p class="text-gray-500 text-lg max-w-2xl mx-auto">暴米AI 深度整合四大顶级平台，让你在一个地方完成所有 AI 工作流的搭建、管理与优化</p>
      </div>

      <!-- 主体 -->
      <div class="flex flex-col lg:flex-row gap-12 items-stretch">
        <!-- 左侧：SVG 节点连接画布 -->
        <div class="lg:w-3/5 reveal-left" :class="{ 'is-visible': isVisible }">
          <div class="relative rounded-3xl overflow-hidden border border-gray-100 shadow-2xl shadow-violet-100/60 bg-white h-full">
            <!-- 浏览器顶栏 -->
            <div class="flex items-center gap-2 px-4 py-3 bg-gray-50 border-b border-gray-100">
              <div class="flex gap-1.5">
                <div class="w-3 h-3 rounded-full bg-red-400"></div>
                <div class="w-3 h-3 rounded-full bg-yellow-400"></div>
                <div class="w-3 h-3 rounded-full bg-green-400"></div>
              </div>
              <div class="flex-1 mx-3 bg-white rounded-lg px-3 py-1 text-xs text-gray-400 border border-gray-200 flex items-center gap-2">
                <svg class="w-3 h-3 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"/></svg>
                workflow-canvas.baomiai.com
              </div>
              <span class="text-green-600 text-xs font-medium flex items-center gap-1">
                <span class="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse"></span>
                实时运行中
              </span>
            </div>
            <!-- SVG 画布 -->
            <div class="bg-gray-50/80 p-4">
              <svg viewBox="0 0 680 440" class="w-full" xmlns="http://www.w3.org/2000/svg">
                <defs>
                  <filter id="glow1"><feGaussianBlur stdDeviation="3" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
                  <filter id="glow2"><feGaussianBlur stdDeviation="6" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
                  <linearGradient id="lg-n8n" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="#8b5cf6"/><stop offset="100%" stop-color="#ef4444"/></linearGradient>
                  <linearGradient id="lg-coze" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="#8b5cf6"/><stop offset="100%" stop-color="#3b82f6"/></linearGradient>
                  <linearGradient id="lg-dify" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="#8b5cf6"/><stop offset="100%" stop-color="#10b981"/></linearGradient>
                  <linearGradient id="lg-fgpt" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="#8b5cf6"/><stop offset="100%" stop-color="#f59e0b"/></linearGradient>
                  <linearGradient id="center-grad" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#7c3aed"/><stop offset="100%" stop-color="#2563eb"/></linearGradient>
                </defs>
                <!-- 背景网格 -->
                <pattern id="gridLight" width="30" height="30" patternUnits="userSpaceOnUse">
                  <path d="M 30 0 L 0 0 0 30" fill="none" stroke="rgba(139,92,246,0.07)" stroke-width="1"/>
                </pattern>
                <rect width="680" height="440" fill="url(#gridLight)"/>
                <!-- 连接线 -->
                <path d="M340,220 C280,220 200,175 150,155" stroke="url(#lg-n8n)" stroke-width="2" fill="none" filter="url(#glow1)" class="dash-flow"/>
                <path d="M340,220 C400,220 480,175 530,155" stroke="url(#lg-coze)" stroke-width="2" fill="none" filter="url(#glow1)" class="dash-flow-r"/>
                <path d="M340,220 C280,220 200,265 150,285" stroke="url(#lg-dify)" stroke-width="2" fill="none" filter="url(#glow1)" class="dash-flow-r"/>
                <path d="M340,220 C400,220 480,265 530,285" stroke="url(#lg-fgpt)" stroke-width="2" fill="none" filter="url(#glow1)" class="dash-flow"/>
                <!-- 流动光点 -->
                <circle r="5" fill="rgba(139,92,246,0.9)" filter="url(#glow1)"><animateMotion dur="2.5s" repeatCount="indefinite" path="M340,220 C280,220 200,175 150,155"/></circle>
                <circle r="5" fill="rgba(59,130,246,0.9)" filter="url(#glow1)"><animateMotion dur="3s" repeatCount="indefinite" begin="0.6s" path="M340,220 C400,220 480,175 530,155"/></circle>
                <circle r="5" fill="rgba(16,185,129,0.9)" filter="url(#glow1)"><animateMotion dur="2.8s" repeatCount="indefinite" begin="1.2s" path="M340,220 C280,220 200,265 150,285"/></circle>
                <circle r="5" fill="rgba(245,158,11,0.9)" filter="url(#glow1)"><animateMotion dur="3.2s" repeatCount="indefinite" begin="1.8s" path="M340,220 C400,220 480,265 530,285"/></circle>
                <!-- 中心光晕 -->
                <circle cx="340" cy="220" r="52" fill="none" stroke="rgba(139,92,246,0.15)" stroke-width="1.5" class="node-pulse"/>
                <!-- 中心节点 -->
                <rect x="300" y="192" width="80" height="56" rx="16" fill="url(#center-grad)" filter="url(#glow2)"/>
                <text x="340" y="216" text-anchor="middle" fill="white" font-size="11" font-weight="900">暴米AI</text>
                <text x="340" y="232" text-anchor="middle" fill="rgba(255,255,255,0.85)" font-size="9">Platform</text>
                <circle cx="340" cy="242" r="3" fill="#4ade80"/>
                <!-- n8n 节点 -->
                <g class="float-node" style="transform-origin: 150px 155px;">
                  <circle cx="150" cy="155" r="34" fill="white" stroke="rgba(239,68,68,0.25)" stroke-width="1.5" filter="url(#glow1)"/>
                  <circle cx="150" cy="155" r="26" fill="rgba(239,68,68,0.08)"/>
                  <text x="150" y="150" text-anchor="middle" fill="#ef4444" font-size="12" font-weight="900">n8n</text>
                  <text x="150" y="166" text-anchor="middle" fill="rgba(239,68,68,0.7)" font-size="8">开源自动化</text>
                </g>
                <!-- Coze 节点 -->
                <g class="float-node" style="transform-origin: 530px 155px; animation-delay: 0.7s;">
                  <circle cx="530" cy="155" r="34" fill="white" stroke="rgba(59,130,246,0.25)" stroke-width="1.5" filter="url(#glow1)"/>
                  <circle cx="530" cy="155" r="26" fill="rgba(59,130,246,0.08)"/>
                  <text x="530" y="150" text-anchor="middle" fill="#2563eb" font-size="12" font-weight="900">Coze</text>
                  <text x="530" y="166" text-anchor="middle" fill="rgba(37,99,235,0.7)" font-size="8">AI Bot 平台</text>
                </g>
                <!-- Dify 节点 -->
                <g class="float-node" style="transform-origin: 150px 285px; animation-delay: 1.4s;">
                  <circle cx="150" cy="285" r="34" fill="white" stroke="rgba(16,185,129,0.25)" stroke-width="1.5" filter="url(#glow1)"/>
                  <circle cx="150" cy="285" r="26" fill="rgba(16,185,129,0.08)"/>
                  <text x="150" y="280" text-anchor="middle" fill="#059669" font-size="12" font-weight="900">Dify</text>
                  <text x="150" y="296" text-anchor="middle" fill="rgba(5,150,105,0.7)" font-size="8">LLM 应用</text>
                </g>
                <!-- FastGPT 节点 -->
                <g class="float-node" style="transform-origin: 530px 285px; animation-delay: 2.1s;">
                  <circle cx="530" cy="285" r="34" fill="white" stroke="rgba(245,158,11,0.25)" stroke-width="1.5" filter="url(#glow1)"/>
                  <circle cx="530" cy="285" r="26" fill="rgba(245,158,11,0.08)"/>
                  <text x="530" y="278" text-anchor="middle" fill="#d97706" font-size="10" font-weight="900">FastGPT</text>
                  <text x="530" y="294" text-anchor="middle" fill="rgba(217,119,6,0.7)" font-size="8">知识库问答</text>
                </g>
                <!-- 浮动数据标签 -->
                <rect x="240" y="55" width="200" height="28" rx="14" fill="white" stroke="rgba(139,92,246,0.2)" stroke-width="1" filter="url(#glow1)"/>
                <circle cx="258" cy="69" r="4" fill="#4ade80"/>
                <text x="270" y="73" fill="rgba(55,65,81,0.9)" font-size="9" font-weight="600">今日执行 15,750 次 · 成功率 99.8%</text>
                <rect x="220" y="390" width="240" height="28" rx="14" fill="white" stroke="rgba(139,92,246,0.2)" stroke-width="1"/>
                <text x="340" y="408" text-anchor="middle" fill="rgba(124,58,237,0.8)" font-size="9" font-weight="600">n8n · Coze · Dify · FastGPT 统一管理</text>
              </svg>
            </div>
          </div>
        </div>

        <!-- 右侧：特性列表 -->
        <div class="lg:w-2/5 flex flex-col gap-4 reveal-right" :class="{ 'is-visible': isVisible }">
          <div v-for="(feat, idx) in features" :key="feat.title"
            class="group flex gap-4 p-5 rounded-2xl border transition-all duration-300 cursor-pointer"
            :class="activeFeature === idx
              ? 'bg-white border-violet-300 shadow-lg shadow-violet-100/60'
              : 'bg-gray-50/80 border-gray-100 hover:border-violet-200 hover:bg-white hover:shadow-md'"
            @mouseenter="activeFeature = idx"
            @mouseleave="activeFeature = null">
            <div class="w-12 h-12 rounded-2xl flex items-center justify-center text-xl flex-shrink-0 transition-all duration-300"
              :class="activeFeature === idx ? feat.activeBg : feat.bg">
              {{ feat.icon }}
            </div>
            <div class="flex-1">
              <div class="flex items-center gap-2 mb-1">
                <span class="text-gray-900 font-bold text-sm">{{ feat.title }}</span>
                <span class="text-xs px-2 py-0.5 rounded-full font-medium" :class="feat.badge">{{ feat.badgeText }}</span>
              </div>
              <p class="text-gray-500 text-sm leading-relaxed">{{ feat.desc }}</p>
              <div v-if="activeFeature === idx" class="mt-3 flex flex-wrap gap-1.5 animate-tag-in">
                <span v-for="tag in feat.tags" :key="tag" class="text-xs px-2 py-0.5 rounded-full border" :class="feat.tagColor">{{ tag }}</span>
              </div>
            </div>
            <div class="flex-shrink-0 flex items-center">
              <svg class="w-4 h-4 text-gray-300 group-hover:text-violet-500 transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
              </svg>
            </div>
          </div>
          <div class="mt-2 flex gap-3">
            <button class="flex-1 bg-gradient-to-r from-violet-600 to-blue-600 text-white text-sm font-bold py-3 px-6 rounded-2xl hover:shadow-lg hover:shadow-violet-500/30 transition-all duration-300 hover:-translate-y-0.5 active:scale-95">
              立即体验平台 →
            </button>
            <button class="px-5 py-3 rounded-2xl border border-gray-200 text-gray-600 text-sm font-medium hover:border-violet-300 hover:text-violet-600 transition-all duration-300 active:scale-95">
              查看案例
            </button>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref, onMounted } from 'vue'
const activeFeature = ref(null)
const isVisible = ref(false)
const sectionRef = ref(null)
onMounted(() => {
  const observer = new IntersectionObserver(
    (entries) => { entries.forEach(e => { if (e.isIntersecting) { isVisible.value = true; observer.unobserve(e.target) } }) },
    { threshold: 0.15 }
  )
  if (sectionRef.value) observer.observe(sectionRef.value)
})
const features = [
  { icon: '🎯', title: '可视化工作流编排', desc: '拖拽式节点连接，无需编程基础，5分钟搭建你的第一个AI自动化工作流。', badgeText: '零代码', badge: 'bg-violet-100 text-violet-600', bg: 'bg-violet-50', activeBg: 'bg-violet-100', tags: ['拖拽操作', '400+ 节点', '实时预览'], tagColor: 'bg-violet-50 text-violet-600 border-violet-200' },
  { icon: '🚀', title: '一键多端部署', desc: '工作流构建完成后，一键部署到微信、飞书、钉钉等平台，7×24h 自动运行。', badgeText: '多端', badge: 'bg-blue-100 text-blue-600', bg: 'bg-blue-50', activeBg: 'bg-blue-100', tags: ['微信', '飞书', '钉钉', 'Slack', 'API'], tagColor: 'bg-blue-50 text-blue-600 border-blue-200' },
  { icon: '🧠', title: '四大引擎统一调度', desc: 'n8n、Coze、Dify、FastGPT 在一个平台统一管理，AI 智能推荐最优引擎。', badgeText: '智能', badge: 'bg-emerald-100 text-emerald-600', bg: 'bg-emerald-50', activeBg: 'bg-emerald-100', tags: ['n8n', 'Coze', 'Dify', 'FastGPT'], tagColor: 'bg-emerald-50 text-emerald-600 border-emerald-200' },
  { icon: '📊', title: '实时监控与告警', desc: '99.9% 在线率保障，毫秒级响应监控，异常自动告警，执行日志全记录。', badgeText: '99.9%', badge: 'bg-amber-100 text-amber-600', bg: 'bg-amber-50', activeBg: 'bg-amber-100', tags: ['实时监控', '自动告警', '执行日志'], tagColor: 'bg-amber-50 text-amber-600 border-amber-200' }
]
</script>

<style scoped>
/* SVG 内部动画 */
:deep(.dash-flow) { stroke-dasharray: 8 5; animation: dashAnim 1.8s linear infinite; }
:deep(.dash-flow-r) { stroke-dasharray: 8 5; animation: dashAnimR 2.2s linear infinite; }
@keyframes dashAnim { to { stroke-dashoffset: -26; } }
@keyframes dashAnimR { to { stroke-dashoffset: 26; } }
:deep(.node-pulse) { animation: nodePulse 2.5s ease-out infinite; }
@keyframes nodePulse { 0%,100% { opacity:0.4; } 50% { opacity:0.1; } }
:deep(.float-node) { animation: floatY 3s ease-in-out infinite; }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.float-orb { animation: floatOrb 8s ease-in-out infinite; }
.float-orb-2 { animation: floatOrb 10s ease-in-out infinite reverse; }
@keyframes floatOrb { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(20px,-15px) scale(1.05); } 66% { transform: translate(-15px,10px) scale(0.95); } }
.reveal-up { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal-up.is-visible { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s; }
.reveal-left.is-visible { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(40px); transition: opacity 0.8s ease 0.4s, transform 0.8s ease 0.4s; }
.reveal-right.is-visible { opacity: 1; transform: translateX(0); }
.animate-tag-in { animation: tagIn 0.3s ease; }
@keyframes tagIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
</style>
