<template>
  <section class="section-marketplace">
    <div class="marketplace-inner">
    <div class="marketplace-header">
      <div class="section-badge">
        <span class="badge-dot"></span>
        <span>工作流市场</span>
      </div>
      <h2 class="section-title">探索 <span class="gradient-text">200K+</span> 工作流</h2>
      <p class="section-desc">搜索、筛选、一键使用，找到最适合你场景的 AI 工作流</p>
    </div>

    <!-- 搜索栏 -->
    <div class="search-bar">
      <div class="search-input-wrap">
        <span class="search-icon">🔍</span>
        <input
          v-model="searchQuery"
          type="text"
          placeholder="搜索工作流..."
          class="search-input"
          @input="filterWorkflows"
        />
        <button class="search-btn">搜索</button>
      </div>
    </div>

    <!-- 分类标签 -->
    <div class="category-tabs">
      <button
        v-for="cat in categories"
        :key="cat.label"
        class="cat-tab"
        :class="{ active: activeCategory === cat.label }"
        @click="selectCategory(cat.label)"
      >
        <span>{{ cat.icon }}</span>
        <span>{{ cat.label }}</span>
        <span class="cat-count">{{ cat.count }}</span>
      </button>
    </div>

    <!-- 工作流卡片网格 -->
    <div class="marketplace-grid">
      <div
        v-for="(wf, i) in filteredWorkflows"
        :key="i"
        class="market-card"
        :class="{ hidden: !wf.visible }"
        @mouseenter="hoveredCard = i"
        @mouseleave="hoveredCard = null"
      >
        <!-- 封面图 -->
        <div class="market-card-cover">
          <img :src="wf.coverImage" :alt="wf.title" class="market-cover-img" />
          <div class="market-cover-overlay"></div>
          <div class="market-platform-chip" :style="{ background: wf.platformColor }">{{ wf.platform }}</div>
          <div class="market-views">▶ {{ wf.views }}</div>
        </div>

        <!-- 卡片内容 -->
        <div class="market-card-body">
          <div class="market-card-top">
            <h4 class="market-title">{{ wf.title }}</h4>
            <div class="market-rating">⭐ {{ wf.rating }}</div>
          </div>
          <p class="market-desc">{{ wf.desc }}</p>
          <div class="market-tags">
            <span class="market-tag" v-for="tag in wf.tags" :key="tag">{{ tag }}</span>
          </div>
          <div class="market-footer">
            <div class="market-author">
              <img :src="wf.authorAvatar" :alt="wf.author" class="market-avatar" />
              <span>{{ wf.author }}</span>
            </div>
            <button class="market-use-btn">使用 →</button>
          </div>
        </div>

        <!-- 悬停遮罩 -->
        <div class="market-hover-overlay" :class="{ visible: hoveredCard === i }">
          <button class="overlay-btn primary">立即使用</button>
          <button class="overlay-btn secondary">查看详情</button>
        </div>
      </div>
    </div>

    <!-- 查看更多 -->
    <div class="marketplace-footer">
      <button class="view-all-btn">浏览全部工作流市场 →</button>
    </div>
    </div><!-- /.marketplace-inner -->
  </section>
</template>

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

const searchQuery = ref('')
const activeCategory = ref('全部')
const hoveredCard = ref(null)

const categories = [
  { label: '全部', icon: '🌟', count: '200K+' },
  { label: '内容创作', icon: '✍️', count: '45K+' },
  { label: '数据分析', icon: '📊', count: '38K+' },
  { label: '客服自动化', icon: '🤖', count: '52K+' },
  { label: '销售运营', icon: '💼', count: '29K+' },
  { label: '效率工具', icon: '⚡', count: '36K+' }
]

