{% extends 'bo/base.html.twig' %}

{% block title %}Félicitations ! Votre site est prêt{% endblock %}

{% block stylesheets %}
    <style>
        .success-animation {
            width: 120px;
            height: 120px;
            margin: 0 auto 2rem;
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: scaleIn 0.5s ease-out;
            box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);
        }

        @keyframes scaleIn {
            0% {
                transform: scale(0);
                opacity: 0;
            }
            50% {
                transform: scale(1.1);
            }
            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        .success-animation i {
            font-size: 4rem;
            color: white;
            animation: checkmark 0.6s ease-in 0.3s both;
        }

        @keyframes checkmark {
            0% {
                transform: scale(0) rotate(-45deg);
                opacity: 0;
            }
            100% {
                transform: scale(1) rotate(0deg);
                opacity: 1;
            }
        }

        .feature-card {
            background: white;
            border-radius: 12px;
            padding: 1.5rem;
            text-align: center;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }

        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
            border-color: #667eea;
        }

        .feature-icon {
            width: 60px;
            height: 60px;
            margin: 0 auto 1rem;
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .feature-icon i {
            font-size: 1.75rem;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .btn-dashboard {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 1rem 3rem;
            border-radius: 8px;
            font-weight: 600;
            font-size: 1.1rem;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
        }

        .btn-dashboard:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
            color: white;
        }

        .trial-badge {
            display: inline-block;
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
            padding: 0.5rem 1.5rem;
            border-radius: 50px;
            font-weight: 600;
            margin: 1rem 0;
            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
        }

        .info-box-success {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.1) 100%);
            border-left: 4px solid #10b981;
            border-radius: 8px;
            padding: 1.5rem;
            margin: 2rem 0;
        }
    </style>
{% endblock %}

{% block body %}
    <section style="background: #f8f9fa; min-height: 100vh; padding: 3rem 0;">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 col-lg-10 col-xl-9">

                    <!-- Wizard Progress -->
                    <div class="bg-white rounded shadow-sm p-4 mb-4">
                        {% include 'bo/order/wizard.html.twig' with {'step': 3} %}
                    </div>

                    <!-- Success Card -->
                    <div class="bg-white rounded shadow-sm p-5 mb-4 text-center">
                        <!-- Success Animation -->
                        <div class="success-animation">
                            <i class="fas fa-check"></i>
                        </div>

                        <!-- Title -->
                        <h1 class="h2 fw-bold mb-3" style="color: #1e293b;">
                            🎉 Félicitations {{ user.firstname }} !
                        </h1>
                        <p class="lead text-muted mb-4">
                            Votre site <strong>"{{ site.name }}"</strong> est prêt et activé
                        </p>

                        <!-- Trial Badge -->
                        <div class="trial-badge">
                            <i class="fas fa-gift me-2"></i>
                            1er mois gratuit activé
                        </div>

                        <!-- Info Box -->
                        <div class="info-box-success text-start">
                            <div class="d-flex align-items-start">
                                <i class="fas fa-info-circle fa-lg me-3 mt-1" style="color: #10b981;"></i>
                                <div>
                                    <strong class="d-block mb-2">Votre période d'essai gratuite</strong>
                                    <ul class="mb-0 ps-3">
                                        <li>Aucun paiement requis pendant 30 jours</li>
                                        <li>Accès complet à toutes les fonctionnalités</li>
                                        <li>Vous pouvez annuler à tout moment</li>
                                        <li>Nous vous préviendrons avant la fin de la période d'essai</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <!-- CTA Button -->
                        <div class="mt-4">
                            <a href="{{ path('dashboard') }}" class="btn-dashboard">
                                <i class="fas fa-rocket me-2"></i>
                                Accéder à mon site
                            </a>
                        </div>
                    </div>

                    <!-- Features Grid -->
                    <div class="row g-4 mb-4">
                        <div class="col-md-4">
                            <div class="feature-card">
                                <div class="feature-icon">
                                    <i class="fas fa-paint-brush"></i>
                                </div>
                                <h5 class="fw-bold mb-2">Personnalisez</h5>
                                <p class="text-muted small mb-0">
                                    Ajoutez votre contenu, personnalisez les couleurs et créez votre design unique
                                </p>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="feature-card">
                                <div class="feature-icon">
                                    <i class="fas fa-mobile-alt"></i>
                                </div>
                                <h5 class="fw-bold mb-2">100% Responsive</h5>
                                <p class="text-muted small mb-0">
                                    Votre site s'adapte automatiquement à tous les écrans et appareils
                                </p>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="feature-card">
                                <div class="feature-icon">
                                    <i class="fas fa-chart-line"></i>
                                </div>
                                <h5 class="fw-bold mb-2">Suivez vos stats</h5>
                                <p class="text-muted small mb-0">
                                    Analysez vos visiteurs et optimisez votre présence en ligne
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Help Section -->
                    <div class="bg-white rounded shadow-sm p-4 text-center">
                        <h5 class="fw-bold mb-3">Besoin d'aide pour démarrer ?</h5>
                        <p class="text-muted mb-3">
                            Notre équipe est là pour vous accompagner dans la création de votre site
                        </p>
                        <div class="d-flex gap-3 justify-content-center flex-wrap">
                            <a href="{{ path('documentation') }}" target="_blank" class="btn btn-outline-primary rounded-pill">
                                <i class="fas fa-book me-2"></i>
                                Documentation
                            </a>
                            <a href="{{ path('our-contact') }}" class="btn btn-outline-primary rounded-pill">
                                <i class="fas fa-life-ring me-2"></i>
                                Support
                            </a>
                        </div>
                    </div>

                    <!-- Bottom Text -->
                    <div class="text-center mt-4">
                        <p class="text-muted small mb-0">
                            <i class="fas fa-heart text-danger me-1"></i>
                            Merci de nous faire confiance pour votre présence en ligne
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}

{% block javascripts %}
    <script>
        // Confetti animation on page load (optional)
        document.addEventListener('DOMContentLoaded', function() {
            console.log('🎉 Site créé avec succès !');
        });
    </script>
{% endblock %}