@extends('layouts.frontend')

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

@section('content')

    @include('partials.messages')
   </div>

            <!-- Content 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">
                    <!-- Section Badge -->
                    <div class="inline-flex items-center bg-gradient-to-r from-peace-gold to-yellow-500 text-peace-dark px-6 py-3 rounded-full mb-8 shadow-lg">
                        <i class="fas fa-info-circle mr-3"></i>
                        <span class="font-semibold uppercase tracking-wide text-sm">Leave Details</span>
                    </div>

                    <h2 class="text-4xl md:text-5xl font-bold mb-6 text-white">
                        Comprehensive
                        <span class="text-transparent bg-clip-text bg-gradient-to-r from-peace-gold to-yellow-300">Support</span>
                    </h2>

                    <div class="space-y-6 text-gray-200">
                        <p class="text-lg leading-relaxed">
                            <strong class="text-peace-gold">Authorization:</strong> UN peacekeeping personnel who adopted a child through a qualifying adoption agency are authorized up to 21 days for non-chargeable leave of absence.
                        </p>

                        <p class="text-lg leading-relaxed">
                            <strong class="text-peace-gold">UN Support:</strong> The United Nations aims to provide support for peacekeeping personnel who are newly adopting children and is comparable to maternity leave arrangements.
                        </p>

                        <p class="text-lg leading-relaxed">
                            <strong class="text-peace-gold">Eligibility:</strong> Adoption Leave scheme is available to qualifying peacekeeping personnel who have been notified of being matched with a child and who are not taking Paternity Leave.
                        </p>

                        <p class="text-lg leading-relaxed">
                            <strong class="text-peace-gold">Coverage:</strong> Adoption leave is given to recognize the adoption of a child (or children) up to the age of 18 years. It is available to both male and female peacekeeping personnel and to those adopting a child on their own or one member of a couple adopting a child together.
                        </p>
                    </div>

                    <!-- Key Benefits Cards -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-8">
                        <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4 border border-white/20">
                            <div class="flex items-center mb-2">
                                <i class="fas fa-user-friends text-peace-gold mr-3"></i>
                                <h4 class="font-bold text-white">All Personnel</h4>
                            </div>
                            <p class="text-gray-300 text-sm">Available to both male and female peacekeeping personnel</p>
                        </div>

                        <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4 border border-white/20">
                            <div class="flex items-center mb-2">
                                <i class="fas fa-child text-peace-gold mr-3"></i>
                                <h4 class="font-bold text-white">Age Range</h4>
                            </div>
                            <p class="text-gray-300 text-sm">Children up to 18 years of age</p>
                        </div>

                        <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4 border border-white/20">
                            <div class="flex items-center mb-2">
                                <i class="fas fa-heart text-peace-gold mr-3"></i>
                                <h4 class="font-bold text-white">Single/Couple</h4>
                            </div>
                            <p class="text-gray-300 text-sm">Solo adopters or couples (one member)</p>
                        </div>

                        <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4 border border-white/20">
                            <div class="flex items-center mb-2">
                                <i class="fas fa-shield-alt text-peace-gold mr-3"></i>
                                <h4 class="font-bold text-white">Protected Leave</h4>
                            </div>
                            <p class="text-gray-300 text-sm">Non-chargeable to your leave balance</p>
                        </div>
                    </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-peace-green to-peace-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-peace-dark">
                    Adoption Leave
                    <span class="text-transparent bg-clip-text bg-gradient-to-r from-peace-green to-peace-gold">Questions</span>
                </h2>
                <p class="text-lg text-gray-600 max-w-2xl mx-auto leading-relaxed">
                    Find answers to common questions about UN peacekeeping adoption 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/adoption-02.png')}}" alt="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-peace-green/5 hover:to-peace-gold/5 transition-all duration-300"
                                :class="{ 'from-peace-green/10 to-peace-gold/10': activeFaq === 1 }"
                            >
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center">
                                        <div class="bg-peace-green text-white rounded-full p-2 mr-4">
                                            <i class="fas fa-user-check text-sm"></i>
                                        </div>
                                        <h4 class="font-bold text-peace-dark text-lg">Are all peacekeeping personnel eligible for adoption leave?</h4>
                                    </div>
                                    <i class="fas text-peace-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, qualifying UN peacekeeping personnel who have been notified of being matched with a child through an approved adoption agency are eligible for up to 21 days of non-chargeable adoption leave, provided they are not already taking paternity leave.</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-peace-green/5 hover:to-peace-gold/5 transition-all duration-300"
                                :class="{ 'from-peace-green/10 to-peace-gold/10': activeFaq === 2 }"
                            >
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center">
                                        <div class="bg-peace-gold text-peace-dark rounded-full p-2 mr-4">
                                            <i class="fas fa-calendar-times text-sm"></i>
                                        </div>
                                        <h4 class="font-bold text-peace-dark text-lg">What happens if I exhaust my adoption leave?</h4>
                                    </div>
                                    <i class="fas text-peace-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">After exhausting your 21-day adoption leave, you may use accrued annual leave or request unpaid leave for additional time off. Your mission leadership will work with you to ensure you have adequate time for the adoption process.</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-peace-green/5 hover:to-peace-gold/5 transition-all duration-300"
                                :class="{ 'from-peace-green/10 to-peace-gold/10': activeFaq === 3 }"
                            >
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center">
                                        <div class="bg-un-blue text-white rounded-full p-2 mr-4">
                                            <i class="fas fa-dollar-sign text-sm"></i>
                                        </div>
                                        <h4 class="font-bold text-peace-dark text-lg">Do I receive full pay during adoption leave?</h4>
                                    </div>
                                    <i class="fas text-peace-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">Yes, adoption leave is non-chargeable, meaning you receive full peacekeeping pay and benefits during your 21-day adoption leave period. This leave does not count against your annual leave balance.</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-peace-green/5 hover:to-peace-gold/5 transition-all duration-300"
                                :class="{ 'from-peace-green/10 to-peace-gold/10': activeFaq === 4 }"
                            >
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center">
                                        <div class="bg-peace-green text-white rounded-full p-2 mr-4">
                                            <i class="fas fa-shield-alt text-sm"></i>
                                        </div>
                                        <h4 class="font-bold text-peace-dark text-lg">What happens to my benefits during adoption leave?</h4>
                                    </div>
                                    <i class="fas text-peace-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">All UN peacekeeping benefits continue uninterrupted during your adoption leave period. This includes healthcare, housing allowances, and all other entitlements. Your position security is also protected during this time.</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 UN 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-peace-gold to-yellow-500 text-peace-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 Start Your Adoption Leave?</span>
                </div>

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

                <p class="text-xl text-gray-200 mb-8 leading-relaxed">
                    Take the next step in growing your peacekeeping family. Our support team is here to guide you through the adoption leave application 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-peace-gold to-yellow-500 text-peace-dark px-10 py-5 rounded-xl font-bold text-lg hover:from-yellow-500 hover:to-peace-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 Adoption 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-peace-dark transition-all duration-300 transform hover:scale-105">
                        <i class="fas fa-headset mr-3"></i>
                        <span>Contact 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-peace-gold"></i>
                            <span>24/7 Family Support: 1-800-UNPEACE</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-envelope mr-3 text-peace-gold"></i>
                            <span>support@miliatry.com</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-map-marker-alt mr-3 text-peace-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