const allWorkflows = ref([
  {
    title: 'AI 文章批量生产流水线', platform: 'n8n', platformColor: '#EA4B71',
    rating: '4.9', views: '12.3K', category: '内容创作',
    desc: '一键生成高质量文章，自动配图排版，多平台发布',
    tags: ['GPT-4', '内容创作', '自动化'],
    author: 'Alex Chen',
    authorAvatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=40&q=80',
    coverImage: 'https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=400&q=80',
    visible: true
  },
  {
    title: 'GPT-4 智能客服机器人', platform: 'Coze', platformColor: '#1B6EF3',
    rating: '4.8', views: '8.7K', category: '客服自动化',
    desc: '基于知识库的智能问答，支持多轮对话和情感识别',
    tags: ['知识库', '多轮对话', 'NLP'],
    author: 'Sarah Liu',
    authorAvatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=40&q=80',
    coverImage: 'https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=400&q=80',
    visible: true
  },
  {
    title: '企业知识库问答系统', platform: 'FastGPT', platformColor: '#059669',
    rating: '5.0', views: '15.2K', category: '客服自动化',
    desc: '多格式文档导入，精准语义检索，企业知识管理',
    tags: ['RAG', '语义检索', '企业级'],
    author: 'Mike Wang',
    authorAvatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=40&q=80',
    coverImage: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&q=80',
    visible: true
  },
  {
    title: '数据报告自动生成', platform: 'Dify', platformColor: '#7C3AED',
    rating: '4.7', views: '6.4K', category: '数据分析',
    desc: '连接多数据源，自动分析可视化，定时推送报告',
    tags: ['数据可视化', '自动报告', '多数据源'],
    author: 'Lisa Zhang',
    authorAvatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=40&q=80',
    coverImage: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400&q=80',
    visible: true
  },
  {
    title: '社交媒体内容矩阵', platform: 'n8n', platformColor: '#EA4B71',
    rating: '4.8', views: '9.1K', category: '内容创作',
    desc: '一个主题，自动生成适配各平台的差异化内容',
    tags: ['多平台', '内容矩阵', '自动化'],
    author: 'Tom Li',
    authorAvatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=40&q=80',
    coverImage: 'https://images.unsplash.com/photo-1553877522-43269d4ea984?w=400&q=80',
    visible: true
  },
  {
    title: 'AI 邮件营销自动化', platform: 'Coze', platformColor: '#1B6EF3',
    rating: '4.6', views: '7.3K', category: '销售运营',
    desc: '个性化邮件生成，智能发送时机，效果追踪分析',
    tags: ['邮件营销', '个性化', 'A/B测试'],
    author: 'Emma Zhou',
    authorAvatar: 'https://images.unsplash.com/photo-1517841905240-472988babdf9?w=40&q=80',
    coverImage: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=400&q=80',
    visible: true
  },
  {
    title: '会议纪要自动整理', platform: 'n8n', platformColor: '#EA4B71',
    rating: '5.0', views: '13.7K', category: '效率工具',
    desc: '语音转文字，AI 提炼要点，自动分配任务到项目管理',
    tags: ['语音识别', '会议管理', '任务分配'],
    author: 'Zhang Wei',
    authorAvatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=40&q=80',
    coverImage: 'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&q=80',
    visible: true
  },
  {
    title: '电商选品智能分析', platform: 'Dify', platformColor: '#7C3AED',
    rating: '4.7', views: '5.8K', category: '数据分析',
    desc: '多平台数据爬取，AI 分析趋势，自动生成选品报告',
    tags: ['电商', '选品分析', '趋势预测'],
    author: 'Jack Wu',
    authorAvatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=40&q=80',
    coverImage: 'https://images.unsplash.com/photo-1677442135703-1787eea5ce01?w=400&q=80',
    visible: true
  }
])

const filteredWorkflows = computed(() => {
  return allWorkflows.value.filter(wf => {
    const matchCategory = activeCategory.value === '全部' || wf.category === activeCategory.value
    const matchSearch = !searchQuery.value || wf.title.includes(searchQuery.value) || wf.desc.includes(searchQuery.value)
    return matchCategory && matchSearch
  })
})

function selectCategory(cat) {
  activeCategory.value = cat
}
function filterWorkflows() {
  // 搜索过滤由 computed 处理
}
</script>

<style scoped>
.section-marketplace {
  padding: 100px 0;
  background: #FFFFFF;
}

