@extends('layouts.frontend')

@section('page-title', __('Dashboard'))
@section('page-heading', __('Dashboard'))

@section('content')

    @include('partials.messages')
   
        
<!-- Enhanced UN Peacekeeping Hero Section -->
<section class="relative py-24 bg-gradient-peacekeeping bg-hero-pattern text-white overflow-hidden">
    <!-- UN Peacekeeping Background Pattern -->
    <div class="absolute inset-0 opacity-20"></div>
    <div class="absolute inset-0 bg-gradient-to-br from-black/60 via-transparent to-black/40"></div>

    <!-- Floating Military Elements -->
    <div class="absolute top-20 left-10 w-16 h-16 opacity-20 animate-pulse">
        <i class="fas fa-baby-carriage text-4xl text-peace-gold"></i>
    </div>
    <div class="absolute bottom-20 right-10 w-20 h-20 opacity-10 animate-bounce">
        <i class="fas fa-home text-5xl text-white"></i>
    </div>
    <div class="absolute top-1/2 left-1/4 w-12 h-12 opacity-15 animate-ping">
        <i class="fas fa-heart text-3xl text-peace-gold"></i>
    </div>

    <div class="container mx-auto px-4 relative z-10">
        <div class="text-center max-w-4xl mx-auto">
            <!-- Enhanced Breadcrumb -->
            <nav class="text-sm mb-8" x-data="{ isVisible: true }" 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-4" x-transition:enter-end="opacity-100 transform translate-y-0">
                    <ol class="inline-flex justify-center items-center space-x-3 text-gray-300 bg-white/10 backdrop-blur-sm rounded-full px-6 py-3">
                        <li><a href="{{url('/')}}" class="hover:text-eagle-gold transition-colors duration-300 flex items-center">
                            <i class="fas fa-home mr-2"></i>Home
                        </a></li>
                        <li><i class="fas fa-chevron-right text-xs mx-2 text-eagle-gold"></i></li>
                        <li class="text-eagle-gold font-semibold">Pregnancy Home Leave</li>
                    </ol>
                </div>
            </nav>

            <!-- Enhanced Title -->
            <div x-data="{ isVisible: true }" x-intersect="isVisible = true">
                <div x-show="isVisible" x-transition:enter="transition-all ease-out duration-1200 delay-300" x-transition:enter-start="opacity-0 transform translate-y-8" x-transition:enter-end="opacity-100 transform translate-y-0">
                    <!-- Maternity Support Badge -->
                    <div class="inline-flex items-center bg-gradient-to-r from-eagle-gold to-yellow-500 text-military-dark px-8 py-4 rounded-full mb-8 shadow-lg">
                        <i class="fas fa-female mr-3 text-lg"></i>
                        <span class="font-bold uppercase tracking-wide">Maternity Support Services</span>
                    </div>

                    <h1 class="text-5xl md:text-7xl font-bold mb-6 font-military tracking-wide text-transparent bg-clip-text bg-gradient-to-r from-white via-eagle-gold to-white">
                        PREGNANCY LEAVE
                    </h1>
                    <div class="w-32 h-1 bg-gradient-to-r from-transparent via-eagle-gold to-transparent mx-auto mb-6"></div>
                    <p class="text-2xl text-gray-200 font-serif italic mb-4">Supporting Military Families</p>
                    <p class="text-lg text-gray-300 max-w-2xl mx-auto leading-relaxed">
                        Comprehensive leave support for military families during pregnancy and childbirth, ensuring quality maternity care and family bonding time.
                    </p>
                </div>
            </div>

            <!-- Benefits Banner -->
            <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6" x-data="{ isVisible: true }" x-intersect="isVisible = true">
                <div x-show="isVisible" x-transition:enter="transition-all ease-out duration-1000 delay-500" x-transition:enter-start="opacity-0 transform translate-y-6" x-transition:enter-end="opacity-100 transform translate-y-0">
                    <div class="bg-gradient-to-r from-military-green/20 to-military-green/10 rounded-xl p-6 border border-military-green/30">
                        <div class="text-center">
                            <i class="fas fa-stethoscope text-eagle-gold text-3xl mb-3"></i>
                            <h4 class="font-bold text-white text-2xl mb-1">Medical Care</h4>
                            <p class="text-gray-300 text-sm">Comprehensive Coverage</p>
                        </div>
                    </div>
                </div>
                <div x-show="isVisible" x-transition:enter="transition-all ease-out duration-1000 delay-700" x-transition:enter-start="opacity-0 transform translate-y-6" x-transition:enter-end="opacity-100 transform translate-y-0">
                    <div class="bg-gradient-to-r from-eagle-gold/20 to-eagle-gold/10 rounded-xl p-6 border border-eagle-gold/30">
                        <div class="text-center">
                            <i class="fas fa-handshake text-eagle-gold text-3xl mb-3"></i>
                            <h4 class="font-bold text-white text-2xl mb-1">Job Protection</h4>
                            <p class="text-gray-300 text-sm">Secured Position</p>
                        </div>
                    </div>
                </div>
                <div x-show="isVisible" x-transition:enter="transition-all ease-out duration-1000 delay-900" x-transition:enter-start="opacity-0 transform translate-y-6" x-transition:enter-end="opacity-100 transform translate-y-0">
                    <div class="bg-gradient-to-r from-usa-red/20 to-usa-red/10 rounded-xl p-6 border border-usa-red/30">
                        <div class="text-center">
                            <i class="fas fa-dollar-sign text-eagle-gold text-3xl mb-3"></i>
                            <h4 class="font-bold text-white text-2xl mb-1">Financial Support</h4>
                            <p class="text-gray-300 text-sm">Leave Benefits</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Enhanced Military Leave Information Section -->
