@extends('layouts.app')

{{-- ============ SEO ULTRA OPTIMISÉ POUR LA PAGE D'ACCUEIL ============ --}}

{{-- PERFORMANCE: Preload hero assets pour LCP --}}
@section('preload_hero')
<link rel="preload" href="{{ asset('images/og-image.png') }}" as="image" type="image/png" fetchpriority="high">
@endsection

@section('title', 'TaPrestation - Trouvez un Prestataire de Services près de chez vous | Coiffeur, Ménage, Bricolage, Traiteur, DJ, Photographe, Location Matériel')

@section('meta_description', 'TaPrestation : trouvez et réservez un prestataire de services en 2 clics. Coiffeur à domicile, femme de ménage, bricoleur, plombier, électricien, traiteur mariage, photographe, DJ, location sono, décoration événement, coach sportif, cours particuliers. Avis vérifiés ⭐ Paiement sécurisé 🔒 Devis gratuit. Plus de 10 000 professionnels partout en France.')

@section('meta_keywords', 'prestataire de services, trouver un prestataire, réservation en ligne, coiffeur à domicile, coiffeuse à domicile, femme de ménage, aide ménagère, bricoleur pas cher, plombier urgent, électricien, traiteur mariage, traiteur anniversaire, photographe mariage, photographe portrait, DJ mariage, DJ soirée, location sono, location matériel événement, décorateur mariage, coach sportif à domicile, prof particulier, cours de soutien, jardinier, paysagiste, peintre, déménageur, chauffeur privé, baby-sitter, garde enfant, aide à domicile, artisan, professionnel, freelance, auto-entrepreneur, prestation service, service à la personne, France, Paris, Lyon, Marseille, Toulouse, Bordeaux, Nantes, Nice, Lille, Strasbourg, TaPrestation')

@section('canonical', config('app.url', 'https://taprestation.com'))

@section('og_title', 'TaPrestation - Trouvez le prestataire idéal près de chez vous')
@section('og_description', 'Réservez un coiffeur, ménage, bricoleur, traiteur, photographe, DJ et +100 types de services. Avis vérifiés, paiement sécurisé, devis gratuit.')
@section('og_type', 'website')

@section('twitter_title', 'TaPrestation - +10 000 prestataires de services en France')
@section('twitter_description', 'Trouvez un pro près de chez vous : coiffure, ménage, bricolage, événementiel, cours... Réservez en ligne !')

@section('json_ld')
<script type="application/ld+json">
{
    "@@context": "https://schema.org",
    "@@graph": [
        {
            "@@type": "WebSite",
            "@@id": "{{ config('app.url', 'https://taprestation.com') }}/#website",
            "name": "TaPrestation",
            "url": "{{ config('app.url', 'https://taprestation.com') }}",
            "description": "Plateforme de mise en relation entre clients et prestataires de services en France",
            "inLanguage": "fr-FR",
            "potentialAction": {
                "@@type": "SearchAction",
                "target": {
                    "@@type": "EntryPoint",
                    "urlTemplate": "{{ url('/services') }}?search={search_term_string}"
                },
                "query-input": "required name=search_term_string"
            }
        },
        {
            "@@type": "Organization",
            "@@id": "{{ config('app.url', 'https://taprestation.com') }}/#organization",
            "name": "TaPrestation",
            "url": "{{ config('app.url', 'https://taprestation.com') }}",
            "logo": {
                "@@type": "ImageObject",
                "url": "{{ asset('images/logo.png') }}",
                "width": 512,
                "height": 512
            },
            "description": "TaPrestation est la plateforme leader en France pour trouver des prestataires de services qualifiés",
            "foundingDate": "2024",
            "founder": {
                "@@type": "Person",
                "name": "TaPrestation Team"
            },
            "contactPoint": [
                {
                    "@@type": "ContactPoint",
                    "contactType": "customer service",
                    "availableLanguage": ["French", "English"],
                    "areaServed": "FR"
                }
            ],
            "sameAs": [
                "https://www.facebook.com/taprestation",
                "https://www.instagram.com/taprestation",
                "https://twitter.com/taprestation",
                "https://www.linkedin.com/company/taprestation"
            ]
        },
        {
            "@@type": "WebPage",
            "@@id": "{{ config('app.url', 'https://taprestation.com') }}/#webpage",
            "url": "{{ config('app.url', 'https://taprestation.com') }}",
            "name": "TaPrestation - Trouvez des prestataires de services partout en France",
            "description": "Réservez un coiffeur, femme de ménage, bricoleur, traiteur, photographe, DJ et des centaines d'autres services. Paiement sécurisé, avis vérifiés.",
            "inLanguage": "fr-FR",
            "isPartOf": {"@@id": "{{ config('app.url', 'https://taprestation.com') }}/#website"},
            "about": {"@@id": "{{ config('app.url', 'https://taprestation.com') }}/#organization"},
            "primaryImageOfPage": {
                "@@type": "ImageObject",
                "url": "{{ asset('images/og-image.png') }}"
            }
        },
        {
            "@@type": "LocalBusiness",
            "@@id": "{{ config('app.url', 'https://taprestation.com') }}/#localbusiness",
            "name": "TaPrestation",
            "description": "Plateforme de réservation de services à la personne et aux entreprises",
            "url": "{{ config('app.url', 'https://taprestation.com') }}",
            "priceRange": "€-€€€",
            "image": "{{ asset('images/logo.png') }}",
            "address": {
                "@@type": "PostalAddress",
                "addressCountry": "FR",
                "addressLocality": "France"
            },
            "geo": {
                "@@type": "GeoCoordinates",
                "latitude": "46.603354",
                "longitude": "1.888334"
            },
            "areaServed": [
                {"@@type": "Country", "name": "France"},
                {"@@type": "City", "name": "Paris"},
                {"@@type": "City", "name": "Lyon"},
                {"@@type": "City", "name": "Marseille"},
                {"@@type": "City", "name": "Toulouse"},
                {"@@type": "City", "name": "Bordeaux"},
                {"@@type": "City", "name": "Nantes"},
                {"@@type": "City", "name": "Nice"},
                {"@@type": "City", "name": "Lille"}
            ],
            "hasOfferCatalog": {
                "@@type": "OfferCatalog",
                "name": "Services disponibles",
                "itemListElement": [
                    {"@@type": "OfferCatalog", "name": "Coiffure à domicile"},
                    {"@@type": "OfferCatalog", "name": "Ménage et nettoyage"},
                    {"@@type": "OfferCatalog", "name": "Bricolage et réparations"},
                    {"@@type": "OfferCatalog", "name": "Traiteur événementiel"},
                    {"@@type": "OfferCatalog", "name": "Photographe professionnel"},
                    {"@@type": "OfferCatalog", "name": "DJ et animation"},
                    {"@@type": "OfferCatalog", "name": "Location de matériel"},
                    {"@@type": "OfferCatalog", "name": "Décoration événement"},
                    {"@@type": "OfferCatalog", "name": "Coach sportif"},
                    {"@@type": "OfferCatalog", "name": "Cours particuliers"},
                    {"@@type": "OfferCatalog", "name": "Jardinage"},
                    {"@@type": "OfferCatalog", "name": "Déménagement"},
                    {"@@type": "OfferCatalog", "name": "Chauffeur privé"},
                    {"@@type": "OfferCatalog", "name": "Garde d'enfants"}
                ]
            },
            "aggregateRating": {
                "@@type": "AggregateRating",
                "ratingValue": "4.8",
                "reviewCount": "2847",
                "bestRating": "5",
                "worstRating": "1"
            }
        },
        {
            "@@type": "FAQPage",
            "mainEntity": [
                {
                    "@@type": "Question",
                    "name": "Comment trouver un prestataire sur TaPrestation ?",
                    "acceptedAnswer": {
                        "@@type": "Answer",
                        "text": "C'est simple ! Utilisez la barre de recherche pour trouver le service souhaité (coiffeur, ménage, bricoleur...), filtrez par localisation et consultez les profils des prestataires avec leurs avis vérifiés. Vous pouvez réserver directement en ligne."
                    }
                },
                {
                    "@@type": "Question",
                    "name": "Le paiement est-il sécurisé sur TaPrestation ?",
                    "acceptedAnswer": {
                        "@@type": "Answer",
                        "text": "Oui, tous les paiements sont 100% sécurisés via Stripe. Votre argent est protégé jusqu'à la réalisation de la prestation. Vous pouvez payer par carte bancaire en toute confiance."
                    }
                },
                {
                    "@@type": "Question",
                    "name": "Comment devenir prestataire sur TaPrestation ?",
                    "acceptedAnswer": {
                        "@@type": "Answer",
                        "text": "Inscrivez-vous gratuitement, créez votre profil professionnel, ajoutez vos services et tarifs. Une fois validé, vous recevrez des demandes de clients dans votre zone. C'est gratuit, vous ne payez qu'une commission sur les prestations réalisées."
                    }
                },
                {
                    "@@type": "Question",
                    "name": "Quels types de services peut-on trouver sur TaPrestation ?",
                    "acceptedAnswer": {
                        "@@type": "Answer",
                        "text": "TaPrestation propose plus de 100 catégories de services : coiffure, esthétique, ménage, bricolage, plomberie, électricité, traiteur, photographe, DJ, location de matériel, décoration, coach sportif, cours particuliers, jardinage, déménagement, chauffeur et bien plus encore."
                    }
                },
                {
                    "@@type": "Question",
                    "name": "TaPrestation est-il disponible dans ma ville ?",
                    "acceptedAnswer": {
                        "@@type": "Answer",
                        "text": "TaPrestation est disponible partout en France : Paris, Lyon, Marseille, Toulouse, Bordeaux, Nantes, Nice, Lille, Strasbourg et toutes les autres villes. Utilisez la géolocalisation pour trouver des prestataires près de chez vous."
                    }
                }
            ]
        },
        {
            "@@type": "BreadcrumbList",
            "itemListElement": [
                {
                    "@@type": "ListItem",
                    "position": 1,
                    "name": "Accueil",
                    "item": "{{ config('app.url', 'https://taprestation.com') }}"
                }
            ]
        },
        {
            "@@type": "SoftwareApplication",
            "name": "TaPrestation",
            "operatingSystem": "Android, iOS",
            "applicationCategory": "BusinessApplication",
            "offers": {
                "@@type": "Offer",
                "price": "0",
                "priceCurrency": "EUR"
            },
            "aggregateRating": {
                "@@type": "AggregateRating",
                "ratingValue": "4.7",
                "ratingCount": "1523"
            }
        }
    ]
}
</script>
@endsection

@section('content')
<!-- NOUVEAU HERO SECTION - CLIENT & PRESTATAIRE & DOWNLOAD -->
<div class="relative bg-linear-to-br from-blue-50 via-white to-emerald-50/40 pt-16 pb-20 lg:pt-24 lg:pb-32 overflow-hidden">
    <!-- Decorative elements -->
    <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[400px] bg-gradient-to-b from-blue-500/10 via-purple-500/5 to-transparent rounded-full blur-3xl pointer-events-none"></div>
    <div class="absolute top-20 left-10 w-20 h-20 bg-blue-400/20 rounded-full blur-2xl animate-pulse"></div>
    <div class="absolute top-32 right-16 w-16 h-16 bg-emerald-400/20 rounded-full blur-2xl animate-pulse delay-700"></div>
    
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <!-- Main Title -->
        <h1 class="text-5xl sm:text-6xl lg:text-7xl font-black tracking-tight mb-6">
            <span class="relative inline-block">
                <span aria-hidden="true" class="absolute inset-0 translate-y-1 text-slate-900/25 blur-[0.8px] select-none pointer-events-none">
                    TaPrestation
                </span>
                <span class="relative bg-gradient-to-r from-blue-700 via-purple-700 to-emerald-700 bg-clip-text text-transparent [filter:drop-shadow(0_2px_0_rgba(15,23,42,0.18))_drop-shadow(0_10px_30px_rgba(59,130,246,0.22))]">
                    TaPrestation
                </span>
            </span>
        </h1>
        
        <p class="text-xl sm:text-2xl text-slate-600 max-w-3xl mx-auto mb-8 font-medium leading-relaxed">
            La plateforme pour trouver tout type de prestation et pouvoir gérer ta clientèle.
        </p>

        <!-- Download App (Smaller + more modern) -->
        <div id="download-app" class="max-w-4xl mx-auto mb-8">
            <div class="bg-linear-to-r from-blue-50 via-white to-emerald-50 rounded-2xl p-4 sm:p-4 shadow-sm border border-slate-200 text-left">
                <div class="flex flex-col sm:flex-row sm:items-center gap-3">
                    <div class="flex items-center gap-3 flex-1">
                        <div class="w-10 h-10 bg-blue-600 rounded-xl flex items-center justify-center shrink-0">
                            <i class="fas fa-mobile-alt text-white text-lg"></i>
                        </div>
                        <div>
                            <div class="text-slate-900 font-black text-base">Installer l’application</div>
                            <div class="text-slate-600 text-xs">Android • iPhone/iPad (Safari)</div>
                        </div>
                    </div>

                    <div class="flex gap-2 w-full sm:w-auto">
                        <button id="android-install-btn" onclick="installAppAndroid()" aria-label="Installer l'application TaPrestation sur Android" class="flex-1 sm:flex-none inline-flex items-center justify-center gap-2 bg-blue-600 text-white px-4 py-2.5 rounded-xl font-black hover:bg-blue-700 transition-colors text-xs">
                            <i class="fab fa-android text-green-400 text-base" aria-hidden="true"></i>
                            <span id="android-install-label">Installer</span>
                        </button>
                        <button onclick="installAppIOS()" aria-label="Guide d'installation pour iPhone et iPad" class="flex-1 sm:flex-none inline-flex items-center justify-center gap-2 bg-white border border-slate-200 text-slate-900 px-4 py-2.5 rounded-xl font-black hover:bg-slate-50 transition-colors text-xs">
                            <i class="fab fa-apple text-slate-900 text-base" aria-hidden="true"></i>
                            <span>Guide iOS</span>
                        </button>
                    </div>
                </div>

                <div class="mt-2 flex flex-col sm:flex-row sm:items-center gap-2 text-xs text-slate-600">
                    <div id="android-install-hint" class="text-xs text-slate-600"></div>
                    <div class="sm:ml-auto text-slate-500">iOS : Partager → “Sur l’écran d’accueil”</div>
                </div>
            </div>
        </div>

        <!-- Two Columns Section -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-8 text-left mb-12 max-w-5xl mx-auto">
            <!-- Column Client -->
            <div class="bg-blue-50/80 rounded-2xl p-6 border border-blue-100 hover:shadow-md transition-shadow relative overflow-hidden">
                <div class="flex items-center gap-4 mb-5">
                    <div class="w-12 h-12 bg-blue-600 rounded-xl flex items-center justify-center shadow-lg shadow-blue-500/20 shrink-0">
                        <i class="fas fa-search text-white text-lg" aria-hidden="true"></i>
                    </div>
                    <div>
                        <h2 class="text-xl font-bold text-slate-900">Espace Client</h2>
                        <p class="text-sm text-slate-600">Tout pour vos besoins</p>
                    </div>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-y-2 gap-x-4 mb-6 text-sm text-slate-700">
                    <div class="flex items-center gap-2"><i class="fas fa-map-marker-alt text-blue-500 w-5" aria-hidden="true"></i> Recherche géolocalisée</div>
                    <div class="flex items-center gap-2"><i class="fas fa-user-check text-blue-500 w-5" aria-hidden="true"></i> Profils & Avis vérifiés</div>
                    <div class="flex items-center gap-2"><i class="fas fa-comments text-blue-500 w-5" aria-hidden="true"></i> Chat direct intégré</div>
                    <div class="flex items-center gap-2"><i class="fas fa-calendar-check text-blue-500 w-5" aria-hidden="true"></i> Réservation instantanée</div>
                    <div class="flex items-center gap-2"><i class="fas fa-file-invoice text-blue-500 w-5" aria-hidden="true"></i> Suivi des commandes</div>
                    <div class="flex items-center gap-2"><i class="fas fa-shield-alt text-blue-500 w-5" aria-hidden="true"></i> Paiement sécurisé</div>
                </div>
            </div>

            <!-- Column Prestataire -->
            <div class="bg-emerald-50/80 rounded-2xl p-6 border border-emerald-100 hover:shadow-md transition-shadow relative overflow-hidden">
                <div class="flex items-center gap-4 mb-5">
                    <div class="w-12 h-12 bg-emerald-600 rounded-xl flex items-center justify-center shadow-lg shadow-emerald-500/20 shrink-0">
                        <i class="fas fa-briefcase text-white text-lg" aria-hidden="true"></i>
                    </div>
                    <div>
                        <h2 class="text-xl font-bold text-slate-900">Espace Professionnel</h2>
                        <p class="text-sm text-slate-600">Gestion complète offerte</p>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-y-3 gap-x-4 mb-6 text-sm text-slate-800 font-medium">
                    <div class="flex items-start gap-2"><i class="fas fa-calendar-check text-emerald-600 mt-1 w-5" aria-hidden="true"></i> <span>Planning automatisé (Prestations)</span></div>
                    <div class="flex items-start gap-2"><i class="fas fa-boxes text-emerald-600 mt-1 w-5" aria-hidden="true"></i> <span>Inventaire & Location matériel</span></div>
                    <div class="flex items-start gap-2"><i class="fas fa-tags text-emerald-600 mt-1 w-5" aria-hidden="true"></i> <span>Gestion des Stocks Boutique</span></div>
                    <div class="flex items-start gap-2"><i class="fas fa-utensils text-emerald-600 mt-1 w-5" aria-hidden="true"></i> <span>Commandes Food Instantanées</span></div>
                    <div class="flex items-start gap-2"><i class="fas fa-truck text-emerald-600 mt-1 w-5" aria-hidden="true"></i> <span>Messagerie & Suivi Livraison</span></div>
                    <div class="flex items-start gap-2"><i class="fas fa-file-invoice-dollar text-emerald-600 mt-1 w-5" aria-hidden="true"></i> <span>Acomptes & Cautions sécurisés</span></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Fin Hero -->



<!-- PWA Install Modal -->
<div id="pwa-install-modal" class="fixed inset-0 z-50 hidden" role="dialog" aria-modal="true" aria-labelledby="modal-title" 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-linear-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" aria-label="Fermer la fenêtre">
                    <i class="fas fa-times text-xl" aria-hidden="true"></i>
                </button>
            </div>
            
            <!-- Modal Body -->
            <div id="modal-body" class="p-6">
                <!-- Content will be injected by JS -->
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script defer>
// 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 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');
    updateInstallCtas();
});

