@extends('layouts.main')
    
@section('content')
<!-- Add Animation Library -->
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

<!-- Initialize AOS -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    AOS.init({
      duration: 800,
      easing: 'ease-in-out',
      once: true,
      offset: 100
    });
  });
</script>

<!-- Hero Section with Background Image -->
<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="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-down">
            <h2 class="text-4xl font-bold tracking-tight text-white sm:text-6xl">
                Notre Engagement envers Vous
            </h2>
            <p class="mt-6 text-lg leading-8 text-gray-300">
                Depuis 2023, ChaletMed se consacre à préserver la qualité de vie exceptionnelle de notre communauté résidentielle.
            </p>
        </div>
    </div>
</section>

<!-- Welcome Section -->
<section class="relative bg-white py-16 px-4 md:px-8">
    <div class="max-w-7xl mx-auto">
        <!-- Hero Section -->
        <div class="text-center mb-16" data-aos="fade-up">
            <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">
                Bienvenue à ChaletMed
            </h1>
            <p class="text-xl text-gray-600 max-w-3xl mx-auto">
                Une communauté dédiée à la préservation et l'amélioration de notre résidence de charme
            </p>
        </div>

        <!-- Main Content Grid -->
        <div class="grid md:grid-cols-2 gap-16 mt-16">
            <!-- Left Column - Text Content -->
            <div class="space-y-12">
                <!-- Mission Section -->
                <div class="bg-white rounded-xl shadow-md p-8" data-aos="fade-right" data-aos-delay="100">
                    <div class="flex items-center gap-4 mb-6">
                        <div class="bg-yellow-500 p-3 rounded-lg">
                            <i class="fas fa-bullseye text-white text-2xl"></i>
                        </div>
                        <h3 class="text-2xl font-semibold">Notre Mission</h3>
                    </div>
                    <p class="text-gray-700 leading-relaxed">
                        Garantir un environnement sécurisé et harmonieux pour les 41 chalets de notre résidence, 
                        grâce à une gestion transparente et une maintenance rigoureuse des espaces communs.
                    </p>
                </div>

                <!-- History Section -->
                <div class="border-l-4 border-yellow-500 pl-6 bg-white rounded-xl shadow-md p-6" data-aos="fade-right" data-aos-delay="200">
                    <h3 class="text-2xl font-semibold mb-4">Notre Histoire</h3>
                    <div class="space-y-4 text-gray-700">
                        <p>
                            Fondé par un groupe de propriétaires passionnés, ChaletMed est né de la volonté commune de 
                            préserver le caractère unique de notre résidence face aux défis croissants de sécurité et 
                            d'entretien des espaces communs.
                        </p>
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <p class="text-yellow-600 font-medium">"Un projet communautaire devenu référence en gestion résidentielle"</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Column - Stats & Values -->
            <div class="space-y-12">
                <!-- Values Grid -->
                <div class="grid grid-cols-2 gap-6">
                    <div class="bg-white rounded-xl shadow-md p-8 text-center" data-aos="zoom-in" data-aos-delay="100">
                        <div class="bg-yellow-500 w-fit p-3 rounded-lg mx-auto mb-4">
                            <i class="fas fa-shield-alt text-white text-2xl"></i>
                        </div>
                        <h4 class="font-semibold mb-2">Sécurité Maximale</h4>
                        <p class="text-sm text-gray-700">Surveillance 24h/7j par des professionnels</p>
                    </div>
                    <div class="bg-white rounded-xl shadow-md p-8 text-center" data-aos="zoom-in" data-aos-delay="200">
                        <div class="bg-yellow-500 w-fit p-3 rounded-lg mx-auto mb-4">
                            <i class="fas fa-users text-white text-2xl"></i>
                        </div>
                        <h4 class="font-semibold mb-2">Communauté Unie</h4>
                        <p class="text-sm text-gray-700">41 propriétaires engagés</p>
                    </div>
                </div>

                <!-- Statistics -->
                <div class="bg-white rounded-xl shadow-md p-8" data-aos="fade-left" data-aos-delay="300">
                    <dl class="grid grid-cols-2 gap-8">
                        <div class="text-center" data-aos="fade-up" data-aos-delay="400">
                            <dt class="text-gray-700">Années d'expérience</dt>
                            <dd class="mt-2 text-3xl font-bold text-yellow-500 counter">5+</dd>
                        </div>
                        <div class="text-center" data-aos="fade-up" data-aos-delay="500">
                            <dt class="text-gray-700">Taux de satisfaction</dt>
                            <dd class="mt-2 text-3xl font-bold text-yellow-500 counter">98%</dd>
                        </div>
                        <div class="text-center" data-aos="fade-up" data-aos-delay="600">
                            <dt class="text-gray-700">Interventions/mois</dt>
                            <dd class="mt-2 text-3xl font-bold text-yellow-500 counter">50+</dd>
                        </div>
                        <div class="text-center" data-aos="fade-up" data-aos-delay="700">
                            <dt class="text-gray-700">Espaces verts</dt>
                            <dd class="mt-2 text-3xl font-bold text-yellow-500 counter">12ha</dd>
                        </div>
                    </dl>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Content Section -->
