@extends('layouts.main')

@section('content')

<div class="relative isolate px-6 pt-14 lg:px-8" data-aos="zoom-in" data-aos-duration="1000" id="hero-slider">
    <!-- Background Image Slider with Parallax Effect -->
    <div class="absolute inset-0 -z-10 overflow-hidden">
        <!-- Parallax container -->
        <div class="relative h-full w-full" id="background-slider">
            <!-- Slides with parallax effect -->
            <div class="slide absolute inset-0 opacity-0 transition-opacity duration-1500 ease-in-out" id="slide-1">
                <div class="parallax-bg absolute inset-0 h-[120%] w-full" style="background-image: url('https://chaletmed.ma/images/image1.jpg'); background-size: cover; background-position: center; transform: translateY(0);">
                    <div class="absolute inset-0 bg-black opacity-60"></div>
                </div>
            </div>
            <div class="slide absolute inset-0 opacity-0 transition-opacity duration-1500 ease-in-out" id="slide-2">
                <div class="parallax-bg absolute inset-0 h-[120%] w-full" style="background-image: url('https://chaletmed.ma/images/image2.jpg'); background-size: cover; background-position: center; transform: translateY(0);">
                    <div class="absolute inset-0 bg-black opacity-60"></div>
                </div>
            </div>
            <div class="slide absolute inset-0 opacity-0 transition-opacity duration-1500 ease-in-out" id="slide-3">
                <div class="parallax-bg absolute inset-0 h-[120%] w-full" style="background-image: url('https://chaletmed.ma/images/img3.jpg'); background-size: cover; background-position: center; transform: translateY(0);">
                    <div class="absolute inset-0 bg-black opacity-60"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Decorative elements with scroll animations -->
    <div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" aria-hidden="true">
        <div class="relative left-[calc(50%-11rem)] aspect-1155/678 w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem] animate-pulse" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
    </div>

    <!-- Main content with scroll reveal animations -->
    <div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
        <div class="text-center">
            <h1 class="text-5xl font-semibold tracking-tight text-balance text-yellow-500 sm:text-7xl animate-fadeIn reveal-element">Syndic
            CHALET MED</h1>
            <p class="mt-8 text-lg font-medium text-pretty text-gray-300 sm:text-xl/8 animate-slideUp reveal-element delay-200">Le syndic chalet Med, est une entité à but non lucratif, géré par des
            bénévoles, qui sont à la source des propriétaires, des 41 chalets.</p>
            <div class="mt-10 flex items-center justify-center gap-x-6 animate-fadeIn reveal-element delay-400" style="animation-delay: 0.5s">
                <a href="{{route('login')}}" class="rounded-md bg-yellow-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-yellow-500 hover:scale-105 transition-all duration-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Connexion</a>
                <a href="{{route('services')}}" class="text-sm/6 font-semibold text-gray-200 hover:text-yellow-500 transition-colors duration-300">Savoir plus <span aria-hidden="true" class="hover:translate-x-1 transition-transform">→</span></a>
            </div>
        </div>
    </div>

    <!-- Animated slider navigation dots -->
    <div class="absolute bottom-10 left-0 right-0 flex justify-center space-x-3 reveal-element slide-up">
        <button class="h-2 w-2 rounded-full bg-white opacity-50 hover:opacity-100 transition-all duration-300 dot active hover:scale-150" data-index="0"></button>
        <button class="h-2 w-2 rounded-full bg-white opacity-50 hover:opacity-100 transition-all duration-300 dot hover:scale-150" data-index="1"></button>
        <button class="h-2 w-2 rounded-full bg-white opacity-50 hover:opacity-100 transition-all duration-300 dot hover:scale-150" data-index="2"></button>
    </div>

    <!-- Bottom decorative element with scroll reaction -->
    <div class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]" aria-hidden="true">
        <div class="relative left-[calc(50%+3rem)] aspect-1155/678 w-[36.125rem] -translate-x-1/2 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem] animate-pulse scroll-rotate" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
    </div>
</div>

