<section class="py-20 lg:py-28 bg-secondary" (inViewport)="onInViewport($event)" appInViewport>
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="mb-12" [@fadeInUp]="isInView">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-foreground mb-4">
        Everything You Need
      </h2>
      <p class="text-lg text-muted-foreground max-w-2xl">
        A complete ecosystem to manage and grow your retail business
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" [@staggeredFadeInUp]="isInView ? 'true' : 'false'">
      <a *ngFor="let feature of features" [routerLink]="feature.link"
        class="block bg-card rounded-2xl p-6 h-full border border-border hover:border-primary/30 hover:shadow-lg transition-all duration-300 group anim-item">
        <div
          class="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center mb-4 group-hover:bg-primary group-hover:scale-110 transition-all duration-300"
          [innerHTML]="feature.icon">
        </div>

        <h3 class="text-lg font-semibold text-foreground mb-2">
          {{ feature.title }}
        </h3>
        <p class="text-sm text-muted-foreground leading-relaxed">
          {{ feature.description }}
        </p>
      </a>
    </div>
  </div>
</section>
