@extends('layouts.app')

@section('content')
<!-- Hero Section - Ultra Modern -->
<section class="relative bg-linear-to-br from-slate-900 via-blue-900 to-slate-900 text-cyan-300 overflow-hidden py-16 sm:py-20 md:py-28 lg:py-36">
    <!-- Animated background elements -->
    <div class="absolute top-0 right-0 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl -mr-48 -mt-48 animate-pulse"></div>
    <div class="absolute bottom-0 left-0 w-96 h-96 bg-cyan-500/10 rounded-full blur-3xl -ml-48 -mb-48 animate-pulse" style="animation-delay: 2s;"></div>
    
    <!-- Grid background pattern -->
    <div class="absolute inset-0 opacity-20" style="background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 50px 50px;"></div>
    
    <!-- Unified layout for all screen sizes -->
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Grid layout for all screen sizes -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-12 lg:gap-16 items-center">
            <!-- Left side: Text content -->
            <div class="text-center lg:text-left">
                <!-- Animated badge -->
                <div class="inline-flex items-center gap-2 mb-6 sm:mb-8 px-3 sm:px-4 py-1.5 sm:py-2 bg-blue-500/30 border border-blue-300/50 rounded-full backdrop-blur-sm animate-fadeIn">
                    <span class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span>
                    <span class="text-xs sm:text-sm font-medium text-cyan-300">Trusted by {{ number_format($stats['total_prestataires'] ?? 0) }}+ professionals</span>
                </div>
                
                <h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-black mb-4 sm:mb-6 md:mb-8 leading-tight text-blue-200">
                    Connectez-vous avec les <span class="bg-linear-to-r from-cyan-300 via-blue-300 to-cyan-300 bg-clip-text text-transparent animate-pulse">meilleurs prestataires</span>
                </h1>
                
                <p class="text-sm sm:text-base md:text-lg lg:text-xl mb-8 sm:mb-10 md:mb-12 text-cyan-200 max-w-2xl mx-auto lg:mx-0 leading-relaxed">
                    La plateforme innovante qui transforme la façon de travailler ensemble. Découvrez des talents vérifiés et terminez vos projets en toute confiance.
                </p>
                
                <!-- Buttons container - same line on desktop, stacked on mobile -->
                <div class="flex flex-col sm:flex-row gap-4 sm:gap-6 justify-center lg:justify-start mt-8 sm:mt-10">
                    <a href="{{ route('prestataires.index') }}" class="group relative px-6 sm:px-8 py-3 sm:py-4 bg-linear-to-r from-blue-500 to-cyan-500 text-cyan-50 font-bold rounded-xl sm:rounded-2xl transition-all duration-300 text-center focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-slate-900 whitespace-nowrap overflow-hidden">
                        <div class="absolute inset-0 bg-linear-to-r from-cyan-500 to-blue-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl sm:rounded-2xl"></div>
                        <span class="relative flex items-center justify-center gap-2">
                            Trouver les prestataires
                            <i class="fas fa-arrow-right group-hover:translate-x-1 transition-transform"></i>
                        </span>
                    </a>
                    <a href="{{ route('services.index') }}" class="group relative px-6 sm:px-8 py-3 sm:py-4 bg-white/10 border-2 border-white/30 text-cyan-200 font-bold rounded-xl sm:rounded-2xl hover:bg-white/20 transition-all duration-300 text-center focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-slate-900 whitespace-nowrap backdrop-blur-sm">
                        <span class="flex items-center justify-center gap-2">
                            Découvrir les services
                            <i class="fas fa-sparkles group-hover:rotate-12 transition-transform"></i>
                        </span>
                    </a>
                </div>
                
                <!-- Stats row -->
                <div class="grid grid-cols-3 gap-4 sm:gap-6 mt-10 sm:mt-14 pt-8 sm:pt-12 border-t border-slate-700/50">
                    <div class="text-center lg:text-left">
                        <div class="text-xl sm:text-2xl md:text-3xl font-bold text-cyan-300">{{ number_format($stats['total_prestataires'] ?? 0) }}+</div>
                        <p class="text-xs sm:text-sm text-slate-200 mt-1">Prestataires</p>
                    </div>
                    <div class="text-center lg:text-left">
                        <div class="text-xl sm:text-2xl md:text-3xl font-bold text-cyan-300">{{ number_format($stats['total_services'] ?? 0) }}+</div>
                        <p class="text-xs sm:text-sm text-slate-200 mt-1">Services</p>
                    </div>
                    <div class="text-center lg:text-left">
                        <div class="text-xl sm:text-2xl md:text-3xl font-bold text-cyan-300">{{ number_format($stats['avg_rating'] ?? 4.9, 1) }}★</div>
                        <p class="text-xs sm:text-sm text-slate-200 mt-1">Note moyenne</p>
                    </div>
                </div>
            </div>
            
            <!-- Right side: Illustration/Logo - now only visible on desktop -->
            <div class="relative hidden lg:flex justify-center items-center mt-12 lg:mt-0">
                <!-- 3D Card effect with glassmorphism -->
                <div class="relative w-full max-w-md lg:max-w-lg">
                    <!-- Glow effect -->
                    <div class="absolute inset-0 bg-linear-to-br from-blue-500/20 to-cyan-500/20 rounded-3xl blur-3xl"></div>
                    
                    <!-- Main card -->
                    <div class="relative bg-linear-to-br from-blue-500/10 to-cyan-500/10 backdrop-blur-xl border border-blue-400/30 rounded-3xl p-8 md:p-10 overflow-hidden group">
                        <!-- Animated gradient border -->
                        <div class="absolute inset-0 bg-linear-to-r from-blue-500 via-cyan-500 to-blue-500 rounded-3xl opacity-0 group-hover:opacity-20 transition-opacity duration-500"></div>
                        
                        <!-- Content -->
                        <div class="relative z-10 text-center">
                            <!-- Floating icons animation -->
                            <div class="grid grid-cols-3 gap-4 mb-8">
                                <div class="flex justify-center">
                                    <div class="w-16 h-16 bg-linear-to-br from-blue-400 to-cyan-400 rounded-2xl flex items-center justify-center animate-bounce" style="animation-delay: 0s;">
                                        <i class="fas fa-handshake text-cyan-50 text-2xl"></i>
                                    </div>
                                </div>
                                <div class="flex justify-center">
                                    <div class="w-16 h-16 bg-linear-to-br from-cyan-400 to-green-400 rounded-2xl flex items-center justify-center animate-bounce" style="animation-delay: 0.2s;">
                                        <i class="fas fa-star text-cyan-50 text-2xl"></i>
                                    </div>
                                </div>
                                <div class="flex justify-center">
                                    <div class="w-16 h-16 bg-linear-to-br from-blue-500 to-indigo-500 rounded-2xl flex items-center justify-center animate-bounce" style="animation-delay: 0.4s;">
                                        <i class="fas fa-rocket text-cyan-50 text-2xl"></i>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Large handshake icon -->
                            <div class="relative w-32 h-32 sm:w-40 sm:h-40 mx-auto flex items-center justify-center mb-6">
                                <div class="absolute inset-0 bg-linear-to-br from-blue-400 to-cyan-400 rounded-full blur-2xl opacity-50 animate-pulse"></div>
                                <div class="relative w-24 h-24 sm:w-32 sm:h-32 bg-linear-to-br from-blue-500 to-cyan-500 rounded-full flex items-center justify-center group-hover:scale-110 transition-transform duration-500">
                                    <i class="fas fa-handshake text-cyan-50 text-5xl sm:text-6xl"></i>
                                </div>
                            </div>
                            
                            <!-- Text content -->
                            <h3 class="text-xl sm:text-2xl font-bold text-blue-200 mb-2">Solution Complète</h3>
                            <p class="text-slate-300 text-sm">Des prestataires, services et équipements en un seul endroit</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- PWA Install Banner - Instructions pour télécharger l'application -->