<style>
    /* Reveal animations */
    .reveal-element {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.8s ease, transform 0.8s ease;
    }
    
    .reveal-element.active {
        opacity: 1;
        transform: translateY(0);
    }
    
    .delay-200 {
        transition-delay: 0.2s;
    }
    
    .delay-400 {
        transition-delay: 0.4s;
    }
    
    .slide-up {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 1s ease, transform 1s ease;
    }
    
    .slide-up.active {
        opacity: 1;
        transform: translateY(0);
    }
    
    .scroll-rotate {
        transition: transform 0.8s ease;
    }
</style>

<!-- JavaScript for the slider with scroll animations -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const slides = document.querySelectorAll('.slide');
    const dots = document.querySelectorAll('.dot');
    const parallaxElements = document.querySelectorAll('.parallax-bg');
    const revealElements = document.querySelectorAll('.reveal-element, .slide-up');
    const scrollRotateElement = document.querySelector('.scroll-rotate');
    
    let currentSlide = 0;
    let slideInterval;
    let isScrolling = false;
    let scrollTimeout;

    // Function to show a specific slide
    function showSlide(index) {
        // Hide all slides
        slides.forEach(slide => {
            slide.style.opacity = '0';
            slide.style.zIndex = '0';
        });
        
        // Show the current slide
        slides[index].style.opacity = '1';
        slides[index].style.zIndex = '1';
        
        // Update dots
        dots.forEach(dot => {
            dot.classList.remove('active', 'opacity-100');
            dot.classList.add('opacity-50');
        });
        dots[index].classList.add('active', 'opacity-100');
        dots[index].classList.remove('opacity-50');
        
        currentSlide = index;
    }

    // Show the first slide initially
    showSlide(0);
    
    // Start the automatic slideshow
    function startSlideshow() {
        slideInterval = setInterval(() => {
            let nextSlide = (currentSlide + 1) % slides.length;
            showSlide(nextSlide);
        }, 5000); // Change slide every 5 seconds
    }
    
    // Handle dot clicks
    dots.forEach(dot => {
        dot.addEventListener('click', function() {
            clearInterval(slideInterval); // Reset interval when manually changing slides
            showSlide(parseInt(this.getAttribute('data-index')));
            startSlideshow(); // Restart the automatic slideshow
        });
    });
    
    // Start the slideshow
    startSlideshow();
    
    // Parallax effect on scroll
    window.addEventListener('scroll', function() {
        // Throttle scroll events
        if (!isScrolling) {
            isScrolling = true;
            
            // Clear timeout if it exists
            if (scrollTimeout) {
                clearTimeout(scrollTimeout);
            }
            
            // Process scroll animations
            requestAnimationFrame(function() {
                const scrollPosition = window.scrollY;
                
                // Parallax effect
                parallaxElements.forEach(element => {
                    const speed = 0.4; // Adjust speed as needed
                    const yPos = -scrollPosition * speed;
                    element.style.transform = `translateY(${yPos}px)`;
                });
                
                // Reveal animations on scroll
                revealElements.forEach(element => {
                    const elementTop = element.getBoundingClientRect().top;
                    const elementHeight = element.offsetHeight;
                    const windowHeight = window.innerHeight;
                    
                    if (elementTop < windowHeight - elementHeight / 4) {
                        element.classList.add('active');
                    }
                });
                
                // Rotate element on scroll
                if (scrollRotateElement) {
                    const rotateAmount = scrollPosition * 0.05; // Adjust rotation speed
                    scrollRotateElement.style.transform = `rotate(${30 + rotateAmount}deg) translateX(-50%)`;
                }
                
                // Set timeout to reset isScrolling flag
                scrollTimeout = setTimeout(function() {
                    isScrolling = false;
                }, 50);
            });
        }
    });
    
    // Trigger reveal animations for elements in viewport on load
    function checkInitialReveal() {
        revealElements.forEach(element => {
            const elementTop = element.getBoundingClientRect().top;
            const elementHeight = element.offsetHeight;
            const windowHeight = window.innerHeight;
            
            if (elementTop < windowHeight - elementHeight / 4) {
                element.classList.add('active');
            }
        });
    }
    
    // Check initial reveal after a slight delay to ensure everything is loaded
    setTimeout(checkInitialReveal, 300);
});
</script>

