<template>
  <div class="advantages-container grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
    <!-- 卡片 1: 多引擎聚合 (大卡片) -->
    <div class="advantage-card-wrapper lg:col-span-2 scroll-reveal-up" style="--delay: 0s">
      <div class="advantage-card glass-card group overflow-hidden h-full min-h-[400px]">
        <div class="absolute inset-0 bg-gradient-to-br from-indigo-500/5 via-transparent to-purple-500/5"></div>
        <div class="relative z-10 p-10 flex flex-col md:flex-row h-full gap-8 items-center">
          <div class="flex-1">
            <div class="advantage-icon-box mb-8 bg-indigo-50 text-indigo-600">
              <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
            </div>
            <h3 class="text-3xl font-black text-slate-900 mb-6">多引擎聚合，<br/>一站式覆盖全场景</h3>
            <p class="text-slate-500 font-medium leading-relaxed mb-8">深度集成 n8n、Coze、Dify、FastGPT 五大主流引擎，打破平台壁垒，一个入口覆盖从简单对话到复杂工业自动化的所有场景。</p>
            <div class="flex flex-wrap gap-3">
              <span v-for="tag in ['n8n', 'Coze', 'Dify', 'FastGPT', 'Make']" :key="tag" class="px-4 py-1.5 rounded-full bg-white/50 border border-slate-100 text-xs font-black text-slate-600 uppercase tracking-tighter">{{ tag }}</span>
            </div>
          </div>
          <div class="flex-1 relative group-hover:scale-105 transition-transform duration-700">
            <div class="absolute -inset-4 bg-indigo-500/10 blur-3xl rounded-full"></div>
            <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&h=400&fit=crop" class="relative z-10 rounded-2xl shadow-2xl border border-white/50" />
          </div>
        </div>
      </div>
    </div>

    <!-- 卡片 2: 零门槛上手 -->
    <div class="advantage-card-wrapper scroll-reveal-up" style="--delay: 0.1s">
      <div class="advantage-card glass-card group p-10 h-full flex flex-col">
        <div class="advantage-icon-box mb-8 bg-purple-50 text-purple-600">
          <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
        </div>
        <h3 class="text-2xl font-black text-slate-900 mb-4">5 分钟上手，<br/>零编程基础</h3>
        <p class="text-slate-500 font-medium leading-relaxed mb-8 flex-1">无需代码背景，通过直观的可视化拖拽即可构建复杂的业务流。我们提供详尽的实战指南。</p>
        <div class="mt-auto">
          <div class="text-indigo-600 font-black text-sm uppercase tracking-widest flex items-center gap-2 group-hover:gap-4 transition-all">Explore Tutorials <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M17 8l4 4m0 0l-4 4m4-4H3" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
        </div>
      </div>
    </div>

    <!-- 卡片 3: 创作者经济 -->
    <div class="advantage-card-wrapper scroll-reveal-up" style="--delay: 0.2s">
      <div class="advantage-card glass-card group p-10 h-full flex flex-col">
        <div class="advantage-icon-box mb-8 bg-rose-50 text-rose-600">
          <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        </div>
        <h3 class="text-2xl font-black text-slate-900 mb-4">创作者经济，<br/>让技术即刻变现</h3>
        <p class="text-slate-500 font-medium leading-relaxed mb-8 flex-1">开放的工作流市场，你的每一个自动化创意都能产生价值。连接需求方与提供方。</p>
        <div class="flex items-center gap-3"><div class="flex -space-x-2"><div v-for="i in 3" :key="i" class="w-8 h-8 rounded-full border-2 border-white bg-slate-200"></div></div><span class="text-xs font-bold text-slate-400">Join 5,000+ Creators</span></div>
      </div>
    </div>

    <!-- 卡片 4: 企业级解决方案 -->
    <div class="advantage-card-wrapper lg:col-span-2 scroll-reveal-up" style="--delay: 0.3s">
      <div class="advantage-card glass-card group overflow-hidden h-full min-h-[360px] bg-slate-900">
        <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] opacity-10"></div>
        <div class="relative z-10 p-10 flex flex-col md:flex-row h-full gap-8 items-center">
          <div class="flex-1">
            <div class="advantage-icon-box mb-8 bg-emerald-500/10 text-emerald-400">
              <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
            </div>
            <h3 class="text-3xl font-black text-white mb-6">企业级部署，<br/>极致的安全与效能</h3>
            <p class="text-slate-400 font-medium leading-relaxed mb-8">专属私有化部署方案，支持本地化存储与权限精细管控。助力大中型企业构建合规、高效的自动化中台。</p>
            <button class="px-8 py-3 bg-white text-slate-900 rounded-xl font-black text-sm hover:bg-emerald-400 transition-colors">Contact Enterprise</button>
          </div>
          <div class="flex-1 grid grid-cols-2 gap-4">
            <div v-for="item in ['High Security', 'SLA 99.9%', 'Private Cloud', '24/7 Support']" :key="item" class="p-4 rounded-xl border border-white/10 bg-white/5 backdrop-blur-md text-center">
              <div class="text-[10px] font-black text-emerald-400 uppercase tracking-tighter">{{ item }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
onMounted(() => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('is-active');
        observer.unobserve(entry.target);
      }
    });
  }, { threshold: 0.1 });
  document.querySelectorAll('.scroll-reveal-up').forEach(el => observer.observe(el));
});
</script>

<style scoped>
.advantage-card { border-radius: 32px; border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.05), inset 0 2px 4px rgba(255, 255, 255, 1); transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.advantage-card:hover { transform: translateY(-12px); box-shadow: 0 20px 40px -10px rgba(99, 102, 241, 0.15), 0 10px 20px -5px rgba(0, 0, 0, 0.05); border-color: rgba(99, 102, 241, 0.2); }
.glass-card { background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(20px); }
.advantage-icon-box { width: 64px; height: 64px; border-radius: 18px; display: flex; align-items: center; justify-content: center; transition: all 0.5s ease; }
.advantage-card:hover .advantage-icon-box { transform: scale(1.1) rotate(5deg); }
.scroll-reveal-up { opacity: 0; transform: translateY(40px); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--delay, 0s); }
.is-active { opacity: 1; transform: translateY(0); }
</style>
