<?php include '../partials/tailwind-header.php'; ?>

<!-- Page Title Section -->
<section class="py-20 bg-gradient-to-r from-military-dark to-military-green text-white relative overflow-hidden">
    <div class="absolute inset-0 bg-black/30"></div>
    <div class="container mx-auto px-4 relative z-10">
        <div class="text-center">
            <nav class="text-sm mb-4">
                <ol class="flex justify-center items-center space-x-2 text-gray-300">
                    <li><a href="../index.php" class="hover:text-white">Home</a></li>
                    <li><span class="mx-2">/</span></li>
                    <li class="text-white">About Us</li>
                </ol>
            </nav>
            <h1 class="text-4xl md:text-6xl font-bold mb-4 font-poppins">About Us</h1>
            <p class="text-xl text-gray-200">US Military Welfare Department</p>
        </div>
    </div>
</section>

<!-- About Section -->
<section class="py-16 bg-white relative overflow-hidden">
    <!-- Background Pattern -->
    <div class="absolute left-0 top-0 w-48 h-48 opacity-10 bg-no-repeat bg-contain" style="background-image: url('grepoksu/2021/09/about-2__.png')"></div>
    
    <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <!-- Content Column -->
            <div class="order-2 lg:order-1" x-data="{ isVisible: false }" x-intersect="isVisible = true">
                <div x-show="isVisible" x-transition:enter="transition-all ease-out duration-1000" x-transition:enter-start="opacity-0 transform -translate-y-8" x-transition:enter-end="opacity-100 transform translate-y-0">
                    <p class="text-military-green font-medium uppercase mb-2">ABOUT US</p>
                    <h2 class="text-3xl md:text-4xl font-bold mb-6">The Leave Department</h2>
                    <p class="text-xl font-semibold text-gray-800 mb-6">The leave program is designed to allow service members to use their authorized leave to maximum extent possible.</p>
                    <div class="text-gray-600 leading-relaxed space-y-4">
                        <p>The US Military Welfare Department is to help our military personnel men and women balance their work and family responsibilities by allowing them to take reasonable paid or unpaid leave for certain family and medical reasons. It also seeks to accommodate the legitimate interests of employers and promote equal employment opportunity for the armed forces.</p>
                        <p>Employees taking part in a variety of military duties are covered under this policy. Such military duties include leaves of absence taken by members of the uniformed services, including active duty, reserve or National Guard, for training, periods of active military service, and funeral honors duty, as well as time spent being examined to determine fitness to perform such service.</p>
                    </div>
                </div>
            </div>
            
            <!-- Image Column -->
            <div class="order-1 lg:order-2" x-data="{ isVisible: false }" x-intersect="isVisible = true">
                <div x-show="isVisible" x-transition:enter="transition-all ease-out duration-1000 delay-300" x-transition:enter-start="opacity-0 transform translate-x-8" x-transition:enter-end="opacity-100 transform translate-x-0" class="relative">
                    <div class="bg-military-green/20 absolute inset-0 rounded-lg transform rotate-3"></div>
                    <img src="grepoksu/2021/09/about1.png" alt="Military Personnel" class="relative z-10 rounded-lg shadow-2xl w-full transform hover:scale-105 transition duration-500">
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Benefits Section -->
<section class="py-16 bg-gradient-to-b from-gray-50 to-white relative">
    <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <!-- Image Column -->
            <div x-data="{ isVisible: false }" x-intersect="isVisible = true">
                <div x-show="isVisible" x-transition:enter="transition-all ease-out duration-1000" x-transition:enter-start="opacity-0 transform -translate-x-8" x-transition:enter-end="opacity-100 transform translate-x-0" class="relative">
                    <div class="bg-military-green/20 absolute inset-0 rounded-lg transform -rotate-3"></div>
                    <img src="grepoksu/2021/09/about-2.png" alt="Military Benefits" class="relative z-10 rounded-lg shadow-2xl w-full transform hover:scale-105 transition duration-500">
                </div>
            </div>
            
            <!-- Content Column -->
            <div x-data="{ isVisible: false }" x-intersect="isVisible = true">
                <div x-show="isVisible" x-transition:enter="transition-all ease-out duration-1000 delay-300" x-transition:enter-start="opacity-0 transform translate-y-8" x-transition:enter-end="opacity-100 transform translate-y-0">
                    <p class="text-military-green font-medium uppercase mb-2">WHY SHOULD YOU CONSIDER LEAVE</p>
                    <h2 class="text-3xl md:text-4xl font-bold mb-6">Benefits of Military Leave</h2>
                    <p class="text-gray-600 mb-8">An employee on extended military leave may elect to continue group health insurance coverage for the employee and covered dependents under the same terms and conditions for a period not to exceed 31 days from the date the military leave of absence begins.</p>
                    
                    <ul class="space-y-6">
                        <li class="flex items-start" x-data="{ isVisible: false }" x-intersect="isVisible = true">
                            <div x-show="isVisible" x-transition:enter="transition-all ease-out duration-500" x-transition:enter-start="opacity-0 scale-0" x-transition:enter-end="opacity-100 scale-100" class="bg-military-green text-white rounded-full p-2 mr-4 mt-1 flex-shrink-0">
                                <i class="fas fa-check text-sm"></i>
                            </div>
                            <div>
                                <span class="font-bold text-gray-800">TRUST</span>
                                <span class="text-gray-600"> – you can trust us that we get your emails and letters treat promptly with no delay.</span>
                            </div>
                        </li>
                        
                        <li class="flex items-start" x-data="{ isVisible: false }" x-intersect="isVisible = true">
                            <div x-show="isVisible" x-transition:enter="transition-all ease-out duration-500 delay-100" x-transition:enter-start="opacity-0 scale-0" x-transition:enter-end="opacity-100 scale-100" class="bg-military-green text-white rounded-full p-2 mr-4 mt-1 flex-shrink-0">
                                <i class="fas fa-check text-sm"></i>
                            </div>
                            <div>
                                <span class="font-bold text-gray-800">CONTROL</span>
                                <span class="text-gray-600"> – It makes you to be able to monitor and control your emails easily.</span>
                            </div>
                        </li>
                        
                        <li class="flex items-start" x-data="{ isVisible: false }" x-intersect="isVisible = true">
                            <div x-show="isVisible" x-transition:enter="transition-all ease-out duration-500 delay-200" x-transition:enter-start="opacity-0 scale-0" x-transition:enter-end="opacity-100 scale-100" class="bg-military-green text-white rounded-full p-2 mr-4 mt-1 flex-shrink-0">
                                <i class="fas fa-check text-sm"></i>
                            </div>
                            <div>
                                <span class="font-bold text-gray-800">SUPPORT</span>
                                <span class="text-gray-600"> – we'll always help you when there is problem with the processing of your leave request.</span>
                            </div>
                        </li>
                        
                        <li class="flex items-start" x-data="{ isVisible: false }" x-intersect="isVisible = true">
                            <div x-show="isVisible" x-transition:enter="transition-all ease-out duration-500 delay-300" x-transition:enter-start="opacity-0 scale-0" x-transition:enter-end="opacity-100 scale-100" class="bg-military-green text-white rounded-full p-2 mr-4 mt-1 flex-shrink-0">
                                <i class="fas fa-check text-sm"></i>
                            </div>
                            <div>
                                <span class="font-bold text-gray-800">QUALITY</span>
                                <span class="text-gray-600"> – 100% quality guaranty! Our website is always up 24 hours a day and 7 days a week. So you are sure of access to our leave monitoring department.</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Testimonials Section -->