<section id="pwa-install-section" class="py-8 sm:py-12 bg-gradient-to-r from-orange-500 via-amber-500 to-orange-500 relative overflow-hidden">
    <!-- Animated background patterns -->
    <div class="absolute inset-0 opacity-10">
        <div class="absolute top-0 left-0 w-40 h-40 bg-white rounded-full -translate-x-1/2 -translate-y-1/2"></div>
        <div class="absolute bottom-0 right-0 w-60 h-60 bg-white rounded-full translate-x-1/3 translate-y-1/3"></div>
    </div>
    
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col lg:flex-row items-center justify-between gap-6 lg:gap-12">
            <!-- Left: Icon & Title -->
            <div class="flex items-center gap-4 text-white text-center lg:text-left">
                <div class="w-16 h-16 sm:w-20 sm:h-20 bg-white/20 backdrop-blur-sm rounded-2xl flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-mobile-alt text-3xl sm:text-4xl text-white"></i>
                </div>
                <div>
                    <h3 class="text-xl sm:text-2xl font-bold mb-1">Installez TaPrestation sur votre téléphone !</h3>
                    <p class="text-white/90 text-sm sm:text-base">Accès rapide, notifications push et fonctionnement hors-ligne</p>
                </div>
            </div>
            
            <!-- Right: Install buttons -->
            <div class="flex flex-col sm:flex-row gap-3 w-full lg:w-auto">
                <!-- Android Button -->
                <button id="pwa-install-android" onclick="showInstallInstructions('android')" class="flex items-center justify-center gap-3 px-6 py-3 bg-white text-orange-600 font-semibold rounded-xl hover:bg-orange-50 transition-all shadow-lg hover:shadow-xl">
                    <i class="fab fa-android text-2xl text-green-500"></i>
                    <span>Android</span>
                </button>
                
                <!-- iOS Button -->
                <button id="pwa-install-ios" onclick="showInstallInstructions('ios')" class="flex items-center justify-center gap-3 px-6 py-3 bg-white text-orange-600 font-semibold rounded-xl hover:bg-orange-50 transition-all shadow-lg hover:shadow-xl">
                    <i class="fab fa-apple text-2xl text-gray-800"></i>
                    <span>iPhone / iPad</span>
                </button>
            </div>
        </div>
    </div>
</section>

<!-- PWA Install Modal -->
<div id="pwa-install-modal" class="fixed inset-0 z-50 hidden" onclick="closeInstallModal(event)">
    <div class="absolute inset-0 bg-black/60 backdrop-blur-sm"></div>
    <div class="relative min-h-screen flex items-center justify-center p-4">
        <div class="bg-white rounded-3xl shadow-2xl max-w-lg w-full overflow-hidden" onclick="event.stopPropagation()">
            <!-- Modal Header -->
            <div class="bg-gradient-to-r from-orange-500 to-amber-500 px-6 py-4 flex items-center justify-between">
                <h4 id="modal-title" class="text-xl font-bold text-white">Installation</h4>
                <button onclick="closeInstallModal()" class="text-white/80 hover:text-white transition-colors">
                    <i class="fas fa-times text-xl"></i>
                </button>
            </div>
            
            <!-- Modal Body -->
            <div id="modal-body" class="p-6">
                <!-- Content will be injected by JS -->
            </div>
        </div>
    </div>
</div>