<section class="py-16 px-4">
    <div class="max-w-7xl mx-auto grid md:grid-cols-2 gap-12 items-start">
        <!-- Text Content -->
        <div class="space-y-10">
            <!-- Engagement Section -->
            <div class="bg-gradient-to-br from-yellow-50 to-yellow-400 p-8 rounded-xl shadow-md border border-yellow-200" data-aos="fade-right">
                <h2 class="text-3xl font-extrabold text-gray-800 mb-4 flex items-center">
                    <i class="fas fa-handshake text-yellow-600 mr-3 text-2xl"></i>
                    Un Cadre de Vie d'Exception
                </h2>
                <p class="text-gray-700 leading-relaxed">
                    Vivre à ChaletMed, c'est profiter d'un cadre unique où tranquillité et convivialité se rencontrent. 
                    Nous mettons un point d'honneur à préserver cet équilibre en garantissant un environnement sûr, propre et harmonieux pour tous nos résidents.
                </p>
                <ul class="mt-5 space-y-3">
                    <li class="flex items-center" data-aos="fade-up" data-aos-delay="100">
                        <i class="fas fa-shield-alt text-yellow-600 text-xl mr-3"></i>
                        <span class="text-gray-700 font-medium">Une surveillance continue assurée par des professionnels qualifiés</span>
                    </li>
                    <li class="flex items-center" data-aos="fade-up" data-aos-delay="200">
                        <i class="fas fa-leaf text-yellow-600 text-xl mr-3"></i>
                        <span class="text-gray-700 font-medium">Un entretien soigné des espaces verts et des parties communes</span>
                    </li>
                    <li class="flex items-center" data-aos="fade-up" data-aos-delay="300">
                        <i class="fas fa-balance-scale text-yellow-600 text-xl mr-3"></i>
                        <span class="text-gray-700 font-medium">Une gestion transparente et équitable des contributions</span>
                    </li>
                </ul>
            </div>

            <!-- Community Section -->
            <div class="bg-white p-8 rounded-xl shadow-md border border-gray-200" data-aos="fade-right" data-aos-delay="100">
                <h2 class="text-3xl font-extrabold text-gray-800 flex items-center">
                    <i class="fas fa-users text-yellow-600 mr-3 text-2xl"></i>
                    Une Communauté Engagée
                </h2>
                <p class="text-gray-700 leading-relaxed mt-4">
                    Créé en 2023 par un collectif de propriétaires investis, ChaletMed est le fruit d'une vision commune : 
                    préserver l'authenticité et la qualité de vie au sein de nos 41 chalets.
                </p>
                <div class="grid grid-cols-2 gap-6 mt-6">
                    <div class="bg-gray-50 p-5 rounded-lg shadow-sm border-l-4 border-yellow-500" data-aos="flip-left" data-aos-delay="200">
                        <p class="font-semibold text-gray-800">Valoriser et protéger notre patrimoine</p>
                    </div>
                    <div class="bg-gray-50 p-5 rounded-lg shadow-sm border-l-4 border-yellow-500" data-aos="flip-left" data-aos-delay="300">
                        <p class="font-semibold text-gray-800">Renforcer les liens entre les résidents</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Image Section -->
        <div class="sticky top-16" data-aos="fade-left" data-aos-delay="100">
            <div class="relative h-full rounded-2xl overflow-hidden shadow-xl">
                <img src="https://images.unsplash.com/photo-1600585154526-990dced4db0d" 
                     alt="ChaletMed" 
                     class="w-full h-full object-cover min-h-[500px]">
                <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black p-6">
                    <div class="text-white">
                        <p class="text-xl font-bold mb-2">Un Lieu de Vie Unique</p>
                        <p class="text-sm opacity-90">"Préserver l'exceptionnel, quotidiennement"</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Video Section -->