<section class="py-16 bg-gradient-to-b from-military-dark/90 to-military-dark text-white relative overflow-hidden">
    <!-- Background Patterns -->
    <div class="absolute top-20 left-10 w-16 h-16 opacity-20 bg-no-repeat bg-contain" style="background-image: url('jughymse/assets/images/icons/testimonial-1.png')"></div>
    <div class="absolute bottom-20 right-10 w-20 h-20 opacity-20 bg-no-repeat bg-contain" style="background-image: url('jughymse/assets/images/icons/testimonial-3.png')"></div>
    <div class="absolute top-1/2 left-1/4 w-12 h-12 opacity-10 bg-no-repeat bg-contain" style="background-image: url('jughymse/assets/images/icons/testimonial-2.png')"></div>
    
    <div class="container mx-auto px-4">
        <!-- Section Title -->
        <div class="text-center mb-12" x-data="{ isVisible: false }" x-intersect="isVisible = true">
            <div x-show="isVisible" x-transition:enter="transition-all ease-out duration-1000" x-transition:enter-start="opacity-0 transform translate-y-8" x-transition:enter-end="opacity-100 transform translate-y-0">
                <p class="text-military-light font-medium uppercase mb-2">Share your experience</p>
                <h2 class="text-3xl md:text-4xl font-bold mb-4">Testimonials</h2>
                <p class="text-gray-300 max-w-2xl mx-auto">Read some few testimonials from our military service personals</p>
            </div>
        </div>
        
        <!-- Testimonials Carousel -->
        <div x-data="testimonialCarousel" class="relative">
            <div class="overflow-hidden">
                <div class="flex transition-transform duration-500 ease-in-out" :style="'transform: translateX(-' + (activeSlide * 100) + '%)'">
                    <!-- Testimonial 1 -->
                    <div class="w-full flex-shrink-0 px-4">
                        <div class="bg-white/10 backdrop-blur-sm rounded-lg p-8 text-center max-w-2xl mx-auto">
                            <div class="mb-6">
                                <div class="w-20 h-20 bg-gray-300 rounded-full mx-auto mb-4 overflow-hidden">
                                    <div class="w-full h-full bg-military-green/50 flex items-center justify-center">
                                        <i class="fas fa-user text-2xl text-white"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="text-4xl text-military-light mb-4">
                                <i class="fas fa-quote-left"></i>
                            </div>
                            <p class="text-lg text-gray-200 mb-6 italic">The military leave gives me the opportunity to take break from work and relate with the civilian world</p>
                            <div class="border-t border-gray-500 pt-4">
                                <h4 class="font-bold text-white mb-1">Elizabeth Blackwell</h4>
                                <div class="flex justify-center items-center space-x-1 text-yellow-400">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star-half"></i>
                                    <i class="fas fa-star-half"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Testimonial 2 -->
                    <div class="w-full flex-shrink-0 px-4">
                        <div class="bg-white/10 backdrop-blur-sm rounded-lg p-8 text-center max-w-2xl mx-auto">
                            <div class="mb-6">
                                <div class="w-20 h-20 rounded-full mx-auto mb-4 overflow-hidden">
                                    <img src="../grepoksu/2020/09/testimonial2-1.jpg" alt="Margaret Sunsan" class="w-full h-full object-cover">
                                </div>
                            </div>
                            <div class="text-4xl text-military-light mb-4">
                                <i class="fas fa-quote-left"></i>
                            </div>
                            <p class="text-lg text-gray-200 mb-6 italic">A great part of the military is the joy of returning home to your family and spending time with them.</p>
                            <div class="border-t border-gray-500 pt-4">
                                <h4 class="font-bold text-white mb-1">Margaret Sunsan</h4>
                                <div class="flex justify-center items-center space-x-1 text-yellow-400">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star-half"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Testimonial 3 -->
                    <div class="w-full flex-shrink-0 px-4">
                        <div class="bg-white/10 backdrop-blur-sm rounded-lg p-8 text-center max-w-2xl mx-auto">
                            <div class="mb-6">
                                <div class="w-20 h-20 rounded-full mx-auto mb-4 overflow-hidden">
                                    <img src="../grepoksu/2020/09/testimonial1.jpg" alt="Eric Buckman" class="w-full h-full object-cover">
                                </div>
                            </div>
                            <div class="text-4xl text-military-light mb-4">
                                <i class="fas fa-quote-left"></i>
                            </div>
                            <p class="text-lg text-gray-200 mb-6 italic">I still have fresh memories of how I welcomed my first son from the foster care. I always wanted to adopt a child.</p>
                            <div class="border-t border-gray-500 pt-4">
                                <h4 class="font-bold text-white mb-1">Eric Buckman</h4>
                                <div class="flex justify-center items-center space-x-1 text-yellow-400">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star-half"></i>
                                    <i class="fas fa-star-half"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Navigation Controls -->
            <button @click="prev()" class="absolute left-4 top-1/2 transform -translate-y-1/2 bg-white/20 hover:bg-white/30 text-white rounded-full p-3 transition">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                </svg>
            </button>
            <button @click="next()" class="absolute right-4 top-1/2 transform -translate-y-1/2 bg-white/20 hover:bg-white/30 text-white rounded-full p-3 transition">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                </svg>
            </button>
            
            <!-- Dots Indicator -->
            <div class="flex justify-center mt-8 space-x-2">
                <button @click="activeSlide = 0" :class="{'bg-white': activeSlide === 0, 'bg-gray-400': activeSlide !== 0}" class="w-3 h-3 rounded-full transition-colors duration-300"></button>
                <button @click="activeSlide = 1" :class="{'bg-white': activeSlide === 1, 'bg-gray-400': activeSlide !== 1}" class="w-3 h-3 rounded-full transition-colors duration-300"></button>
                <button @click="activeSlide = 2" :class="{'bg-white': activeSlide === 2, 'bg-gray-400': activeSlide !== 2}" class="w-3 h-3 rounded-full transition-colors duration-300"></button>
            </div>
        </div>
    </div>