<script>
// PWA Install Instructions
function showInstallInstructions(platform) {
    const modal = document.getElementById('pwa-install-modal');
    const modalTitle = document.getElementById('modal-title');
    const modalBody = document.getElementById('modal-body');
    
    if (platform === 'ios') {
        modalTitle.innerHTML = '<i class="fab fa-apple mr-2"></i> Installation sur iPhone / iPad';
        modalBody.innerHTML = `
            <div class="space-y-6">
                <div class="bg-amber-50 border border-amber-200 rounded-xl p-4">
                    <div class="flex items-start gap-3">
                        <i class="fas fa-exclamation-triangle text-amber-500 mt-1"></i>
                        <div>
                            <p class="font-semibold text-amber-800">Important : Utilisez Safari !</p>
                            <p class="text-sm text-amber-700">Cette fonctionnalité ne marche <strong>pas</strong> avec Chrome ou Firefox sur iOS. Ouvrez cette page avec Safari.</p>
                        </div>
                    </div>
                </div>
                
                <div class="space-y-4">
                    <div class="flex items-start gap-4">
                        <div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center flex-shrink-0">
                            <span class="text-blue-600 font-bold">1</span>
                        </div>
                        <div>
                            <p class="font-semibold text-gray-900">Ouvrez Safari</p>
                            <p class="text-sm text-gray-600">Rendez-vous sur taprestation.com avec Safari</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start gap-4">
                        <div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center flex-shrink-0">
                            <span class="text-blue-600 font-bold">2</span>
                        </div>
                        <div>
                            <p class="font-semibold text-gray-900">Appuyez sur le bouton Partager</p>
                            <p class="text-sm text-gray-600">C'est l'icône <i class="fas fa-share-from-square text-blue-500"></i> en bas de l'écran</p>
                            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233b82f6'%3E%3Cpath d='M12 2L8 6h3v8h2V6h3l-4-4zm-6 9v11h12V11h-2v9H8v-9H6z'/%3E%3C/svg%3E" alt="Share icon" class="w-12 h-12 mt-2 p-2 bg-gray-100 rounded-lg">
                        </div>
                    </div>
                    
                    <div class="flex items-start gap-4">
                        <div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center flex-shrink-0">
                            <span class="text-blue-600 font-bold">3</span>
                        </div>
                        <div>
                            <p class="font-semibold text-gray-900">Sélectionnez "Sur l'écran d'accueil"</p>
                            <p class="text-sm text-gray-600">Faites défiler et appuyez sur <strong>"Sur l'écran d'accueil"</strong></p>
                            <div class="mt-2 bg-gray-100 rounded-lg p-3 flex items-center gap-3">
                                <i class="fas fa-plus-square text-gray-600 text-xl"></i>
                                <span class="text-gray-900 font-medium">Sur l'écran d'accueil</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="flex items-start gap-4">
                        <div class="w-10 h-10 bg-green-100 rounded-xl flex items-center justify-center flex-shrink-0">
                            <i class="fas fa-check text-green-600"></i>
                        </div>
                        <div>
                            <p class="font-semibold text-gray-900">Confirmez l'ajout</p>
                            <p class="text-sm text-gray-600">Appuyez sur "Ajouter" en haut à droite. L'app apparaîtra sur votre écran d'accueil !</p>
                        </div>
                    </div>
                </div>
            </div>
        `;
    } else {
        modalTitle.innerHTML = '<i class="fab fa-android mr-2"></i> Installation sur Android';
        modalBody.innerHTML = `
            <div class="space-y-6">
                <div class="bg-green-50 border border-green-200 rounded-xl p-4">
                    <div class="flex items-start gap-3">
                        <i class="fas fa-info-circle text-green-500 mt-1"></i>
                        <div>
                            <p class="font-semibold text-green-800">Compatible Chrome, Edge, Samsung Internet</p>
                            <p class="text-sm text-green-700">L'installation fonctionne sur la plupart des navigateurs Android.</p>
                        </div>
                    </div>
                </div>
                
                <div class="space-y-4">
                    <div class="flex items-start gap-4">
                        <div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center flex-shrink-0">
                            <span class="text-blue-600 font-bold">1</span>
                        </div>
                        <div>
                            <p class="font-semibold text-gray-900">Ouvrez le menu</p>
                            <p class="text-sm text-gray-600">Appuyez sur les <strong>3 points</strong> <i class="fas fa-ellipsis-v"></i> en haut à droite du navigateur</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start gap-4">
                        <div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center flex-shrink-0">
                            <span class="text-blue-600 font-bold">2</span>
                        </div>
                        <div>
                            <p class="font-semibold text-gray-900">Installez l'application</p>
                            <p class="text-sm text-gray-600">Cherchez une de ces options :</p>
                            <div class="mt-2 space-y-2">
                                <div class="bg-gray-100 rounded-lg p-3 flex items-center gap-3">
                                    <i class="fas fa-download text-blue-600"></i>
                                    <span class="text-gray-900 font-medium">Installer l'application</span>
                                </div>
                                <div class="bg-gray-100 rounded-lg p-3 flex items-center gap-3">
                                    <i class="fas fa-plus-square text-blue-600"></i>
                                    <span class="text-gray-900 font-medium">Ajouter à l'écran d'accueil</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="flex items-start gap-4">
                        <div class="w-10 h-10 bg-green-100 rounded-xl flex items-center justify-center flex-shrink-0">
                            <i class="fas fa-check text-green-600"></i>
                        </div>
                        <div>
                            <p class="font-semibold text-gray-900">C'est tout !</p>
                            <p class="text-sm text-gray-600">L'application TaPrestation sera ajoutée à votre écran d'accueil comme une vraie app !</p>
                        </div>
                    </div>
                </div>
                
                <div id="pwa-native-install" class="hidden">
                    <button onclick="installPWA()" class="w-full py-4 bg-gradient-to-r from-orange-500 to-amber-500 text-white font-bold rounded-xl hover:from-orange-600 hover:to-amber-600 transition-all shadow-lg">
                        <i class="fas fa-download mr-2"></i>
                        Installer maintenant
                    </button>
                </div>
            </div>
        `;
        
        // Check if native install is available
        if (window.deferredPrompt) {
            document.getElementById('pwa-native-install').classList.remove('hidden');
        }
    }
    
    modal.classList.remove('hidden');
    document.body.style.overflow = 'hidden';
}

function closeInstallModal(event) {
    if (event && event.target !== event.currentTarget) return;
    const modal = document.getElementById('pwa-install-modal');
    modal.classList.add('hidden');
    document.body.style.overflow = '';
}

// Capture install prompt for Android
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
    e.preventDefault();
    deferredPrompt = e;
    window.deferredPrompt = e;
    console.log('[PWA] Install prompt captured');
});

async function installPWA() {
    if (!deferredPrompt) return;
    
    deferredPrompt.prompt();
    const { outcome } = await deferredPrompt.userChoice;
    console.log('[PWA] User choice:', outcome);
    
    if (outcome === 'accepted') {
        closeInstallModal();
    }
    
    deferredPrompt = null;
    window.deferredPrompt = null;
}

// Hide install banner if already installed
window.addEventListener('appinstalled', () => {
    console.log('[PWA] App installed');
    const section = document.getElementById('pwa-install-section');
    if (section) section.style.display = 'none';
});

// Hide banner if running as PWA
if (window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone) {
    document.addEventListener('DOMContentLoaded', function() {
        const section = document.getElementById('pwa-install-section');
        if (section) section.style.display = 'none';
    });
}
</script>

