<template>
  <section class="trust-section w-full bg-inkreach-homepage-2 flex flex-col justify-center items-center gap-6 lg:gap-10 p-6 lg:p-10 py-12 lg:py-0 lg:h-138">
    <div class="flex gap-2 text-[48px] font-extrabold md:text-4xl lg:text-5xl text-center">全球5000+卖家信赖我们的平台</div>

    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 lg:gap-14 w-full max-w-5xl">
      <div
        v-for="item in stats"
        :key="item.label"
        class="bg-white overflow-hidden rounded-lg"
      >
        <div class="bg-inkreach-homepage-3">
          <div class="text-lg lg:text-2xl flex flex-col gap-1 lg:gap-2 p-3 lg:p-5">
            <div class="trust-stat-value text-primary font-black">{{ item.value }}</div>
            <div>{{ item.label }}</div>
          </div>
        </div>
        <div class="trust-illustration relative -top-6 lg:-top-10">
          <img :src="item.icon" :alt="item.label" />
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
const stats = [
  { value: '1000万+', label: '订单履约', icon: '/订单履约.png' },
  { value: '20+', label: '国家配送', icon: '/国家配送.png' },
  { value: '500+', label: '产品生产', icon: '/产品生产.png' },
  { value: '24H', label: '急速发货', icon: '/极速发货.png' },
];
</script>

<style scoped>
@media (min-width: 1024px) {
  .trust-section { height: 600px; }
  .trust-illustration { margin-bottom: -40px; }
}
</style>
