<!-- System Audio Help Modal -->
<div v-if="showSystemAudioHelp" @click.self="showSystemAudioHelp = false" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4 backdrop-blur-sm">
    <div class="bg-[var(--bg-secondary)] rounded-xl shadow-2xl w-full max-w-lg max-h-[80vh] overflow-y-auto">
        <div class="p-6 border-b border-[var(--border-primary)]">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-semibold" v-text="t('help.systemAudioHelp')"></h3>
                <button @click="showSystemAudioHelp = false" class="text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-colors">
                    <i class="fas fa-times text-xl"></i>
                </button>
            </div>
        </div>
        <div class="p-6 space-y-4">
            <div class="p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
                <div class="flex items-start gap-3">
                    <i class="fas fa-info-circle text-blue-600 dark:text-blue-400 mt-0.5"></i>
                    <div>
                        <p class="font-medium text-blue-800 dark:text-blue-300 mb-2">Compatibilité des navigateurs</p>
                        <p class="text-sm text-blue-700 dark:text-blue-400">
                            L'enregistrement audio système fonctionne mieux dans Chrome, Edge et Brave. Firefox est supporté mais nécessite que l'onglet soit en train de jouer de l'audio. Non supporté sur Safari ou les appareils mobiles.
                        </p>
                    </div>
                </div>
            </div>

            <div>
                <h4 class="font-medium mb-2">Comment enregistrer l'audio système :</h4>
                <ol class="list-decimal list-inside space-y-2 text-sm text-[var(--text-secondary)]">
                    <li>Cliquez sur le bouton "Audio Système" ou "Micro + Système"</li>
                    <li>Une fenêtre de partage d'écran apparaîtra</li>
                    <li>Sélectionnez un onglet ou une fenêtre qui <strong>joue de l'audio activement</strong></li>
                    <li>Assurez-vous que la case "Partager l'audio" est <strong>cochée</strong></li>
                    <li>Cliquez sur "Partager" pour démarrer l'enregistrement</li>
                </ol>
            </div>

            <div>
                <h4 class="font-medium mb-2">Dépannage :</h4>
                <ul class="list-disc list-inside space-y-1 text-sm text-[var(--text-muted)]">
                    <li><strong>Important :</strong> L'onglet/fenêtre doit jouer de l'audio au moment du partage</li>
                    <li>Vérifiez que la case "Partager l'audio" est cochée dans la fenêtre de partage</li>
                    <li>Sur Firefox, lancez d'abord la lecture audio, puis cliquez sur enregistrer</li>
                    <li>Certains contenus peuvent avoir une protection DRM qui bloque l'enregistrement</li>
                    <li>Non supporté sur Safari ou les navigateurs mobiles</li>
                </ul>
            </div>
        </div>
        <div class="p-6 border-t border-[var(--border-primary)] flex justify-end">
            <button @click="showSystemAudioHelp = false" class="px-4 py-2 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg hover:bg-[var(--bg-button-hover)] transition-colors">
                Compris
            </button>
        </div>
    </div>
</div>