<!-- Section Raccourcis visuels - Modern Cards -->
<section class="py-16 sm:py-20 md:py-28 bg-white relative">
    <!-- Subtle background -->
    <div class="absolute inset-0 bg-linear-to-br from-slate-50 via-white to-blue-50/30 opacity-60"></div>
    
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12 sm:mb-16 md:mb-20">
            <h2 class="text-3xl sm:text-4xl md:text-5xl font-black text-slate-900 mb-4 sm:mb-6">
                Ce que vous pouvez faire
            </h2>
            <p class="text-base sm:text-lg md:text-xl text-slate-600 max-w-3xl mx-auto">
                Explorez nos trois domaines d'expertise pour trouver exactement ce dont vous avez besoin
            </p>
        </div>
        
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 mb-10 sm:mb-16">
            <!-- Services -->
            <a href="{{ route('services.index') }}" class="group block h-full">
                <div class="relative h-full bg-white rounded-2xl sm:rounded-3xl p-6 sm:p-8 border border-slate-200 hover:border-blue-400 overflow-hidden transition-all duration-500 hover:shadow-2xl">
                    <!-- Animated background gradient on hover -->
                    <div class="absolute inset-0 bg-linear-to-br from-blue-500/5 to-cyan-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                    
                    <!-- Top accent -->
                    <div class="absolute top-0 left-0 w-24 h-1 bg-linear-to-r from-blue-500 to-cyan-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left"></div>
                    
                    <div class="relative">
                        <!-- Icon -->
                        <div class="mb-6 sm:mb-8">
                            <div class="w-16 h-16 sm:w-20 sm:h-20 bg-linear-to-br from-blue-100 to-blue-50 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-500">
                                <i class="fas fa-briefcase text-2xl sm:text-3xl text-blue-600"></i>
                            </div>
                        </div>
                        
                        <!-- Content -->
                        <h3 class="text-xl sm:text-2xl font-bold text-slate-900 mb-3 sm:mb-4 group-hover:text-blue-600 transition-colors">
                            Services Pro
                        </h3>
                        <p class="text-sm sm:text-base text-slate-600 mb-6 sm:mb-8 leading-relaxed">
                            Trouvez les experts pour tous vos projets, du consulting au développement
                        </p>
                        
                        <!-- CTA -->
                        <div class="inline-flex items-center text-blue-600 font-semibold text-sm sm:text-base group-hover:text-blue-700 transition-colors">
                            Parcourir
                            <i class="fas fa-arrow-right ml-2 group-hover:translate-x-2 transition-transform"></i>
                        </div>
                    </div>
                </div>
            </a>
            
            <!-- Matériel à louer -->
            <a href="{{ route('equipment.index') }}" class="group block h-full">
                <div class="relative h-full bg-white rounded-2xl sm:rounded-3xl p-6 sm:p-8 border border-slate-200 hover:border-emerald-400 overflow-hidden transition-all duration-500 hover:shadow-2xl">
                    <!-- Animated background gradient on hover -->
                    <div class="absolute inset-0 bg-linear-to-br from-emerald-500/5 to-teal-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                    
                    <!-- Top accent -->
                    <div class="absolute top-0 left-0 w-24 h-1 bg-linear-to-r from-emerald-500 to-teal-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left"></div>
                    
                    <div class="relative">
                        <!-- Icon -->
                        <div class="mb-6 sm:mb-8">
                            <div class="w-16 h-16 sm:w-20 sm:h-20 bg-linear-to-br from-emerald-100 to-emerald-50 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-500">
                                <i class="fas fa-tools text-2xl sm:text-3xl text-emerald-600"></i>
                            </div>
                        </div>
                        
                        <!-- Content -->
                        <h3 class="text-xl sm:text-2xl font-bold text-slate-900 mb-3 sm:mb-4 group-hover:text-emerald-600 transition-colors">
                            Location Équipement
                        </h3>
                        <p class="text-sm sm:text-base text-slate-600 mb-6 sm:mb-8 leading-relaxed">
                            Louez du matériel professionnel de qualité pour vos chantiers
                        </p>
                        
                        <!-- CTA -->
                        <div class="inline-flex items-center text-emerald-600 font-semibold text-sm sm:text-base group-hover:text-emerald-700 transition-colors">
                            Découvrir
                            <i class="fas fa-arrow-right ml-2 group-hover:translate-x-2 transition-transform"></i>
                        </div>
                    </div>
                </div>
            </a>
            
            <!-- Vente urgente -->
            <a href="{{ route('urgent-sales.index') }}" class="group block h-full">
                <div class="relative h-full bg-white rounded-2xl sm:rounded-3xl p-6 sm:p-8 border border-slate-200 hover:border-orange-400 overflow-hidden transition-all duration-500 hover:shadow-2xl">
                    <!-- Animated background gradient on hover -->
                    <div class="absolute inset-0 bg-linear-to-br from-orange-500/5 to-red-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                    
                    <!-- Top accent -->
                    <div class="absolute top-0 left-0 w-24 h-1 bg-linear-to-r from-orange-500 to-red-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left"></div>
                    
                    <div class="relative">
                        <!-- Icon -->
                        <div class="mb-6 sm:mb-8">
                            <div class="w-16 h-16 sm:w-20 sm:h-20 bg-linear-to-br from-orange-100 to-red-50 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-500">
                                <i class="fas fa-zap text-2xl sm:text-3xl text-orange-600"></i>
                            </div>
                        </div>
                        
                        <!-- Content -->
                        <h3 class="text-xl sm:text-2xl font-bold text-slate-900 mb-3 sm:mb-4 group-hover:text-orange-600 transition-colors">
                            Ventes Flash
                        </h3>
                        <p class="text-sm sm:text-base text-slate-600 mb-6 sm:mb-8 leading-relaxed">
                            Des offres exceptionnelles et limitées sur des produits sélectionnés
                        </p>
                        
                        <!-- CTA -->
                        <div class="inline-flex items-center text-orange-600 font-semibold text-sm sm:text-base group-hover:text-orange-700 transition-colors">
                            Explorer
                            <i class="fas fa-arrow-right ml-2 group-hover:translate-x-2 transition-transform"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>
</section>