function updateInstallCtas() {
    const androidBtn = document.getElementById('android-install-btn');
    const androidLabel = document.getElementById('android-install-label');
    const androidHint = document.getElementById('android-install-hint');
    const installSection = document.getElementById('download-app');

    if (!androidBtn || !androidLabel) return;

    const isStandalone = (window.matchMedia && window.matchMedia('(display-mode: standalone)').matches) || window.navigator.standalone;
    if (isStandalone) {
        if (installSection) installSection.style.display = 'none';
        return;
    }

    if (installSection) installSection.style.display = '';

    if (deferredPrompt) {
        androidBtn.disabled = false;
        androidBtn.classList.remove('opacity-60', 'cursor-not-allowed');
        androidLabel.textContent = 'Installer maintenant';
        if (androidHint) androidHint.textContent = 'Installation en 1 clic (recommandé).';
    } else {
        androidBtn.disabled = false;
        androidBtn.classList.remove('opacity-60', 'cursor-not-allowed');
        androidLabel.textContent = 'Guide Android';
        if (androidHint) androidHint.textContent = 'Si “Installer” n’apparaît pas : menu ⋮ → “Ajouter à l’écran d’accueil”.';
    }
}

document.addEventListener('DOMContentLoaded', () => {
    updateInstallCtas();
});

