@extends('layouts.app')

@section('title', 'Prise de rendez-vous - KONTIXX Agency')
@section('footer-tagline', 'Échangeons sur votre projet digital. Planifiez un rendez-vous et bénéficiez de conseils personnalisés.')

@section('content')
    {{-- HERO --}}
    <section class="section-premium bg-gradient-premium py-24 lg:py-32 relative overflow-hidden">
        {{-- DECORATIVE ELEMENTS --}}
        <div class="absolute top-0 left-0 w-96 h-96 bg-gradient-to-br from-blue-400/20 to-transparent rounded-full blur-3xl"></div>
        <div class="absolute bottom-0 right-0 w-96 h-96 bg-gradient-to-tl from-orange-400/20 to-transparent rounded-full blur-3xl"></div>
        
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
            <div class="animate-fade-in-up-premium">
                <h1 class="text-5xl md:text-6xl lg:text-7xl font-bold text-gray-900 mb-6 leading-tight">
                    <span class="text-premium-gradient">Discutons de votre projet digital</span>
                </h1>
                <p class="text-xl md:text-2xl text-gray-700 max-w-3xl mx-auto leading-relaxed">
                    Chez KONTIXX Agency, nous croyons qu'un bon projet commence toujours par un échange clair et structuré. Planifiez un rendez-vous avec notre équipe pour analyser vos besoins, répondre à vos questions et vous proposer des solutions adaptées à vos objectifs.
                </p>
            </div>
        </div>
    </section>

    {{-- POURQUOI PRENDRE RENDEZ-VOUS --}}
    <section class="py-24 bg-white relative">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16 animate-fade-in-up-premium">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Pourquoi prendre rendez-vous avec KONTIXX ?</h2>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <div class="card-premium glass-premium p-8 rounded-2xl hover-lift animate-fade-in-up-premium" style="animation-delay: 0.1s;">
                    <div class="w-16 h-16 bg-gradient-kontixx rounded-2xl flex items-center justify-center mb-6 shadow-premium group-hover:scale-110 transition-transform duration-300">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
                        </svg>
                    </div>
                    <h3 class="font-bold text-gray-900 mb-3 text-lg">Analyse claire</h3>
                    <p class="text-gray-600">Obtenir une analyse claire de votre projet digital</p>
                </div>
                <div class="card-premium glass-premium p-8 rounded-2xl hover-lift animate-fade-in-up-premium" style="animation-delay: 0.2s;">
                    <div class="w-16 h-16 bg-gradient-warm rounded-2xl flex items-center justify-center mb-6 shadow-premium group-hover:scale-110 transition-transform duration-300">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
                        </svg>
                    </div>
                    <h3 class="font-bold text-gray-900 mb-3 text-lg">Conseils professionnels</h3>
                    <p class="text-gray-600">Bénéficier de conseils professionnels et personnalisés</p>
                </div>
                <div class="card-premium glass-premium p-8 rounded-2xl hover-lift animate-fade-in-up-premium" style="animation-delay: 0.3s;">
                    <div class="w-16 h-16 bg-gradient-kontixx rounded-2xl flex items-center justify-center mb-6 shadow-premium group-hover:scale-110 transition-transform duration-300">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                    <h3 class="font-bold text-gray-900 mb-3 text-lg">Solutions adaptées</h3>
                    <p class="text-gray-600">Comprendre les meilleures solutions adaptées à votre budget</p>
                </div>
                <div class="card-premium glass-premium p-8 rounded-2xl hover-lift animate-fade-in-up-premium" style="animation-delay: 0.4s;">
                    <div class="w-16 h-16 bg-gradient-brown rounded-2xl flex items-center justify-center mb-6 shadow-premium group-hover:scale-110 transition-transform duration-300">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                        </svg>
                    </div>
                    <h3 class="font-bold text-gray-900 mb-3 text-lg">Collaboration efficace</h3>
                    <p class="text-gray-600">Poser les bases d'une collaboration efficace et durable</p>
                </div>
            </div>
        </div>
    </section>

    {{-- TYPES DE RENDEZ-VOUS --}}
    <section class="py-24 bg-gradient-premium relative">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16 animate-fade-in-up-premium">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Choisissez le type de rendez-vous</h2>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <div class="card-premium glass-premium p-8 rounded-2xl hover-lift animate-fade-in-up-premium" style="animation-delay: 0.1s;">
                    <h3 class="font-bold text-gray-900 mb-3 text-lg">Rendez-vous découverte (gratuit)</h3>
                    <p class="text-gray-600">Un premier échange pour comprendre votre besoin, votre activité et vos objectifs.</p>
                </div>
                <div class="card-premium glass-premium p-8 rounded-2xl hover-lift animate-fade-in-up-premium" style="animation-delay: 0.2s;">
                    <h3 class="font-bold text-gray-900 mb-3 text-lg">Consultation projet</h3>
                    <p class="text-gray-600">Analyse approfondie de votre projet web, branding ou marketing digital.</p>
                </div>
                <div class="card-premium glass-premium p-8 rounded-2xl hover-lift animate-fade-in-up-premium" style="animation-delay: 0.3s;">
                    <h3 class="font-bold text-gray-900 mb-3 text-lg">Demande de devis</h3>
                    <p class="text-gray-600">Discussion détaillée pour établir une proposition claire et personnalisée.</p>
                </div>
                <div class="card-premium glass-premium p-8 rounded-2xl hover-lift animate-fade-in-up-premium" style="animation-delay: 0.4s;">
                    <h3 class="font-bold text-gray-900 mb-3 text-lg">Accompagnement & support</h3>
                    <p class="text-gray-600">Échange dédié au suivi, à l'évolution ou à la maintenance de votre solution digitale.</p>
                </div>
            </div>
        </div>
    </section>

    {{-- FORMULAIRE DE RENDEZ-VOUS PREMIUM --}}
    <section id="appointment-form" class="py-24 bg-gradient-to-br from-gray-50 via-white to-blue-50/30 relative overflow-hidden">
        {{-- ÉLÉMENTS DÉCORATIFS SUBTILS --}}
        <div class="absolute top-0 right-0 w-96 h-96 bg-blue-100/10 rounded-full blur-3xl"></div>
        <div class="absolute bottom-0 left-0 w-96 h-96 bg-orange-100/10 rounded-full blur-3xl"></div>
        
        <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            <div class="card-premium glass-premium p-10 md:p-16 rounded-3xl shadow-premium animate-fade-in-up-premium border border-gray-100/50">
                {{-- HEADER PREMIUM --}}
                <div class="text-center mb-12">
                    <div class="inline-flex items-center justify-center w-20 h-20 bg-gradient-kontixx rounded-2xl mb-6 shadow-premium">
                        <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                        </svg>
                    </div>
                    <h2 class="text-3xl md:text-4xl font-bold mb-4">
                        <span class="bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 bg-clip-text text-transparent">
                            Réservez un rendez-vous gratuit
                        </span>
                    </h2>
                    <p class="text-gray-600 text-lg max-w-2xl mx-auto leading-relaxed">
                        Réservez un rendez-vous gratuit de 15 à 30 minutes avec l'un de nos consultants pour échanger sur vos besoins et découvrir les solutions adaptées à votre projet.
                    </p>
                    <p class="text-gray-500 mt-4 text-sm flex items-center justify-center gap-2">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                        </svg>
                        Disponible du lundi au vendredi, de 9h à 18h
                    </p>
                </div>

                <form class="space-y-8" method="POST" action="{{ route('appointment.store') }}">
                    @csrf
                    
                    @if(session('success'))
                        <div class="notification-success bg-gradient-to-r from-green-50 to-emerald-50 border-l-4 border-green-500 text-green-800 px-6 py-5 rounded-xl mb-6 shadow-lg shadow-green-100/50 relative overflow-hidden">
                            {{-- EFFET DE BRILLANCE ANIMÉ --}}
                            <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full animate-[shimmer_2s_infinite]"></div>
                            
                            <div class="flex items-start gap-4 relative z-10">
                                {{-- ICÔNE DE SUCCÈS AVEC ANIMATION --}}
                                <div class="flex-shrink-0 w-10 h-10 bg-gradient-to-br from-green-500 to-emerald-600 rounded-full flex items-center justify-center shadow-lg">
                                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path>
                                    </svg>
                                </div>
                                
                                <div class="flex-1 pt-0.5">
                                    <h4 class="font-bold text-lg mb-1 text-green-900">Demande envoyée avec succès !</h4>
                                    <p class="text-green-700 leading-relaxed">{{ session('success') }}</p>
                                </div>
                                
                                {{-- BOUTON DE FERMETURE --}}
                                <button onclick="this.parentElement.parentElement.remove()" class="flex-shrink-0 text-green-600 hover:text-green-800 transition-colors opacity-70 hover:opacity-100">
                                    <svg class="w-5 h-5" 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>
                            
                            {{-- BARRE DE PROGRESSION --}}
                            <div class="absolute bottom-0 left-0 right-0 h-1 bg-green-200 rounded-b-xl overflow-hidden">
                                <div class="h-full bg-gradient-to-r from-green-500 to-emerald-600 animate-[progress_5s_ease-out_forwards]"></div>
                            </div>
                        </div>
                    @endif
                    
                    @if(session('error'))
                        <div class="notification-success bg-gradient-to-r from-red-50 to-rose-50 border-l-4 border-red-500 text-red-800 px-6 py-5 rounded-xl mb-6 shadow-lg shadow-red-100/50 relative overflow-hidden">
                            {{-- EFFET DE BRILLANCE ANIMÉ --}}
                            <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full animate-[shimmer_2s_infinite]"></div>
                            
                            <div class="flex items-start gap-4 relative z-10">
                                {{-- ICÔNE D'ERREUR --}}
                                <div class="flex-shrink-0 w-10 h-10 bg-gradient-to-br from-red-500 to-rose-600 rounded-full flex items-center justify-center shadow-lg">
                                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
                                    </svg>
                                </div>
                                
                                <div class="flex-1 pt-0.5">
                                    <h4 class="font-bold text-lg mb-1 text-red-900">Erreur d'envoi</h4>
                                    <p class="text-red-700 leading-relaxed">{{ session('error') }}</p>
                                </div>
                                
                                {{-- BOUTON DE FERMETURE --}}
                                <button onclick="this.parentElement.parentElement.remove()" class="flex-shrink-0 text-red-600 hover:text-red-800 transition-colors opacity-70 hover:opacity-100">
                                    <svg class="w-5 h-5" 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>
                        </div>
                    @endif
                    {{-- INFORMATIONS PERSONNELLES --}}
                    <div class="space-y-6">
                        <h3 class="text-lg font-bold text-gray-900 flex items-center gap-2 pb-2 border-b border-gray-200">
                            <span class="w-1 h-6 bg-gradient-kontixx rounded-full"></span>
                            Informations personnelles
                        </h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="group">
                                <label for="name" class="block text-sm font-semibold text-gray-800 mb-2 flex items-center gap-2">
                                    <span>Nom et prénom</span>
                                    <span class="text-red-500">*</span>
                                </label>
                                <div class="relative">
                                    <input type="text" id="name" name="name" value="{{ old('name') }}" required 
                                        class="input-premium w-full px-5 py-4 rounded-xl transition-all duration-300 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500" 
                                        placeholder="Votre nom complet">
                                    <div class="absolute inset-0 rounded-xl bg-gradient-to-r from-blue-500/0 via-blue-500/0 to-orange-500/0 group-hover:from-blue-500/5 group-hover:via-blue-500/5 group-hover:to-orange-500/5 transition-all duration-300 pointer-events-none"></div>
                                </div>
                            </div>
                            <div class="group">
                                <label for="email" class="block text-sm font-semibold text-gray-800 mb-2 flex items-center gap-2">
                                    <span>Adresse email</span>
                                    <span class="text-red-500">*</span>
                                </label>
                                <div class="relative">
                                    <input type="email" id="email" name="email" value="{{ old('email') }}" required 
                                        class="input-premium w-full px-5 py-4 rounded-xl transition-all duration-300 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500" 
                                        placeholder="votre@email.com">
                                    <div class="absolute inset-0 rounded-xl bg-gradient-to-r from-blue-500/0 via-blue-500/0 to-orange-500/0 group-hover:from-blue-500/5 group-hover:via-blue-500/5 group-hover:to-orange-500/5 transition-all duration-300 pointer-events-none"></div>
                                </div>
                            </div>
                        </div>
                        <div class="group">
                            <label for="phone" class="block text-sm font-semibold text-gray-800 mb-2 flex items-center gap-2">
                                <span>Numéro de téléphone</span>
                                <span class="text-red-500">*</span>
                            </label>
                            <div class="relative">
                                <input type="tel" id="phone" name="phone" value="{{ old('phone') }}" required 
                                    class="input-premium w-full px-5 py-4 rounded-xl transition-all duration-300 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500" 
                                    placeholder="+261 XX XX XXX XX">
                                <div class="absolute inset-0 rounded-xl bg-gradient-to-r from-blue-500/0 via-blue-500/0 to-orange-500/0 group-hover:from-blue-500/5 group-hover:via-blue-500/5 group-hover:to-orange-500/5 transition-all duration-300 pointer-events-none"></div>
                            </div>
                        </div>
                    </div>

                    {{-- DÉTAILS DU RENDEZ-VOUS --}}
                    <div class="space-y-6">
                        <h3 class="text-lg font-bold text-gray-900 flex items-center gap-2 pb-2 border-b border-gray-200">
                            <span class="w-1 h-6 bg-gradient-warm rounded-full"></span>
                            Détails du rendez-vous
                        </h3>
                        <div class="group">
                            <label for="appointment_type" class="block text-sm font-semibold text-gray-800 mb-2 flex items-center gap-2">
                                <span>Type de rendez-vous</span>
                                <span class="text-red-500">*</span>
                            </label>
                            <div class="relative">
                                <select id="appointment_type" name="appointment_type" required 
                                    class="input-premium w-full px-5 py-4 rounded-xl transition-all duration-300 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 appearance-none bg-white">
                                    <option value="">Sélectionnez un type de rendez-vous</option>
                                    <option value="decouverte" {{ old('appointment_type') == 'decouverte' ? 'selected' : '' }}>Rendez-vous découverte (gratuit)</option>
                                    <option value="consultation" {{ old('appointment_type') == 'consultation' ? 'selected' : '' }}>Consultation projet</option>
                                    <option value="devis" {{ old('appointment_type') == 'devis' ? 'selected' : '' }}>Demande de devis</option>
                                    <option value="accompagnement" {{ old('appointment_type') == 'accompagnement' ? 'selected' : '' }}>Accompagnement & support</option>
                                </select>
                                <div class="absolute inset-0 rounded-xl bg-gradient-to-r from-blue-500/0 via-blue-500/0 to-orange-500/0 group-hover:from-blue-500/5 group-hover:via-blue-500/5 group-hover:to-orange-500/5 transition-all duration-300 pointer-events-none"></div>
                                <div class="absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none">
                                    <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                    </svg>
                                </div>
                            </div>
                        </div>
                        <div class="group">
                            <label class="block text-sm font-semibold text-gray-800 mb-3 flex items-center gap-2">
                                <span>Format du rendez-vous</span>
                                <span class="text-red-500">*</span>
                            </label>
                            <div class="space-y-3">
                                <label class="group/radio flex items-center p-5 rounded-xl border-2 border-gray-200 hover:border-blue-400 hover:bg-blue-50/50 transition-all duration-300 cursor-pointer relative overflow-hidden">
                                    <input type="radio" name="format" value="phone" {{ old('format') == 'phone' ? 'checked' : '' }} class="mr-4 w-5 h-5 text-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" required>
                                    <div class="flex-1">
                                        <span class="text-gray-800 font-semibold block">Appel téléphonique</span>
                                        <span class="text-gray-500 text-sm">Échange rapide et efficace par téléphone</span>
                                    </div>
                                    <div class="absolute inset-0 bg-gradient-to-r from-blue-500/0 to-orange-500/0 group-hover/radio:from-blue-500/5 group-hover/radio:to-orange-500/5 transition-all duration-300 pointer-events-none"></div>
                                </label>
                                <label class="group/radio flex items-center p-5 rounded-xl border-2 border-gray-200 hover:border-blue-400 hover:bg-blue-50/50 transition-all duration-300 cursor-pointer relative overflow-hidden">
                                    <input type="radio" name="format" value="video" {{ old('format') == 'video' ? 'checked' : '' }} class="mr-4 w-5 h-5 text-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                                    <div class="flex-1">
                                        <span class="text-gray-800 font-semibold block">Visioconférence</span>
                                        <span class="text-gray-500 text-sm">Google Meet / Zoom - Partage d'écran possible</span>
                                    </div>
                                    <div class="absolute inset-0 bg-gradient-to-r from-blue-500/0 to-orange-500/0 group-hover/radio:from-blue-500/5 group-hover/radio:to-orange-500/5 transition-all duration-300 pointer-events-none"></div>
                                </label>
                                <label class="group/radio flex items-center p-5 rounded-xl border-2 border-gray-200 hover:border-blue-400 hover:bg-blue-50/50 transition-all duration-300 cursor-pointer relative overflow-hidden">
                                    <input type="radio" name="format" value="physical" {{ old('format') == 'physical' ? 'checked' : '' }} class="mr-4 w-5 h-5 text-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                                    <div class="flex-1">
                                        <span class="text-gray-800 font-semibold block">Rendez-vous physique</span>
                                        <span class="text-gray-500 text-sm">Rencontre en personne (si applicable)</span>
                                    </div>
                                    <div class="absolute inset-0 bg-gradient-to-r from-blue-500/0 to-orange-500/0 group-hover/radio:from-blue-500/5 group-hover/radio:to-orange-500/5 transition-all duration-300 pointer-events-none"></div>
                                </label>
                            </div>
                        </div>
                        <div class="group">
                            <label for="project_type" class="block text-sm font-semibold text-gray-800 mb-2">Type de projet</label>
                            <div class="relative">
                                <select id="project_type" name="project_type" 
                                    class="input-premium w-full px-5 py-4 rounded-xl transition-all duration-300 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 appearance-none bg-white">
                                    <option value="">Sélectionnez un type de projet</option>
                                    <option value="creation-site" {{ old('project_type') == 'creation-site' ? 'selected' : '' }}>Création de site web</option>
                                    <option value="branding" {{ old('project_type') == 'branding' ? 'selected' : '' }}>Branding & identité visuelle</option>
                                    <option value="marketing" {{ old('project_type') == 'marketing' ? 'selected' : '' }}>Marketing digital</option>
                                    <option value="community" {{ old('project_type') == 'community' ? 'selected' : '' }}>Community management</option>
                                    <option value="accompagnement" {{ old('project_type') == 'accompagnement' ? 'selected' : '' }}>Accompagnement digital</option>
                                    <option value="maintenance" {{ old('project_type') == 'maintenance' ? 'selected' : '' }}>Maintenance & support</option>
                                </select>
                                <div class="absolute inset-0 rounded-xl bg-gradient-to-r from-blue-500/0 via-blue-500/0 to-orange-500/0 group-hover:from-blue-500/5 group-hover:via-blue-500/5 group-hover:to-orange-500/5 transition-all duration-300 pointer-events-none"></div>
                                <div class="absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none">
                                    <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- SÉLECTION DE CRÉNEAU --}}
                    <div class="space-y-6">
                        <h3 class="text-lg font-bold text-gray-900 flex items-center gap-2 pb-2 border-b border-gray-200">
                            <span class="w-1 h-6 bg-gradient-kontixx rounded-full"></span>
                            Choisissez un créneau disponible
                        </h3>
                        <p class="text-sm text-gray-600 mb-4">
                            Sélectionnez une date et un horaire pour votre rendez-vous. (Optionnel - vous pouvez également laisser ce champ vide)
                        </p>
                        
                        {{-- SÉLECTEUR DE DATE --}}
                        <div class="group mb-6">
                            <label for="selected_date" class="block text-sm font-semibold text-gray-800 mb-2">
                                Date du rendez-vous
                            </label>
                            <div class="relative">
                                <input type="date" 
                                    id="selected_date" 
                                    name="selected_date" 
                                    min="{{ now()->format('Y-m-d') }}"
                                    value="{{ old('selected_date') }}"
                                    class="input-premium w-full px-5 py-4 rounded-xl transition-all duration-300 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 appearance-none bg-white">
                                <div class="absolute inset-0 rounded-xl bg-gradient-to-r from-blue-500/0 via-blue-500/0 to-orange-500/0 group-hover:from-blue-500/5 group-hover:via-blue-500/5 group-hover:to-orange-500/5 transition-all duration-300 pointer-events-none"></div>
                            </div>
                        </div>

                        {{-- CHAMP CACHÉ POUR STOCKER LE SLOT_ID SÉLECTIONNÉ --}}
                        <input type="hidden" name="slot_id" id="selected_slot_id" value="{{ old('slot_id', '') }}">
                        
                        {{-- GRILLE DE CRÉNEAUX DISPONIBLES --}}
                        <div id="slots-container" class="space-y-4">
                            @if($availableSlots->count() > 0)
                                @foreach($availableSlots as $date => $slots)
                                    <div class="slot-date-group" data-date="{{ $date }}" style="display: {{ old('selected_date') == $date ? 'block' : 'none' }};">
                                        <h4 class="text-sm font-semibold text-gray-700 mb-3">
                                            {{ \Carbon\Carbon::parse($date)->locale('fr')->isoFormat('dddd D MMMM YYYY') }}
                                        </h4>
                                        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
                                            @foreach($slots as $slot)
                                                <label class="slot-option group relative cursor-pointer" 
                                                       data-slot-id="{{ $slot->id }}">
                                                    <input type="radio" 
                                                        name="slot_id_radio" 
                                                        value="{{ $slot->id }}" 
                                                        {{ old('slot_id') == $slot->id ? 'checked' : '' }}
                                                        class="peer sr-only">
                                                    <div class="slot-card p-4 rounded-xl border-2 border-gray-200 bg-white transition-all duration-300 
                                                        peer-checked:border-blue-500 peer-checked:bg-blue-50 
                                                        hover:border-blue-400 hover:bg-blue-50/50 
                                                        peer-checked:shadow-lg peer-checked:shadow-blue-200/50">
                                                        <div class="text-center">
                                                            <div class="text-sm font-bold text-gray-800 peer-checked:text-blue-700">
                                                                {{ \Carbon\Carbon::createFromFormat('H:i:s', $slot->start_time)->format('H:i') }} - {{ \Carbon\Carbon::createFromFormat('H:i:s', $slot->end_time)->format('H:i') }}
                                                            </div>
                                                            <div class="text-xs text-gray-500 mt-1">
                                                                {{ $slot->getDurationInMinutes() }} min
                                                            </div>
                                                        </div>
                                                        {{-- INDICATEUR DE SÉLECTION --}}
                                                        <div class="absolute top-2 right-2 w-5 h-5 rounded-full border-2 border-gray-300 peer-checked:border-blue-500 peer-checked:bg-blue-500 flex items-center justify-center transition-all duration-300">
                                                            <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
                                                            </svg>
                                                        </div>
                                                    </div>
                                                </label>
                                            @endforeach
                                        </div>
                                    </div>
                                @endforeach
                            @else
                                <div class="p-6 bg-gray-50 rounded-xl border border-gray-200 text-center">
                                    <p class="text-gray-600">
                                        <svg class="w-8 h-8 text-gray-400 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                        </svg>
                                        Aucun créneau disponible pour le moment. Vous pouvez tout de même envoyer votre demande et nous vous recontacterons.
                                    </p>
                                </div>
                            @endif
                        </div>
                    </div>

                    {{-- MESSAGE --}}
                    <div class="group">
                        <label for="message" class="block text-sm font-semibold text-gray-800 mb-2 flex items-center gap-2">
                            <span>Message ou besoin spécifique</span>
                            <span class="text-red-500">*</span>
                        </label>
                        <div class="relative">
                            <textarea id="message" name="message" rows="6" required 
                                class="input-premium w-full px-5 py-4 rounded-xl transition-all duration-300 resize-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500" 
                                placeholder="Décrivez votre projet, vos besoins et vos questions...">{{ old('message') }}</textarea>
                            <div class="absolute inset-0 rounded-xl bg-gradient-to-r from-blue-500/0 via-blue-500/0 to-orange-500/0 group-hover:from-blue-500/5 group-hover:via-blue-500/5 group-hover:to-orange-500/5 transition-all duration-300 pointer-events-none"></div>
                        </div>
                    </div>

                    {{-- BOUTON DE SOUMISSION PREMIUM --}}
                    <button type="submit" class="btn-cta-orange group relative w-full transform hover:scale-[1.02]" style="padding: 18px 32px; border-radius: 16px;">
                        <span class="relative z-10 flex items-center justify-center gap-3 text-lg">
                            <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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                            </svg>
                            <span>Prendre rendez-vous maintenant</span>
                            <svg class="w-5 h-5 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
                            </svg>
                        </span>
                    </button>
                </form>

                {{-- MESSAGE DE RÉASSURANCE PREMIUM --}}
                <div class="mt-10 p-6 md:p-8 bg-gradient-to-br from-blue-50 via-blue-50/50 to-indigo-50 rounded-2xl border border-blue-200/50 shadow-sm">
                    <div class="flex items-start space-x-4">
                        <div class="w-12 h-12 bg-gradient-kontixx rounded-xl flex items-center justify-center flex-shrink-0 shadow-premium">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        </div>
                        <div class="flex-1">
                            <p class="font-bold text-gray-900 mb-2 text-lg">Échange sans engagement – Réponse rapide – Accompagnement professionnel</p>
                            <p class="text-gray-600 text-sm leading-relaxed">Si nous ne sommes pas immédiatement disponibles, c'est que notre équipe est en rendez-vous. Laissez-nous un message et nous vous recontacterons dans les plus brefs délais.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- PHRASE DE CLÔTURE - STYLE ÉLÉGANT ET SIMPLE --}}
    <section class="py-24 bg-gradient-to-br from-gray-50 via-white to-blue-50/30 relative overflow-hidden">
        {{-- LIGNE DÉCORATIVE EN HAUT --}}
        <div class="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-blue-200/50 to-transparent"></div>
        
        {{-- ÉLÉMENTS DÉCORATIFS SUBTILS --}}
        <div class="absolute top-0 right-0 w-96 h-96 bg-blue-100/20 rounded-full blur-3xl"></div>
        <div class="absolute bottom-0 left-0 w-96 h-96 bg-orange-100/20 rounded-full blur-3xl"></div>
        
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
            <div class="animate-fade-in-up-premium">
                {{-- TITRE AVEC GRADIENT ÉLÉGANT --}}
                <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-6">
                    <span class="bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 bg-clip-text text-transparent">
                        Prêt à faire avancer votre projet digital ?
                    </span>
                </h2>
                {{-- SOUS-TEXTE ÉLÉGANT --}}
                <p class="text-xl md:text-2xl text-gray-600 mb-10 max-w-3xl mx-auto leading-relaxed font-medium">
                    Planifiez votre rendez-vous et transformons ensemble vos idées en solutions performantes.
                </p>
                {{-- BOUTON CTA PREMIUM --}}
                <a href="#appointment-form" class="btn-cta-orange group relative inline-flex items-center gap-3 transform hover:scale-105 hover:-translate-y-1" style="border-radius: 999px; padding: 16px 32px;">
                    <span class="relative z-10">Prendre rendez-vous maintenant</span>
                    <svg class="w-5 h-5 relative z-10 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
                    </svg>
                </a>
            </div>
        </div>
    </section>

    @push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const dateInput = document.getElementById('selected_date');
            const slotGroups = document.querySelectorAll('.slot-date-group');
            
            // Fonction pour afficher les créneaux de la date sélectionnée
            function showSlotsForDate(selectedDate) {
                slotGroups.forEach(group => {
                    const groupDate = group.getAttribute('data-date');
                    if (groupDate === selectedDate) {
                        group.style.display = 'block';
                        // Scroll vers les créneaux
                        setTimeout(() => {
                            group.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                        }, 100);
                    } else {
                        group.style.display = 'none';
                    }
                });
            }
            
            // Écouter les changements de date
            if (dateInput) {
                dateInput.addEventListener('change', function() {
                    const selectedDate = this.value;
                    if (selectedDate) {
                        showSlotsForDate(selectedDate);
                    } else {
                        // Si aucune date n'est sélectionnée, masquer tous les créneaux
                        slotGroups.forEach(group => {
                            group.style.display = 'none';
                        });
                    }
                });
                
                // Afficher les créneaux pour la date initiale si elle est définie
                if (dateInput.value) {
                    showSlotsForDate(dateInput.value);
                }
            }
            
            // Fonction pour mettre à jour le champ caché
            function updateHiddenSlotId(slotId) {
                const hiddenSlotId = document.getElementById('selected_slot_id');
                if (!hiddenSlotId) {
                    console.error('❌ Champ caché selected_slot_id non trouvé!');
                    return false;
                }
                if (!slotId || slotId === '' || slotId === '0') {
                    console.warn('⚠️ updateHiddenSlotId appelé avec valeur invalide:', slotId);
                    return false;
                }
                hiddenSlotId.value = slotId;
                console.log('✅ slot_id mis à jour:', slotId, 'dans le champ:', hiddenSlotId.value);
                return true;
            }
            
            // SOLUTION SIMPLE : Mettre à jour le champ caché quand un radio change
            document.addEventListener('change', function (e) {
                if (e.target.matches('input[name="slot_id_radio"]') && e.target.checked) {
                    updateHiddenSlotId(e.target.value);
                }
            });
            
            // AUSSI écouter les clics sur les labels pour mettre à jour immédiatement
            document.addEventListener('click', function (e) {
                const label = e.target.closest('label.slot-option');
                if (label) {
                    const radio = label.querySelector('input[name="slot_id_radio"]');
                    if (radio) {
                        // Cocher le radio et mettre à jour le champ caché immédiatement
                        radio.checked = true;
                        updateHiddenSlotId(radio.value);
                        console.log('🖱️ Clic sur label, radio coché et slot_id mis à jour:', radio.value);
                    }
                }
            }, true); // Utiliser capture phase pour être sûr
            
            // Vérification AVANT la soumission du formulaire
            const form = document.querySelector('form[action="{{ route('appointment.store') }}"]');
            if (form) {
                form.addEventListener('submit', function(e) {
                    // Récupérer le radio coché si le champ caché est vide
                    const hiddenSlotId = document.getElementById('selected_slot_id');
                    if (!hiddenSlotId || !hiddenSlotId.value || hiddenSlotId.value === '') {
                        const checkedRadio = document.querySelector('input[name="slot_id_radio"]:checked');
                        if (checkedRadio && checkedRadio.value) {
                            updateHiddenSlotId(checkedRadio.value);
                            console.log('⚠️ Champ caché vide, mis à jour depuis radio coché avant soumission');
                        }
                    }
                    console.log('📋 slot_id final avant soumission:', hiddenSlotId ? hiddenSlotId.value : 'NON TROUVÉ');
                });
            }
            
            // Initialiser avec la valeur old() si présente
            @if(old('slot_id'))
                updateHiddenSlotId('{{ old('slot_id') }}');
            @endif
            
            // Scroll vers la notification de succès et réinitialiser le formulaire
            @if(session('success'))
                const notification = document.querySelector('.notification-success');
                if (notification) {
                    // Scroll vers la notification
                    notification.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    
                    // Réinitialiser le formulaire après 1 seconde
                    setTimeout(function() {
                        const form = document.querySelector('form[action="{{ route('appointment.store') }}"]');
                        if (form) {
                            form.reset();
                            // Réinitialiser l'affichage des créneaux
                            slotGroups.forEach(group => {
                                group.style.display = 'none';
                            });
                        }
                    }, 1000);
                }
            @endif
        });
    </script>
    @endpush
@endsection