<!-- Section Pourquoi choisir TaPrestation - Features Grid -->
<section class="py-16 sm:py-20 md:py-28 bg-linear-to-br from-slate-900 via-slate-800 to-slate-900 relative overflow-hidden">
    <!-- Decorative elements -->
    <div class="absolute top-10 right-10 w-72 h-72 bg-blue-500/10 rounded-full blur-3xl"></div>
    <div class="absolute bottom-10 left-10 w-72 h-72 bg-cyan-500/10 rounded-full blur-3xl"></div>
    
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12 sm:mb-16 md:mb-20">
            <h2 class="text-3xl sm:text-4xl md:text-5xl font-black text-blue-200 mb-4 sm:mb-6">
                Pourquoi TaPrestation ?
            </h2>
            <p class="text-base sm:text-lg md:text-xl text-slate-100 max-w-3xl mx-auto">
                Découvrez les avantages qui font de TaPrestation la plateforme de référence
            </p>
        </div>
        
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
            <!-- Feature 1 -->
            <div class="group relative">
                <div class="absolute inset-0 bg-linear-to-r from-blue-500 to-cyan-500 rounded-2xl opacity-0 group-hover:opacity-100 transition-all duration-300 blur-xl"></div>
                <div class="relative bg-slate-800 border border-slate-700 group-hover:border-blue-500/50 rounded-2xl p-6 sm:p-8 transition-all duration-300">
                    <div class="w-12 h-12 sm:w-16 sm:h-16 bg-linear-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center mb-4 sm:mb-6 group-hover:scale-110 transition-transform">
                        <i class="fas fa-shield-alt text-lg sm:text-2xl text-cyan-50"></i>
                    </div>
                    <h3 class="text-lg sm:text-xl font-bold text-blue-200 mb-2 sm:mb-3">Sécurité garantie</h3>
                    <p class="text-sm sm:text-base text-slate-200">Tous nos prestataires sont vérifiés et leurs identités confirmées pour votre tranquillité</p>
                </div>
            </div>
            
            <!-- Feature 2 -->
            <div class="group relative">
                <div class="absolute inset-0 bg-linear-to-r from-emerald-500 to-teal-500 rounded-2xl opacity-0 group-hover:opacity-100 transition-all duration-300 blur-xl"></div>
                <div class="relative bg-slate-800 border border-slate-700 group-hover:border-emerald-500/50 rounded-2xl p-6 sm:p-8 transition-all duration-300">
                    <div class="w-12 h-12 sm:w-16 sm:h-16 bg-linear-to-br from-emerald-500 to-emerald-600 rounded-full flex items-center justify-center mb-4 sm:mb-6 group-hover:scale-110 transition-transform">
                        <i class="fas fa-calendar-check text-lg sm:text-2xl text-cyan-50"></i>
                    </div>
                    <h3 class="text-lg sm:text-xl font-bold text-blue-200 mb-2 sm:mb-3">Réservation simple</h3>
                    <p class="text-sm sm:text-base text-slate-200">Planifiez et réservez vos services directement en ligne en quelques clics</p>
                </div>
            </div>
            
            <!-- Feature 3 -->
            <div class="group relative">
                <div class="absolute inset-0 bg-linear-to-r from-purple-500 to-pink-500 rounded-2xl opacity-0 group-hover:opacity-100 transition-all duration-300 blur-xl"></div>
                <div class="relative bg-slate-800 border border-slate-700 group-hover:border-purple-500/50 rounded-2xl p-6 sm:p-8 transition-all duration-300">
                    <div class="w-12 h-12 sm:w-16 sm:h-16 bg-linear-to-br from-purple-500 to-purple-600 rounded-full flex items-center justify-center mb-4 sm:mb-6 group-hover:scale-110 transition-transform">
                        <i class="fas fa-comments text-lg sm:text-2xl text-cyan-50"></i>
                    </div>
                    <h3 class="text-lg sm:text-xl font-bold text-blue-200 mb-2 sm:mb-3">Messagerie intégrée</h3>
                    <p class="text-sm sm:text-base text-slate-200">Communiquez facilement avec vos prestataires sans quitter la plateforme</p>
                </div>
            </div>
            
            <!-- Feature 4 -->
            <div class="group relative">
                <div class="absolute inset-0 bg-linear-to-r from-yellow-500 to-orange-500 rounded-2xl opacity-0 group-hover:opacity-100 transition-all duration-300 blur-xl"></div>
                <div class="relative bg-slate-800 border border-slate-700 group-hover:border-yellow-500/50 rounded-2xl p-6 sm:p-8 transition-all duration-300">
                    <div class="w-12 h-12 sm:w-16 sm:h-16 bg-linear-to-br from-yellow-500 to-yellow-600 rounded-full flex items-center justify-center mb-4 sm:mb-6 group-hover:scale-110 transition-transform">
                        <i class="fas fa-star text-lg sm:text-2xl text-cyan-50"></i>
                    </div>
                    <h3 class="text-lg sm:text-xl font-bold text-blue-200 mb-2 sm:mb-3">Avis authentiques</h3>
                    <p class="text-sm sm:text-base text-slate-200">Consultez les avis vérifiés de nos clients pour faire le bon choix</p>
                </div>
            </div>
            
            <!-- Feature 5 -->
            <div class="group relative">
                <div class="absolute inset-0 bg-linear-to-r from-red-500 to-pink-500 rounded-2xl opacity-0 group-hover:opacity-100 transition-all duration-300 blur-xl"></div>
                <div class="relative bg-slate-800 border border-slate-700 group-hover:border-red-500/50 rounded-2xl p-6 sm:p-8 transition-all duration-300">
                    <div class="w-12 h-12 sm:w-16 sm:h-16 bg-linear-to-br from-red-500 to-red-600 rounded-full flex items-center justify-center mb-4 sm:mb-6 group-hover:scale-110 transition-transform">
                        <i class="fas fa-headset text-lg sm:text-2xl text-cyan-50"></i>
                    </div>
                    <h3 class="text-lg sm:text-xl font-bold text-blue-200 mb-2 sm:mb-3">Support expert</h3>
                    <p class="text-sm sm:text-base text-slate-200">Notre équipe vous accompagne à chaque étape, 7 jours sur 7</p>
                </div>
            </div>
            
            <!-- Feature 6 -->
            <div class="group relative">
                <div class="absolute inset-0 bg-linear-to-r from-indigo-500 to-blue-500 rounded-2xl opacity-0 group-hover:opacity-100 transition-all duration-300 blur-xl"></div>
                <div class="relative bg-slate-800 border border-slate-700 group-hover:border-indigo-500/50 rounded-2xl p-6 sm:p-8 transition-all duration-300">
                    <div class="w-12 h-12 sm:w-16 sm:h-16 bg-linear-to-br from-indigo-500 to-indigo-600 rounded-full flex items-center justify-center mb-4 sm:mb-6 group-hover:scale-110 transition-transform">
                        <i class="fas fa-bolt text-lg sm:text-2xl text-cyan-50"></i>
                    </div>
                    <h3 class="text-lg sm:text-xl font-bold text-blue-200 mb-2 sm:mb-3">Réponse rapide</h3>
                    <p class="text-sm sm:text-base text-slate-200">Recevez des devis et des réponses en moins de 24 heures</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Section Prestataires en vedette - Premium Cards -->
