@extends('layouts.main')
@section('content')



<!-- Hero Section -->
<section id="hero-slider" class="relative isolate overflow-hidden bg-gray-900 py-24 sm:py-32">
    <img src="https://images.unsplash.com/photo-1600585154526-990dced4db0d" 
         alt="Services ChaletMed" 
         class="absolute inset-0 -z-10 h-full w-full object-cover opacity-40">

    <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="mx-auto max-w-2xl text-center" data-aos="fade-up">
            <h2 class="text-4xl font-bold tracking-tight text-white sm:text-6xl">
                Nos Services Complets
            </h2>
            <p class="mt-6 text-lg leading-8 text-gray-300">
                Une gamme de services intégrés pour la gestion optimale de votre résidence
            </p>
        </div>
    </div>
</section>

<!-- Main Content -->
<main class="bg-white py-16 px-4 md:px-8">
    <div class="max-w-7xl mx-auto">
        <!-- Services Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
            <!-- Security Service -->
            <div class="bg-white p-6 rounded-xl shadow-lg hover:shadow-xl hover:-translate-y-2 transition-all duration-300 border-l-4 border-yellow-500" data-aos="fade-up" data-aos-delay="100">
                <div class="flex items-start mb-4">
                    <div class="bg-yellow-500 p-3 rounded-lg mr-4">
                        <i class="fas fa-shield-alt text-white text-2xl"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-bold text-gray-800 mb-2">Sécurité 24/7</h3>
                        <p class="text-gray-600">Protection continue de votre résidence</p>
                    </div>
                </div>
                <ul class="pl-4 space-y-2 text-gray-600">
                    <li class="flex items-center">
                        <i class="fas fa-check-circle text-yellow-600 mr-2"></i>
                        Surveillance électronique avancée
                    </li>
                    <li class="flex items-center">
                        <i class="fas fa-check-circle text-yellow-600 mr-2"></i>
                        Rondes régulières
                    </li>
                    <li class="flex items-center">
                        <i class="fas fa-check-circle text-yellow-600 mr-2"></i>
                        Contrôle d'accès biométrique
                    </li>
                </ul>
            </div>

            <!-- Financial Management -->
            <div class="bg-white p-6 rounded-xl shadow-lg hover:shadow-xl hover:-translate-y-2 transition-all duration-300 border-l-4 border-yellow-500" data-aos="fade-up" data-aos-delay="200">
                <div class="flex items-start mb-4">
                    <div class="bg-yellow-500 p-3 rounded-lg mr-4">
                        <i class="fas fa-coins text-white text-2xl"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-bold text-gray-800 mb-2">Gestion Financière</h3>
                        <p class="text-gray-600">Suivi transparent des cotisations</p>
                    </div>
                </div>
                <ul class="pl-4 space-y-2 text-gray-600">
                    <li class="flex items-center">
                        <i class="fas fa-check-circle text-yellow-600 mr-2"></i>
                        Historique des transactions
                    </li>
                    <li class="flex items-center">
                        <i class="fas fa-check-circle text-yellow-600 mr-2"></i>
                        Rapports financiers trimestriels
                    </li>
                    <li class="flex items-center">
                        <i class="fas fa-check-circle text-yellow-600 mr-2"></i>
                        Gestion des fournisseurs
                    </li>
                </ul>
            </div>

            <!-- Expense Management -->
            <div class="bg-white p-6 rounded-xl shadow-lg hover:shadow-xl hover:-translate-y-2 transition-all duration-300 border-l-4 border-yellow-500" data-aos="fade-up" data-aos-delay="300">
                <div class="flex items-start mb-4">
                    <div class="bg-yellow-500 p-3 rounded-lg mr-4">
                        <i class="fas fa-chart-pie text-white text-2xl"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-bold text-gray-800 mb-2">Gestion des Charges</h3>
                        <p class="text-gray-600">Répartition et suivi détaillé</p>
                    </div>
                </div>
                <ul class="pl-4 space-y-2 text-gray-600">
                    <li class="flex items-center">
                        <i class="fas fa-check-circle text-yellow-600 mr-2"></i>
                        Budget prévisionnel
                    </li>
                    <li class="flex items-center">
                        <i class="fas fa-check-circle text-yellow-600 mr-2"></i>
                        Analyse par catégorie
                    </li>
                    <li class="flex items-center">
                        <i class="fas fa-check-circle text-yellow-600 mr-2"></i>
                        Rapports trimestriels
                    </li>
                </ul>
            </div>
        </div>

        <!-- Statistics Section -->
        <div class="grid grid-cols-2 sm:grid-cols-4 gap-6 my-16">
            <div class="text-center p-6 bg-gray-50 rounded-xl shadow-md" data-aos="zoom-in" data-aos-delay="100">
                <dt class="text-sm text-gray-600">Interventions/mois</dt>
                <dd class="mt-2 text-3xl font-bold text-yellow-600">120+</dd>
            </div>
            <div class="text-center p-6 bg-gray-50 rounded-xl shadow-md" data-aos="zoom-in" data-aos-delay="200">
                <dt class="text-sm text-gray-600">Réactivité</dt>
                <dd class="mt-2 text-3xl font-bold text-yellow-600">&lt;2h</dd>
            </div>
            <div class="text-center p-6 bg-gray-50 rounded-xl shadow-md" data-aos="zoom-in" data-aos-delay="300">
                <dt class="text-sm text-gray-600">Disponibilité</dt>
                <dd class="mt-2 text-3xl font-bold text-yellow-600">24/7</dd>
            </div>
            <div class="text-center p-6 bg-gray-50 rounded-xl shadow-md" data-aos="zoom-in" data-aos-delay="400">
                <dt class="text-sm text-gray-600">Satisfaction</dt>
                <dd class="mt-2 text-3xl font-bold text-yellow-600">98%</dd>
            </div>
        </div>

        <!-- Feature Highlight Section -->
        <div class="relative overflow-hidden bg-gradient-to-br from-gray-50 to-yellow-400 rounded-2xl p-8 mb-16">
            <div class="absolute top-0 right-0 -translate-y-1/4 translate-x-1/4">
                <div class="w-64 h-64 bg-yellow-200 rounded-full opacity-20"></div>
            </div>
            
            <div class="grid md:grid-cols-2 gap-12 items-center relative">
                <!-- Left Content -->
                <div class="space-y-6" data-aos="fade-right">
                    <div>
                        <h2 class="text-3xl font-bold text-gray-800 mb-4">
                            Gestion Simplifiée de Votre Résidence
                        </h2>
                        <p class="text-gray-600 leading-relaxed">
                            Accédez à des outils puissants pour gérer efficacement votre résidence, suivre vos finances, et rester informé en temps réel.
                        </p>
                    </div>

                    <div class="space-y-4">
                        <!-- Feature Item 1 -->
                        <div class="flex items-center p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow" data-aos="fade-up" data-aos-delay="100">
                            <div class="flex-shrink-0 w-12 h-12 flex items-center justify-center bg-yellow-500 rounded-lg">
                                <i class="fas fa-chart-line text-white text-xl"></i>
                            </div>
                            <div class="ml-4">
                                <h3 class="font-semibold text-gray-800">Suivi des Finances</h3>
                                <p class="text-sm text-gray-600 mt-1">Visualisez vos dépenses et revenus en temps réel.</p>
                            </div>
                        </div>

                        <!-- Feature Item 2 -->
                        <div class="flex items-center p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow" data-aos="fade-up" data-aos-delay="200">
                            <div class="flex-shrink-0 w-12 h-12 flex items-center justify-center bg-yellow-500 rounded-lg">
                                <i class="fas fa-bell text-white text-xl"></i>
                            </div>
                            <div class="ml-4">
                                <h3 class="font-semibold text-gray-800">Alertes en Temps Réel</h3>
                                <p class="text-sm text-gray-600 mt-1">Recevez des notifications pour les événements importants.</p>
                            </div>
                        </div>

                        <!-- Feature Item 3 -->
                        <div class="flex items-center p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow" data-aos="fade-up" data-aos-delay="300">
                            <div class="flex-shrink-0 w-12 h-12 flex items-center justify-center bg-yellow-500 rounded-lg">
                                <i class="fas fa-file-alt text-white text-xl"></i>
                            </div>
                            <div class="ml-4">
                                <h3 class="font-semibold text-gray-800">Rapports Personnalisés</h3>
                                <p class="text-sm text-gray-600 mt-1">Téléchargez des rapports détaillés pour une meilleure gestion.</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Right Image -->
                <div class="relative" data-aos="fade-left" data-aos-delay="200">
                    <div class="absolute inset-0 bg-gradient-to-r from-yellow-200 to-yellow-400 rounded-2xl transform rotate-3 opacity-20"></div>
                    <img src="https://images.unsplash.com/photo-1600585154526-990dced4db0d" 
                        alt="Gestion Résidentielle" 
                        class="relative rounded-xl shadow-lg transform hover:-translate-y-2 transition-transform duration-300 h-auto max-h-96 object-cover w-full">
                </div>
            </div>
        </div>

        <!-- CTA Section -->
        <div class="text-center bg-gradient-to-r from-yellow-400 via-yellow-500 to-yellow-600 rounded-2xl p-12 shadow-lg" data-aos="zoom-in">
            <h3 class="text-2xl font-bold text-white mb-4">Prêt à simplifier votre gestion ?</h3>
            <p class="text-gray-100 mb-8">Rejoignez notre communauté de propriétaires satisfaits</p>
            <div class="flex justify-center space-x-4">
                <a href="{{route('contact')}}" class="bg-white text-yellow-600 px-8 py-3 rounded-lg hover:bg-gray-100 transition-colors" data-aos="fade-up" data-aos-delay="100">
                    Nous Contacter
                </a>
                <a href="{{route('FAQ')}}" class="border border-white text-white px-8 py-3 rounded-lg hover:bg-white hover:text-yellow-600 transition-colors" data-aos="fade-up" data-aos-delay="200">
                    FAQ
                </a>
            </div>
        </div>
    </div>
</main>

@endsection