<script setup lang="ts">
const clients = [
  "La Prairie",
  "Parc Safari",
  "Vegpro Int'l",
  "IGA",
  "Sobeys",
  "ASFC Canada",
];
</script>

<template>
  <section class="py-16 border-y border-border bg-muted/30">
    <div class="container">
      <div class="text-center mb-12">
        <h3 class="font-display text-2xl font-bold mb-2">
          Des milliers de clients font notre référence
        </h3>
        <p class="text-muted-foreground">
          TARGO est devenue incontournable pour les communications de plusieurs milliers de clients
        </p>
      </div>

      <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16">
        <div
          v-for="client in clients"
          :key="client"
          class="px-6 py-3 bg-card rounded-lg border border-border text-muted-foreground font-medium hover:text-primary hover:border-primary/50 transition-colors"
        >
          {{ client }}
        </div>
      </div>
    </div>
  </section>
</template>