<section class="py-16 sm:py-20 md:py-28 bg-white relative">
    <!-- Background elements -->
    <div class="absolute inset-0 bg-linear-to-br from-slate-50 via-white to-blue-50/30 opacity-50"></div>
    
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12 sm:mb-16 md:mb-20">
            <h2 class="text-3xl sm:text-4xl md:text-5xl font-black text-slate-900 mb-4 sm:mb-6">
                Nos prestataires vedettes
            </h2>
            <p class="text-base sm:text-lg md:text-xl text-slate-600 max-w-3xl mx-auto">
                Découvrez les experts les mieux notés et vérifiés de notre communauté
            </p>
        </div>
        
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
            @foreach($featuredPrestataires as $prestataire)
            <div class="group relative h-full">
                <!-- Glow effect on hover -->
                <div class="absolute inset-0 bg-linear-to-br from-blue-500/20 to-cyan-500/20 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 blur-xl"></div>
                
                <div class="relative h-full bg-white border border-slate-200 group-hover:border-blue-400 rounded-2xl overflow-hidden transition-all duration-300">
                    <!-- Header with gradient -->
                    <div class="h-24 bg-linear-to-r from-blue-500 to-cyan-500 relative overflow-hidden">
                        <!-- Decorative pattern -->
                        <div class="absolute inset-0 opacity-10">
                            <div class="absolute w-40 h-40 bg-white rounded-full -top-20 -right-20"></div>
                            <div class="absolute w-32 h-32 bg-white rounded-full -bottom-16 -left-16"></div>
                        </div>
                    </div>
                    
                    <!-- Content -->
                    <div class="relative -mt-12 px-6 pt-0 pb-6 text-center">
                        <!-- Avatar -->
                        <div class="relative z-10 mb-4">
                            <div class="w-24 h-24 sm:w-28 sm:h-28 rounded-2xl mx-auto bg-white border-4 border-slate-100 flex items-center justify-center overflow-hidden group-hover:shadow-xl transition-shadow">
                                @if($prestataire->photo)
                                    <img src="{{ asset('storage/' . $prestataire->photo) }}" alt="{{ $prestataire->user->name }}" class="w-full h-full object-cover">
                                @elseif($prestataire->user->avatar)
                                    <img src="{{ asset('storage/' . $prestataire->user->avatar) }}" alt="{{ $prestataire->user->name }}" class="w-full h-full object-cover">
                                @else
                                    <span class="text-2xl sm:text-3xl font-bold bg-linear-to-br from-blue-500 to-cyan-500 text-cyan-50 rounded-lg w-full h-full flex items-center justify-center">{{ strtoupper(substr($prestataire->user->name, 0, 1)) }}</span>
                                @endif
                            </div>
                        </div>
                        
                        <!-- Name and badge -->
                        <div class="flex items-center justify-center gap-2 mb-2">
                            <h3 class="text-lg sm:text-xl font-bold text-slate-900">{{ $prestataire->user->name }}</h3>
                            @if($prestataire->isVerified())
                                <span class="inline-flex items-center gap-1 px-2 py-1 bg-emerald-100 text-emerald-700 rounded-full text-xs font-semibold">
                                    <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                                    </svg>
                                    Vérifié
                                </span>
                            @endif
                        </div>
                        
                        <!-- Specialty -->
                        <p class="text-xs sm:text-sm text-slate-500 mb-4">{{ $prestataire->speciality ?? 'Spécialité non définie' }}</p>
                        
                        <!-- Rating -->
                        <div class="flex items-center justify-center gap-2 mb-6">
                            <div class="flex items-center">
                                @for($i = 0; $i < 5; $i++)
                                    <svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                    </svg>
                                @endfor
                            </div>
                            <span class="text-sm font-semibold text-slate-700">4.8 (24 avis)</span>
                        </div>
                        
                        <!-- CTA -->
                        <a href="{{ route('prestataires.show', $prestataire) }}" class="inline-block w-full bg-linear-to-r from-blue-500 to-cyan-500 text-cyan-50 font-bold px-6 py-3 rounded-xl hover:shadow-lg transition-all duration-300 group-hover:scale-105 text-sm sm:text-base">
                            Voir le profil
                        </a>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        
        <!-- View all button -->
        <div class="text-center mt-12 sm:mt-16">
            <a href="{{ route('prestataires.index') }}" class="inline-flex items-center gap-2 px-8 py-4 bg-linear-to-r from-blue-500 to-cyan-500 text-cyan-50 font-bold rounded-xl hover:shadow-xl transition-all duration-300 hover:scale-105">
                Voir tous les prestataires
                <i class="fas fa-arrow-right"></i>
            </a>
        </div>
    </div>
</section>