<section class="relative py-16 px-4 md:px-8 bg-white from-gray-50 to-white">
  <div class="max-w-5xl mx-auto" data-aos="fade-up">
    <!-- Section Header -->
    <div class="text-center mb-12">
      <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">
        Plongez dans l'ambiance paisible de notre résidence
      </h2>
      <div class="w-24 h-1 bg-yellow-500 mx-auto mb-8"></div>
    </div>

    <!-- Video Container - Made smaller and centered -->
    <div class="relative w-full md:w-4/5 lg:w-3/4 mx-auto aspect-video rounded-2xl overflow-hidden shadow-xl transform hover:scale-105 transition-all duration-500" data-aos="zoom-in">
      <video 
        class="w-full h-full object-cover" 
        controls 
        poster="https://images.unsplash.com/photo-1582719508461-905c673771fd?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"
        aria-label="Visite virtuelle de la résidence"
        preload="metadata"
        loop
        muted
        playsinline
      >
        <!-- Add multiple sources for better browser compatibility -->
        <source src="/public/images/video1.mp4" type="video/mp4">
        <source src="https://chaletmed.ma/images/video1.mp4" type="video/webm">
        Your browser does not support the video tag.
      </video>
    </div>
    
    <!-- Caption Text -->
    <div class="mt-8 text-center" data-aos="fade-up" data-aos-delay="200">
      <p class="text-gray-600 italic">
        <span class="text-yellow-500 font-semibold">Découvrez notre résidence</span> en visite virtuelle
        <svg class="inline-block w-4 h-4 ml-2 -mb-1" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
        </svg>
      </p>
    </div>
  </div>
</section>

<!-- Location Section -->
<section class="py-16 px-4">
    <div class="max-w-7xl mx-auto bg-gradient-to-br from-yellow-50 to-yellow-400 rounded-xl p-10 shadow-lg border border-yellow-200" data-aos="fade-up">
        <div class="text-center mb-10">
            <h2 class="text-3xl font-extrabold text-gray-800">📍 Notre Siège</h2>
            <p class="text-gray-700 text-lg mt-2">Un emplacement privilégié au cœur de notre résidence</p>
        </div>
        <div class="grid md:grid-cols-3 gap-8">
            <!-- Location Card -->
            <div class="bg-white p-6 rounded-xl shadow-md border border-gray-200 flex flex-col items-center" data-aos="fade-up" data-aos-delay="100">
                <i class="fas fa-map-marker-alt text-yellow-600 text-4xl mb-4"></i>
                <p class="font-bold text-gray-800 text-lg">CHALET MED - ROUTE DE SEBTA</p>
                <p class="text-gray-600 text-sm">FNIDEQ</p>
            </div>
            <!-- Beach Card -->
            <div class="bg-white p-6 rounded-xl shadow-md border border-gray-200 flex flex-col items-center" data-aos="fade-up" data-aos-delay="200">
                <i class="fas fa-umbrella-beach text-yellow-600 text-4xl mb-4"></i>
                <p class="font-bold text-gray-800 text-lg">Plage Sable Dorée</p>
                <p class="text-gray-600 text-sm">Corniche privée</p>
            </div>
            <!-- Availability Card -->
            <div class="bg-white p-6 rounded-xl shadow-md border border-gray-200 flex flex-col items-center" data-aos="fade-up" data-aos-delay="300">
                <i class="fas fa-calendar-alt text-yellow-600 text-4xl mb-4"></i>
                <p class="font-bold text-gray-800 text-lg">Disponibilité</p>
                <p class="text-gray-600 text-sm">7j/7 sur rendez-vous</p>
            </div>
        </div>
    </div>
</section>