<section class="py-16 px-4 md:px-8 bg-white my-16" data-aos="fade-up" data-aos-duration="800">
  <div class="max-w-6xl mx-auto">
    <!-- Title Section -->
    <div class="mb-12 text-center" data-aos="flip-up" data-aos-duration="1000">
      <h2 class="text-4xl font-bold text-gray-800 mb-4 pb-4 inline-block">
        Le Syndic Chalet Med : Gestion bénévole pour la sécurité, l'entretien et la valorisation des chalets
      </h2>
      <div class="w-24 h-1 bg-yellow-500 mx-auto mb-8 animate-expandWidth"></div>
    </div>

    <!-- Content Grid -->
    <div class="grid md:grid-cols-2 gap-12 items-start">
      <!-- Text Content -->
      <div class="space-y-6" data-aos="fade-right" data-aos-duration="1000" data-aos-delay="200">
        
        <div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-lg transition-all duration-300">
          <p class="text-gray-600 text-base leading-relaxed">
          Le syndic Chalet Med est une entité à but non lucratif, géré par des bénévoles, 
          qui sont à la source des propriétaires des 41 chalets. Ils ont pour mission 
          principale le maintien de la sécurité sur les quatre coins de la résidence, 
          jour et nuit, par le biais d'une équipe de sécurité composée principalement 
          d'anciens soldats de l'armée.
          Les défis de tous les jours en matière de jardinage, d'espace vert et de sécurité 
          font partie du quotidien du bureau exécutif du syndic CHALET MED. Cet espace vient 
          renforcer notre détermination à veiller sur la valeur ajoutée des chalets par la 
          gestion efficace des cotisations des adhérents sur tous les plans.
          </p>
        </div>

        <!-- Address Section -->
        <div class="mt-8 bg-gray-50 p-6 rounded-lg hover:shadow-md transition-all duration-300 transform hover:-translate-y-1">
          <div class="space-y-3">
            <div class="flex items-center">
              <i class="fas fa-map-marker-alt text-yellow-600 mr-3 animate-bounce"></i>
              <span class="font-semibold text-gray-800">CHALET MED ROUTE DE SEBTA</span>
            </div>
            <div class="flex items-center">
              <i class="fas fa-home text-yellow-600 mr-3"></i>
              <span class="text-gray-600">Villa</span>
            </div>
            <div class="flex items-center">
              <i class="fas fa-umbrella-beach text-yellow-600 mr-3"></i>
              <span class="text-gray-600">PLAGE SABLE DOREE AVEC CORNICHE</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Image Section -->
      <div class="relative h-full" data-aos="fade-left" data-aos-duration="1000" data-aos-delay="300">
        <div class="bg-gray-200 h-full rounded-xl overflow-hidden shadow-lg">
          <img src="https://images.unsplash.com/photo-1582719508461-905c673771fd?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" 
               alt="Chalet Med" 
               class="w-full h-full object-cover transform hover:scale-105 transition duration-500 animate-fadeIn">
        </div>
        <div class="absolute bottom-4 right-4 bg-white px-4 py-2 rounded-full shadow-md animate-slideUp">
          <span class="text-sm font-semibold text-yellow-600">Depuis 2023</span>
        </div>
      </div>
    </div>
  </div>
</section>

      <!-- Testimonials Section -->
