{{-- * Modal d'aide / Feedback - Globale --}}
<div x-data="helpModalComponent()"
     x-show="showModal"
     @open-help-modal.window="showModal = true"
     @keydown.escape.window="showModal = false"
     x-transition.opacity
     @click.self="showModal = false"
     class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4 py-4"
     x-cloak>
    <div class="bg-white rounded-2xl shadow-xl max-w-md w-full p-5 space-y-4 max-h-[85vh] overflow-y-auto">
        {{-- * En-tête --}}
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-2">
                <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full flex items-center justify-center">
                    <i data-lucide="help-circle" class="w-5 h-5 text-white"></i>
                </div>
                <div>
                    <h3 class="text-lg font-semibold text-gray-900">Besoin d'aide ?</h3>
                    <p class="text-xs text-gray-500">Contactez l'équipe</p>
                </div>
            </div>
            <button @click="showModal = false" class="text-gray-400 hover:text-gray-600 transition">
                <i data-lucide="x" class="w-5 h-5"></i>
            </button>
        </div>

        {{-- * Message de succès --}}
        <div x-show="successMessage"
             x-transition
             class="p-3 bg-green-50 border border-green-200 rounded-lg flex items-center gap-2">
            <i data-lucide="check-circle-2" class="w-4 h-4 text-green-600"></i>
            <p class="text-sm text-green-700 font-medium" x-text="successMessage"></p>
        </div>

        {{-- * Message d'erreur --}}
        <div x-show="errorMessage"
             x-transition
             class="p-3 bg-red-50 border border-red-200 rounded-lg flex items-start gap-2">
            <i data-lucide="alert-circle" class="w-4 h-4 text-red-600 flex-shrink-0 mt-0.5"></i>
            <p class="text-sm text-red-700" x-text="errorMessage"></p>
        </div>

        {{-- * Formulaire --}}
        <form @submit.prevent="submitFeedback()" class="space-y-4">
            <div class="space-y-1">
                <label for="feedback_subject" class="text-sm font-medium text-gray-800 flex items-center gap-1.5">
                    Sujet
                    <span class="text-red-500">*</span>
                </label>
                <select
                    id="feedback_subject"
                    x-model="subject"
                    class="w-full rounded-xl border-gray-200 focus:border-boulanger-orange focus:ring-boulanger-orange/30 text-sm"
                    required
                >
                    <option value="">Sélectionnez un sujet</option>
                    <option value="Problème technique">🐛 Problème technique</option>
                    <option value="Question sur une fonctionnalité">❓ Question sur une fonctionnalité</option>
                    <option value="Suggestion d'amélioration">💡 Suggestion d'amélioration</option>
                    <option value="Demande d'assistance">🆘 Demande d'assistance</option>
                    <option value="Autre">📝 Autre</option>
                </select>
            </div>

            <div class="space-y-1">
                <label for="feedback_message" class="text-sm font-medium text-gray-800 flex items-center gap-1.5">
                    Message
                    <span class="text-red-500">*</span>
                </label>
                <textarea
                    id="feedback_message"
                    x-model="message"
                    rows="6"
                    class="w-full rounded-xl border-gray-200 focus:border-boulanger-orange focus:ring-boulanger-orange/30 text-sm resize-none"
                    placeholder="Décrivez votre problème ou votre question en détail...&#10;&#10;Plus votre message est précis, plus nous pourrons vous aider rapidement !"
                    required
                    maxlength="2000"
                ></textarea>
                <p class="text-xs text-gray-500 flex items-center justify-between">
                    <span>Soyez le plus précis possible</span>
                    <span x-text="message.length + '/2000'"></span>
                </p>
            </div>

            {{-- * Informations de contact automatiques --}}
            <div class="bg-blue-50 border border-blue-200 rounded-lg p-3 space-y-1.5">
                <p class="text-xs font-medium text-blue-900 flex items-center gap-1.5">
                    <i data-lucide="info" class="w-3.5 h-3.5"></i>
                    Informations de contact (automatique)
                </p>
                <div class="text-xs text-blue-700 space-y-1">
                    <p><strong>Nom :</strong> {{ auth()->user()->first_name }} {{ auth()->user()->last_name }}</p>
                    <p><strong>Email :</strong> {{ auth()->user()->email }}</p>
                    <p><strong>Magasin :</strong> {{ auth()->user()->store->name ?? 'Siège' }}</p>
                </div>
            </div>

            {{-- * Boutons d'action --}}
            <div class="flex items-center gap-3">
                <button
                    type="submit"
                    :disabled="isSending || !subject || !message.trim()"
                    class="flex-1 px-4 py-2.5 rounded-xl bg-boulanger-orange text-white text-sm font-semibold hover:brightness-95 disabled:opacity-60 disabled:cursor-not-allowed transition flex items-center justify-center gap-2"
                >
                    <i data-lucide="send" class="w-4 h-4"></i>
                    <span x-text="isSending ? 'Envoi...' : 'Envoyer'"></span>
                </button>
                <button
                    type="button"
                    @click="showModal = false"
                    class="px-4 py-2.5 rounded-xl bg-gray-100 text-gray-700 text-sm font-semibold hover:bg-gray-200 transition"
                >
                    Annuler
                </button>
            </div>
        </form>

        {{-- * Section FAQ rapide --}}
        <div class="pt-4 border-t border-gray-100">
            <p class="text-xs font-medium text-gray-700 mb-2">Questions fréquentes :</p>
            <div class="space-y-2">
                <details class="group">
                    <summary class="text-xs text-gray-600 cursor-pointer hover:text-boulanger-orange transition flex items-center gap-1.5">
                        <i data-lucide="chevron-right" class="w-3.5 h-3.5 group-open:rotate-90 transition-transform"></i>
                        Comment modifier mon profil ?
                    </summary>
                    <p class="text-xs text-gray-500 mt-1 ml-5">Les informations de profil sont gérées par votre manager. Contactez-le pour toute modification.</p>
                </details>
                <details class="group">
                    <summary class="text-xs text-gray-600 cursor-pointer hover:text-boulanger-orange transition flex items-center gap-1.5">
                        <i data-lucide="chevron-right" class="w-3.5 h-3.5 group-open:rotate-90 transition-transform"></i>
                        Je ne reçois pas les notifications
                    </summary>
                    <p class="text-xs text-gray-500 mt-1 ml-5">Vérifiez les paramètres de votre navigateur et autorisez les notifications pour ce site.</p>
                </details>
                <details class="group">
                    <summary class="text-xs text-gray-600 cursor-pointer hover:text-boulanger-orange transition flex items-center gap-1.5">
                        <i data-lucide="chevron-right" class="w-3.5 h-3.5 group-open:rotate-90 transition-transform"></i>
                        Comment créer un post urgent ?
                    </summary>
                    <p class="text-xs text-gray-500 mt-1 ml-5">Lors de la création, cochez la case "Post urgent" pour le mettre en avant dans le fil.</p>
                </details>
            </div>
        </div>
    </div>
</div>