dcb-backoffice/src/app/modules/help/help.html

<div class="faq-container">
  <!-- Header -->
  <header class="faq-header">
    <div class="header-content">
      <a routerLink="/documentation" class="back-link">
        <ng-icon name="lucideArrowLeft" size="18"></ng-icon>
        Retour à la documentation
      </a>

      <div class="header-title-section">
        <div class="header-badge">
          <ng-icon name="lucideHelpCircle" size="16"></ng-icon>
          <span>Centre d'aide</span>
        </div>
        <h1 class="header-title">Questions Fréquentes</h1>
        <p class="header-subtitle">
          Trouvez rapidement des réponses à vos questions sur l'intégration et l'utilisation du DCB Hub
        </p>
      </div>

      <!-- Search -->
      <div class="search-container">
        <div class="search-box">
          <ng-icon name="lucideSearch" size="20"></ng-icon>
          <input
            type="text"
            placeholder="Rechercher une question..."
            [value]="searchQuery()"
            (input)="onSearch($event)"
          />
        </div>
        <p class="search-hint">{{ getTotalQuestions() }} questions disponibles</p>
      </div>
    </div>
  </header>

  <!-- Main Content -->
  <main class="faq-main">
    <div class="faq-content">
      <!-- Quick Links -->
      <nav class="quick-links">
        <h3>Catégories</h3>
        <div class="quick-links-grid">
          @for (category of faqCategories; track category.id) {
            <a
              class="quick-link"
              [class]="'quick-link-' + category.color"
              (click)="toggleCategory(category)"
            >
              <div class="quick-link-icon" [class]="'icon-' + category.color">
                <ng-icon [name]="category.icon" size="18"></ng-icon>
              </div>
              <span>{{ category.title }}</span>
              <span class="quick-link-count">{{ category.questions.length }}</span>
            </a>
          }
        </div>
      </nav>

      <!-- FAQ Categories -->
      <div class="faq-categories">
        @for (category of getFilteredCategories(); track category.id) {
          <div class="faq-category" [class]="'faq-category-' + category.color" [id]="category.id">
            <button class="faq-category-header" (click)="toggleCategory(category)">
              <div class="category-icon" [class]="'icon-' + category.color">
                <ng-icon [name]="category.icon" size="22"></ng-icon>
              </div>
              <div class="category-info">
                <h2 class="category-title">{{ category.title }}</h2>
                <span class="category-count">{{ category.questions.length }} questions</span>
              </div>
              <div class="category-chevron" [class.open]="category.isOpen">
                <ng-icon name="lucideChevronDown" size="22"></ng-icon>
              </div>
            </button>

            @if (category.isOpen) {
              <div class="faq-questions">
                @for (question of category.questions; track question.question; let i = $index) {
                  <div class="faq-item" [class.open]="question.isOpen">
                    <button class="faq-question" (click)="toggleQuestion(question)">
                      <span class="question-number">{{ i + 1 }}</span>
                      <span class="question-text">{{ question.question }}</span>
                      <div class="question-chevron" [class.open]="question.isOpen">
                        <ng-icon name="lucideChevronRight" size="18"></ng-icon>
                      </div>
                    </button>
                    @if (question.isOpen) {
                      <div class="faq-answer">
                        <p>{{ question.answer }}</p>
                      </div>
                    }
                  </div>
                }
              </div>
            }
          </div>
        }

        @if (getFilteredCategories().length === 0) {
          <div class="no-results">
            <ng-icon name="lucideSearch" size="48"></ng-icon>
            <h3>Aucun résultat trouvé</h3>
            <p>Essayez avec d'autres mots-clés ou parcourez les catégories</p>
          </div>
        }
      </div>
    </div>
  </main>

  <!-- Support Section -->
  <section class="support-section">
    <div class="support-card">
      <div class="support-icon">
        <ng-icon name="lucideMessageSquare" size="32"></ng-icon>
      </div>
      <div class="support-content">
        <h3>Vous ne trouvez pas votre réponse ?</h3>
        <p>Notre équipe technique est disponible pour vous aider avec votre intégration.</p>
      </div>
      <div class="support-actions">
        <a href="mailto:integration@pixpay.sn" class="btn btn-primary">
          <ng-icon name="lucideMessageSquare" size="16"></ng-icon>
          Contacter le support
        </a>
        <a routerLink="/documentation" class="btn btn-secondary">
          <ng-icon name="lucideExternalLink" size="16"></ng-icon>
          Documentation API
        </a>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="faq-footer">
    <div class="footer-content">
      <div class="footer-brand">
        <ng-icon name="lucideZap" size="20"></ng-icon>
        <span class="brand-name">DCB Hub</span>
        <span class="brand-divider">|</span>
        <span class="brand-version">FAQ v1.0</span>
      </div>
      <div class="footer-links">
        <a routerLink="/documentation">Documentation</a>
        <a href="#">API Status</a>
        <a href="mailto:support@dcb-hub.com">Support</a>
      </div>
    </div>
  </footer>
</div>