<section class="py-16 bg-gray-50" data-aos="fade-in" data-aos-duration="1200">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16" data-aos="zoom-in" data-aos-duration="800">
            <h2 class="text-3xl font-bold text-gray-800">Ce que disent nos clients</h2>
            <div class="w-24 h-1 bg-yellow-500 mx-auto mt-4 animate-expandWidth"></div>
            <p class="mt-4 text-gray-600">Découvrez les expériences de nos résidents satisfaits</p>
        </div>

        <div class="grid md:grid-cols-3 gap-8">
            <!-- Testimonial 1 -->
            <div data-aos="fade-up" data-aos-delay="100" data-aos-duration="800" class="bg-white rounded-xl shadow-lg p-8 relative hover:shadow-xl transition-shadow transform hover:-translate-y-2 duration-300">
                <div class="absolute -top-4 left-8 animate-pulse">
                    <span class="text-yellow-500 text-6xl">"</span>
                </div>
                <div class="pt-4">
                    <p class="text-gray-600 italic mb-6">
                        Une gestion transparente et professionnelle. Je suis très satisfait des services fournis par ChaletMed.
                    </p>
                    <div class="flex items-center">
                        <img src="https://randomuser.me/api/portraits/men/32.jpg" 
                             alt="Profile" 
                             class="w-12 h-12 rounded-full animate-rotateIn">
                        <div class="ml-4">
                            <h4 class="font-semibold text-gray-800">Mohammed Alami</h4>
                            <p class="text-gray-500 text-sm">Propriétaire depuis 2023</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Testimonial 2 -->
            <div data-aos="fade-up" data-aos-delay="200" data-aos-duration="800" class="bg-white rounded-xl shadow-lg p-8 relative hover:shadow-xl transition-shadow transform hover:-translate-y-2 duration-300">
                <div class="absolute -top-4 left-8 animate-pulse">
                    <span class="text-yellow-500 text-6xl">"</span>
                </div>
                <div class="pt-4">
                    <p class="text-gray-600 italic mb-6">
                        L'équipe est très réactive et le système de gestion en ligne est vraiment pratique et intuitif.
                    </p>
                    <div class="flex items-center">
                        <img src="https://randomuser.me/api/portraits/women/44.jpg" 
                             alt="Profile" 
                             class="w-12 h-12 rounded-full animate-rotateIn">
                        <div class="ml-4">
                            <h4 class="font-semibold text-gray-800">Sara Benjelloun</h4>
                            <p class="text-gray-500 text-sm">Propriétaire depuis 2024</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Testimonial 3 -->
            <div data-aos="fade-up" data-aos-delay="300" data-aos-duration="800" class="bg-white rounded-xl shadow-lg p-8 relative hover:shadow-xl transition-shadow transform hover:-translate-y-2 duration-300">
                <div class="absolute -top-4 left-8 animate-pulse">
                    <span class="text-yellow-500 text-6xl">"</span>
                </div>
                <div class="pt-4">
                    <p class="text-gray-600 italic mb-6">
                        La sécurité et l'entretien sont impeccables. Je recommande vivement leurs services.
                    </p>
                    <div class="flex items-center">
                        <img src="https://randomuser.me/api/portraits/men/67.jpg" 
                             alt="Profile" 
                             class="w-12 h-12 rounded-full animate-rotateIn">
                        <div class="ml-4">
                            <h4 class="font-semibold text-gray-800">Karim Tazi</h4>
                            <p class="text-gray-500 text-sm">Propriétaire depuis 2023</p>
                        </div>
                    </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" data-aos-duration="1000">
    <!-- Section Header -->
    <div class="text-center mb-12">
      <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4 animate-fadeIn">
        Plongez dans l'ambiance paisible de notre résidence
      </h2>
      <div class="w-24 h-1 bg-yellow-500 mx-auto mb-8 animate-expandWidth"></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" data-aos-delay="200" data-aos-duration="1000">
      <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="300" data-aos-duration="800">
      <p class="text-gray-600 italic animate-slideUp">
        <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 animate-bounce" 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>