<!-- Team Section -->
<section id="team" class="mt-24 bg-gradient-to-b from-gray-50 to-gray-200 py-16">
        <style>
            #team:hover {
                transform: none !important;
                box-shadow: none !important;
                transition: none !important;
            }
        </style>
    <div class="max-w-7xl mx-auto text-center px-4">
        <h3 class="text-4xl font-extrabold text-gray-800 mb-6 relative" data-aos="fade-down">
            👥 Notre Équipe
        </h3>
        <div class="w-24 h-1 bg-yellow-500 mx-auto mb-8" data-aos="zoom-in" data-aos-delay="100"></div>
        <p class="text-gray-600 max-w-3xl mx-auto text-lg mb-12" data-aos="fade-up" data-aos-delay="200">
            Une équipe dévouée pour garantir la gestion et le bien-être de notre résidence.
        </p>
        <div class="grid md:grid-cols-4 sm:grid-cols-2 gap-8">
            <!-- Team Member 1 -->
            <div class="bg-white p-8 rounded-3xl shadow-xl hover:shadow-2xl hover:scale-105 transition-all duration-300 cursor-pointer text-center border border-gray-100 backdrop-blur-sm bg-white/90" data-aos="flip-left" data-aos-delay="100">
                <div class="relative inline-block">
                    <div class="absolute inset-0 bg-yellow-200 rounded-full blur-md"></div>
                    <img src="https://randomuser.me/api/portraits/men/10.jpg" 
                         class="w-24 h-24 rounded-full relative mx-auto border-4 border-yellow-500 shadow-lg mb-4 object-cover" 
                         alt="Ahmed El Fassi">
                </div>
                <h4 class="text-gray-800 font-semibold text-lg">Ahmed El Fassi</h4>
                <p class="text-yellow-600 font-medium mb-2">Président du Syndic</p>
                <p class="text-sm text-gray-500 italic">"Notre priorité absolue : votre tranquillité d'esprit"</p>
            </div>

            <!-- Team Member 2 -->
            <div class="bg-white p-8 rounded-3xl shadow-xl hover:shadow-2xl hover:scale-105 transition-all duration-300 cursor-pointer text-center border border-gray-100 backdrop-blur-sm bg-white/90" data-aos="flip-left" data-aos-delay="200">
                <div class="relative inline-block">
                    <div class="absolute inset-0 bg-yellow-200 rounded-full blur-md"></div>
                    <img src="https://randomuser.me/api/portraits/men/20.jpg" 
                         class="w-24 h-24 rounded-full relative mx-auto border-4 border-yellow-500 shadow-lg mb-4 object-cover" 
                         alt="Ali Elami">
                </div>
                <h4 class="text-gray-800 font-semibold text-lg">Ali Elami</h4>
                <p class="text-yellow-600 font-medium mb-2">Employé du Syndic</p>
                <p class="text-sm text-gray-500 italic">"Un service efficace pour une gestion optimale"</p>
            </div>

            <!-- Team Member 3 -->
            <div class="bg-white p-8 rounded-3xl shadow-xl hover:shadow-2xl hover:scale-105 transition-all duration-300 cursor-pointer text-center border border-gray-100 backdrop-blur-sm bg-white/90" data-aos="flip-left" data-aos-delay="300">
                <div class="relative inline-block">
                    <div class="absolute inset-0 bg-yellow-200 rounded-full blur-md"></div>
                    <img src="https://randomuser.me/api/portraits/women/15.jpg" 
                         class="w-24 h-24 rounded-full relative mx-auto border-4 border-yellow-500 shadow-lg mb-4 object-cover" 
                         alt="Leila Hamdi">
                </div>
                <h4 class="text-gray-800 font-semibold text-lg">Leila Hamdi</h4>
                <p class="text-yellow-600 font-medium mb-2">Responsable Communication</p>
                <p class="text-sm text-gray-500 italic">"Toujours à votre écoute pour améliorer la communication"</p>
            </div>

            <!-- Team Member 4 -->
            <div class="bg-white p-8 rounded-3xl shadow-xl hover:shadow-2xl hover:scale-105 transition-all duration-300 cursor-pointer text-center border border-gray-100 backdrop-blur-sm bg-white/90" data-aos="flip-left" data-aos-delay="400">
                <div class="relative inline-block">
                    <div class="absolute inset-0 bg-yellow-200 rounded-full blur-md"></div>
                    <img src="https://randomuser.me/api/portraits/men/30.jpg" 
                         class="w-24 h-24 rounded-full relative mx-auto border-4 border-yellow-500 shadow-lg mb-4 object-cover" 
                         alt="Weden Layat">
                </div>
                <h4 class="text-gray-800 font-semibold text-lg">Weden Layat</h4>
                <p class="text-yellow-600 font-medium mb-2">Employé du Syndic</p>
                <p class="text-sm text-gray-500 italic">"L'entretien et la sécurité, notre engagement au quotidien"</p>
            </div>
        </div>
    </div>
</section>

<!-- Add counter animation for statistics -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  const observerOptions = {
    threshold: 0.5
  };
  
  const countObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const countElements = entry.target.querySelectorAll('.counter');
        countElements.forEach(el => {
          const target = el.innerText;
          const suffix = target.includes('+') ? '+' : (target.includes('%') ? '%' : '');
          const finalNumber = parseInt(target.replace(/[^0-9]/g, ''));
          
          let count = 0;
          const duration = 2000; // 2 seconds
          const interval = Math.floor(duration / finalNumber);
          
          const counter = setInterval(() => {
            count++;
            el.innerText = count + suffix;
            
            if (count >= finalNumber) {
              clearInterval(counter);
              el.innerText = target; // Make sure we end with the exact target text
            }
          }, interval);
        });
        
        countObserver.unobserve(entry.target);
      }
    });
  }, observerOptions);
  
  const statsSection = document.querySelector('dl.grid');
  if (statsSection) {
    countObserver.observe(statsSection);
  }
});
</script>
@endsection