{{-- Modal de bienvenue pour les nouveaux visiteurs (invités uniquement) --}}
@guest
    <div
        x-data="{
            showWelcome: false,
            init() {
                // Vérifier si l'utilisateur a déjà vu le message de bienvenue
                if (! localStorage.getItem('confess_welcome_seen')) {
                    setTimeout(() => {
                        this.showWelcome = true
                    }, 1500) // Afficher après 1.5 secondes
                }
            },
            openWelcome() {
                this.showWelcome = true
            },
            closeWelcome() {
                this.showWelcome = false
                localStorage.setItem('confess_welcome_seen', 'true')
            },
        }"
        x-init="init()"
        @open-welcome.window="openWelcome()"
    >
        {{-- Modal de bienvenue --}}
        <div
            x-show="showWelcome"
            x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0"
            x-transition:enter-end="opacity-100"
            x-transition:leave="transition ease-in duration-200"
            x-transition:leave-start="opacity-100"
            x-transition:leave-end="opacity-0"
            class="fixed inset-0 z-50 overflow-y-auto"
            style="display: none"
        >
            {{-- Overlay --}}
            <div
                class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0"
            >
                <div
                    @click="closeWelcome()"
                    class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75"
                ></div>

                {{-- Centrage du modal --}}
                <span
                    class="hidden sm:inline-block sm:align-middle sm:h-screen"
                >
                    &#8203;
                </span>

                {{-- Contenu du modal --}}
                <div
                    x-show="showWelcome"
                    x-transition:enter="transition ease-out duration-300"
                    x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                    x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
                    x-transition:leave="transition ease-in duration-200"
                    x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
                    x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                    class="inline-block w-full max-w-2xl p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl"
                >
                    {{-- En-tête du modal --}}
                    <div class="flex items-center justify-between mb-6">
                        <div class="flex items-center space-x-3">
                            <div class="flex-shrink-0">
                                <div
                                    class="w-12 h-12 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center"
                                >
                                    <span class="text-2xl">👋</span>
                                </div>
                            </div>
                            <div>
                                <h3 class="text-xl font-bold text-gray-900">
                                    {{ __("welcome.title") }}
                                </h3>
                                <p class="text-sm text-gray-500">
                                    {{ __("welcome.subtitle") }}
                                </p>
                            </div>
                        </div>
                        <button
                            @click="closeWelcome()"
                            class="text-gray-400 hover:text-gray-600 transition-colors"
                        >
                            <svg
                                class="w-6 h-6"
                                fill="none"
                                stroke="currentColor"
                                viewBox="0 0 24 24"
                            >
                                <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    stroke-width="2"
                                    d="M6 18L18 6M6 6l12 12"
                                ></path>
                            </svg>
                        </button>
                    </div>

                    {{-- Contenu principal --}}
                    <div class="space-y-6">
                        {{-- Description du concept --}}
                        <div class="bg-blue-50 rounded-xl p-4">
                            <h4
                                class="text-lg font-semibold text-blue-900 mb-2 flex items-center"
                            >
                                <svg
                                    class="w-5 h-5 mr-2"
                                    fill="none"
                                    stroke="currentColor"
                                    viewBox="0 0 24 24"
                                >
                                    <path
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        stroke-width="2"
                                        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                                    ></path>
                                </svg>
                                {{ __("welcome.concept_title") }}
                            </h4>
                            <p class="text-blue-800 text-sm leading-relaxed">
                                {{ __("welcome.concept_description") }}
                            </p>
                        </div>

                        {{-- Règles de bienveillance --}}
                        <div class="bg-green-50 rounded-xl p-4">
                            <h4
                                class="text-lg font-semibold text-green-900 mb-3 flex items-center"
                            >
                                <svg
                                    class="w-5 h-5 mr-2"
                                    fill="none"
                                    stroke="currentColor"
                                    viewBox="0 0 24 24"
                                >
                                    <path
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        stroke-width="2"
                                        d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
                                    ></path>
                                </svg>
                                {{ __("welcome.guidelines_title") }}
                            </h4>
                            <div class="space-y-3">
                                <div class="flex items-start space-x-3">
                                    <div
                                        class="flex-shrink-0 w-2 h-2 bg-green-500 rounded-full mt-2"
                                    ></div>
                                    <p class="text-green-800 text-sm">
                                        {{ __("welcome.guideline_1") }}
                                    </p>
                                </div>
                                <div class="flex items-start space-x-3">
                                    <div
                                        class="flex-shrink-0 w-2 h-2 bg-green-500 rounded-full mt-2"
                                    ></div>
                                    <p class="text-green-800 text-sm">
                                        {{ __("welcome.guideline_2") }}
                                    </p>
                                </div>
                                <div class="flex items-start space-x-3">
                                    <div
                                        class="flex-shrink-0 w-2 h-2 bg-green-500 rounded-full mt-2"
                                    ></div>
                                    <p class="text-green-800 text-sm">
                                        {{ __("welcome.guideline_3") }}
                                    </p>
                                </div>
                                <div class="flex items-start space-x-3">
                                    <div
                                        class="flex-shrink-0 w-2 h-2 bg-green-500 rounded-full mt-2"
                                    ></div>
                                    <p class="text-green-800 text-sm">
                                        {{ __("welcome.guideline_4") }}
                                    </p>
                                </div>
                            </div>
                        </div>

                        {{-- Anonymat et sécurité --}}
                        <div class="bg-purple-50 rounded-xl p-4">
                            <h4
                                class="text-lg font-semibold text-purple-900 mb-2 flex items-center"
                            >
                                <svg
                                    class="w-5 h-5 mr-2"
                                    fill="none"
                                    stroke="currentColor"
                                    viewBox="0 0 24 24"
                                >
                                    <path
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        stroke-width="2"
                                        d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
                                    ></path>
                                </svg>
                                {{ __("welcome.anonymity_title") }}
                            </h4>
                            <p class="text-purple-800 text-sm leading-relaxed">
                                {{ __("welcome.anonymity_description") }}
                            </p>
                        </div>
                    </div>

                    {{-- Actions du modal --}}
                    <div class="flex flex-col sm:flex-row gap-3 mt-8">
                        <button
                            @click="closeWelcome()"
                            class="flex-1 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-semibold py-3 px-6 rounded-lg transition-all duration-200 transform hover:scale-105 shadow-lg"
                        >
                            {{ __("welcome.get_started") }}
                        </button>
                        @auth
                            <a
                                href="{{ route("confession.create") }}"
                                class="flex-1 bg-green-600 hover:bg-green-700 text-white font-semibold py-3 px-6 rounded-lg transition-colors duration-200 text-center"
                            >
                                {{ __("welcome.create_confession") }}
                            </a>
                        @else
                            <a
                                href="{{ route("register") }}"
                                class="flex-1 bg-green-600 hover:bg-green-700 text-white font-semibold py-3 px-6 rounded-lg transition-colors duration-200 text-center"
                            >
                                {{ __("welcome.join_community") }}
                            </a>
                        @endauth
                    </div>

                    {{-- Lien vers les termes --}}
                    <div class="mt-4 text-center">
                        <a
                            href="{{ route("terms", ["locale" => app()->getLocale()]) }}"
                            class="text-sm text-gray-500 hover:text-gray-700 underline"
                        >
                            {{ __("welcome.read_terms") }}
                        </a>
                    </div>

                    {{-- Note de fermeture automatique --}}
                    <p class="text-xs text-gray-500 text-center mt-4">
                        {{ __("welcome.auto_close_note") }}
                    </p>
                </div>
            </div>
        </div>
    </div>
@endguest