<section class="py-16 px-4 md:px-8 bg-white" data-aos="fade-in" data-aos-duration="1000">
  <div class="max-w-6xl mx-auto">
    <!-- Section Header -->
    <div class="text-center mb-12" data-aos="flip-down" data-aos-duration="800">
      <h2 class="text-4xl font-bold text-gray-800 mb-3">Services</h2>
      <div class="w-24 h-1 bg-yellow-500 mx-auto mb-8 animate-expandWidth"></div>
      <p class="text-xl text-gray-600 animate-fadeIn">Explorez les services offerts par notre application.</p>
      
    </div>

    <!-- Services Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <!-- Service Card 1 -->
      <div data-aos="flip-left" data-aos-delay="100" data-aos-duration="800" class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg hover:-translate-y-1 transition-all duration-300">
        <div class="flex items-center mb-4">
          <div class="bg-yellow-500 p-3 rounded-full mr-4 animate-pulse">
            <i class="fas fa-money-bill-wave text-white text-xl"></i>
          </div>
          <h3 class="text-xl font-semibold text-gray-800">Gestion des cotisations</h3>
        </div>
        <p class="text-gray-600">Suivez vos cotisations et paiements en toute simplicité</p>
      </div>

      <!-- Service Card 2 -->
      <div data-aos="flip-left" data-aos-delay="200" data-aos-duration="800" class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg hover:-translate-y-1 transition-all duration-300">
        <div class="flex items-center mb-4">
          <div class="bg-yellow-500 p-3 rounded-full mr-4 animate-pulse">
            <i class="fas fa-tasks text-white text-xl"></i>
          </div>
          <h3 class="text-xl font-semibold text-gray-800">Gestion des charges</h3>
        </div>
        <p class="text-gray-600">Suivez et gérez vos charges de résidence en toute simplicité.</p>
      </div>

      <!-- Service Card 3 -->
      <div data-aos="flip-left" data-aos-delay="300" data-aos-duration="800" class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg hover:-translate-y-1 transition-all duration-300">
        <div class="flex items-center mb-4">
          <div class="bg-yellow-500 p-3 rounded-full mr-4 animate-pulse">
            <i class="fas fa-newspaper text-white text-xl"></i>
          </div>
          <h3 class="text-xl font-semibold text-gray-800">Actualités</h3>
        </div>
        <p class="text-gray-600">Restez informé des dernières nouvelles de la résidence.</p>
      </div>

      <!-- Service Card 4 -->
      <div data-aos="flip-left" data-aos-delay="400" data-aos-duration="800" class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg hover:-translate-y-1 transition-all duration-300">
        <div class="flex items-center mb-4">
          <div class="bg-yellow-500 p-3 rounded-full mr-4 animate-pulse">
            <i class="fas fa-receipt text-white text-xl"></i>
          </div>
          <h3 class="text-xl font-semibold text-gray-800">Reçus de paiement</h3>
        </div>
        <p class="text-gray-600">Saisir et importer les reçus de paiement des charges fixes mensuelles et occasionnelles.</p>
      </div>

      <!-- Service Card 5 -->
      <div data-aos="flip-left" data-aos-delay="500" data-aos-duration="800" class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg hover:-translate-y-1 transition-all duration-300">
        <div class="flex items-center mb-4">
          <div class="bg-yellow-500 p-3 rounded-full mr-4 animate-pulse">
            <i class="fas fa-chart-bar text-white text-xl"></i>
          </div>
          <h3 class="text-xl font-semibold text-gray-800">Situation financière</h3>
        </div>
        <p class="text-gray-600">Consulter la situation (montant payé, instances de paiement)</p>
      </div>

      <!-- Service Card 6 -->
      <div data-aos="flip-left" data-aos-delay="600" data-aos-duration="800" class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg hover:-translate-y-1 transition-all duration-300">
        <div class="flex items-center mb-4">
          <div class="bg-yellow-500 p-3 rounded-full mr-4 animate-pulse">
            <i class="fas fa-chart-line text-white text-xl"></i>
          </div>
          <h3 class="text-xl font-semibold text-gray-800">Dashboard</h3>
        </div>
        <p class="text-gray-600">Tableau de bord affichant le solde actuel et le total des charges à prévoir par rubrique</p>
      </div>
    </div>
  </div>
</section>