<section class="py-20 bg-gradient-to-br from-gray-50 to-white relative overflow-hidden">
    <!-- Background Pattern -->
    <div class="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg width=\'60\' height=\'60\' viewBox=\'0 0 60 60\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'none\' fill-rule=\'evenodd\'%3E%3Cg fill=\'%232d4a1e\' fill-opacity=\'0.03\'%3E%3Cpath d=\'M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4z\'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')] opacity-30"></div>

    <div class="container mx-auto px-4 relative z-10">
        <div class="grid lg:grid-cols-2 gap-16 items-center">
            <!-- Content Side -->
            <div x-data="{ isVisible: true }" x-intersect="isVisible = true">
                <div x-show="isVisible" x-transition:enter="transition-all ease-out duration-1200" x-transition:enter-start="opacity-0 transform -translate-x-12" x-transition:enter-end="opacity-100 transform translate-x-0">
                    <!-- Section Badge -->
                    <div class="inline-flex items-center bg-gradient-to-r from-military-green to-military-dark text-white px-6 py-3 rounded-full mb-8 shadow-lg">
                        <i class="fas fa-clipboard-list mr-3"></i>
                        <span class="font-semibold uppercase tracking-wide text-sm">Military Leave Benefits</span>
                    </div>

                    <h2 class="text-4xl md:text-5xl font-bold mb-6 text-military-dark">
                        Pregnancy
                        <span class="text-transparent bg-clip-text bg-gradient-to-r from-military-green to-eagle-gold">Home Leave</span>
                    </h2>

                    <p class="text-lg text-gray-700 mb-8 leading-relaxed">
                        Chargeable leave (ordinary, advanced, excess) requested by a service member to return home for <span class="font-bold text-military-green">maternity care or childbirth</span>. We ensure comprehensive support during this critical time for military families.
                    </p>

                    <div class="space-y-6">
                        <div class="flex items-start space-x-4">
                            <div class="bg-military-green text-white rounded-full p-3 flex-shrink-0">
                                <i class="fas fa-hospital text-lg"></i>
                            </div>
                            <div>
                                <h4 class="font-bold text-military-dark mb-2">Maternity Care Access</h4>
                                <p class="text-gray-600">Comprehensive medical support for expectant military families with access to specialized maternity care facilities.</p>
                            </div>
                        </div>

                        <div class="flex items-start space-x-4">
                            <div class="bg-eagle-gold text-military-dark rounded-full p-3 flex-shrink-0">
                                <i class="fas fa-home text-lg"></i>
                            </div>
                            <div>
                                <h4 class="font-bold text-military-dark mb-2">Home Support</h4>
                                <p class="text-gray-600">Opportunity to return home during pregnancy for family support and comfort during this important time.</p>
                            </div>
                        </div>

                        <div class="flex items-start space-x-4">
                            <div class="bg-usa-red text-white rounded-full p-3 flex-shrink-0">
                                <i class="fas fa-shield-alt text-lg"></i>
                            </div>
                            <div>
                                <h4 class="font-bold text-military-dark mb-2">Protected Leave</h4>
                                <p class="text-gray-600">Job security guaranteed while taking necessary time for pregnancy care and childbirth preparation.</p>
                            </div>
                        </div>
                    </div>

                    <!-- Apply Button -->
                    <div class="mt-10">
                        <a href="{{url('/')}}/page/contact"
                           class="group inline-flex items-center bg-gradient-to-r from-military-green to-military-dark text-white px-8 py-4 rounded-xl font-bold text-lg hover:from-military-dark hover:to-military-green transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl">
                            <i class="fas fa-file-alt mr-3 group-hover:animate-pulse"></i>
                            <span>Apply for Pregnancy Leave</span>
                            <i class="fas fa-arrow-right ml-3 group-hover:translate-x-1 transition-transform duration-300"></i>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Image Side -->
            <div x-data="{ isVisible: true }" x-intersect="isVisible = true">
                <div x-show="isVisible" x-transition:enter="transition-all ease-out duration-1200 delay-300" x-transition:enter-start="opacity-0 transform translate-x-12" x-transition:enter-end="opacity-100 transform translate-x-0">
                    <div class="relative">
                        <div class="absolute -top-6 -left-6 w-24 h-24 bg-gradient-to-br from-military-green/20 to-eagle-gold/20 rounded-full blur-xl"></div>
                        <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-gradient-to-br from-usa-red/20 to-military-green/20 rounded-full blur-xl"></div>
                        <img src="{{ url('frontend/public/grepoksu/2021/09/pregnancy-leave-1.png')}}" alt="Military Family Pregnancy Support" class="relative rounded-2xl shadow-2xl transform hover:scale-105 transition-transform duration-500">
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Enhanced FAQ Section -->
<section class="py-20 bg-gradient-to-br from-gray-50 to-white relative overflow-hidden">
    <!-- Background Pattern -->
    <div class="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232d4a1e' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')] opacity-30"></div>

    <div class="container mx-auto px-4 relative z-10">
        <!-- Section Header -->
        <div class="text-center mb-16" x-data="{ isVisible: true }" x-intersect="isVisible = true">
            <div x-show="isVisible" x-transition:enter="transition-all ease-out duration-1200" x-transition:enter-start="opacity-0 transform translate-y-8" x-transition:enter-end="opacity-100 transform translate-y-0">
                <!-- Section Badge -->
                <div class="inline-flex items-center bg-gradient-to-r from-military-green to-military-dark text-white px-6 py-3 rounded-full mb-8 shadow-lg">
                    <i class="fas fa-question-circle mr-3"></i>
                    <span class="font-semibold uppercase tracking-wide text-sm">Frequently Asked Questions</span>
                </div>

                <h2 class="text-4xl md:text-5xl font-bold mb-6 text-military-dark">
                    Pregnancy Leave
                    <span class="text-transparent bg-clip-text bg-gradient-to-r from-military-green to-eagle-gold">Questions</span>
                </h2>
                <p class="text-lg text-gray-600 max-w-2xl mx-auto leading-relaxed">
                    Find answers to common questions about military pregnancy leave benefits and eligibility requirements.
                </p>
            </div>
        </div>

        <div class="grid lg:grid-cols-2 gap-16 items-start">
            <!-- Image Side -->
            <div x-data="{ isVisible: true }" x-intersect="isVisible = true">
                <div x-show="isVisible" x-transition:enter="transition-all ease-out duration-1200" x-transition:enter-start="opacity-0 transform -translate-x-12" x-transition:enter-end="opacity-100 transform translate-x-0">
                    <div class="relative">
                        <div class="absolute -top-6 -left-6 w-24 h-24 bg-gradient-to-br from-military-green/20 to-eagle-gold/20 rounded-full blur-xl"></div>
                        <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-gradient-to-br from-usa-red/20 to-military-green/20 rounded-full blur-xl"></div>
                        <img src="{{ url('frontend/public/grepoksu/2021/09/pregnancy-leave02.png')}}" alt="Pregnancy Leave FAQ Support" class="relative rounded-2xl shadow-2xl transform hover:scale-105 transition-transform duration-500">
                    </div>
                </div>
            </div>

            <!-- FAQ Side -->
            <div x-data="{ activeFaq: null, isVisible: true }" x-intersect="isVisible = true">
                <div x-show="isVisible" x-transition:enter="transition-all ease-out duration-1200 delay-300" x-transition:enter-start="opacity-0 transform translate-x-12" x-transition:enter-end="opacity-100 transform translate-x-0">
                    <div class="space-y-6">
                        <!-- FAQ Item 1 -->
                        <div class="bg-white rounded-2xl shadow-lg border border-gray-200 overflow-hidden hover:shadow-xl transition-all duration-300">
                            <button
                                @click="activeFaq === 1 ? activeFaq = null : activeFaq = 1"
                                class="w-full text-left p-6 bg-gradient-to-r from-gray-50 to-white hover:from-military-green/5 hover:to-eagle-gold/5 transition-all duration-300"
                                :class="{ 'from-military-green/10 to-eagle-gold/10': activeFaq === 1 }"
                            >
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center">
                                        <div class="bg-military-green text-white rounded-full p-2 mr-4">
                                            <i class="fas fa-user-check text-sm"></i>
                                        </div>
                                        <h4 class="font-bold text-military-dark text-lg">Are all military personnel eligible for pregnancy leave?</h4>
                                    </div>
                                    <i class="fas text-military-green transition-transform duration-300" :class="activeFaq === 1 ? 'fa-minus rotate-180' : 'fa-plus'"></i>
                                </div>
                            </button>
                            <div x-show="activeFaq === 1" x-collapse class="border-t border-gray-200">
                                <div class="p-6 bg-gray-50">
                                    <p class="text-gray-700 leading-relaxed">Yes, all pregnant service members are entitled to pregnancy leave for maternity care and childbirth. This includes both ordinary leave and special pregnancy-related leave provisions to ensure proper medical care and family support.</p>
                                </div>
                            </div>
                        </div>

                        <!-- FAQ Item 2 -->
                        <div class="bg-white rounded-2xl shadow-lg border border-gray-200 overflow-hidden hover:shadow-xl transition-all duration-300">
                            <button
                                @click="activeFaq === 2 ? activeFaq = null : activeFaq = 2"
                                class="w-full text-left p-6 bg-gradient-to-r from-gray-50 to-white hover:from-military-green/5 hover:to-eagle-gold/5 transition-all duration-300"
                                :class="{ 'from-military-green/10 to-eagle-gold/10': activeFaq === 2 }"
                            >
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center">
                                        <div class="bg-eagle-gold text-military-dark rounded-full p-2 mr-4">
                                            <i class="fas fa-calendar-times text-sm"></i>
                                        </div>
                                        <h4 class="font-bold text-military-dark text-lg">What happens if I need extended pregnancy leave?</h4>
                                    </div>
                                    <i class="fas text-military-green transition-transform duration-300" :class="activeFaq === 2 ? 'fa-minus rotate-180' : 'fa-plus'"></i>
                                </div>
                            </button>
                            <div x-show="activeFaq === 2" x-collapse class="border-t border-gray-200">
                                <div class="p-6 bg-gray-50">
                                    <p class="text-gray-700 leading-relaxed">If you need extended leave beyond your accrued time, you may request unpaid leave of absence or use advanced leave. Your command will work with you to accommodate medical requirements and family needs during pregnancy and recovery.</p>
                                </div>
                            </div>
                        </div>

                        <!-- FAQ Item 3 -->
                        <div class="bg-white rounded-2xl shadow-lg border border-gray-200 overflow-hidden hover:shadow-xl transition-all duration-300">
                            <button
                                @click="activeFaq === 3 ? activeFaq = null : activeFaq = 3"
                                class="w-full text-left p-6 bg-gradient-to-r from-gray-50 to-white hover:from-military-green/5 hover:to-eagle-gold/5 transition-all duration-300"
                                :class="{ 'from-military-green/10 to-eagle-gold/10': activeFaq === 3 }"
                            >
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center">
                                        <div class="bg-usa-red text-white rounded-full p-2 mr-4">
                                            <i class="fas fa-dollar-sign text-sm"></i>
                                        </div>
                                        <h4 class="font-bold text-military-dark text-lg">Do I receive full pay during pregnancy leave?</h4>
                                    </div>
                                    <i class="fas text-military-green transition-transform duration-300" :class="activeFaq === 3 ? 'fa-minus rotate-180' : 'fa-plus'"></i>
                                </div>
                            </button>
                            <div x-show="activeFaq === 3" x-collapse class="border-t border-gray-200">
                                <div class="p-6 bg-gray-50">
                                    <p class="text-gray-700 leading-relaxed">For chargeable leave (ordinary, advanced), you receive full military pay. For special pregnancy leave provisions, pay may vary based on the type of leave and circumstances. Consult with your personnel office for specific details about your situation.</p>
                                </div>
                            </div>
                        </div>

                        <!-- FAQ Item 4 -->
                        <div class="bg-white rounded-2xl shadow-lg border border-gray-200 overflow-hidden hover:shadow-xl transition-all duration-300">
                            <button
                                @click="activeFaq === 4 ? activeFaq = null : activeFaq = 4"
                                class="w-full text-left p-6 bg-gradient-to-r from-gray-50 to-white hover:from-military-green/5 hover:to-eagle-gold/5 transition-all duration-300"
                                :class="{ 'from-military-green/10 to-eagle-gold/10': activeFaq === 4 }"
                            >
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center">
                                        <div class="bg-military-green text-white rounded-full p-2 mr-4">
                                            <i class="fas fa-shield-alt text-sm"></i>
                                        </div>
                                        <h4 class="font-bold text-military-dark text-lg">What medical benefits are available during pregnancy?</h4>
                                    </div>
                                    <i class="fas text-military-green transition-transform duration-300" :class="activeFaq === 4 ? 'fa-minus rotate-180' : 'fa-plus'"></i>
                                </div>
                            </button>
                            <div x-show="activeFaq === 4" x-collapse class="border-t border-gray-200">
                                <div class="p-6 bg-gray-50">
                                    <p class="text-gray-700 leading-relaxed">Full medical benefits continue during pregnancy leave, including prenatal care, delivery, and postpartum care. TRICARE provides comprehensive coverage for all pregnancy-related medical needs for service members and their families.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Enhanced Call-to-Action Section -->
