<app-page-title title="Unsere Leistungen"></app-page-title>
<section class="services-page">
  <div class="container page-animate">

    <!-- HEADER -->

    <!-- LOADING STATE -->
    <div class="state-message" *ngIf="loading">
      <div class="loading-spinner"></div>
      <p>Leistungen werden geladen...</p>
    </div>

    <!-- ERROR STATE -->
    <div class="state-message state-message--error" *ngIf="error && !loading">
      <span class="material-symbols-outlined">error</span>
      <h3>Fehler beim Laden</h3>
      <p>Die Leistungen konnten nicht geladen werden.</p>
      <button class="btn primary" (click)="loadServices()">Erneut versuchen</button>
    </div>

    <!-- EMPTY STATE -->
    <div class="state-message state-message--construction" *ngIf="isEmpty && !loading && !error">
      <span class="material-symbols-outlined">construction</span>
      <h3>In Arbeit</h3>
      <p>Unsere Leistungsübersicht wird gerade erstellt und ist bald verfügbar.</p>
      <p class="sub">Hast du eine konkrete Anfrage? Kontaktiere uns direkt!</p>
      <button class="btn primary" (click)="router.navigate(['/contact'])">
        <span class="material-symbols-outlined">mail</span>
        Kontakt aufnehmen
      </button>
    </div>

    <!-- MAIN CONTENT (nur wenn Daten vorhanden) -->
    <ng-container *ngIf="!loading && !error && !isEmpty">

      <!-- SEARCH -->
      <div class="search-box">
        <span class="material-symbols-outlined">search</span>
        <input
          type="text"
          placeholder="Suche..."
          [(ngModel)]="searchQuery"
        />
        <button class="clear-btn" *ngIf="searchQuery" (click)="clearSearch()">
          <span class="material-symbols-outlined">close</span>
        </button>
      </div>

      <p class="search-info" *ngIf="searchQuery">
        {{ filteredCount }} Ergebnisse für "{{ searchQuery }}"
      </p>

      <!-- FILTER TABS -->
      <div class="filter-tabs">
        <button
          *ngFor="let f of filters"
          class="tab"
          [class.active]="activeFilter === f.id"
          (click)="setFilter(f.id)"
        >
          <span class="material-symbols-outlined" *ngIf="f.icon">{{ f.icon }}</span>
          {{ f.name }}
        </button>
      </div>

      <!-- SERVICES -->
      <div class="services">

        <!-- CATEGORY -->
        <section class="category" *ngFor="let cat of filteredCategories">
          <div class="category-header">
            <div class="category-icon" [attr.data-type]="cat.id">
              <span class="material-symbols-outlined">{{ cat.materialIcon }}</span>
            </div>
            <div>
              <h2>{{ cat.name }}</h2>
              <p>{{ cat.subtitle }}</p>
          </div>
        </div>

        <!-- SERVICE CARDS - CLICKABLE -->
        <div class="service-grid">
          <button 
            class="service-card" 
            *ngFor="let service of cat.services"
            (click)="openServiceModal(service, cat)"
            type="button"
            title="Klicken für Details"
          >
            <div class="service-icon">{{ service.icon }}</div>
            <div class="service-content">
              <h3>{{ service.title }}</h3>
              <p>{{ service.description }}</p>
              <div class="tags">
                <span *ngFor="let tag of service.tags">{{ tag }}</span>
              </div>
            </div>
            <span class="card-arrow material-symbols-outlined">chevron_right</span>
            <span class="card-hint">Details →</span>
          </button>
        </div>
      </section>

      <!-- NO RESULTS -->
      <div class="no-results" *ngIf="filteredCount === 0">
        <span class="material-symbols-outlined">search_off</span>
        <h3>Nichts gefunden</h3>
        <p>Kein Treffer für "{{ searchQuery }}" – aber wenn es mit IT zu tun hat, können wir helfen!</p>
        <button class="btn primary" (click)="clearSearch()">Alle anzeigen</button>
      </div>

      </div>

      <!-- CTA -->
      <div class="cta-box">
        <h3>Nichts gefunden?</h3>
        <p>Kein Problem – frag einfach!</p>
        <div class="cta-buttons">
          <!-- <button class="btn primary" (click)="router.navigate(['/booking'])">
            <span class="material-symbols-outlined">calendar_month</span>
            Gespräch buchen
          </button> -->
          <button class="btn secondary" (click)="router.navigate(['/contact'])">
            <span class="material-symbols-outlined">mail</span>
            Nachricht
          </button>
        </div>
      </div>

    </ng-container>

  </div>
</section>

<!-- ===== SERVICE DETAIL MODAL ===== -->
<div 
  class="modal-backdrop" 
  *ngIf="selectedService" 
  (click)="onBackdropClick($event)"
  role="dialog"
  aria-modal="true"
>
  <div class="modal">
    <!-- Close Button -->
    <button class="modal-close" (click)="closeModal()" aria-label="Schließen">
      <span class="material-symbols-outlined">close</span>
    </button>

    <!-- Header -->
    <div class="modal-header">
      <div class="modal-icon" [attr.data-type]="selectedCategory?.id">
        <span class="service-emoji">{{ selectedService.icon }}</span>
      </div>
      <div>
        <span class="modal-category">{{ selectedCategory?.name }}</span>
        <h2>{{ selectedService.title }}</h2>
      </div>
    </div>

    <!-- Content -->
    <div class="modal-body">
      <p class="modal-description">
        {{ selectedService.longDescription || selectedService.description }}
      </p>

      <div class="modal-tags">
        <span *ngFor="let tag of selectedService.tags">{{ tag }}</span>
      </div>
    </div>

    <!-- Actions -->
    <div class="modal-actions">
      <button class="btn primary large" (click)="contactWithService()">
        <span class="material-symbols-outlined">mail</span>
        Anfrage
      </button>
      <button class="btn secondary" (click)="closeModal()">
        Zurück zur Übersicht
      </button>
    </div>
  </div>
</div>