@extends('layouts.base')

@section('title', $title ?? 'Adoption Block Leave')

@inject('content', 'App\Http\Controllers\FrontController')
@section('content')

<!-- Enhanced Military Hero Section -->
<section class="relative py-24 bg-gradient-military bg-hero-pattern text-white overflow-hidden">
    <!-- Military 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 text-4xl text-eagle-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-eagle-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="/" 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">Adoption Block 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">
                    <!-- Family 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-users mr-3 text-lg"></i>
                        <span class="font-bold uppercase tracking-wide">Family 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">
                        ADOPTION 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">Building Military Families</p>
                    <p class="text-lg text-gray-300 max-w-2xl mx-auto leading-relaxed">
                        Supporting service members in their journey to expand their families through adoption with comprehensive leave benefits and family support services.
                    </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-calendar-alt text-eagle-gold text-3xl mb-3"></i>
                            <h4 class="font-bold text-white text-2xl mb-1">21 Days</h4>
                            <p class="text-gray-300 text-sm">Non-Chargeable Leave</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-check-circle text-eagle-gold text-3xl mb-3"></i>
                            <h4 class="font-bold text-white text-2xl mb-1">Full Benefits</h4>
                            <p class="text-gray-300 text-sm">Continued Coverage</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-shield-alt text-eagle-gold text-3xl mb-3"></i>
                            <h4 class="font-bold text-white text-2xl mb-1">Protected</h4>
                            <p class="text-gray-300 text-sm">Job Security</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">
                        Adoption
                        <span class="text-transparent bg-clip-text bg-gradient-to-r from-military-green to-eagle-gold">Block Leave</span>
                    </h2>

                    <p class="text-lg text-gray-700 mb-8 leading-relaxed">
                        Service members adopting a child can receive up to <span class="font-bold text-military-green">21 days of non-chargeable leave</span> to bond with their new family member and complete necessary adoption procedures.
                    </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-calendar-check text-lg"></i>
                            </div>
                            <div>
                                <h4 class="font-bold text-military-dark mb-2">21-Day Authorization</h4>
                                <p class="text-gray-600">Authorized service members who adopted a child through a qualifying adoption agency receive up to 21 days for non-chargeable leave of absence.</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-family text-lg"></i>
                            </div>
                            <div>
                                <h4 class="font-bold text-military-dark mb-2">Family Support</h4>
                                <p class="text-gray-600">The military aims to provide support for serving personnel who are newly adopting children, comparable to maternity leave arrangements.</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-certificate text-lg"></i>
                            </div>
                            <div>
                                <h4 class="font-bold text-military-dark mb-2">Eligibility Requirements</h4>
                                <p class="text-gray-600">Available to qualifying Service personnel who have been notified of being matched with a child and are not taking Paternity Leave.</p>
                            </div>
                        </div>
                    </div>

                    <!-- Apply Button -->
                    <div class="mt-10">
                        <a href="{{route('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 Adoption 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="public/grepoksu/2021/09/adoption-01.png" alt="Military Family Adoption Support" class="relative rounded-2xl shadow-2xl transform hover:scale-105 transition-transform duration-500">
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Enhanced Adoption Leave Details Section -->
<section class="py-20 bg-gradient-military bg-hero-pattern relative overflow-hidden">
    <!-- Professional Background Elements -->
    <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=\'%23ffffff\' fill-opacity=\'0.05\'%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">
            <!-- 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-eagle-gold/30 to-white/20 rounded-full blur-xl"></div>
                        <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-gradient-to-br from-white/20 to-eagle-gold/30 rounded-full blur-xl"></div>
                        <img src="public/grepoksu/2021/09/adoption-02.png" alt="Adoption Process Support" class="relative rounded-2xl shadow-2xl transform hover:scale-105 transition-transform duration-500">
                    </div>
                </div>
            </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-eagle-gold to-yellow-500 text-military-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-eagle-gold to-yellow-300">Support</span>
                    </h2>

                    <div class="space-y-6 text-gray-200">
                        <p class="text-lg leading-relaxed">
                            <strong class="text-eagle-gold">Authorization:</strong> Service members 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-eagle-gold">Military Support:</strong> The military aims to provide support for serving personnel who are newly adopting children and is comparable to maternity leave arrangements.
                        </p>

                        <p class="text-lg leading-relaxed">
                            <strong class="text-eagle-gold">Eligibility:</strong> Adoption Leave scheme is available to qualifying Service 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-eagle-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 Service 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-eagle-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 service members</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-eagle-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-eagle-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-eagle-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-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">
                    Adoption 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 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="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-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 service members eligible for adoption 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, qualifying service members 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-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 exhaust my adoption 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">After exhausting your 21-day adoption leave, you may use accrued annual leave or request unpaid leave for additional time off. Your command 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-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 adoption 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">Yes, adoption leave is non-chargeable, meaning you receive full military 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-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 happens to my benefits during adoption leave?</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">All military benefits continue uninterrupted during your adoption leave period. This includes healthcare, housing allowances, and all other entitlements. Your job 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-military bg-hero-pattern text-white relative overflow-hidden">
    <!-- Military 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-eagle-gold"></i>
    </div>
    <div class="absolute bottom-20 right-10 w-20 h-20 opacity-10 animate-bounce">
        <i class="fas fa-medal 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 Start Your Adoption 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">
                    APPLY 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 next step in growing your military 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="{{route('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 Adoption Leave</span>
                        <i class="fas fa-arrow-right ml-3 group-hover:translate-x-1 transition-transform duration-300"></i>
                    </a>

                    <a href="{{route('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>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-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>{{$settings->contact_email}}</span>
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-map-marker-alt mr-3 text-eagle-gold"></i>
                            <span>{{$settings->locations}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection
