<section class="pricing" id="pricing">
  <div class="pricing__wrapper">
    <div class="pricing__header">
      <span class="pricing__label">Transparent & Fair</span>
      <h2>Preise & Pakete</h2>
      <p class="text-muted">Kein Abo-Modell. Keine versteckten Kosten. Sie besitzen Ihre Webseite.</p>
    </div>
    <div class="pricing__grid">
      @for (tier of tiers; track tier.id) {
        <div class="pricing__card" [class.pricing__card--highlighted]="tier.highlighted">
          @if (tier.highlighted) {
            <span class="pricing__badge">Beliebteste Wahl</span>
          }
          <div class="pricing__card-header">
            <h3 class="pricing__tier-name">{{ tier.name }}</h3>
            <div class="pricing__price">{{ tier.price }}</div>
            <p class="pricing__price-note">{{ tier.priceNote }}</p>
          </div>
          <p class="pricing__description">{{ tier.description }}</p>
          <ul class="pricing__features">
            @for (feature of tier.features; track $index) {
              <li class="pricing__feature-item">
                <span class="pricing__check" aria-hidden="true">✓</span>
                {{ feature }}
              </li>
            }
          </ul>
          <div class="pricing__cta">
            <app-button
              [opTrack]="'pricing_cta_click'"
              [opTrackProps]="{ tier: tier.id, cta: tier.cta }"
              [item]="{ label: tier.cta, type: 'anchor', target: '#contact' }"
              [variant]="tier.highlighted ? 'primary' : 'outline'">
            </app-button>
          </div>
        </div>
      }
    </div>
    <div class="pricing__trust">
      <div class="pricing__trust-item">
        <span class="pricing__trust-icon">🔒</span>
        <span>30 Tage Geld-zurück-Garantie</span>
      </div>
      <div class="pricing__trust-item">
        <span class="pricing__trust-icon">🏆</span>
        <span>Persönliche Betreuung inklusive</span>
      </div>
      <div class="pricing__trust-item">
        <span class="pricing__trust-icon">⚡</span>
        <span>Innerhalb von 4 Wochen fertig</span>
      </div>
    </div>
  </div>
</section>
