<section class="py-20 lg:py-28 gradient-dark text-primary-foreground" (inViewport)="onInViewport($event)" appInViewport>
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="mb-12">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">
        Why Store Chat?
      </h2>
      <p class="text-lg text-primary-foreground/70 max-w-2xl">
        Join hundreds of businesses already growing with us
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6" [@staggeredFadeInUp]="isInView ? 'true' : 'false'">
      <div *ngFor="let benefit of benefits" class="flex gap-4 p-6 rounded-2xl bg-primary-foreground/5 border border-primary-foreground/10 hover:bg-primary-foreground/10 transition-colors anim-item">
        <div class="w-12 h-12 rounded-xl bg-primary flex items-center justify-center shrink-0" [innerHTML]="benefit.icon">
        </div>
        <div>
          <h3 class="text-lg font-semibold mb-2">{{ benefit.title }}</h3>
          <p class="text-primary-foreground/70 text-sm leading-relaxed">
            {{ benefit.description }}
          </p>
        </div>
      </div>
    </div>
  </div>
</section>
