<section class="services-overview">
    <div class="container">

        <!-- HERO -->
        <header class="services-hero">
            <h1 class="gradient-text">IT-Dienstleistungen die funktionieren</h1>
            <p class="services-subtitle">
                Von Support bis Cloud-Management. Wähle deine Lösung.
            </p>
        </header>

        <!-- SERVICE CARDS -->
        <div class="services-grid">
            <article class="service-card" *ngFor="let s of services" [class.featured]="s.badge === '⭐ Am beliebtesten'">

                <!-- Badge -->
                <div class="card-badge" *ngIf="s.badge">
                    {{ s.badge }}
                </div>

                <!-- Icon -->
                <div class="card-icon">
                    <span class="icon-emoji" *ngIf="s.badge === '🚀 Schnellstart'">🚀</span>
                    <span class="icon-emoji" *ngIf="s.badge === '⭐ Am beliebtesten'">⭐</span>
                    <span class="icon-emoji" *ngIf="s.badge === '💎 Individuell'">💎</span>
                </div>

                <!-- Content -->
                <div class="card-content">

                    <!-- Header mit Preis -->
                    <div class="card-header">
                        <h3>{{ s.title }}</h3>
                        <span class="card-price" *ngIf="s.price">{{ s.price }}</span>
                    </div>

                    <!-- Beschreibung -->
                    <p class="card-description">{{ s.short }}</p>

                    <!-- Features -->
                    <ul class="card-features" *ngIf="s.features && s.features.length > 0">
                        <li *ngFor="let feature of s.features">
                            <span class="material-symbols-outlined ms-fill">check_circle</span>
                            <span>{{ feature }}</span>
                        </li>
                    </ul>

                    <!-- Button -->
                    <a class="btn btn--primary" [routerLink]="[s.route]">
                        {{ s.cta || 'Mehr erfahren' }}
                        <span class="material-symbols-outlined ms-size-20">arrow_forward</span>
                    </a>
                </div>

            </article>
        </div>

        <!-- CTA -->
        <div class="services-cta">
            <div class="cta-content">
                <div class="cta-icon">
                    <span class="material-symbols-outlined">help</span>
                </div>
                <div class="cta-text">
                    <h3>Welche IT-Lösung brauchst du?</h3>
                    <p>Lass uns gemeinsam die passende Lösung für dein Unternehmen finden.</p>
                </div>
            </div>

            <div class="cta-actions">
                <!-- Primary: Bedarfsanalyse -->
                <button class="btn btn--primary btn--large" (click)="router.navigate(['/survey'])">
                    <span class="material-symbols-outlined ms-size-20">search</span>
                    <span class="btn-text">Kostenlose Bedarfsanalyse starten</span>
                </button>

                <!-- Secondary: Direkt zum Gespräch -->
                <button class="btn btn--secondary btn--large" (click)="router.navigate(['/contact'])">
                    <span class="material-symbols-outlined ms-size-20">mail</span>
                    <span class="btn-text">Oder direkt anfragen</span>
                </button>
            </div>

            <!-- Zusätzliche Option: Beratungsgespräch -->
            <p class="cta-alternative">
                Lieber persönlich sprechen?
                <a (click)="router.navigate(['/booking'])" class="text-link">
                    Kostenloses Beratungsgespräch buchen
                </a>
            </p>
        </div>

        <!-- TRUST -->
        <div class="trust-section">
            <div class="trust-item">
                <span class="material-symbols-outlined ms-fill">security</span>
                <div>
                    <strong>Zertifiziert</strong>
                    <p>ISO 27001 Standards</p>
                </div>
            </div>
            <div class="trust-item">
                <span class="material-symbols-outlined ms-fill">schedule</span>
                <div>
                    <strong>Reaktionszeit</strong>
                    <p>Support binnen 4h</p>
                </div>
            </div>
            <div class="trust-item">
                <span class="material-symbols-outlined ms-fill">groups</span>
                <div>
                    <strong>Erfahren</strong>
                    <p>50+ zufriedene Kunden</p>
                </div>
            </div>
        </div>

    </div>
</section>