<script setup>
import { roiStats as defaultStats } from "~/data/home";

defineProps({
  stats: {
    type: Array,
    default: () => defaultStats,
  },
  title: {
    type: String,
    default: "我们交付投资回报率",
  },
});
</script>

<template>
  <section class="bg-white py-20">
    <div class="container-gm">
      <div class="max-w-2xl" data-reveal>
        <p class="text-sm uppercase tracking-[0.3em] text-[#a1a1a1]">ROI</p>
        <h2 class="section-title mt-4">{{ title }}</h2>
      </div>

      <div class="mt-12 grid gap-6 sm:grid-cols-2 xl:grid-cols-3">
        <AnimatedStat
          v-for="stat in stats"
          :key="stat.label + stat.value"
          :label="stat.label"
          :value="stat.value"
          :suffix="stat.suffix"
        />
      </div>
    </div>
  </section>
</template>