/* 内容容器：限制最大宽度，居中对齐 */
.marketplace-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}
.marketplace-header {
  text-align: center;
  margin-bottom: 40px;
}
.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #F5F3FF;
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: 100px;
  padding: 6px 16px;
  font-size: 13px;
  color: #6366F1;
  font-weight: 500;
  margin-bottom: 20px;
}
.badge-dot {
  width: 6px; height: 6px;
  background: #6366F1; border-radius: 50%;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}
.section-title {
  font-size: 44px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 16px;
}
.gradient-text {
  background: linear-gradient(135deg, #6366F1, #EC4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.section-desc {
  font-size: 17px;
  color: #6B7280;
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.7;
}

/* 搜索栏 */
.search-bar {
  max-width: 600px;
  margin: 0 auto 32px;
}
.search-input-wrap {
  display: flex;
  align-items: center;
  background: white;
  border: 1.5px solid rgba(0,0,0,0.1);
  border-radius: 14px;
  padding: 4px 4px 4px 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  transition: all 0.3s;
}
.search-input-wrap:focus-within {
  border-color: #6366F1;
  box-shadow: 0 4px 20px rgba(99,102,241,0.15);
}
.search-icon { font-size: 16px; margin-right: 8px; }
.search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 15px;
  color: #111827;
  background: transparent;
}
.search-btn {
  padding: 10px 24px;
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* 分类标签 */
.category-tabs {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.cat-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 100px;
  border: 1.5px solid rgba(0,0,0,0.08);
  background: white;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #6B7280;
  transition: all 0.3s;
}
.cat-tab:hover { border-color: #6366F1; color: #6366F1; }
.cat-tab.active {
  background: linear-gradient(135deg, #6366F1, #8B5CF6);
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(99,102,241,0.3);
}
.cat-count {
  font-size: 11px;
  background: rgba(255,255,255,0.2);
  padding: 1px 6px;
  border-radius: 100px;
}
.cat-tab:not(.active) .cat-count {
  background: #F3F4F6;
  color: #9CA3AF;
}

/* 卡片网格 */
.marketplace-grid {
  display: grid;
  /* 自适应列数：每列最小 260px，最大 1fr，宽屏不超过 4 列 */
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

/* 大屏（≥1400px）强制 4 列，防止卡片过宽 */
@media (min-width: 1400px) {
  .marketplace-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.market-card {
  background: white;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.06);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  transition: all 0.3s ease;
  position: relative;
}
.market-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.12);
}
.market-card.hidden {
  opacity: 0.3;
  transform: scale(0.95);
}

/* 封面图 */
.market-card-cover {
  position: relative;
  height: 160px;
  overflow: hidden;
}
.market-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.market-card:hover .market-cover-img { transform: scale(1.05); }
.market-cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.4));
}
.market-platform-chip {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  color: white;
}
.market-views {
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: white;
  font-size: 12px;
  font-weight: 600;
}

/* 卡片内容 */
.market-card-body { padding: 16px; }
.market-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}
.market-title {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  flex: 1;
  margin-right: 8px;
  line-height: 1.3;
}
.market-rating { font-size: 12px; color: #F59E0B; font-weight: 600; white-space: nowrap; }
.market-desc {
  font-size: 12px;
  color: #6B7280;
  line-height: 1.5;
  margin-bottom: 10px;
}
.market-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
}
.market-tag {
  padding: 2px 8px;
  background: #F3F4F6;
  border-radius: 100px;
  font-size: 10px;
  color: #6B7280;
}
.market-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.market-author {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6B7280;
}
.market-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  object-fit: cover;
}
.market-use-btn {
  padding: 5px 12px;
  background: #F5F3FF;
  color: #6366F1;
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.market-use-btn:hover {
  background: #6366F1;
  color: white;
}

/* 悬停遮罩 */
.market-hover-overlay {
  position: absolute;
  inset: 0;
  background: rgba(99,102,241,0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  opacity: 0;
  transition: opacity 0.3s;
}
.market-hover-overlay.visible { opacity: 1; }
.overlay-btn {
  width: 160px;
  padding: 10px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}
.overlay-btn.primary {
  background: white;
  color: #6366F1;
}
.overlay-btn.secondary {
  background: rgba(255,255,255,0.15);
  color: white;
  border: 1px solid rgba(255,255,255,0.3);
}

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

/* 标题自适应 */
.section-title {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
}
.section-desc {
  font-size: clamp(0.875rem, 1.8vw, 1.0625rem);
}

/* 平板（≤1200px）：3 列 */
@media (max-width: 1200px) {
  .marketplace-inner { padding: 0 24px; }
  .marketplace-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 小平板（≤900px）：2 列 */
@media (max-width: 900px) {
  .section-marketplace { padding: 4rem 0; }
  .marketplace-inner { padding: 0 16px; }
  .marketplace-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .market-card-cover { height: 140px; }
}

/* 手机竖屏（≤600px）：2 列紧凑 */
@media (max-width: 600px) {
  .section-marketplace { padding: 3rem 0; }
  .marketplace-inner { padding: 0 12px; }
  .marketplace-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .market-card-cover { height: 120px; }
  .market-card-body { padding: 12px; }
  .market-title { font-size: 12px; }
  .market-desc { font-size: 11px; }
  .market-tags { display: none; }
  .cat-tab { padding: 6px 12px; font-size: 12px; }
  .cat-count { display: none; }
}

/* 极小屏（≤400px）：1 列 */
@media (max-width: 400px) {
  .marketplace-grid {
    grid-template-columns: 1fr;
  }
  .market-card-cover { height: 160px; }
}

/* 查看更多 */
.marketplace-footer { text-align: center; }
.view-all-btn {
  padding: 14px 40px;
  background: white;
  border: 1.5px solid rgba(99,102,241,0.3);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  color: #6366F1;
  cursor: pointer;
  transition: all 0.3s;
}
.view-all-btn:hover {
  background: #F5F3FF;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(99,102,241,0.15);
}
</style>
