@extends('layouts.frontend')

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

@section('content')

    @include('partials.messages')
    <!-- Enhanced Hero Section with UN Peacekeeping Styling -->
    <section class="relative py-24 bg-gradient-un bg-peace-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 UN Peacekeeping Elements -->
        <div class="absolute top-20 left-10 w-16 h-16 opacity-20 animate-pulse">
            <i class="fas fa-globe text-4xl text-un-blue-light"></i>
        </div>
        <div class="absolute bottom-20 right-10 w-20 h-20 opacity-10 animate-bounce">
            <i class="fas fa-dove 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-shield-alt text-3xl text-peace-green"></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-peace-green 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-peace-green"></i></li>
                            <li class="text-peace-green font-semibold">About Us</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">
                        <!-- Department Badge -->
                        <div
                            class="inline-flex items-center bg-gradient-to-r from-peace-green to-humanitarian-teal text-white px-8 py-4 rounded-full mb-8 shadow-lg">
                            <i class="fas fa-dove mr-3 text-lg"></i>
                            <span class="font-bold uppercase tracking-wide">About Our Mission</span>
                        </div>

                        <h1
                            class="text-5xl md:text-7xl font-bold mb-6 font-source-sans tracking-wide text-transparent bg-clip-text bg-gradient-to-r from-white via-peace-green to-white">
                            ABOUT US
                        </h1>
                        <div class="w-32 h-1 bg-gradient-to-r from-transparent via-peace-green to-transparent mx-auto mb-6">
                        </div>
                        <p class="text-2xl text-gray-200 font-serif italic mb-4">UN Peacekeeping Operations</p>
                        <p class="text-lg text-gray-300 max-w-2xl mx-auto leading-relaxed">
                            Dedicated to maintaining international peace and security with honor, integrity, and unwavering
                            commitment to global stability.
                        </p>
                    </div>
                </div>

                <!-- Mission Banner -->
                <div class="mt-12 bg-gradient-to-r from-peace-green/20 to-un-blue-dark/10 rounded-xl p-6 border border-peace-green/30"
                    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="flex items-center justify-center">
                            <i class="fas fa-globe text-peace-green mr-4 text-2xl animate-pulse"></i>
                            <div class="text-center">
                                <h4 class="font-bold text-white text-lg mb-1">SERVING GLOBAL PEACE</h4>
                                <p class="text-gray-300">Established 1945 • United Nations</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Enhanced Professional About Section -->
    <section class="py-20 bg-gradient-un bg-peace-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=\'%23009fdb\' 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">

                <!-- Enhanced Content Section -->
                <div class="order-2 lg:order-1" 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">
                            <!-- Section Badge -->
                            <div
                                class="inline-flex items-center bg-gradient-to-r from-peace-green to-un-blue-dark text-white px-6 py-3 rounded-full mb-6 shadow-lg">
                                <i class="fas fa-info-circle mr-3"></i>
                                <span class="font-semibold uppercase tracking-wide text-sm">About Our Mission</span>
                            </div>

                            <h2 class="text-4xl md:text-5xl font-bold mb-6 text-white leading-tight">
                                UN Peacekeeping
                                <span
                                    class="text-transparent bg-clip-text bg-gradient-to-r from-peace-green to-humanitarian-teal">Operations</span>
                            </h2>

                            <div class="w-24 h-1 bg-gradient-to-r from-peace-green to-humanitarian-teal mb-6"></div>

                            <p class="text-xl text-gray-200 mb-8 leading-relaxed font-semibold">
                                Our peacekeeping program is designed to maintain international peace and security through
                                multilateral cooperation.
                            </p>

                            <div class="space-y-6 text-gray-300 leading-relaxed">
                                <p class="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/20">
                                    The UN Peacekeeping Operations helps countries torn by conflict create conditions for
                                    lasting peace. We protect civilians and support the political process in the world's
                                    most challenging environments. Our comprehensive peacekeeping program ensures every
                                    peacekeeper receives the support needed to maintain international peace and security.
                                </p>
                                <p class="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/20">
                                    Our peacekeeping personnel are deployed to help facilitate peace processes, protect
                                    civilians, and assist in the transition to stable governance. This includes peacekeepers
                                    from various nations working under the UN mandate, supporting humanitarian assistance,
                                    crisis response, and peace-building programs worldwide.
                                </p>
                            </div>

                            <!-- Call to Action -->
                            <div class="mt-10">
                                <a href="{{url('/')}}/page/contact"
                                    class="inline-flex items-center bg-gradient-to-r from-peace-green to-humanitarian-teal text-white px-8 py-4 rounded-xl font-bold hover:shadow-2xl hover:shadow-peace-green/20 transition-all duration-300 transform hover:-translate-y-1">
                                    <i class="fas fa-envelope mr-3"></i>
                                    Contact Our Operations
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Enhanced Image Section -->
                <div class="order-1 lg:order-2" 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">
                            <!-- Background Glow -->
                            <div
                                class="absolute inset-0 bg-gradient-to-r from-peace-green/20 to-un-blue-dark/20 rounded-3xl blur-3xl">
                            </div>

                            <!-- Image Container -->
                            <div
                                class="relative bg-white/10 backdrop-blur-sm rounded-3xl p-8 border border-white/20 transform hover:scale-105 transition-all duration-500">
                                <img src="{{ url('frontend/public/grepoksu/2021/09/about1.png')}}" alt="UN Peacekeepers"
                                    class="w-full rounded-2xl shadow-2xl">

                                <!-- Overlay Badge -->
                                <div
                                    class="absolute top-4 right-4 bg-gradient-to-r from-peace-green to-un-blue-dark text-white px-4 py-2 rounded-full shadow-lg">
                                    <div class="flex items-center space-x-2">
                                        <i class="fas fa-users text-sm"></i>
                                        <span class="text-xs font-bold uppercase tracking-wide">Our Peacekeepers</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Enhanced Professional Benefits Section -->
    <section class="py-20 bg-white relative overflow-hidden">
        <!-- Background Pattern -->
        <div
            class="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg width=\'40\' height=\'40\' viewBox=\'0 0 40 40\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%23009fdb\' fill-opacity=\'0.02\'%3E%3Cpath d=\'M20 20c0 11.046-8.954 20-20 20v-40c11.046 0 20 8.954 20 20z\'/%3E%3C/g%3E%3C/svg%3E')] opacity-50">
        </div>

        <div class="container mx-auto px-4 relative z-10">
            <div class="grid lg:grid-cols-2 gap-16 items-center">

                <!-- Enhanced Image Section -->
                <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">
                            <!-- Background Decoration -->
                            <div
                                class="absolute -top-6 -left-6 w-32 h-32 bg-gradient-to-br from-peace-green/20 to-un-blue-light/20 rounded-full blur-2xl">
                            </div>
                            <div
                                class="absolute -bottom-6 -right-6 w-24 h-24 bg-gradient-to-br from-humanitarian-teal/20 to-peace-green/20 rounded-full blur-xl">
                            </div>

                            <!-- Image Container -->
                            <div
                                class="relative bg-gradient-to-br from-gray-50 to-white rounded-3xl p-6 shadow-2xl border border-gray-200 transform hover:scale-105 transition-all duration-500">
                                <img src="public/grepoksu/2021/09/about-2.png" alt="UN Peacekeeping Benefits"
                                    class="w-full rounded-2xl shadow-xl">

                                <!-- Benefits Badge Overlay -->
                                <div
                                    class="absolute top-4 right-4 bg-gradient-to-r from-peace-green to-un-blue-dark text-white px-4 py-2 rounded-full shadow-lg">
                                    <div class="flex items-center space-x-2">
                                        <i class="fas fa-gift text-sm"></i>
                                        <span class="text-xs font-bold uppercase tracking-wide">Peacekeeping Guide</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Enhanced Benefits Content -->
                <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 Header -->
                        <div class="mb-12">
                            <div
                                class="inline-flex items-center bg-gradient-to-r from-peace-green to-un-blue-dark text-white px-6 py-3 rounded-full mb-6 shadow-lg">
                                <i class="fas fa-award mr-3"></i>
                                <span class="font-semibold uppercase tracking-wide text-sm">Why Choose UN
                                    Peacekeeping</span>
                            </div>

                            <h2 class="text-4xl md:text-5xl font-bold mb-6 text-un-blue-dark leading-tight">
                                Benefits of
                                <span
                                    class="text-transparent bg-clip-text bg-gradient-to-r from-peace-green to-humanitarian-teal">UN
                                    Peacekeeping</span>
                            </h2>

                            <div class="w-24 h-1 bg-gradient-to-r from-peace-green to-humanitarian-teal mb-6"></div>

                            <p class="text-xl text-gray-600 leading-relaxed mb-8">
                                UN Peacekeeping personnel receive comprehensive support including family assistance,
                                professional development, and complete mission benefits to maintain international peace and
                                security.
                            </p>
                        </div>

                        <!-- Enhanced Benefits List -->
                        <div class="space-y-6">
                            <!-- Benefit 1 -->
                            <div
                                class="bg-white rounded-2xl shadow-lg border border-gray-200 p-6 hover:shadow-xl transition-all duration-300">
                                <div class="flex items-start space-x-4">
                                    <div
                                        class="bg-gradient-to-r from-peace-green to-un-blue-dark text-white rounded-full p-3 flex-shrink-0">
                                        <i class="fas fa-handshake text-lg"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-bold text-un-blue-dark text-xl mb-2">TRUST</h4>
                                        <p class="text-gray-600 leading-relaxed">You can trust us to handle your
                                            peacekeeping applications and communications promptly with no delay. Our
                                            commitment to reliable service ensures your peace of mind.</p>
                                    </div>
                                </div>
                            </div>

                            <!-- Benefit 2 -->
                            <div
                                class="bg-white rounded-2xl shadow-lg border border-gray-200 p-6 hover:shadow-xl transition-all duration-300">
                                <div class="flex items-start space-x-4">
                                    <div
                                        class="bg-gradient-to-r from-humanitarian-teal to-unity-cyan text-white rounded-full p-3 flex-shrink-0">
                                        <i class="fas fa-sliders-h text-lg"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-bold text-un-blue-dark text-xl mb-2">CONTROL</h4>
                                        <p class="text-gray-600 leading-relaxed">Monitor and control your peacekeeping
                                            mission status easily. Our user-friendly system puts you in complete control of
                                            your deployment management.</p>
                                    </div>
                                </div>
                            </div>

                            <!-- Benefit 3 -->
                            <div
                                class="bg-white rounded-2xl shadow-lg border border-gray-200 p-6 hover:shadow-xl transition-all duration-300">
                                <div class="flex items-start space-x-4">
                                    <div
                                        class="bg-gradient-to-r from-urgent-red to-warning-orange text-white rounded-full p-3 flex-shrink-0">
                                        <i class="fas fa-headset text-lg"></i>
                                    </div>
                                    <div>
                                        <h4 class="font-bold text-un-blue-dark text-xl mb-2">SUPPORT</h4>
                                        <p class="text-gray-600 leading-relaxed">We'll always help you when there are
                                            challenges with your peacekeeping deployment. Our 24/7 support team is always
                                            ready to assist.</p>
                                    </div>
                                </div>
                            </div>

                            <!-- Benefit 4 -->
                            <div
                                class="bg-white rounded-2xl shadow-lg border border-gray-200 p-6 hover:shadow-xl transition-all duration-300">
                                <div class="flex items-start space-x-4">
                                    <div
                                        class="bg-gradient-to-r from-peace-green to-hope-green 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-un-blue-dark text-xl mb-2">QUALITY</h4>
                                        <p class="text-gray-600 leading-relaxed">100% quality guarantee! Our peacekeeping
                                            operations portal is always available 24 hours a day, 7 days a week. You are
                                            assured access to our mission coordination center.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Enhanced Professional Testimonials Section -->
    <section class="py-20 bg-gradient-un bg-peace-pattern text-white relative overflow-hidden">
        <!-- UN Peacekeeping 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>

        <!-- Floating Elements -->
        <div class="absolute top-20 left-10 w-16 h-16 opacity-20 animate-pulse">
            <i class="fas fa-quote-left text-4xl text-peace-green"></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="absolute top-1/2 left-1/4 w-12 h-12 opacity-15 animate-ping">
            <i class="fas fa-comments text-3xl text-peace-green"></i>
        </div>

        <div class="container mx-auto px-4 relative z-10">
            <!-- Enhanced Section Title -->
            <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-humanitarian-teal text-white 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">Share Your Experience</span>
                    </div>

                    <h2
                        class="text-4xl md:text-6xl font-bold mb-6 font-source-sans text-transparent bg-clip-text bg-gradient-to-r from-white via-peace-green to-white">
                        TESTIMONIALS
                    </h2>
                    <div class="w-32 h-1 bg-gradient-to-r from-transparent via-peace-green to-transparent mx-auto mb-6">
                    </div>
                    <p class="text-xl text-gray-300 max-w-2xl mx-auto leading-relaxed">
                        Read testimonials from our peacekeeping personnel who have experienced our exceptional mission
                        support services
                    </p>
                </div>
            </div>

            <!-- Enhanced Testimonials Carousel -->
            <div x-data="testimonialCarousel" class="relative max-w-6xl mx-auto">
                <div class="overflow-hidden rounded-3xl">
                    <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-2xl p-8 md:p-12 text-center border border-white/20 shadow-2xl">
                                <div class="mb-8">
                                    <div
                                        class="w-24 h-24 bg-gradient-to-br from-peace-green to-humanitarian-teal rounded-full mx-auto mb-6 overflow-hidden shadow-xl border-4 border-white/20">
                                        <div class="w-full h-full bg-un-blue-dark/50 flex items-center justify-center">
                                            <i class="fas fa-user text-3xl text-white"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="text-5xl text-peace-green mb-6">
                                    <i class="fas fa-quote-left"></i>
                                </div>
                                <p class="text-xl text-gray-200 mb-8 italic leading-relaxed">
                                    "UN Peacekeeping gives me the opportunity to serve global peace and help vulnerable
                                    communities. The mission support was seamless and the coordination team was incredibly
                                    helpful."
                                </p>
                                <div class="border-t border-white/20 pt-6">
                                    <h4 class="font-bold text-white text-xl mb-3">Elizabeth Blackwell</h4>
                                    <div class="flex justify-center items-center space-x-1 text-peace-green text-lg mb-2">
                                        <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-alt"></i>
                                    </div>
                                    <p class="text-gray-300 text-sm">UN Peacekeeping • Mission Coordinator</p>
                                </div>
                            </div>
                        </div>

                        <!-- Testimonial 2 -->
                        <div class="w-full flex-shrink-0 px-4">
                            <div
                                class="bg-white/10 backdrop-blur-sm rounded-2xl p-8 md:p-12 text-center border border-white/20 shadow-2xl">
                                <div class="mb-8">
                                    <div
                                        class="w-24 h-24 rounded-full mx-auto mb-6 overflow-hidden shadow-xl border-4 border-white/20">
                                        <img src="https://un.sbrbot.trading/grepoksu/2020/09/testimonial2-1.jpg"
                                            alt="Margaret Sunsan" class="w-full h-full object-cover">
                                    </div>
                                </div>
                                <div class="text-5xl text-peace-green mb-6">
                                    <i class="fas fa-quote-left"></i>
                                </div>
                                <p class="text-xl text-gray-200 mb-8 italic leading-relaxed">
                                    "A great part of peacekeeping is the satisfaction of helping communities rebuild and
                                    returning to your family knowing you made a difference. This service made that mission
                                    so much more meaningful."
                                </p>
                                <div class="border-t border-white/20 pt-6">
                                    <h4 class="font-bold text-white text-xl mb-3">Margaret Sunsan</h4>
                                    <div class="flex justify-center items-center space-x-1 text-peace-green text-lg mb-2">
                                        <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"></i>
                                    </div>
                                    <p class="text-gray-300 text-sm">UN Peacekeeping • Field Officer</p>
                                </div>
                            </div>
                        </div>

                        <!-- Testimonial 3 -->
                        <div class="w-full flex-shrink-0 px-4">
                            <div
                                class="bg-white/10 backdrop-blur-sm rounded-2xl p-8 md:p-12 text-center border border-white/20 shadow-2xl">
                                <div class="mb-8">
                                    <div
                                        class="w-24 h-24 rounded-full mx-auto mb-6 overflow-hidden shadow-xl border-4 border-white/20">
                                        <img src="https://un.sbrbot.trading/grepoksu/2020/09/testimonial1.jpg"
                                            alt="Eric Buckman" class="w-full h-full object-cover">
                                    </div>
                                </div>
                                <div class="text-5xl text-peace-green mb-6">
                                    <i class="fas fa-quote-left"></i>
                                </div>
                                <p class="text-xl text-gray-200 mb-8 italic leading-relaxed">
                                    "I have wonderful memories of how our peacekeeping mission helped protect vulnerable
                                    families. I always wanted to make a difference in global peace, and the mission support
                                    process was perfect."
                                </p>
                                <div class="border-t border-white/20 pt-6">
                                    <h4 class="font-bold text-white text-xl mb-3">Eric Buckman</h4>
                                    <div class="flex justify-center items-center space-x-1 text-peace-green text-lg mb-2">
                                        <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-alt"></i>
                                    </div>
                                    <p class="text-gray-300 text-sm">UN Peacekeeping • Operations Specialist</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Enhanced Navigation Controls -->
                <button @click="prev()"
                    class="absolute left-4 top-1/2 transform -translate-y-1/2 bg-white/20 hover:bg-peace-green hover:text-white text-white rounded-full p-4 transition-all duration-300 shadow-lg border border-white/30">
                    <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-peace-green hover:text-white text-white rounded-full p-4 transition-all duration-300 shadow-lg border border-white/30">
                    <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>

                <!-- Enhanced Dots Indicator -->
                <div class="flex justify-center mt-10 space-x-3">
                    <button @click="activeSlide = 0"
                        :class="{ 'bg-peace-green shadow-lg scale-125': activeSlide === 0, 'bg-white/40': activeSlide !== 0 }"
                        class="w-4 h-4 rounded-full transition-all duration-300"></button>
                    <button @click="activeSlide = 1"
                        :class="{ 'bg-peace-green shadow-lg scale-125': activeSlide === 1, 'bg-white/40': activeSlide !== 1 }"
                        class="w-4 h-4 rounded-full transition-all duration-300"></button>
                    <button @click="activeSlide = 2"
                        :class="{ 'bg-peace-green shadow-lg scale-125': activeSlide === 2, 'bg-white/40': activeSlide !== 2 }"
                        class="w-4 h-4 rounded-full transition-all duration-300"></button>
                </div>
            </div>
        </div>
    </section>

    <!-- Enhanced Professional CTA Section -->
    <section class="py-20 bg-gradient-to-br from-un-blue-dark via-peace-green to-un-blue-dark relative overflow-hidden">
        <!-- 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="absolute top-10 right-10 w-32 h-32 bg-peace-green/10 rounded-full blur-3xl animate-pulse"></div>
        <div class="absolute bottom-10 left-10 w-40 h-40 bg-white/5 rounded-full blur-3xl animate-pulse delay-1000"></div>

        <div class="container mx-auto px-4 relative z-10">
            <div class="text-center max-w-5xl 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-12"
                    x-transition:enter-end="opacity-100 transform translate-y-0">

                    <!-- Enhanced Badge -->
                    <div
                        class="inline-flex items-center bg-gradient-to-r from-peace-green to-humanitarian-teal text-white px-10 py-5 rounded-full mb-10 shadow-2xl">
                        <i class="fas fa-globe mr-4 text-xl"></i>
                        <span class="font-bold uppercase tracking-wide text-lg">Ready to Serve Peace?</span>
                    </div>

                    <h2 class="text-5xl md:text-7xl font-bold mb-8 text-white leading-tight font-source-sans">
                        Ready to Join
                        <span
                            class="text-transparent bg-clip-text bg-gradient-to-r from-peace-green to-humanitarian-teal">UN
                            Peacekeeping?</span>
                    </h2>

                    <div class="w-40 h-1 bg-gradient-to-r from-transparent via-peace-green to-transparent mx-auto mb-10">
                    </div>

                    <p class="text-2xl text-gray-200 mb-12 leading-relaxed max-w-3xl mx-auto">
                        Take the next step and apply for UN peacekeeping service today. Our dedicated team is here to
                        support you through the entire process with professional guidance and 24/7 assistance.
                    </p>

                    <!-- Enhanced Statistics Grid -->
                    <div class="grid md:grid-cols-3 gap-8 mb-16">
                        <div
                            class="bg-white/10 backdrop-blur-sm rounded-2xl p-8 border border-white/20 transform hover:scale-105 transition-all duration-300">
                            <div class="text-4xl font-bold text-peace-green mb-2">87K+</div>
                            <div class="text-white font-semibold mb-1">Peacekeepers Deployed</div>
                            <div class="text-gray-300 text-sm">Serving global peace</div>
                        </div>
                        <div
                            class="bg-white/10 backdrop-blur-sm rounded-2xl p-8 border border-white/20 transform hover:scale-105 transition-all duration-300">
                            <div class="text-4xl font-bold text-peace-green mb-2">24/7</div>
                            <div class="text-white font-semibold mb-1">Support Available</div>
                            <div class="text-gray-300 text-sm">Always here when you need us</div>
                        </div>
                        <div
                            class="bg-white/10 backdrop-blur-sm rounded-2xl p-8 border border-white/20 transform hover:scale-105 transition-all duration-300">
                            <div class="text-4xl font-bold text-peace-green mb-2">70+</div>
                            <div class="text-white font-semibold mb-1">Countries Protected</div>
                            <div class="text-gray-300 text-sm">UN peacekeeping missions</div>
                        </div>
                    </div>

                    <!-- Enhanced Action Buttons -->
                    <div class="flex flex-col lg:flex-row justify-center items-center gap-6">
                        <a href="{{url('/')}}/page/apply-online"
                            class="group inline-flex items-center justify-center bg-gradient-to-r from-peace-green to-humanitarian-teal text-white px-12 py-5 rounded-xl font-bold text-xl hover:shadow-2xl hover:shadow-peace-green/20 transition-all duration-300 transform hover:-translate-y-2">
                            <i class="fas fa-file-alt mr-4 text-lg group-hover:animate-pulse"></i>
                            Apply for Service
                            <i
                                class="fas fa-arrow-right ml-4 group-hover:translate-x-1 transition-transform duration-300"></i>
                        </a>
                        <a href="{{url('/')}}page/contact"
                            class="group inline-flex items-center justify-center border-3 border-white text-white px-12 py-5 rounded-xl font-bold text-xl hover:bg-white hover:text-un-blue-dark transition-all duration-300 transform hover:-translate-y-1">
                            <i class="fas fa-headset mr-4 text-lg group-hover:animate-pulse"></i>
                            Contact Support
                            <i class="fas fa-phone ml-4 group-hover:rotate-12 transition-transform duration-300"></i>
                        </a>
                    </div>

                    <!-- Trust Indicators -->
                    <div class="mt-16 pt-8 border-t border-white/20">
                        <div class="flex flex-wrap justify-center items-center gap-8 opacity-80">
                            <div class="flex items-center space-x-2">
                                <i class="fas fa-shield-alt text-2xl text-peace-green"></i>
                                <span class="text-white font-semibold">UN Certified</span>
                            </div>
                            <div class="flex items-center space-x-2">
                                <i class="fas fa-lock text-2xl text-green-400"></i>
                                <span class="text-white font-semibold">Secure Platform</span>
                            </div>
                            <div class="flex items-center space-x-2">
                                <i class="fas fa-clock text-2xl text-blue-400"></i>
                                <span class="text-white font-semibold">Fast Processing</span>
                            </div>
                            <div class="flex items-center space-x-2">
                                <i class="fas fa-star text-2xl text-peace-green"></i>
                                <span class="text-white font-semibold">Top Rated Service</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <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>


@stop

@push('scripts')
@endpush