// Installation Android - Déclenche directement l'installation
async function installAppAndroid() {
    // Si le prompt d'installation est disponible, l'utiliser directement
    if (deferredPrompt) {
        try {
            deferredPrompt.prompt();
            const { outcome } = await deferredPrompt.userChoice;
            console.log('[PWA] User choice:', outcome);
            
            if (outcome === 'accepted') {
                showSuccessMessage('🎉 Installation réussie ! TaPrestation a été ajouté à votre écran d\'accueil.');
            }
            
            deferredPrompt = null;
            window.deferredPrompt = null;
            updateInstallCtas();
        } catch (error) {
            console.error('[PWA] Install error:', error);
            showInstallInstructions('android');
        }
    } else {
        // Sinon afficher les instructions manuelles
        showInstallInstructions('android');
    }
}

// Installation iOS - Affiche les instructions Safari
function installAppIOS() {
    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
    const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
    
    if (isIOS && isSafari) {
        // Déjà sur Safari iOS - afficher les instructions
        showInstallInstructions('ios');
    } else if (isIOS) {
        // Sur iOS mais pas Safari - proposer d'ouvrir dans Safari
        showOpenInSafariModal();
    } else {
        // Pas sur iOS - afficher les instructions générales
        showInstallInstructions('ios');
    }
}

