<div class="faq-panel">
  <div class="panel-header">
    <div class="panel-title">
      <h2>Centre d'aide</h2>
      <button class="close-btn" (click)="closeFaq()" mat-icon-button>
        <mat-icon>close</mat-icon>
      </button>
    </div>

    <div class="search-section">
      <input type="text"
             class="search-box"
             placeholder="Rechercher dans les FAQ..."
             [(ngModel)]="searchTerm"
             (input)="filterFaqs()">
    </div>

    <div class="stats-section">
      <div class="stat-card">
        <div class="stat-number">{{ getTotalArticles() }}</div>
        <div class="stat-label">Articles</div>
      </div>
      <div class="stat-card">
        <div class="stat-number">{{ faqCategories.length }}</div>
        <div class="stat-label">Catégories</div>
      </div>
    </div>
  </div>

  <div class="panel-content">
    <div class="faq-categories" *ngFor="let category of filteredCategories">
      <div class="category-title">
        <mat-icon class="category-icon">{{ category.icon }}</mat-icon>
        {{ category.name }}
      </div>

      <div class="faq-item"
           *ngFor="let faq of category.faqs"
           [class.expanded]="faq.expanded"
           [style.display]="faq.visible ? 'block' : 'none'">
        <div class="faq-question" (click)="toggleFaq(faq)">
          <span class="question-text">{{ faq.question }}</span>
          <span class="priority-badge" [ngClass]="'priority-' + faq.priority">
            {{ getPriorityLabel(faq.priority) }}
          </span>
          <mat-icon class="expand-icon">expand_more</mat-icon>
        </div>
        <div class="faq-answer" *ngIf="faq.expanded">
          {{ faq.answer }}
        </div>
      </div>
    </div>

    <div class="help-actions">
      <div class="help-title">Besoin d'aide supplémentaire ?</div>
      <div class="help-buttons">
        <button class="btn btn-primary" (click)="contactSupport()">
          <mat-icon>support_agent</mat-icon>
          Contacter le support
        </button>
        <button class="btn btn-secondary" (click)="openUserGuide()">
          <mat-icon>menu_book</mat-icon>
          Guide utilisateur
        </button>
        <button class="btn btn-secondary" (click)="openTutorials()">
          <mat-icon>play_circle</mat-icon>
          Tutoriels vidéo
        </button>
      </div>
    </div>
  </div>
</div>
