<section class="projects" id="projects">
  <div class="projects__wrapper">
    <div class="projects__header">
      <span class="projects__label">Erfolgsgeschichten</span>
      <h2>Projekte, die überzeugen</h2>
      <p class="text-muted">So helfen wir Unternehmen, online erfolgreich zu sein.</p>
    </div>
    <div class="projects__card-container">
      @for (project of projects; track project.id; let i = $index) {
        <a
          [routerLink]="['/projekt', project.slug]"
          class="projects__card"
          [style.--delay]="(i * 100) + 'ms'"
          opTrack="project_card_click"
          [opTrackProps]="{ project_id: project.id, company: project.company, slug: project.slug }">
          <div class="projects__card-image">
            <img [src]="project.image" [alt]="project.company" loading="lazy" />
            <div class="projects__card-overlay"></div>
          </div>
          <div class="projects__card-content">
            <span class="projects__card-branch">{{ project.branch }}</span>
            <h3 class="projects__card-title">{{ project.company }}</h3>
            <p class="projects__card-description">{{ project.shortDescription }}</p>
            <div class="projects__card-features">
              @for (feature of project.features; track $index) {
                <span class="projects__tag">{{ feature }}</span>
              }
            </div>
            @if (project.result) {
              <div class="projects__card-result">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline>
                  <polyline points="17 6 23 6 23 12"></polyline>
                </svg>
                <span>{{ project.result }}</span>
              </div>
            }
            <span class="projects__card-cta">
              Projekt ansehen
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M5 12h14M12 5l7 7-7 7"/>
              </svg>
            </span>
          </div>
        </a>
      }
    </div>
  </div>
</section>