<section class="py-20 bg-gradient-peacekeeping bg-hero-pattern text-white relative overflow-hidden">
    <!-- UN Peacekeeping Background Elements -->
    <div class="absolute inset-0 opacity-20"></div>
    <div class="absolute inset-0 bg-gradient-to-br from-black/40 via-transparent to-black/60"></div>

    <!-- Floating Military Elements -->
    <div class="absolute top-20 left-10 w-16 h-16 opacity-15 animate-pulse">
        <i class="fas fa-family text-4xl text-peace-gold"></i>
    </div>
    <div class="absolute bottom-20 right-10 w-20 h-20 opacity-10 animate-bounce">
        <i class="fas fa-globe text-5xl text-white"></i>
    </div>

    <div class="container mx-auto px-4 relative z-10">
        <div class="text-center max-w-4xl mx-auto" x-data="{ isVisible: true }" x-intersect="isVisible = true">
            <div x-show="isVisible" x-transition:enter="transition-all ease-out duration-1200" x-transition:enter-start="opacity-0 transform translate-y-8" x-transition:enter-end="opacity-100 transform translate-y-0">
                <!-- Badge -->
                <div class="inline-flex items-center bg-gradient-to-r from-eagle-gold to-yellow-500 text-military-dark px-8 py-4 rounded-full mb-8 shadow-lg">
                    <i class="fas fa-hands-helping mr-3 text-lg"></i>
                    <span class="font-bold uppercase tracking-wide">Ready to Apply for Pregnancy Leave?</span>
                </div>

                <h2 class="text-4xl md:text-6xl font-bold mb-6 font-military tracking-wide text-transparent bg-clip-text bg-gradient-to-r from-white via-eagle-gold to-white">
                    GET SUPPORT TODAY
                </h2>
                <div class="w-32 h-1 bg-gradient-to-r from-transparent via-eagle-gold to-transparent mx-auto mb-8"></div>

                <p class="text-xl text-gray-200 mb-8 leading-relaxed">
                    Take the first step in securing your pregnancy leave benefits. Our dedicated family support team is here to guide you through the entire process.
                </p>

                <!-- Action Buttons -->
                <div class="flex flex-col sm:flex-row gap-6 justify-center items-center">
                    <a href="{{url('/')}}/page/contact"
                       class="group bg-gradient-to-r from-eagle-gold to-yellow-500 text-military-dark px-10 py-5 rounded-xl font-bold text-lg hover:from-yellow-500 hover:to-eagle-gold transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl">
                        <i class="fas fa-file-alt mr-3 group-hover:animate-pulse"></i>
                        <span>Apply for Pregnancy Leave</span>
                        <i class="fas fa-arrow-right ml-3 group-hover:translate-x-1 transition-transform duration-300"></i>
                    </a>

                    <a href="{{url('/')}}/page/contact"
                       class="group border-2 border-white text-white px-10 py-5 rounded-xl font-bold text-lg hover:bg-white hover:text-military-dark transition-all duration-300 transform hover:scale-105">
                        <i class="fas fa-headset mr-3"></i>
                        <span>Family Support</span>
                    </a>
                </div>

                <!-- Contact Info -->
                <div class="mt-12 bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/20">
                    <div class="flex flex-col md:flex-row items-center justify-center space-y-4 md:space-y-0 md:space-x-8 text-gray-300">
                        <div class="flex items-center">
                            <i class="fas fa-phone mr-3 text-eagle-gold"></i>
                            <span>24/7 Family Support: 1-800-MILITARY</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-envelope mr-3 text-eagle-gold"></i>
                            <span>support@miliatry.com</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-map-marker-alt mr-3 text-eagle-gold"></i>
                            <span>11075 Santa Monica Blvd,Suite 250 Los Angeles CA 90025</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>



@stop

@push('scripts')
@endpush