// Modal pour ouvrir dans Safari
function showOpenInSafariModal() {
    const modal = document.getElementById('pwa-install-modal');
    const modalTitle = document.getElementById('modal-title');
    const modalBody = document.getElementById('modal-body');
    
    modalTitle.innerHTML = '<i class="fab fa-safari mr-2"></i> Ouvrir dans Safari';
    modalBody.innerHTML = `
        <div class="text-center">
            <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="fab fa-safari text-4xl text-blue-500"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-800 mb-3">Pour installer l'application</h3>
            <p class="text-gray-600 mb-6">Ouvrez cette page dans Safari pour pouvoir ajouter TaPrestation à votre écran d'accueil.</p>
            
            <div class="bg-gray-50 rounded-xl p-4 mb-4">
                <p class="text-sm text-gray-600 mb-2">Copiez ce lien :</p>
                <div class="flex items-center gap-2">
                    <input type="text" value="${window.location.origin}" readonly class="flex-1 px-3 py-2 bg-white border border-gray-200 rounded-lg text-sm" id="copy-url">
                    <button onclick="copyToClipboard()" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
                        <i class="fas fa-copy" aria-hidden="true"></i>
                    </button>
                </div>
            </div>
            
            <a href="x-web-search://?${window.location.origin}" class="inline-flex items-center justify-center gap-2 px-6 py-3 bg-blue-500 text-white font-semibold rounded-xl hover:bg-blue-600 transition w-full">
                <i class="fab fa-safari text-xl"></i>
                Ouvrir Safari
            </a>
        </div>
    `;
    
    modal.classList.remove('hidden');
    document.body.style.overflow = 'hidden';
}

// Copier dans le presse-papier
function copyToClipboard() {
    const input = document.getElementById('copy-url');
    input.select();
    document.execCommand('copy');
    
    showSuccessMessage('✅ Lien copié ! Collez-le dans Safari.');
}

// Message de succès
function showSuccessMessage(message) {
    const toast = document.createElement('div');
    toast.className = 'fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-green-500 text-white px-6 py-3 rounded-xl shadow-lg z-50 animate-bounce';
    toast.innerHTML = message;
    document.body.appendChild(toast);
    
    setTimeout(() => {
        toast.remove();
    }, 4000);
}

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

// Hide install banner if already installed
window.addEventListener('appinstalled', () => {
    console.log('[PWA] App installed');
    const section = document.getElementById('download-app');
    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('download-app');
        if (section) section.style.display = 'none';
    });
}
</script>
@endpush

