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

{% block styles %}
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-40px); } }
    @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
    @keyframes glow { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.8; } }
    @keyframes sparkle { 0%, 100% { opacity: 0; transform: scale(0); } 50% { opacity: 1; transform: scale(1); } }

    .animate-float { animation: float 6s ease-in-out infinite; }
    .animate-fadeInUp { animation: fadeInUp 1s ease-out; }
    .animate-shimmer {
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        background-size: 200% 100%;
        animation: shimmer 3s infinite;
    }
    .animate-glow { animation: glow 4s ease-in-out infinite; }
    .animate-sparkle { animation: sparkle 2s ease-in-out infinite; }
    .bg-gradient-radial { background: radial-gradient(circle at center, var(--tw-gradient-stops)); }

    .section-glow::before {
        content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
        background: radial-gradient(ellipse at top, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
        pointer-events: none;
    }

    .section-sparkles::before {
        content: '';
        position: absolute; top: 0; left: 0; right: 0; bottom: 0;
        background-image:
            radial-gradient(circle at 20% 20%, rgba(168, 85, 247, 0.3) 1px, transparent 1px),
            radial-gradient(circle at 80% 80%, rgba(59, 130, 246, 0.3) 1px, transparent 1px),
            radial-gradient(circle at 40% 60%, rgba(236, 72, 153, 0.3) 1px, transparent 1px),
            radial-gradient(circle at 60% 40%, rgba(34, 197, 94, 0.3) 1px, transparent 1px);
        background-size: 100px 100px, 120px 120px, 80px 80px, 90px 90px;
        animation: sparkle 4s ease-in-out infinite;
        pointer-events: none;
    }

    .floating-orb { position: absolute; border-radius: 50%; filter: blur(1px); animation: float 8s ease-in-out infinite; }
    .orb-1 { width: 60px; height: 60px; background: radial-gradient(circle, rgba(59, 130, 246, 0.4), transparent); top: 20%; left: 10%; animation-delay: 0s; }
    .orb-2 { width: 40px; height: 40px; background: radial-gradient(circle, rgba(168, 85, 247, 0.4), transparent); top: 60%; right: 15%; animation-delay: 2s; }
    .orb-3 { width: 30px; height: 30px; background: radial-gradient(circle, rgba(236, 72, 153, 0.4), transparent); bottom: 30%; left: 20%; animation-delay: 4s; }

    .contact-message {
        animation: slideIn 0.3s ease-out;
    }

    @keyframes slideIn {
        from {
            transform: translateX(100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    @keyframes marquee-vertical {
        0% {
            transform: translateY(0%);
        }
        100% {
            transform: translateY(-50%);
        }
    }
    .animate-marquee-vertical {
        animation: marquee-vertical 10s linear infinite;
    }
{% endblock %}

{% block body %}
    <div class="overflow-x-hidden w-full">
        <!-- Hero Section -->
        <section id="accueil" class="h-screen flex items-center justify-center text-center relative bg-gradient-radial from-blue-500/10 to-transparent">
            <div class="absolute inset-0 overflow-hidden z-0">
                <div class="w-full h-full relative">
                    <!-- Particules simulées -->
                    <div id="particles-container" class="w-full h-full relative"></div>
                    <!-- Orbes flottantes -->
                    <div class="floating-orb orb-1"></div>
                    <div class="floating-orb orb-2"></div>
                    <div class="floating-orb orb-3"></div>
                </div>
            </div>
            <div class="max-w-3xl px-6 relative z-10 justify-items-center animate-fadeInUp">
                <img src="{{ asset('/img.JPG') }}" class="rounded-full w-[200px] h-[200px] object-cover mb-4">
                <h1 class="text-5xl md:text-6xl font-extrabold bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 bg-clip-text text-transparent mb-4">Lucas Leleu</h1>
                <p class="text-lg text-slate-400 mb-2">Développeur Web</p>
                <p class="text-slate-500 mb-8 max-w-xl mx-auto text-base">Créateur junior d'expériences digitales modernes et performantes qui transforment les idées en réalité.</p>
                <a href="#contact" class="inline-block bg-gradient-to-r from-blue-500 to-purple-500 text-white px-10 py-4 rounded-full font-semibold shadow-lg hover:-translate-y-1 hover:shadow-blue-500/40 transition-all duration-300 relative overflow-hidden">
                    <span class="relative z-10">Commençons ensemble</span>
                    <div class="absolute inset-0 animate-shimmer"></div>
                </a>
            </div>
        </section>

        <!-- About Section -->
        <section id="about" class="py-32 px-6 max-w-6xl mx-auto relative section-glow">
            <!-- Orbes d'arrière-plan -->
            <div class="absolute top-40 left-10 w-32 h-32 bg-blue-500/20 rounded-full filter blur-xl animate-glow"></div>
            <div class="absolute bottom-20 right-10 w-40 h-40 bg-purple-500/20 rounded-full filter blur-xl animate-glow" style="animation-delay: 2s;"></div>
            
            <h2 class="text-4xl text-center font-bold bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent mb-16 relative after:absolute after:bottom-[-15px] after:left-1/2 after:-translate-x-1/2 after:w-20 after:h-1 after:rounded after:bg-gradient-to-r after:from-blue-500 after:to-purple-500">
            À propos de moi
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-12 relative z-10">
                <div class="bg-slate-900/60 backdrop-blur border border-blue-500/20 p-12 rounded-2xl transition hover:-translate-y-2 hover:shadow-xl hover:border-blue-500/50 relative overflow-hidden">
                    <div class="absolute inset-0 bg-gradient-to-br from-indigo-500/5 to-transparent"></div>
                    <h3 class="text-blue-500 text-xl font-semibold mb-4 relative z-10">🎮 Esports</h3>
                    <p class="text-slate-400 leading-relaxed relative z-10">Passionné par la compétition en ligne, je suis avec attention les scènes Esports et apprécie les jeux où la stratégie et le skill sont rois.</p>
                </div>
                <div class="bg-slate-900/60 backdrop-blur border border-blue-500/20 p-12 rounded-2xl transition hover:-translate-y-2 hover:shadow-xl hover:border-blue-500/50 relative overflow-hidden">
                    <div class="absolute inset-0 bg-gradient-to-br from-pink-500/5 to-transparent"></div>
                    <h3 class="text-blue-500 text-xl font-semibold mb-4 relative z-10">📸 Photographie</h3>
                    <p class="text-slate-400 leading-relaxed relative z-10">Capturer l’instant présent, jouer avec la lumière et les paysages : la photo est pour moi un moyen de voir le monde autrement.</p>
                </div>
                <div class="bg-slate-900/60 backdrop-blur border border-blue-500/20 p-12 rounded-2xl transition hover:-translate-y-2 hover:shadow-xl hover:border-blue-500/50 relative overflow-hidden">
                    <div class="absolute inset-0 bg-gradient-to-br from-green-500/5 to-transparent"></div>
                    <h3 class="text-blue-500 text-xl font-semibold mb-4 relative z-10">🥾 Randonnée</h3>
                    <p class="text-slate-400 leading-relaxed relative z-10">Marcher, explorer, respirer. Rien de tel qu’une randonnée pour se ressourcer en pleine nature et découvrir de nouveaux horizons.</p>
                </div>
                <div class="bg-slate-900/60 backdrop-blur border border-blue-500/20 p-12 rounded-2xl transition hover:-translate-y-2 hover:shadow-xl hover:border-blue-500/50 relative overflow-hidden">
                    <div class="absolute inset-0 bg-gradient-to-br from-yellow-500/5 to-transparent"></div>
                    <h3 class="text-blue-500 text-xl font-semibold mb-4 relative z-10">🏆 100% Jeux Vidéos</h3>
                    <p class="text-slate-400 leading-relaxed relative z-10">J’adore relever les défis dans les jeux vidéos et viser les 100 %, collectionner tous les succès est pour moi une vraie satisfaction.</p>
                </div>
                <div class="bg-slate-900/60 backdrop-blur border border-blue-500/20 p-12 rounded-2xl transition hover:-translate-y-2 hover:shadow-xl hover:border-blue-500/50 relative overflow-hidden">
                    <div class="absolute inset-0 bg-gradient-to-br from-purple-500/5 to-transparent"></div>
                    <h3 class="text-blue-500 text-xl font-semibold mb-4 relative z-10">🎧 Musique</h3>
                    <p class="text-slate-400 leading-relaxed relative z-10">Écouter de la musique est un rituel quotidien. Elle m'accompagne dans mes moments de concentration, de détente ou d’inspiration.</p>
                </div>
                <div class="bg-slate-900/60 backdrop-blur border border-blue-500/20 p-12 rounded-2xl transition hover:-translate-y-2 hover:shadow-xl hover:border-blue-500/50 relative overflow-hidden">
                    <div class="absolute inset-0 bg-gradient-to-br from-red-500/5 to-transparent"></div>
                    <h3 class="text-blue-500 text-xl font-semibold mb-4 relative z-10">📚 Lecture</h3>
                    <p class="text-slate-400 leading-relaxed relative z-10">Lire de temps en temps me permet de déconnecter, réfléchir ou simplement m’évader à travers des récits inspirants ou informatifs.</p>
                </div>
            </div>
        </section>

        <!-- Skills Section -->
        <section id="skills" class="bg-slate-900/50 py-32 px-6 relative section-sparkles">
            <!-- Effets de fond brillants -->
            <div class="absolute top-0 left-0 w-full h-full overflow-hidden">
                <div class="absolute top-1/4 left-1/4 w-64 h-64 bg-purple-600/10 rounded-full filter blur-3xl animate-pulse"></div>
                <div class="absolute bottom-1/4 right-1/4 w-48 h-48 bg-blue-600/10 rounded-full filter blur-3xl animate-pulse" style="animation-delay: 1s;"></div>
            </div>
            
            <div class="max-w-6xl mx-auto relative z-10">
                <h2 class="text-4xl text-center font-bold text-slate-100 mb-16">Mes compétences</h2>
                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
                    <div class="bg-slate-900/80 backdrop-blur p-10 rounded-xl text-center border border-purple-500/30 transition hover:scale-105 hover:border-purple-500/60 relative overflow-hidden">
                        <div class="absolute inset-0 bg-gradient-to-br from-blue-500/5 via-purple-500/5 to-transparent"></div>
                        <div class="w-20 h-20 mx-auto mb-6 flex items-center justify-center bg-gradient-to-br from-blue-500 to-purple-500 rounded-2xl text-white text-3xl shadow-lg relative z-10">⚛️</div>
                        <h3 class="text-lg text-slate-100 font-semibold mb-2 relative z-10">React & Next.js</h3>
                        <p class="text-slate-400 relative z-10">Frameworks JavaScript modernes pour des interfaces dynamiques</p>
                    </div>
                    <div class="bg-slate-900/80 backdrop-blur p-10 rounded-xl text-center border border-purple-500/30 transition hover:scale-105 hover:border-purple-500/60 relative overflow-hidden">
                        <div class="absolute inset-0 bg-gradient-to-br from-purple-500/5 via-pink-500/5 to-transparent"></div>
                        <div class="w-20 h-20 mx-auto mb-6 flex items-center justify-center bg-gradient-to-br from-blue-500 to-purple-500 rounded-2xl text-white text-3xl shadow-lg relative z-10">🔧</div>
                        <h3 class="text-lg text-slate-100 font-semibold mb-2 relative z-10">Symfony</h3>
                        <p class="text-slate-400 relative z-10">Développement backend et APIs (REST)</p>
                    </div>
                    <div class="bg-slate-900/80 backdrop-blur p-10 rounded-xl text-center border border-purple-500/30 transition hover:scale-105 hover:border-purple-500/60 relative overflow-hidden">
                        <div class="absolute inset-0 bg-gradient-to-br from-green-500/5 via-blue-500/5 to-transparent"></div>
                        <div class="w-20 h-20 mx-auto mb-6 flex items-center justify-center bg-gradient-to-br from-blue-500 to-purple-500 rounded-2xl text-white text-3xl shadow-lg relative z-10">🗄️</div>
                        <h3 class="text-lg text-slate-100 font-semibold mb-2 relative z-10">SQL</h3>
                        <p class="text-slate-400 relative z-10">Maîtrise des bases de données, conception de schémas, requêtes SQL et gestion des données.</p>
                    </div>
                    <div class="bg-slate-900/80 backdrop-blur p-10 rounded-xl text-center border border-purple-500/30 transition hover:scale-105 hover:border-purple-500/60 relative overflow-hidden">
                        <div class="absolute inset-0 bg-gradient-to-br from-pink-500/5 via-purple-500/5 to-transparent"></div>
                        <div class="w-20 h-20 mx-auto mb-6 flex items-center justify-center bg-gradient-to-br from-blue-500 to-purple-500 rounded-2xl text-white text-3xl shadow-lg relative z-10">🎨</div>
                        <h3 class="text-lg text-slate-100 font-semibold mb-2 relative z-10">Figma</h3>
                        <p class="text-slate-400 relative z-10">UI/UX Design thinking, prototypage et expérience utilisateur</p>
                    </div>
                    <div class="bg-slate-900/80 backdrop-blur p-10 rounded-xl text-center border border-purple-500/30 transition hover:scale-105 hover:border-purple-500/60 relative overflow-hidden">
                        <div class="absolute inset-0 bg-gradient-to-br from-yellow-500/5 via-orange-500/5 to-transparent"></div>
                        <div class="w-20 h-20 mx-auto mb-6 flex items-center justify-center bg-gradient-to-br from-blue-500 to-purple-500 rounded-2xl text-white text-3xl shadow-lg relative z-10">📱</div>
                        <h3 class="text-lg text-slate-100 font-semibold mb-2 relative z-10">Responsive Design</h3>
                        <p class="text-slate-400 relative z-10">Expériences optimisées sur tous les appareils</p>
                    </div>
                    <div class="bg-slate-900/80 backdrop-blur p-10 rounded-xl text-center border border-purple-500/30 transition hover:scale-105 hover:border-purple-500/60 relative overflow-hidden">
                        <div class="absolute inset-0 bg-gradient-to-br from-cyan-500/5 via-blue-500/5 to-transparent"></div>
                        <div class="w-20 h-20 mx-auto mb-6 flex items-center justify-center bg-gradient-to-br from-blue-500 to-purple-500 rounded-2xl text-white text-3xl shadow-lg relative z-10">🤖</div>
                        <h3 class="text-lg text-slate-100 font-semibold mb-2 relative z-10">IA</h3>
                        <p class="text-slate-400 relative z-10">Connaissance de l'utilisation de l'intelligence artificielle</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Projects Section -->
        <section id="projects" class="bg-slate-900 py-20 md:py-32 px-4 sm:px-6 border-t border-purple-600/30 relative">
            <!-- Effets lumineux d'arrière-plan -->
            <div class="absolute inset-0 overflow-hidden">
                <div class="absolute top-10 right-10 w-56 h-56 bg-purple-600/10 rounded-full filter blur-3xl animate-pulse"></div>
                <div class="absolute bottom-20 left-20 w-72 h-72 bg-blue-600/8 rounded-full filter blur-3xl animate-pulse" style="animation-delay: 2s;"></div>
            </div>

            <div class="max-w-6xl mx-auto relative z-10">
                <h2 class="text-3xl sm:text-4xl text-center font-bold text-purple-400 mb-4">Mes projets</h2>
                <p class="text-base sm:text-lg text-purple-300 mb-10 text-center max-w-xl mx-auto">
                    Certains visuels peuvent être dégradés suite à l'utilisation des iframes, n'hésitez pas à aller voir le site directement !
                </p>

                <div class="grid grid-cols-1 gap-8">

                    <!-- MYCRITIC -->
                    <div class="bg-gradient-to-br from-slate-900/90 to-slate-800/70 backdrop-blur p-4 sm:p-6 rounded-xl border border-purple-500/40 shadow-md transition-transform duration-300 hover:scale-105 hover:border-purple-500/70 relative overflow-hidden">
                        <div class="absolute inset-0 bg-gradient-to-br from-purple-500/5 to-transparent"></div>
                        <div class="absolute top-4 right-4 w-4 h-4 bg-purple-400/60 rounded-full animate-pulse"></div>
                        <div class="absolute top-2 right-2 bg-purple-600/90 text-white text-xs font-semibold px-2 py-1 rounded shadow z-30">
                            🚧 Work In Progress
                        </div>
                        <h3 class="text-lg sm:text-xl font-semibold text-slate-100 mb-2 relative z-10">Mycritic | Juin 2025</h3>
                        <div class="w-full h-[400px] md:h-[700px] rounded-lg overflow-hidden border border-purple-500/40 shadow-inner mb-4 relative z-10">
                            <iframe src="https://mycritic.mlyshu.fr/" class="w-full h-full" frameborder="0" loading="lazy" sandbox="allow-scripts allow-same-origin allow-forms"></iframe>
                        </div>
                        <div class="flex flex-col sm:flex-row sm:justify-between gap-4 sm:gap-0 items-start sm:items-center relative z-10">
                            <a href="https://mycritic.mlyshu.fr/" target="_blank" class="text-purple-400 hover:text-purple-500 font-semibold transition-colors duration-200">Voir le site</a>
                            <div class="flex flex-wrap gap-2">
                                <span class="bg-purple-600/80 text-purple-100 px-3 py-1 rounded-full text-sm font-medium">Symfony</span>
                                <span class="bg-purple-600/80 text-purple-100 px-3 py-1 rounded-full text-sm font-medium">React UX</span>
                                <span class="bg-purple-600/80 text-purple-100 px-3 py-1 rounded-full text-sm font-medium">Tailwind CSS</span>
                                <span class="bg-purple-600/80 text-purple-100 px-3 py-1 rounded-full text-sm font-medium">MySQL</span>
                            </div>
                        </div>
                    </div>

                    <!-- THE COMPLETIONIST -->
                    <div class="bg-gradient-to-br from-slate-900/90 to-slate-800/70 backdrop-blur p-4 sm:p-6 rounded-xl border border-purple-500/40 shadow-md transition-transform duration-300 hover:scale-105 hover:border-purple-500/70 relative overflow-hidden">
                        <div class="absolute inset-0 bg-gradient-to-br from-blue-500/5 to-transparent"></div>
                        <div class="absolute top-4 right-4 w-4 h-4 bg-blue-400/60 rounded-full animate-pulse" style="animation-delay: 1s;"></div>
                        <h3 class="text-lg sm:text-xl font-semibold text-slate-100 mb-2 relative z-10">The Completionist | Mars 2025</h3>
                        <div class="w-full h-[400px] md:h-[700px] rounded-lg overflow-hidden border border-purple-500/40 shadow-inner mb-4 relative z-10">
                            <iframe src="https://thecompletionist.mlyshu.fr/" class="w-full h-full" frameborder="0" loading="lazy" sandbox="allow-scripts allow-same-origin allow-forms"></iframe>
                        </div>
                        <p class="mb-4 relative z-10 text-slate-400 text-sm sm:text-base">
                            Note : Ce site peut-être long à charger la première fois dû à l'utilisation de l'API Steam et la récupération d'énormément d'informations. Un cache d'une heure pour les informations obtenues a été ajouté afin de palier à ce problème si l'on recharge souvent.
                        </p>
                        <div class="flex flex-col sm:flex-row sm:justify-between gap-4 sm:gap-0 items-start sm:items-center relative z-10">
                            <a href="https://thecompletionist.mlyshu.fr/" target="_blank" class="text-purple-400 hover:text-purple-500 font-semibold transition-colors duration-200">Voir le site</a>
                            <div class="flex flex-wrap gap-2">
                                <span class="bg-purple-600/80 text-purple-100 px-3 py-1 rounded-full text-sm font-medium">Symfony</span>
                                <span class="bg-purple-600/80 text-purple-100 px-3 py-1 rounded-full text-sm font-medium">React UX</span>
                                <span class="bg-purple-600/80 text-purple-100 px-3 py-1 rounded-full text-sm font-medium">Tailwind CSS</span>
                                <span class="bg-purple-600/80 text-purple-100 px-3 py-1 rounded-full text-sm font-medium">API</span>
                            </div>
                        </div>
                    </div>

                    <!-- TCHAT -->
                    <div class="bg-gradient-to-br from-slate-900/90 to-slate-800/70 backdrop-blur p-4 sm:p-6 rounded-xl border border-purple-500/40 shadow-md transition-transform duration-300 hover:scale-105 hover:border-purple-500/70 relative overflow-hidden">
                        <div class="absolute inset-0 bg-gradient-to-br from-green-500/5 to-transparent"></div>
                        <div class="absolute top-4 right-4 w-4 h-4 bg-green-400/60 rounded-full animate-pulse" style="animation-delay: 2s;"></div>
                        <h3 class="text-lg sm:text-xl font-semibold text-slate-100 mb-2 relative z-10">tChat | Décembre 2024 - Janvier 2025</h3>
                        <div class="w-full h-[400px] md:h-[700px] rounded-lg overflow-hidden border border-purple-500/40 shadow-inner mb-4 relative z-10">
                            <iframe src="https://tchat.mlyshu.fr" class="w-full h-full" frameborder="0" loading="lazy" sandbox="allow-scripts allow-same-origin allow-forms"></iframe>
                        </div>
                        <p class="mb-4 relative z-10 text-slate-400 text-sm sm:text-base">
                            Note : Les données étant générées via Fixer et Faker, n'hésitez pas à me demander à les régénérer afin de pouvoir profiter par exemple de la section "Derniers Posts".
                        </p>
                        <div class="flex flex-col sm:flex-row sm:justify-between gap-4 sm:gap-0 items-start sm:items-center relative z-10">
                            <a href="https://tchat.mlyshu.fr" target="_blank" class="text-purple-400 hover:text-purple-500 font-semibold transition-colors duration-200">Voir le site</a>
                            <div class="flex flex-wrap gap-2">
                                <span class="bg-purple-600/80 text-purple-100 px-3 py-1 rounded-full text-sm font-medium">Symfony</span>
                                <span class="bg-purple-600/80 text-purple-100 px-3 py-1 rounded-full text-sm font-medium">React UX</span>
                                <span class="bg-purple-600/80 text-purple-100 px-3 py-1 rounded-full text-sm font-medium">Tailwind CSS</span>
                                <span class="bg-purple-600/80 text-purple-100 px-3 py-1 rounded-full text-sm font-medium">MySQL</span>
                            </div>
                        </div>
                    </div>

                    <!-- GALLER-E -->
                    <div class="bg-gradient-to-br from-slate-900/90 to-slate-800/70 backdrop-blur p-4 sm:p-6 rounded-xl border border-purple-500/40 shadow-md transition-transform duration-300 hover:scale-105 hover:border-purple-500/70 relative overflow-hidden">
                        <div class="absolute inset-0 bg-gradient-to-br from-yellow-500/5 to-transparent"></div>
                        <div class="absolute top-4 right-4 w-4 h-4 bg-yellow-400/60 rounded-full animate-pulse" style="animation-delay: 3s;"></div>
                        <h3 class="text-lg sm:text-xl font-semibold text-slate-100 mb-2 relative z-10">Galler-E | Juillet 2024</h3>
                        <div class="w-full h-[400px] md:h-[700px] rounded-lg overflow-hidden border border-purple-500/40 shadow-inner mb-4 relative z-10">
                            <iframe src="https://galler-e2.vercel.app/" class="w-full h-full" frameborder="0" loading="lazy" sandbox="allow-scripts allow-same-origin allow-forms"></iframe>
                        </div>
                        <div class="flex flex-col sm:flex-row sm:justify-between gap-4 sm:gap-0 items-start sm:items-center relative z-10">
                            <a href="https://galler-e2.vercel.app/" target="_blank" class="text-purple-400 hover:text-purple-500 font-semibold transition-colors duration-200">Voir le site</a>
                            <div class="flex flex-wrap gap-2">
                                <span class="bg-purple-600/80 text-purple-100 px-3 py-1 rounded-full text-sm font-medium">Next.JS</span>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </section>

        <!-- Contact Section -->
        <section id="contact" class="py-32 px-6 max-w-3xl mx-auto text-center relative">
            <!-- Effets de fond brillants -->
            <div class="absolute inset-0 overflow-hidden">
                <div class="absolute top-1/4 left-1/4 w-40 h-40 bg-blue-500/10 rounded-full filter blur-2xl animate-glow"></div>
                <div class="absolute bottom-1/4 right-1/4 w-32 h-32 bg-purple-500/10 rounded-full filter blur-2xl animate-glow" style="animation-delay: 1s;"></div>
                <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-20 h-20 bg-pink-500/10 rounded-full filter blur-xl animate-glow" style="animation-delay: 2s;"></div>
            </div>
            
            <h2 class="text-4xl font-bold bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent mb-12 relative z-10">Travaillons ensemble</h2>
            <p class="text-slate-400 text-lg max-w-xl mx-auto mb-12 relative z-10">Vous recherchez un jeune développeur ? Quelqu'un qui a l'envie d'apprendre et de se surpasser ? Discutons ensemble !</p>
            <form action="/contact/send" method="POST" class="bg-slate-900/80 backdrop-blur p-12 rounded-3xl border border-blue-500/30 shadow-xl space-y-6 relative z-10 overflow-hidden">
                <!-- Effet de fond sur le formulaire -->
                <div class="absolute inset-0 bg-gradient-to-br from-blue-500/5 via-purple-500/5 to-pink-500/5 pointer-events-none"></div>
                <div class="absolute top-0 right-0 w-24 h-24 bg-blue-400/20 rounded-full filter blur-xl animate-pulse"></div>
                <div class="absolute bottom-0 left-0 w-20 h-20 bg-purple-400/20 rounded-full filter blur-xl animate-pulse" style="animation-delay: 1s;"></div>
                
                <div class="text-left relative z-10">
                    <label for="name" class="block mb-2 text-blue-500 font-medium">Votre nom</label>
                    <input type="text" id="name" name="name" class="w-full px-5 py-4 rounded-xl bg-slate-800/60 border border-blue-500/30 text-slate-100 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300" placeholder="Comment puis-je vous appeler ?" required>
                </div>
                <div class="text-left relative z-10">
                    <label for="email" class="block mb-2 text-blue-500 font-medium">Votre email</label>
                    <input type="email" id="email" name="email" class="w-full px-5 py-4 rounded-xl bg-slate-800/60 border border-blue-500/30 text-slate-100 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300" placeholder="votre@email.com" required>
                </div>
                <div class="text-left relative z-10">
                    <label for="message" class="block mb-2 text-blue-500 font-medium">Parlez-moi de votre entreprise</label>
                    <textarea id="message" name="message" rows="6" class="w-full px-5 py-4 rounded-xl bg-slate-800/60 border border-blue-500/30 text-slate-100 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300" placeholder="Nom de votre entreprise, ce que vous recherchez, ..." required></textarea>
                </div>
                <button type="submit" class="w-full bg-gradient-to-r from-blue-500 to-purple-500 text-white py-4 rounded-full font-semibold shadow-md hover:-translate-y-1 hover:shadow-blue-500/40 transition duration-300 relative z-10 overflow-hidden">
                    <span class="relative z-10">Envoyer le message</span>
                    <div class="absolute inset-0 animate-shimmer"></div>
                </button>
            </form>
        </section>
    </div>
{% endblock %}

{% block javascripts %}
    <script>
        const container = document.getElementById('particles-container');
        const count = 100;
        function randomHSL() {
            const h = Math.floor(Math.random() * 360);
            const s = Math.floor(Math.random() * 50) + 50;
            const l = Math.floor(Math.random() * 30) + 40;
            return `hsl(${h}, ${s}%, ${l}%)`;
        }
        for (let i = 0; i < count; i++) {
            const particle = document.createElement('div');
            particle.className = 'absolute w-1 h-1 bg-gradient-to-br from-blue-500 to-purple-500 rounded-full animate-float opacity-60';
            const left = Math.random() * 96 + 2;
            const top = Math.random() * 96 + 2;
            particle.style.left = `${left}%`;
            particle.style.top = `${top}%`;
            particle.style.background = `linear-gradient(135deg, ${randomHSL()}, ${randomHSL()})`;
            particle.style.animationDelay = `${Math.random() * 8}s`;
            container.appendChild(particle);
        }
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }
            });
        });
        window.addEventListener('scroll', () => {
            const scrolled = window.pageYOffset;
            const orbs = document.querySelectorAll('.floating-orb');
            orbs.forEach((orb, index) => {
                const speed = 0.5 + (index * 0.1);
                orb.style.transform = `translateY(${scrolled * speed}px)`;
            });
        });

        // Gestion du formulaire de contact
        document.addEventListener('DOMContentLoaded', function() {
            const contactForm = document.querySelector('form[action="/contact/send"]');
            const submitBtn = contactForm.querySelector('button[type="submit"]');
            const originalBtnText = submitBtn.innerHTML;
            
            // Fonction pour afficher les messages
            function showMessage(message, isError = false) {
                // Supprime les anciens messages
                const oldMessages = document.querySelectorAll('.contact-message');
                oldMessages.forEach(msg => msg.remove());
                
                // Crée le nouveau message
                const messageDiv = document.createElement('div');
                messageDiv.className = `contact-message fixed top-4 right-4 p-4 rounded-lg shadow-lg z-50 transition-all duration-300 ${
                    isError ? 'bg-red-500 text-white' : 'bg-green-500 text-white'
                }`;
                messageDiv.innerHTML = `
                    <div class="flex items-center space-x-2">
                        <span>${isError ? '❌' : '✅'}</span>
                        <span>${message}</span>
                        <button onclick="this.parentElement.parentElement.remove()" class="ml-2 text-white hover:text-gray-200">✕</button>
                    </div>
                `;
                
                document.body.appendChild(messageDiv);
                
                // Supprime automatiquement après 5 secondes
                setTimeout(() => {
                    if (messageDiv.parentElement) {
                        messageDiv.remove();
                    }
                }, 5000);
            }
            
            // Gestion de la soumission
            contactForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                // Désactive le bouton et change le texte
                submitBtn.disabled = true;
                submitBtn.innerHTML = '<span class="relative z-10">Envoi en cours...</span>';
                
                // Récupère les données du formulaire
                const formData = new FormData(this);
                
                // Envoie la requête AJAX
                fetch('/contact/send', {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showMessage(data.message, false);
                        contactForm.reset(); // Vide le formulaire
                    } else {
                        showMessage(data.message, true);
                    }
                })
                .catch(error => {
                    console.error('Erreur:', error);
                    showMessage('Une erreur inattendue s\'est produite. Veuillez réessayer.', true);
                })
                .finally(() => {
                    // Réactive le bouton
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = originalBtnText;
                });
            });
        });
    </script>
{% endblock %}