<section class="py-16 bg-muted/30">
  <div class="container mx-auto px-4">
    <div class="text-center mb-10">
      <h2 class="text-3xl md:text-4xl font-bold text-foreground mb-4">
        Trusted by Leading Stores
      </h2>
      <p class="text-muted-foreground text-lg max-w-2xl mx-auto">
        Join hundreds of businesses already using Store Chat to grow their sales
      </p>
    </div>

    <div
      #scrollContainer
      class="flex gap-8 overflow-hidden"
      style="scroll-behavior: auto"
    >
      <div
        *ngFor="let partner of scrollingPartners"
        class="flex-shrink-0 bg-card border border-border rounded-xl p-6 min-w-[180px] flex flex-col items-center gap-3 shadow-sm hover:shadow-md transition-shadow"
      >
        <span class="text-4xl">{{ partner.logo }}</span>
        <span class="font-semibold text-foreground whitespace-nowrap">
          {{ partner.name }}
        </span>
      </div>
    </div>
  </div>
</section>