<!-- Section Raccourcis visuels - Modern Cards -->
<section class="py-10 sm:py-12 md:py-16 bg-linear-to-br from-blue-50 via-white to-emerald-50/40 relative">
    
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-8 sm:mb-10 md:mb-12">
            <h2 class="text-2xl sm:text-3xl md:text-4xl font-black text-slate-900 mb-3 sm:mb-4">
                Ce que vous pouvez faire
            </h2>
            <p class="text-sm sm:text-base md:text-lg 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-4 sm:gap-6">
            <!-- Services -->
            <a href="{{ route('services.index') }}" class="group block h-full">
            <div class="relative h-full bg-white rounded-2xl sm:rounded-3xl p-5 sm:p-6 border border-slate-200 hover:border-blue-400 overflow-hidden transition 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-4 sm:mb-5">
                            <div class="w-12 h-12 sm:w-14 sm:h-14 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-xl sm:text-2xl text-blue-600" aria-hidden="true"></i>
                            </div>
                        </div>
                        
                        <!-- Content -->
                        <h3 class="text-lg sm:text-xl font-bold text-slate-900 mb-2 group-hover:text-blue-600 transition-colors">
                            Prestations
                        </h3>
                        <p class="text-sm text-slate-600 mb-5 leading-relaxed">
                            Trouvez des prestations (événementiel, esthétique, travaux…) en quelques clics et réservez.
                        </p>
                        
                        <!-- CTA -->
                        <div class="inline-flex items-center text-blue-600 font-semibold text-sm group-hover:text-blue-700 transition-colors">
                            Parcourir
                            <i class="fas fa-arrow-right ml-2 group-hover:translate-x-2 transition-transform" aria-hidden="true"></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-5 sm:p-6 border border-slate-200 hover:border-emerald-400 overflow-hidden transition 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-4 sm:mb-5">
                            <div class="w-12 h-12 sm:w-14 sm:h-14 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-xl sm:text-2xl text-emerald-600" aria-hidden="true"></i>
                            </div>
                        </div>
                        
                        <!-- Content -->
                        <h3 class="text-lg sm:text-xl font-bold text-slate-900 mb-2 group-hover:text-emerald-600 transition-colors">
                            Location Équipement
                        </h3>
                        <p class="text-sm text-slate-600 mb-5 leading-relaxed">
                            Louez du matériel en quelques clics, choisissez les dates et suivez la disponibilité.
                        </p>
                        
                        <!-- CTA -->
                        <div class="inline-flex items-center text-emerald-600 font-semibold text-sm group-hover:text-emerald-700 transition-colors">
                            Découvrir
                            <i class="fas fa-arrow-right ml-2 group-hover:translate-x-2 transition-transform" aria-hidden="true"></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-5 sm:p-6 border border-slate-200 hover:border-orange-400 overflow-hidden transition 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-4 sm:mb-5">
                            <div class="w-12 h-12 sm:w-14 sm:h-14 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-xl sm:text-2xl text-orange-600" aria-hidden="true"></i>
                            </div>
                        </div>
                        
                        <!-- Content -->
                        <h3 class="text-lg sm:text-xl font-bold text-slate-900 mb-2 group-hover:text-orange-600 transition-colors">
                            Vente
                        </h3>
                        <p class="text-sm text-slate-600 mb-5 leading-relaxed">
                            Comme une boutique : créez des annonces produits avec stock, et gestion d’inventaire.
                        </p>
                        
                        <!-- CTA -->
                        <div class="inline-flex items-center text-orange-600 font-semibold text-sm group-hover:text-orange-700 transition-colors">
                            Ajouter / Vendre
                            <i class="fas fa-arrow-right ml-2 group-hover:translate-x-2 transition-transform" aria-hidden="true"></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-4 gap-6 sm:gap-8">
            <!-- Feature 1 -->
            <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 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 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" aria-hidden="true"></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 2 -->
            <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 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 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" aria-hidden="true"></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 3 -->
            <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 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 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" aria-hidden="true"></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 4 -->
            <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 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 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" aria-hidden="true"></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-linear-to-br from-blue-50 via-white to-emerald-50/40 relative">
    
    <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 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="Photo de {{ $prestataire->user->name }}" class="w-full h-full object-cover" loading="lazy" width="112" height="112" decoding="async">
                                @elseif($prestataire->user->avatar)
                                    <img src="{{ asset('storage/' . $prestataire->user->avatar) }}" alt="Photo de {{ $prestataire->user->name }}" class="w-full h-full object-cover" loading="lazy" width="112" height="112" decoding="async">
                                @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">
                                @php
                                    $rating = $prestataire->rating_average ?? 0;
                                    $fullStars = floor($rating);
                                    $hasHalfStar = ($rating - $fullStars) >= 0.5;
                                @endphp
                                @for($i = 0; $i < 5; $i++)
                                    @if($i < $fullStars)
                                        <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>
                                    @elseif($i == $fullStars && $hasHalfStar)
                                        <svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                                            <defs>
                                                <linearGradient id="half-{{ $prestataire->id }}">
                                                    <stop offset="50%" stop-color="currentColor" />
                                                    <stop offset="50%" stop-color="#e5e7eb" />
                                                </linearGradient>
                                            </defs>
                                            <path fill="url(#half-{{ $prestataire->id }})" 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>
                                    @else
                                        <svg class="w-4 h-4 text-gray-300" 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>
                                    @endif
                                @endfor
                            </div>
                            <span class="text-sm font-semibold text-slate-700">
                                {{ number_format($prestataire->rating_average ?? 0, 1) }} 
                                ({{ $prestataire->total_reviews ?? 0 }} 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 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 duration-300 hover:scale-105" aria-label="Voir la liste complète de tous les prestataires">
                Voir tous les prestataires
                <i class="fas fa-arrow-right" aria-hidden="true"></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" aria-hidden="true"></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 duration-200 hover:scale-110" aria-label="Facebook">
                            <i class="fab fa-facebook-f text-cyan-50" aria-hidden="true"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-cyan-500 hover:bg-cyan-600 rounded-lg flex items-center justify-center transition duration-200 hover:scale-110" aria-label="Twitter">
                            <i class="fab fa-twitter text-cyan-50" aria-hidden="true"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-blue-700 hover:bg-blue-800 rounded-lg flex items-center justify-center transition duration-200 hover:scale-110" aria-label="LinkedIn">
                            <i class="fab fa-linkedin-in text-cyan-50" aria-hidden="true"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-pink-600 hover:bg-pink-700 rounded-lg flex items-center justify-center transition duration-200 hover:scale-110" aria-label="Instagram">
                            <i class="fab fa-instagram text-cyan-50" aria-hidden="true"></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('cgu') }}" class="text-slate-300 hover:text-blue-400 transition-colors text-sm">CGU - Conditions Générales d'Utilisation</a></li>
                        <li><a href="{{ route('cgv') }}" class="text-slate-300 hover:text-blue-400 transition-colors text-sm">CGV - Conditions Générales de Vente</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 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" aria-hidden="true"></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" aria-hidden="true"></i>
                        France
                    </span>
                    <span class="flex items-center gap-2 hover:text-green-300 transition-colors">
                        <i class="fas fa-phone text-green-400" aria-hidden="true"></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" aria-hidden="true"></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" role="dialog" aria-modal="true" aria-label="Photo agrandie">
    <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" aria-label="Fermer la photo">
                <i class="fas fa-times text-xl sm:text-2xl" aria-hidden="true"></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>