<!-- Footer - Modern -->
<footer class="bg-linear-to-br from-slate-900 via-slate-800 to-slate-900 text-cyan-300 relative overflow-hidden">
    <!-- Decorative elements -->
    <div class="absolute top-0 right-0 w-96 h-96 bg-blue-500/5 rounded-full blur-3xl -mr-48 -mt-48"></div>
    <div class="absolute bottom-0 left-0 w-96 h-96 bg-cyan-500/5 rounded-full blur-3xl -ml-48 -mb-48"></div>
    
    <!-- Section principale -->
    <div class="py-16 sm:py-20 relative">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 sm:gap-12 mb-12">
                <!-- À propos -->
                <div>
                    <div class="flex items-center space-x-3 mb-6">
                        <div class="w-10 h-10 bg-linear-to-br from-blue-500 to-cyan-500 rounded-lg flex items-center justify-center">
                            <i class="fas fa-handshake text-cyan-50"></i>
                        </div>
                        <h3 class="text-2xl font-black text-blue-200">TaPrestation</h3>
                    </div>
                    <p class="text-slate-200 text-sm leading-relaxed mb-6">
                        La plateforme innovante qui connecte les meilleurs prestataires avec les clients qui ont besoin de leurs talents.
                    </p>
                    <div class="flex space-x-4">
                        <a href="#" class="w-10 h-10 bg-blue-600 hover:bg-blue-700 rounded-lg flex items-center justify-center transition-all duration-200 hover:scale-110">
                            <i class="fab fa-facebook-f text-cyan-50"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-cyan-500 hover:bg-cyan-600 rounded-lg flex items-center justify-center transition-all duration-200 hover:scale-110">
                            <i class="fab fa-twitter text-cyan-50"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-blue-700 hover:bg-blue-800 rounded-lg flex items-center justify-center transition-all duration-200 hover:scale-110">
                            <i class="fab fa-linkedin-in text-cyan-50"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-pink-600 hover:bg-pink-700 rounded-lg flex items-center justify-center transition-all duration-200 hover:scale-110">
                            <i class="fab fa-instagram text-cyan-50"></i>
                        </a>
                    </div>
                </div>
                
                <!-- Quick Links -->
                <div>
                    <h4 class="text-lg font-bold mb-6 text-blue-200">Plateforme</h4>
                    <ul class="space-y-3">
                        <li><a href="{{ route('prestataires.index') }}" class="text-slate-300 hover:text-blue-400 transition-colors text-sm">Trouver des prestataires</a></li>
                        <li><a href="{{ route('services.index') }}" class="text-slate-300 hover:text-blue-400 transition-colors text-sm">Découvrir les services</a></li>
                        <li><a href="{{ route('equipment.index') }}" class="text-slate-300 hover:text-blue-400 transition-colors text-sm">Louer du matériel</a></li>
                        <li><a href="{{ route('urgent-sales.index') }}" class="text-slate-300 hover:text-blue-400 transition-colors text-sm">Ventes flash</a></li>
                    </ul>
                </div>
                
                <!-- Ressources -->
                <div>
                    <h4 class="text-lg font-bold mb-6 text-blue-200">Ressources</h4>
                    <ul class="space-y-3">
                        <li><a href="{{ route('videos.feed') }}" class="text-slate-300 hover:text-blue-400 transition-colors text-sm">Vidéos</a></li>
                        <li><a href="{{ route('faq') }}" class="text-slate-300 hover:text-blue-400 transition-colors text-sm">FAQ</a></li>
                        <li><a href="{{ route('contact') }}" class="text-slate-300 hover:text-blue-400 transition-colors text-sm">Contactez-nous</a></li>
                    </ul>
                </div>
                
                <!-- Légal -->
                <div>
                    <h4 class="text-lg font-bold mb-6 text-blue-200">Légal</h4>
                    <ul class="space-y-3">
                        <li><a href="{{ route('terms') }}" class="text-slate-300 hover:text-blue-400 transition-colors text-sm">Conditions d'utilisation</a></li>
                        <li><a href="{{ route('privacy') }}" class="text-slate-300 hover:text-blue-400 transition-colors text-sm">Politique de confidentialité</a></li>
                        <li><a href="{{ route('cookies') }}" class="text-slate-300 hover:text-blue-400 transition-colors text-sm">Politique de cookies</a></li>
                        <li><a href="{{ route('mentions') }}" class="text-slate-300 hover:text-blue-400 transition-colors text-sm">Mentions légales</a></li>
                    </ul>
                </div>
            </div>
            
            <!-- Divider -->
            <div class="border-t border-slate-700/50"></div>
            
            <!-- Newsletter Section -->
            <div class="py-8 grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
                <div>
                    <h4 class="text-lg font-bold mb-2 text-blue-200">Restez informé</h4>
                    <p class="text-slate-200 text-sm">Recevez les meilleures offres et actualités directement dans votre boîte mail</p>
                </div>
                <div class="flex gap-2">
                    <input type="email" placeholder="votre@email.com" class="flex-1 bg-slate-700 text-cyan-100 px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm placeholder-slate-500">
                    <button class="bg-linear-to-r from-blue-500 to-cyan-500 text-cyan-50 font-bold px-6 py-3 rounded-lg hover:shadow-lg transition-all duration-300 hover:scale-105 text-sm">S'inscrire</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Section copyright -->
    <div class="border-t border-slate-700/50 bg-slate-900/50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
                <div class="text-cyan-300 text-sm text-center md:text-left flex items-center gap-2">
                    <i class="fas fa-copyright"></i>
                    <span>{{ date('Y') }} TaPrestation. Tous droits réservés.</span>
                </div>
                <div class="flex flex-wrap items-center justify-center gap-6 text-sm text-slate-300">
                    <span class="flex items-center gap-2 hover:text-blue-300 transition-colors">
                        <i class="fas fa-map-marker-alt text-blue-400"></i>
                        France
                    </span>
                    <span class="flex items-center gap-2 hover:text-green-300 transition-colors">
                        <i class="fas fa-phone text-green-400"></i>
                        Support 24/7
                    </span>
                    <span class="flex items-center gap-2 hover:text-yellow-300 transition-colors">
                        <i class="fas fa-shield-alt text-yellow-400"></i>
                        Sécurisé
                    </span>
                </div>
            </div>
        </div>
    </div>
</footer>

<!-- Modal pour les photos -->
<div id="photoModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black bg-opacity-75">
    <div class="flex items-center justify-center w-full h-full">
    <div class="max-w-4xl max-h-full p-2 sm:p-4">
        <button onclick="closePhotoModal()" class="absolute top-2 sm:top-4 right-2 sm:right-4 text-cyan-200 hover:text-cyan-300 focus:outline-none">
            <i class="fas fa-times text-xl sm:text-2xl"></i>
        </button>
        <img id="modalImage" src="" alt="Photo agrandie" class="max-w-full max-h-[80vh] object-contain">
        <div id="modalCaption" class="text-cyan-200 text-center mt-2 sm:mt-4 text-sm sm:text-base"></div>
    </div>
</div>

<style>
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes slideInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes glow {
        0%, 100% {
            text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
        }
        50% {
            text-shadow: 0 0 20px rgba(59, 130, 246, 0.8);
        }
    }
    
    @keyframes float {
        0%, 100% {
            transform: translateY(0px);
        }
        50% {
            transform: translateY(-10px);
        }
    }
    
    .animate-fadeIn {
        animation: fadeIn 0.6s ease-out forwards;
    }
    
    .animate-slideInUp {
        animation: slideInUp 0.8s ease-out forwards;
    }
    
    .animate-glow {
        animation: glow 2s ease-in-out infinite;
    }
    
    .animate-float {
        animation: float 3s ease-in-out infinite;
    }
    
    /* Smooth transitions */
    * {
        transition: all 300ms !important;
    }
    
    /* Custom scrollbar */
    ::-webkit-scrollbar {
        width: 10px;
    }
    
    ::-webkit-scrollbar-track {
        background: rgba(15, 23, 42, 0.1);
    }
    
    ::-webkit-scrollbar-thumb {
        background: rgba(59, 130, 246, 0.5);
        border-radius: 5px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background: rgba(59, 130, 246, 0.8);
    }
    
    /* Button effects */
    .hero-button {
        position: relative;
        overflow: hidden;
    }
    
    .hero-button::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
    }
    
    .hero-button:active::before {
        width: 300px;
        height: 300px;
    }
    
    /* Glass morphism effect */
    .glass {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    /* Gradient text */
    .bg-gradient-text {
        background: linear-gradient(to right, #3b82f6, #06b6d4);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
</style>

<script>
// Modal pour les photos
function openPhotoModal(imageSrc, caption) {
    const modal = document.getElementById('photoModal');
    const modalImage = document.getElementById('modalImage');
    const modalCaption = document.getElementById('modalCaption');
    
    modalImage.src = imageSrc;
    modalCaption.textContent = caption;
    modal.classList.remove('hidden');
    
    // Fermer avec Escape
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closePhotoModal();
        }
    });
}

