{% extends 'base.html' %}
{% load static %}

{% block title %}Email d'activation envoyé - MCN Museum{% endblock %}

{% block content %}
<section class="min-h-screen flex items-center justify-center py-12 px-4 bg-gradient-to-br from-mcn-green/10 to-mcn-yellow/10">
    <div class="max-w-2xl w-full">
        <!-- Carte principale -->
        <div class="bg-white rounded-3xl shadow-2xl overflow-hidden">
            <!-- Header avec icône -->
            <div class="bg-gradient-to-r from-mcn-green to-mcn-yellow p-8 text-center">
                <div class="inline-block bg-white/20 backdrop-blur-sm rounded-full p-6 mb-4">
                    <i class="fas fa-envelope-open-text text-white text-6xl"></i>
                </div>
                <h1 class="text-3xl font-bold text-white mb-2">Email envoyé !</h1>
                <p class="text-white/90">Vérifiez votre boîte de réception</p>
            </div>

            <!-- Contenu -->
            <div class="p-8 md:p-12">
                <div class="text-center mb-8">
                    <div class="inline-flex items-center justify-center w-16 h-16 bg-green-100 rounded-full mb-4">
                        <i class="fas fa-check text-green-600 text-2xl"></i>
                    </div>
                    <h2 class="text-2xl font-bold text-gray-800 mb-3">
                        Compte créé avec succès !
                    </h2>
                    <p class="text-lg text-gray-600">
                        Un email d'activation a été envoyé à<br>
                        <strong class="text-mcn-orange">{{ email }}</strong>
                    </p>
                </div>

                <!-- Instructions -->
                <div class="bg-blue-50 border-l-4 border-blue-500 p-6 rounded-lg mb-6">
                    <h3 class="font-bold text-blue-900 mb-3 flex items-center">
                        <i class="fas fa-info-circle mr-2"></i>
                        Prochaines étapes
                    </h3>
                    <ol class="space-y-3 text-sm text-blue-800">
                        <li class="flex items-start">
                            <span class="flex-shrink-0 w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center mr-3 mt-0.5">1</span>
                            <span>Ouvrez votre boîte de réception email</span>
                        </li>
                        <li class="flex items-start">
                            <span class="flex-shrink-0 w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center mr-3 mt-0.5">2</span>
                            <span>Recherchez un email de <strong>MCN Museum</strong></span>
                        </li>
                        <li class="flex items-start">
                            <span class="flex-shrink-0 w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center mr-3 mt-0.5">3</span>
                            <span>Cliquez sur le bouton <strong>"Activer mon compte"</strong></span>
                        </li>
                        <li class="flex items-start">
                            <span class="flex-shrink-0 w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center mr-3 mt-0.5">4</span>
                            <span>Connectez-vous et profitez du musée !</span>
                        </li>
                    </ol>
                </div>

                <!-- Avertissements -->
                <div class="grid md:grid-cols-2 gap-4 mb-8">
                    <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                        <div class="flex items-start">
                            <i class="fas fa-clock text-yellow-600 text-xl mr-3 mt-1"></i>
                            <div>
                                <h4 class="font-bold text-yellow-900 mb-1">Lien temporaire</h4>
                                <p class="text-sm text-yellow-700">
                                    Le lien expire dans <strong>24 heures</strong>
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="bg-purple-50 border border-purple-200 rounded-lg p-4">
                        <div class="flex items-start">
                            <i class="fas fa-folder text-purple-600 text-xl mr-3 mt-1"></i>
                            <div>
                                <h4 class="font-bold text-purple-900 mb-1">Vérifiez les spams</h4>
                                <p class="text-sm text-purple-700">
                                    L'email peut être dans les indésirables
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Problème ? -->
                <div class="bg-gray-50 rounded-lg p-6 mb-6">
                    <h3 class="font-bold text-gray-800 mb-3">
                        <i class="fas fa-question-circle mr-2 text-mcn-orange"></i>
                        Vous n'avez pas reçu l'email ?
                    </h3>
                    <div class="space-y-2 text-sm text-gray-600">
                        <p>• Vérifiez votre dossier spam/indésirables</p>
                        <p>• Attendez quelques minutes, l'email peut prendre du temps</p>
                        <p>• Vérifiez que l'adresse email est correcte</p>
                    </div>
                    <a href="{% url 'resend_activation' %}" 
                       class="inline-block mt-4 text-mcn-orange hover:text-orange-600 font-medium">
                        <i class="fas fa-redo mr-2"></i>
                        Renvoyer l'email d'activation
                    </a>
                </div>

                <!-- Actions -->
                <div class="flex flex-col sm:flex-row gap-4">
                    <a href="{% url 'login' %}" 
                       class="flex-1 bg-gradient-to-r from-mcn-green to-mcn-yellow text-white py-3 px-6 rounded-lg font-bold text-center hover:shadow-lg transform hover:scale-105 transition">
                        <i class="fas fa-sign-in-alt mr-2"></i>
                        Se connecter
                    </a>
                    <a href="{% url 'home' %}" 
                       class="flex-1 bg-white border-2 border-gray-300 text-gray-700 py-3 px-6 rounded-lg font-bold text-center hover:bg-gray-50 transition">
                        <i class="fas fa-home mr-2"></i>
                        Retour à l'accueil
                    </a>
                </div>
            </div>

            <!-- Footer -->
            <div class="bg-gray-50 px-8 py-6 text-center border-t">
                <p class="text-sm text-gray-600">
                    <i class="fas fa-shield-alt mr-2 text-green-600"></i>
                    Vos données sont sécurisées et ne seront jamais partagées
                </p>
            </div>
        </div>

        <!-- Note supplémentaire -->
        <div class="mt-6 text-center text-sm text-gray-600">
            <p>Besoin d'aide ? Contactez-nous à 
                <a href="mailto:support@mcn-museum.tektriom.com" class="text-mcn-orange hover:underline">
                    support@mcn-museum.tektriom.com
                </a>
            </p>
        </div>
    </div>
</section>
{% endblock %}