</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>

@push('scripts')
<script defer>
// 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>
@endpush

<!-- ============ SECTION SEO - CONTENU TEXTUEL RICHE ============ -->
<section class="bg-gradient-to-b from-slate-50 to-white py-16 lg:py-24">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <!-- Titre H2 optimisé SEO -->
        <div class="text-center mb-12">
            <h2 class="text-3xl lg:text-4xl font-bold text-slate-900 mb-4">
                Trouvez le prestataire de services idéal près de chez vous
            </h2>
            <p class="text-lg text-slate-600 max-w-3xl mx-auto">
                TaPrestation vous connecte avec des milliers de professionnels qualifiés partout en France. 
                Que vous cherchiez un coiffeur à domicile, une femme de ménage, un bricoleur, un traiteur pour votre mariage 
                ou un DJ pour votre soirée, trouvez le prestataire parfait en quelques clics.
            </p>
        </div>

        <!-- Grille de catégories populaires (liens internes SEO) -->
        <div class="mb-16">
            <h3 class="text-2xl font-bold text-slate-900 mb-6 text-center">Services les plus recherchés</h3>
            <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">
                <a href="{{ url('/services?category=coiffure') }}" class="group bg-white rounded-xl p-4 shadow-sm hover:shadow-md transition border border-slate-100 hover:border-blue-200 text-center">
                    <div class="w-12 h-12 mx-auto mb-3 bg-pink-100 rounded-full flex items-center justify-center group-hover:scale-110 transition-transform">
                        <i class="fas fa-cut text-pink-600 text-lg"></i>
                    </div>
                    <span class="text-sm font-medium text-slate-700 group-hover:text-blue-600">Coiffeur à domicile</span>
                </a>
                <a href="{{ url('/services?category=menage') }}" class="group bg-white rounded-xl p-4 shadow-sm hover:shadow-md transition border border-slate-100 hover:border-blue-200 text-center">
                    <div class="w-12 h-12 mx-auto mb-3 bg-blue-100 rounded-full flex items-center justify-center group-hover:scale-110 transition-transform">
                        <i class="fas fa-broom text-blue-600 text-lg"></i>
                    </div>
                    <span class="text-sm font-medium text-slate-700 group-hover:text-blue-600">Femme de ménage</span>
                </a>
                <a href="{{ url('/services?category=bricolage') }}" class="group bg-white rounded-xl p-4 shadow-sm hover:shadow-md transition border border-slate-100 hover:border-blue-200 text-center">
                    <div class="w-12 h-12 mx-auto mb-3 bg-orange-100 rounded-full flex items-center justify-center group-hover:scale-110 transition-transform">
                        <i class="fas fa-tools text-orange-600 text-lg"></i>
                    </div>
                    <span class="text-sm font-medium text-slate-700 group-hover:text-blue-600">Bricoleur</span>
                </a>
                <a href="{{ url('/services?category=traiteur') }}" class="group bg-white rounded-xl p-4 shadow-sm hover:shadow-md transition border border-slate-100 hover:border-blue-200 text-center">
                    <div class="w-12 h-12 mx-auto mb-3 bg-red-100 rounded-full flex items-center justify-center group-hover:scale-110 transition-transform">
                        <i class="fas fa-utensils text-red-600 text-lg"></i>
                    </div>
                    <span class="text-sm font-medium text-slate-700 group-hover:text-blue-600">Traiteur événement</span>
                </a>
                <a href="{{ url('/services?category=photo') }}" class="group bg-white rounded-xl p-4 shadow-sm hover:shadow-md transition border border-slate-100 hover:border-blue-200 text-center">
                    <div class="w-12 h-12 mx-auto mb-3 bg-purple-100 rounded-full flex items-center justify-center group-hover:scale-110 transition-transform">
                        <i class="fas fa-camera text-purple-600 text-lg"></i>
                    </div>
                    <span class="text-sm font-medium text-slate-700 group-hover:text-blue-600">Photographe</span>
                </a>
                <a href="{{ url('/services?category=dj') }}" class="group bg-white rounded-xl p-4 shadow-sm hover:shadow-md transition border border-slate-100 hover:border-blue-200 text-center">
                    <div class="w-12 h-12 mx-auto mb-3 bg-indigo-100 rounded-full flex items-center justify-center group-hover:scale-110 transition-transform">
                        <i class="fas fa-music text-indigo-600 text-lg"></i>
                    </div>
                    <span class="text-sm font-medium text-slate-700 group-hover:text-blue-600">DJ & Animation</span>
                </a>
            </div>
        </div>

        <!-- Villes populaires (SEO local) -->
        <div class="mb-16">
            <h3 class="text-2xl font-bold text-slate-900 mb-6 text-center">Prestataires par ville</h3>
            <div class="flex flex-wrap justify-center gap-3">
                <a href="{{ url('/services?city=paris') }}" class="px-4 py-2 bg-white rounded-full text-sm font-medium text-slate-600 hover:text-blue-600 hover:bg-blue-50 transition-colors border border-slate-200 hover:border-blue-200">
                    <i class="fas fa-map-marker-alt mr-1 text-blue-500"></i> Prestataires Paris
                </a>
                <a href="{{ url('/services?city=lyon') }}" class="px-4 py-2 bg-white rounded-full text-sm font-medium text-slate-600 hover:text-blue-600 hover:bg-blue-50 transition-colors border border-slate-200 hover:border-blue-200">
                    <i class="fas fa-map-marker-alt mr-1 text-blue-500"></i> Prestataires Lyon
                </a>
                <a href="{{ url('/services?city=marseille') }}" class="px-4 py-2 bg-white rounded-full text-sm font-medium text-slate-600 hover:text-blue-600 hover:bg-blue-50 transition-colors border border-slate-200 hover:border-blue-200">
                    <i class="fas fa-map-marker-alt mr-1 text-blue-500"></i> Prestataires Marseille
                </a>
                <a href="{{ url('/services?city=toulouse') }}" class="px-4 py-2 bg-white rounded-full text-sm font-medium text-slate-600 hover:text-blue-600 hover:bg-blue-50 transition-colors border border-slate-200 hover:border-blue-200">
                    <i class="fas fa-map-marker-alt mr-1 text-blue-500"></i> Prestataires Toulouse
                </a>
                <a href="{{ url('/services?city=bordeaux') }}" class="px-4 py-2 bg-white rounded-full text-sm font-medium text-slate-600 hover:text-blue-600 hover:bg-blue-50 transition-colors border border-slate-200 hover:border-blue-200">
                    <i class="fas fa-map-marker-alt mr-1 text-blue-500"></i> Prestataires Bordeaux
                </a>
                <a href="{{ url('/services?city=nantes') }}" class="px-4 py-2 bg-white rounded-full text-sm font-medium text-slate-600 hover:text-blue-600 hover:bg-blue-50 transition-colors border border-slate-200 hover:border-blue-200">
                    <i class="fas fa-map-marker-alt mr-1 text-blue-500"></i> Prestataires Nantes
                </a>
                <a href="{{ url('/services?city=nice') }}" class="px-4 py-2 bg-white rounded-full text-sm font-medium text-slate-600 hover:text-blue-600 hover:bg-blue-50 transition-colors border border-slate-200 hover:border-blue-200">
                    <i class="fas fa-map-marker-alt mr-1 text-blue-500"></i> Prestataires Nice
                </a>
                <a href="{{ url('/services?city=lille') }}" class="px-4 py-2 bg-white rounded-full text-sm font-medium text-slate-600 hover:text-blue-600 hover:bg-blue-50 transition-colors border border-slate-200 hover:border-blue-200">
                    <i class="fas fa-map-marker-alt mr-1 text-blue-500"></i> Prestataires Lille
                </a>
                <a href="{{ url('/services?city=strasbourg') }}" class="px-4 py-2 bg-white rounded-full text-sm font-medium text-slate-600 hover:text-blue-600 hover:bg-blue-50 transition-colors border border-slate-200 hover:border-blue-200">
                    <i class="fas fa-map-marker-alt mr-1 text-blue-500"></i> Prestataires Strasbourg
                </a>
                <a href="{{ url('/services?city=montpellier') }}" class="px-4 py-2 bg-white rounded-full text-sm font-medium text-slate-600 hover:text-blue-600 hover:bg-blue-50 transition-colors border border-slate-200 hover:border-blue-200">
                    <i class="fas fa-map-marker-alt mr-1 text-blue-500"></i> Prestataires Montpellier
                </a>
                <a href="{{ url('/services?city=rennes') }}" class="px-4 py-2 bg-white rounded-full text-sm font-medium text-slate-600 hover:text-blue-600 hover:bg-blue-50 transition-colors border border-slate-200 hover:border-blue-200">
                    <i class="fas fa-map-marker-alt mr-1 text-blue-500"></i> Prestataires Rennes
                </a>
                <a href="{{ url('/services') }}" class="px-4 py-2 bg-blue-600 rounded-full text-sm font-medium text-white hover:bg-blue-700 transition-colors">
                    Voir toutes les villes →
                </a>
            </div>
        </div>

        <!-- Contenu textuel SEO riche -->
        <div class="bg-white rounded-2xl p-8 lg:p-12 shadow-sm border border-slate-100">
            <div class="grid lg:grid-cols-2 gap-8 lg:gap-12">
                <div>
                    <h3 class="text-xl font-bold text-slate-900 mb-4">
                        <i class="fas fa-search text-blue-600 mr-2"></i>
                        Pourquoi choisir TaPrestation ?
                    </h3>
                    <div class="space-y-4 text-slate-600">
                        <p>
                            <strong>TaPrestation</strong> est la plateforme de référence pour trouver des <strong>prestataires de services qualifiés</strong> partout en France. 
                            Que vous soyez à la recherche d'un <strong>coiffeur à domicile à Paris</strong>, d'une <strong>femme de ménage à Lyon</strong>, 
                            d'un <strong>bricoleur à Marseille</strong> ou d'un <strong>traiteur pour votre mariage à Bordeaux</strong>, 
                            nous vous connectons avec les meilleurs professionnels de votre région.
                        </p>
                        <p>
                            Chaque prestataire sur notre plateforme dispose d'un <strong>profil vérifié</strong> avec des <strong>avis clients authentiques</strong>. 
                            Vous pouvez consulter leurs réalisations, comparer les tarifs et <strong>réserver en ligne</strong> en toute sécurité. 
                            Notre système de <strong>paiement sécurisé</strong> protège votre argent jusqu'à la réalisation de la prestation.
                        </p>
                    </div>
                </div>
                <div>
                    <h3 class="text-xl font-bold text-slate-900 mb-4">
                        <i class="fas fa-briefcase text-emerald-600 mr-2"></i>
                        Vous êtes professionnel ?
                    </h3>
                    <div class="space-y-4 text-slate-600">
                        <p>
                            <strong>Développez votre activité</strong> gratuitement sur TaPrestation. Que vous soyez <strong>auto-entrepreneur</strong>, 
                            <strong>artisan</strong>, <strong>freelance</strong> ou <strong>société de services</strong>, créez votre profil professionnel 
                            et recevez des demandes de clients dans votre zone géographique.
                        </p>
                        <p>
                            Notre plateforme vous offre des outils de gestion complets : <strong>planning automatisé</strong>, 
                            <strong>facturation</strong>, <strong>messagerie intégrée</strong>, <strong>gestion des acomptes</strong> et bien plus. 
                            Rejoignez les <strong>+10 000 prestataires</strong> qui font confiance à TaPrestation pour développer leur clientèle.
                        </p>
                        <a href="{{ url('/register') }}" class="inline-flex items-center text-emerald-600 font-semibold hover:text-emerald-700 transition-colors">
                            Devenir prestataire gratuitement <i class="fas fa-arrow-right ml-2" aria-hidden="true"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- FAQ visible (SEO + UX) -->
        <div class="mt-16">
            <h3 class="text-2xl font-bold text-slate-900 mb-8 text-center">Questions fréquentes</h3>
            <div class="max-w-4xl mx-auto space-y-4">
                <details class="bg-white rounded-xl border border-slate-200 overflow-hidden group">
                    <summary class="px-6 py-4 cursor-pointer flex items-center justify-between text-slate-900 font-medium hover:bg-slate-50 transition-colors">
                        <span>Comment trouver un prestataire sur TaPrestation ?</span>
                        <i class="fas fa-chevron-down text-slate-400 group-open:rotate-180 transition-transform"></i>
                    </summary>
                    <div class="px-6 pb-4 text-slate-600">
                        C'est simple ! Utilisez la barre de recherche pour trouver le service souhaité (coiffeur, ménage, bricoleur...), 
                        filtrez par localisation et consultez les profils des prestataires avec leurs avis vérifiés. 
                        Vous pouvez réserver directement en ligne et payer en toute sécurité.
                    </div>
                </details>
                <details class="bg-white rounded-xl border border-slate-200 overflow-hidden group">
                    <summary class="px-6 py-4 cursor-pointer flex items-center justify-between text-slate-900 font-medium hover:bg-slate-50 transition-colors">
                        <span>Le paiement est-il sécurisé ?</span>
                        <i class="fas fa-chevron-down text-slate-400 group-open:rotate-180 transition-transform"></i>
                    </summary>
                    <div class="px-6 pb-4 text-slate-600">
                        Oui, tous les paiements sont 100% sécurisés via Stripe. Votre argent est protégé jusqu'à la réalisation de la prestation. 
                        Vous pouvez payer par carte bancaire en toute confiance. En cas de problème, notre service client vous accompagne.
                    </div>
                </details>
                <details class="bg-white rounded-xl border border-slate-200 overflow-hidden group">
                    <summary class="px-6 py-4 cursor-pointer flex items-center justify-between text-slate-900 font-medium hover:bg-slate-50 transition-colors">
                        <span>Comment devenir prestataire sur TaPrestation ?</span>
                        <i class="fas fa-chevron-down text-slate-400 group-open:rotate-180 transition-transform"></i>
                    </summary>
                    <div class="px-6 pb-4 text-slate-600">
                        Inscrivez-vous gratuitement, créez votre profil professionnel, ajoutez vos services et tarifs. 
                        Une fois validé, vous recevrez des demandes de clients dans votre zone. 
                        C'est gratuit, vous ne payez qu'une commission sur les prestations réalisées via la plateforme.
                    </div>
                </details>
                <details class="bg-white rounded-xl border border-slate-200 overflow-hidden group">
                    <summary class="px-6 py-4 cursor-pointer flex items-center justify-between text-slate-900 font-medium hover:bg-slate-50 transition-colors">
                        <span>Quels types de services sont disponibles ?</span>
                        <i class="fas fa-chevron-down text-slate-400 group-open:rotate-180 transition-transform"></i>
                    </summary>
                    <div class="px-6 pb-4 text-slate-600">
                        TaPrestation propose plus de 100 catégories de services : coiffure, esthétique, ménage, repassage, bricolage, 
                        plomberie, électricité, peinture, jardinage, traiteur, chef à domicile, photographe, vidéaste, DJ, 
                        location de matériel événementiel, décoration, coach sportif, cours particuliers, garde d'enfants, 
                        aide à domicile, déménagement, chauffeur privé et bien plus encore !
                    </div>
                </details>
                <details class="bg-white rounded-xl border border-slate-200 overflow-hidden group">
                    <summary class="px-6 py-4 cursor-pointer flex items-center justify-between text-slate-900 font-medium hover:bg-slate-50 transition-colors">
                        <span>TaPrestation est-il disponible dans ma ville ?</span>
                        <i class="fas fa-chevron-down text-slate-400 group-open:rotate-180 transition-transform"></i>
                    </summary>
                    <div class="px-6 pb-4 text-slate-600">
                        TaPrestation est disponible dans toute la France : Paris, Lyon, Marseille, Toulouse, Bordeaux, Nantes, Nice, 
                        Lille, Strasbourg, Montpellier, Rennes, Grenoble, Rouen, Toulon, et dans toutes les villes et communes de France. 
                        Utilisez la géolocalisation pour trouver des prestataires près de chez vous.
                    </div>
                </details>
            </div>
        </div>

        <!-- Call to action final -->
        <div class="mt-16 text-center">
            <div class="bg-gradient-to-r from-blue-600 to-emerald-600 rounded-2xl p-8 lg:p-12 text-white">
                <h3 class="text-2xl lg:text-3xl font-bold mb-4">Prêt à trouver votre prestataire ?</h3>
                <p class="text-lg text-white/90 mb-6 max-w-2xl mx-auto">
                    Rejoignez les milliers de clients satisfaits qui utilisent TaPrestation chaque jour pour leurs besoins en services.
                </p>
                <div class="flex flex-col sm:flex-row gap-4 justify-center">
                    <a href="{{ url('/services') }}" class="inline-flex items-center justify-center px-6 py-3 bg-white text-blue-600 font-bold rounded-xl hover:bg-blue-50 transition-colors">
                        <i class="fas fa-search mr-2"></i> Trouver un prestataire
                    </a>
                    <a href="{{ url('/register') }}" class="inline-flex items-center justify-center px-6 py-3 bg-white/10 text-white font-bold rounded-xl hover:bg-white/20 transition-colors border border-white/30">
                        <i class="fas fa-user-plus mr-2"></i> Devenir prestataire
                    </a>
                </div>
            </div>
        </div>

    </div>
</section>
<!-- ============ FIN SECTION SEO ============ -->

@endsection