<!-- Bank Account Section -->
<section class="py-16 bg-white" data-aos="fade-up" data-aos-duration="1200">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="bg-gradient-to-br from-yellow-50 to-yellow-400 rounded-2xl shadow-lg p-8 transform hover:scale-102 transition-transform duration-500">
            <!-- Title Section -->
            <div class="text-center mb-12" data-aos="zoom-in" data-aos-duration="800">
                <h2 class="text-3xl font-bold text-gray-800 mb-4 animate-fadeIn">Compte bancaire</h2>
                <div class="w-24 h-1 bg-yellow-500 mx-auto mb-4 animate-expandWidth"></div>
                <p class="text-gray-600">Pour les versements de cotisations</p>
            </div>

            <!-- Bank Information Section -->
            <div class="grid md:grid-cols-2 gap-8 items-center">
                <!-- Left Column - Text Information -->
                <div class="space-y-6" data-aos="fade-right" data-aos-delay="200" data-aos-duration="800">
                    <!-- Account Number -->
                    <div class="bg-white p-4 rounded-xl shadow-sm hover:shadow-md transition-shadow transform hover:-translate-y-1 duration-300">
                        <div class="flex items-center space-x-4">
                            <div class="bg-yellow-100 p-3 rounded-lg animate-pulse">
                                <i class="fas fa-credit-card text-yellow-600 text-xl"></i>
                            </div>
                            <div>
                                <p class="text-sm font-semibold text-gray-500">Numéro de compte</p>
                                <p class="text-lg font-mono text-gray-900">{{ $bank->banque ?? 'Aucune banque active' }}</p>
                            </div>
                        </div>
                    </div>

                    <!-- Other Information Cards -->
                    <div class="grid grid-cols-2 gap-4">
                        <div class="bg-white p-4 rounded-xl shadow-sm hover:shadow-md transition-shadow transform hover:-translate-y-1 duration-300">
                            <div class="flex items-center space-x-3">
                                <div class="bg-yellow-100 p-2 rounded-lg animate-pulse">
                                    <i class="fas fa-building text-yellow-600"></i>
                                </div>
                                <div>
                                    <p class="text-sm font-semibold text-gray-500">Raison sociale</p>
                                    <p class="text-gray-900">{{ $bank->raison_sociale ?? 'Non défini' }}</p>
                                </div>
                            </div>
                        </div>

                        <div class="bg-white p-4 rounded-xl shadow-sm hover:shadow-md transition-shadow transform hover:-translate-y-1 duration-300">
                            <div class="flex items-center space-x-3">
                                <div class="bg-yellow-100 p-2 rounded-lg animate-pulse">
                                    <i class="fas fa-map-marker-alt text-yellow-600"></i>
                                </div>
                                <div>
                                    <p class="text-sm font-semibold text-gray-500">Ville</p>
                                    <p class="text-gray-900">{{ $bank->ville ?? 'Non défini' }}</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Bank Name -->
                    <div class="bg-white p-4 rounded-xl shadow-sm hover:shadow-md transition-shadow transform hover:-translate-y-1 duration-300">
                        <div class="flex items-center space-x-4">
                            <div class="bg-yellow-100 p-3 rounded-lg animate-pulse">
                                <i class="fas fa-university text-yellow-600 text-xl"></i>
                            </div>
                            <div>
                                <p class="text-sm font-semibold text-gray-500">Banque</p>
                                <p class="text-lg text-gray-900">{{ $bank->banque ?? 'Aucune banque active' }}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Right Column - Bank Logo -->
                <div class="flex justify-center md:justify-end" data-aos="fade-left" data-aos-delay="300" data-aos-duration="800">
                    <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow transform hover:rotate-3 duration-300">
                        @if($bank && $bank->logo && Storage::disk('public')->exists($bank->logo))
                            <img src="{{ asset('storage/' . $bank->logo) }}" alt="{{ $bank->banque }} Logo" class="h-20 w-auto"/>
                        @else
                            <span class="text-gray-400">No logo</span>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
/* Custom animation keyframes */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes expandWidth {
  from { width: 0; }
  to { width: 6rem; }
}

@keyframes rotateIn {
  from { transform: rotate(-10deg) scale(0.9); opacity: 0; }
  to { transform: rotate(0) scale(1); opacity: 1; }
}

/* Animation classes */
.animate-fadeIn {
  animation: fadeIn 1s ease-out forwards;
}

.animate-slideUp {
  animation: slideUp 0.8s ease-out forwards;
}

.animate-expandWidth {
  animation: expandWidth 1s ease-out forwards;
}

.animate-rotateIn {
  animation: rotateIn 0.8s ease-out forwards;
}

.animate-pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.7; }
  100% { opacity: 1; }
}

.transform {
  transition-property: transform;
}

.hover\:scale-102:hover {
  transform: scale(1.02);
}

.hover\:rotate-3:hover {
  transform: rotate(3deg);
}
</style>

@endsection