function closePhotoModal() {
    const modal = document.getElementById('photoModal');
    modal.classList.add('hidden');
}

// Fermer le modal en cliquant à l'extérieur
document.getElementById('photoModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closePhotoModal();
    }
});
// Autocomplete functionality for location input
const locationInput = document.getElementById('search-location');
const suggestionsContainer = document.getElementById('location-suggestions');
let currentFocus = -1;
let searchTimeout;

if (locationInput) {
    // Handle input changes
    locationInput.addEventListener('input', function() {
        const query = this.value.trim();
        
        // Clear previous timeout
        clearTimeout(searchTimeout);
        
        if (query.length < 2) {
            hideSuggestions();
            return;
        }
        
        // Debounce the search to avoid too many API calls
        searchTimeout = setTimeout(() => {
            fetchLocationSuggestions(query);
        }, 300);
    });
    
    // Handle keyboard navigation
    locationInput.addEventListener('keydown', function(e) {
        const suggestions = suggestionsContainer.querySelectorAll('.suggestion-item');
        
        if (e.key === 'ArrowDown') {
            e.preventDefault();
            currentFocus++;
            if (currentFocus >= suggestions.length) currentFocus = 0;
            setActiveSuggestion(suggestions);
        } else if (e.key === 'ArrowUp') {
            e.preventDefault();
            currentFocus--;
            if (currentFocus < 0) currentFocus = suggestions.length - 1;
            setActiveSuggestion(suggestions);
        } else if (e.key === 'Enter') {
            e.preventDefault();
            if (currentFocus > -1 && suggestions[currentFocus]) {
                suggestions[currentFocus].click();
            }
        } else if (e.key === 'Escape') {
            hideSuggestions();
            currentFocus = -1;
        }
    });
    
    // Handle focus events
    locationInput.addEventListener('focus', function() {
        const query = this.value.trim();
        if (query.length >= 2) {
            fetchLocationSuggestions(query);
        }
    });
}

// Hide suggestions when clicking outside
document.addEventListener('click', function(e) {
    if (locationInput && suggestionsContainer && 
        !locationInput.contains(e.target) && !suggestionsContainer.contains(e.target)) {
        hideSuggestions();
    }
});

function fetchLocationSuggestions(query) {
    console.log('Fetching suggestions for:', query); // Debug log
    fetch(`/api/public/geolocation/cities?search=${encodeURIComponent(query)}&limit=10`)
        .then(response => {
            console.log('API Response status:', response.status); // Debug log
            return response.json();
        })
        .then(data => {
            console.log('API Data received:', data); // Debug log
            if (data.success && data.data && data.data.length > 0) {
                displaySuggestions(data.data, query);
                if (data.warning) {
                    console.warn('Location API warning:', data.warning);
                }
            } else {
                displayNoSuggestions();
            }
        })
        .catch(error => {
            console.error('Error fetching location suggestions:', error);
            displayNoSuggestions();
        });
}

function displaySuggestions(suggestions, query) {
    let html = '';
    
    suggestions.forEach((suggestion, index) => {
        // Determine the display text and highlight matching parts
        let displayText = suggestion.text || suggestion.city;
        const regex = new RegExp(`(${escapeRegExp(query)})`, 'gi');
        const highlightedText = displayText.replace(regex, '<strong>$1</strong>');
        
        // Determine icon and styling based on source
        const isLocal = suggestion.source === 'local';
        const iconColor = isLocal ? 'text-blue-500' : 'text-green-500';
        const bgHover = isLocal ? 'hover:bg-blue-50' : 'hover:bg-green-50';
        
        html += `
            <div class="suggestion-item px-3 sm:px-4 py-2 sm:py-3 ${bgHover} cursor-pointer border-b border-gray-100 last:border-b-0" 
                 data-suggestion='${JSON.stringify(suggestion).replace(/'/g, "&apos;")}' 
                 onclick="selectLocationFromData(this)">
                <div class="flex items-center">
                    <svg class="w-3 h-3 sm:w-4 sm:h-4 ${iconColor} mr-2 sm:mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                    </svg>
                    <div class="flex-1 min-w-0">
                        <div class="text-xs sm:text-sm text-gray-900 truncate">${highlightedText}</div>
                        ${suggestion.source === 'worldwide' ? '<div class="text-xs text-gray-500 mt-0.5">Suggestion mondiale</div>' : ''}
                    </div>
                </div>
            </div>
        `;
    });
    
    suggestionsContainer.innerHTML = html;
    suggestionsContainer.classList.remove('hidden');
    currentFocus = -1;
}

function displayNoSuggestions() {
    suggestionsContainer.innerHTML = `
        <div class="px-3 sm:px-4 py-2 sm:py-3 text-gray-500 text-xs sm:text-sm">
            <div class="flex items-center">
                <svg class="w-3 h-3 sm:w-4 sm:h-4 text-gray-400 mr-2 sm:mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                </svg>
                Aucune ville trouvée
            </div>
        </div>
    `;
    suggestionsContainer.classList.remove('hidden');
}

function selectLocationFromData(element) {
    const suggestion = JSON.parse(element.getAttribute('data-suggestion'));
    selectLocation(suggestion);
}

function selectLocation(suggestion) {
    // Handle both old format (string) and new format (object)
    let locationText;
    
    if (typeof suggestion === 'string') {
        locationText = suggestion;
    } else if (suggestion && suggestion.text) {
        locationText = suggestion.text;
    } else if (suggestion && suggestion.city) {
        locationText = suggestion.city;
        if (suggestion.postal_code) {
            locationText += ' (' + suggestion.postal_code + ')';
        }
        if (suggestion.country && suggestion.country !== 'France') {
            locationText += ', ' + suggestion.country;
        }
    } else {
        locationText = 'Localisation sélectionnée';
    }
    
    locationInput.value = locationText;
    hideSuggestions();
    currentFocus = -1;
    
    // Optional: Focus on the search query input after selection
    const searchQueryInput = document.getElementById('search-query');
    if (searchQueryInput) {
        searchQueryInput.focus();
    }
}

function hideSuggestions() {
    if (suggestionsContainer) {
        suggestionsContainer.classList.add('hidden');
        suggestionsContainer.innerHTML = '';
    }
}

function setActiveSuggestion(suggestions) {
    // Remove active class from all suggestions
    suggestions.forEach(s => s.classList.remove('bg-blue-50', 'bg-green-50'));
    
    // Add active class to current suggestion
    if (currentFocus >= 0 && suggestions[currentFocus]) {
        suggestions[currentFocus].classList.add('bg-blue-100');
    }
}

function escapeRegExp(string) {
    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}
</script>

@endsection