<script setup>
const customerCases = ref([
  { id: 1, platform: 'TEMU卖家', isPrimary: true, title: '复古水洗 经典重塑', description: '巡演灵感做旧款，粉丝自发应援首选', salesGrowth: '260%', monthlySales: '45W美元', image: 'https://picsum.photos/seed/case1/400/300' },
  { id: 2, platform: 'TikTok卖家', isPrimary: false, title: '冠军荣耀 同款套装', description: '夺冠纪念球衣，球迷珍藏爆款', salesGrowth: '300%', monthlySales: '68W美元', image: 'https://picsum.photos/seed/case2/400/300' },
  { id: 3, platform: 'SHEIN卖家', isPrimary: false, title: '潮流印花 全棉舒适', description: '自制设计印花图案，无尾货压力轻松售', salesGrowth: '180%', monthlySales: '22W美元', image: 'https://picsum.photos/seed/case3/400/300' },
  { id: 4, platform: 'TEMU卖家', isPrimary: true, title: '复古水洗 经典重塑', description: '巡演灵感做旧款，粉丝自发应援首选', salesGrowth: '260%', monthlySales: '45W美元', image: 'https://picsum.photos/seed/case1/400/300' },
  { id: 5, platform: 'TikTok卖家', isPrimary: false, title: '冠军荣耀 同款套装', description: '夺冠纪念球衣，球迷珍藏爆款', salesGrowth: '300%', monthlySales: '68W美元', image: 'https://picsum.photos/seed/case2/400/300' },
  { id: 6, platform: 'SHEIN卖家', isPrimary: false, title: '潮流印花 全棉舒适', description: '自制设计印花图案，无尾货压力轻松售', salesGrowth: '180%', monthlySales: '22W美元', image: 'https://picsum.photos/seed/case3/400/300' },
]);
</script>

<template>
  <section class="py-10 lg:py-16 bg-gray-50 overflow-hidden">
    <div class="max-w-7xl mx-auto px-4 lg:px-6">
      <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-900 text-center mb-8 lg:mb-12">用户案例</h2>
    </div>

    <div class="hidden lg:block overflow-hidden hover:[&>.marquee-track]:[animation-play-state:paused]">
      <div class="marquee-track flex gap-8 w-max animate-marquee">
        <div
          v-for="(testCase, idx) in [...customerCases, ...customerCases]"
          :key="'a-' + idx"
          class="flex-shrink-0 w-[350px] h-[420px] bg-white rounded-xl overflow-hidden"
        >
          <div class="relative h-48">
            <span
              :class="['absolute top-4 left-4', testCase.isPrimary ? 'bg-primary' : 'bg-black', 'text-white px-3 py-1 rounded-full text-sm font-medium']"
            >
              {{ testCase.platform }}
            </span>
            <img :src="testCase.image" :alt="testCase.title" class="w-full h-full object-cover" />
          </div>
          <div class="p-6">
            <div class="flex justify-between items-center mb-4">
              <div>
                <p class="text-gray-500 text-sm">销量增长</p>
                <p class="text-2xl lg:text-3xl font-bold text-primary">{{ testCase.salesGrowth }}</p>
              </div>
              <div class="text-right">
                <p class="text-gray-500 text-sm">月销售额</p>
                <p class="text-2xl lg:text-3xl font-bold text-primary">{{ testCase.monthlySales }}</p>
              </div>
            </div>
            <h3 class="text-lg lg:text-xl font-bold text-gray-900 mb-2">{{ testCase.title }}</h3>
            <p class="text-gray-600 text-sm">{{ testCase.description }}</p>
          </div>
        </div>
      </div>
    </div>

    <div class="lg:hidden overflow-x-auto pb-4 px-4">
      <div class="flex gap-4 w-max">
        <div
          v-for="(testCase, idx) in customerCases"
          :key="'m-' + idx"
          class="flex-shrink-0 w-[280px] bg-white rounded-xl overflow-hidden"
        >
          <div class="relative h-36">
            <span
              :class="['absolute top-3 left-3', testCase.isPrimary ? 'bg-primary' : 'bg-black', 'text-white px-2 py-1 rounded-full text-xs font-medium']"
            >
              {{ testCase.platform }}
            </span>
            <img :src="testCase.image" :alt="testCase.title" class="w-full h-full object-cover" />
          </div>
          <div class="p-4">
            <div class="flex justify-between items-center mb-3">
              <div>
                <p class="text-gray-500 text-xs">销量增长</p>
                <p class="text-xl font-bold text-primary">{{ testCase.salesGrowth }}</p>
              </div>
              <div class="text-right">
                <p class="text-gray-500 text-xs">月销售额</p>
                <p class="text-xl font-bold text-primary">{{ testCase.monthlySales }}</p>
              </div>
            </div>
            <h3 class="text-base font-bold text-gray-900 mb-1">{{ testCase.title }}</h3>
            <p class="text-gray-600 text-xs">{{ testCase.description }}</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>