</section>

<!-- Call to Action Section -->
<section class="py-16 bg-white">
    <div class="container mx-auto px-4">
        <div class="bg-gradient-to-r from-military-green to-military-light rounded-2xl p-8 md:p-12 text-center text-white" x-data="{ isVisible: false }" x-intersect="isVisible = true">
            <div x-show="isVisible" x-transition:enter="transition-all ease-out duration-1000" x-transition:enter-start="opacity-0 transform translate-y-8" x-transition:enter-end="opacity-100 transform translate-y-0">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to Apply for Military Leave?</h2>
                <p class="text-xl mb-8 text-gray-100">Take the next step and apply for your military leave today. Our team is here to support you through the entire process.</p>
                <div class="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-6">
                    <a href="../apply-online/index2.php" class="inline-block px-8 py-3 bg-white text-military-green rounded-full text-lg font-medium hover:bg-gray-100 transition duration-300 shadow-lg transform hover:scale-105">Apply for Leave</a>
                    <a href="../contact-mld/index5.php" class="inline-block px-8 py-3 border-2 border-white text-white hover:bg-white hover:text-military-green rounded-full text-lg font-medium transition duration-300 transform hover:scale-105">Contact Support</a>
                </div>
            </div>
        </div>
    </div>
</section>

<?php include_once('partials/tailwind-footer.php'); ?>

<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('testimonialCarousel', () => ({
        activeSlide: 0,
        totalSlides: 3,
        
        init() {
            setInterval(() => {
                this.next();
            }, 5000);
        },
        
        next() {
            this.activeSlide = (this.activeSlide + 1) % this.totalSlides;
        },
        
        prev() {
            this.activeSlide = (this.activeSlide - 1 + this.totalSlides) % this.totalSlides;
        }
    }));
});
</script>
