<template>
  <section class="trust-section">
    <div class="container">
      <div class="trust-grid">
        <CommonTrustBadge
          v-for="stat in stats"
          :key="stat.label"
          :value="stat.value"
          :unit="stat.unit"
          :label="stat.label"
          :attribution="stat.attribution"
          dark
        />
      </div>
    </div>
  </section>
</template>

<script setup>
defineProps({
  stats: { type: Array, required: true },
})
</script>

<style lang="less" scoped>
.trust-section {
  background: linear-gradient(135deg, @color-primary-dark 0%, @color-primary 100%);
  padding: @space-xl 0;

  .respond-md({
    padding: @space-2xl 0;
  });
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: @space-md;

  .respond-md({
    grid-template-columns: repeat(4, 1fr);
    gap: @space-xl;
  });
}
</style>
