const clients = [
  "La Prairie",
  "Parc Safari",
  "Vegpro Int'l",
  "IGA",
  "Sobeys",
  "ASFC Canada",
];

const Clients = () => {
  return (
    <section className="py-16 border-y border-border bg-muted/30">
      <div className="container">
        <div className="text-center mb-12">
          <h3 className="font-display text-2xl font-bold mb-2">
            Des milliers de clients font notre référence
          </h3>
          <p className="text-muted-foreground">
            TARGO est devenue incontournable pour les communications de plusieurs milliers de clients
          </p>
        </div>
        
        <div className="flex flex-wrap justify-center items-center gap-8 md:gap-16">
          {clients.map((client) => (
            <div 
              key={client}
              className="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>
  );
};

export default Clients;
