@extends('layouts.frontend')

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

@section('content')

    @include('partials.messages')
    <!-- UN Peacekeeping Hero Section with Background Slider -->
    <section class="relative h-[700px] md:h-[900px] bg-gradient-un overflow-x-hidden">
        <!-- UN Peace Pattern Background -->
        <div class="absolute inset-0 peace-pattern opacity-20"></div>

        <!-- Slider Container -->
        <div x-data="{ currentSlide: 1, totalSlides: 3 }" x-init="setInterval(() => {
            currentSlide = currentSlide === totalSlides ? 1 : currentSlide + 1;
        }, 6000);" class="h-full relative">

            <!-- Background Images -->
            <div class="absolute inset-0 w-full h-full">
                <!-- Slide 1 Background -->
                <div x-show="currentSlide === 1" x-transition:enter="transition-opacity ease-in-out duration-1500"
                    x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
                    x-transition:leave="transition-opacity ease-in-out duration-1500" x-transition:leave-start="opacity-100"
                    x-transition:leave-end="opacity-0" class="absolute inset-0 w-full h-full">
                    <img src="{{ url('frontend/public/grepoksu/slide-05b.jpg')}}" alt="UN Peacekeeping Mission"
                        class="w-full h-full object-cover">
                    <div class="absolute inset-0 bg-gradient-to-b from-un-blue-dark/80 to-peacekeeping-navy/90"></div>
                    <div class="absolute inset-0 bg-un-blue/20"></div>
                </div>

                <!-- Slide 2 Background -->
                <div x-show="currentSlide === 2" x-transition:enter="transition-opacity ease-in-out duration-1500"
                    x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
                    x-transition:leave="transition-opacity ease-in-out duration-1500" x-transition:leave-start="opacity-100"
                    x-transition:leave-end="opacity-0" class="absolute inset-0 w-full h-full">
                    <img src="{{ url('frontend/public/grepoksu/slide-06a.jpg')}}" alt="International Peace Operations"
                        class="w-full h-full object-cover">
                    <div class="absolute inset-0 bg-gradient-to-b from-un-blue-dark/80 to-peacekeeping-navy/90"></div>
                    <div class="absolute inset-0 bg-peace-blue/20"></div>
                </div>

                <!-- Slide 3 Background -->
                <div x-show="currentSlide === 3" x-transition:enter="transition-opacity ease-in-out duration-1500"
                    x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
                    x-transition:leave="transition-opacity ease-in-out duration-1500" x-transition:leave-start="opacity-100"
                    x-transition:leave-end="opacity-0" class="absolute inset-0 w-full h-full">
                    <img src="{{ url('frontend/public/grepoksu/slide-05b.jpg')}}" alt="Global Peacekeeping Excellence"
                        class="w-full h-full object-cover">
                    <div class="absolute inset-0 bg-gradient-to-b from-un-blue-dark/80 to-peacekeeping-navy/90"></div>
                    <div class="absolute inset-0 bg-humanitarian-teal/20"></div>
                </div>
            </div>

            <!-- Content Container -->
            <div class="relative z-30 container mx-auto px-4 h-full flex flex-col justify-center text-white">
                <!-- Slide 1 Content -->
                <div x-show="currentSlide === 1" x-transition:enter="transition-all ease-in-out duration-1200 delay-500"
                    x-transition:enter-start="opacity-0 transform translate-y-8"
                    x-transition:enter-end="opacity-100 transform translate-y-0"
                    x-transition:leave="transition-all ease-in-out duration-600"
                    x-transition:leave-start="opacity-100 transform translate-y-0"
                    x-transition:leave-end="opacity-0 transform -translate-y-8" class="max-w-4xl mx-auto text-center">
                    <div class="flex items-center justify-center mb-6">
                        <div class="w-20 h-px bg-peace-green"></div>
                        <svg class="w-6 h-6 mx-4 text-peace-green" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd"
                                d="M3 6a3 3 0 013-3h10a1 1 0 01.8 1.6L14.25 8l2.55 3.4A1 1 0 0116 13H6a1 1 0 00-1 1v3a1 1 0 11-2 0V6z"
                                clip-rule="evenodd"></path>
                        </svg>
                        <div class="w-20 h-px bg-peace-green"></div>
                    </div>
                    <div class="bg-peace-green/30 backdrop-blur-sm px-6 py-3 rounded-full inline-block mb-6">
                        <p class="text-white font-bold uppercase tracking-wider">United Nations Peacekeeping</p>
                    </div>
                    <h1 class="text-4xl sm:text-5xl md:text-7xl font-bold mb-6 font-source-sans leading-tight break-words">
                        MAINTAINING <span class="text-peace-green">INTERNATIONAL</span><br class="hidden sm:block">
                        PEACE & SECURITY
                    </h1>
                    <p class="text-xl md:text-2xl mb-8 font-noto text-white/90 max-w-3xl mx-auto leading-relaxed">
                        UN Peacekeeping 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.
                    </p>
                    <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
                        <a href="{{url('/')}}/page/apply-online"
                            class="btn-un-primary px-10 py-4 rounded-full text-lg font-bold shadow-lg transform hover:scale-105 transition duration-300">
                            <svg class="w-5 h-5 mr-3 inline" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd"
                                    d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            JOIN PEACEKEEPING
                        </a>
                        <a href="{{url('/')}}#operations"
                            class="btn-un-secondary px-10 py-4 rounded-full text-lg font-bold transition duration-300">
                            <svg class="w-5 h-5 mr-3 inline" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd"
                                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            LEARN MORE
                        </a>
                    </div>
                </div>

                <!-- Slide 2 Content -->
                <div x-show="currentSlide === 2" x-transition:enter="transition-all ease-in-out duration-1200 delay-500"
                    x-transition:enter-start="opacity-0 transform translate-y-8"
                    x-transition:enter-end="opacity-100 transform translate-y-0"
                    x-transition:leave="transition-all ease-in-out duration-600"
                    x-transition:leave-start="opacity-100 transform translate-y-0"
                    x-transition:leave-end="opacity-0 transform -translate-y-8" class="max-w-4xl">
                    <div class="flex items-center mb-6">
                        <div class="w-20 h-px bg-humanitarian-teal"></div>
                        <svg class="w-6 h-6 mx-4 text-humanitarian-teal" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd"
                                d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                clip-rule="evenodd"></path>
                        </svg>
                        <div class="w-20 h-px bg-humanitarian-teal"></div>
                    </div>
                    <div class="bg-humanitarian-teal/30 backdrop-blur-sm px-6 py-3 rounded-full inline-block mb-6">
                        <p class="text-white font-bold uppercase tracking-wider">24/7 Crisis Response</p>
                    </div>
                    <h1 class="text-4xl sm:text-5xl md:text-7xl font-bold mb-6 font-source-sans leading-tight break-words">
                        EXPERT <span class="text-humanitarian-teal">HUMANITARIAN</span><br class="hidden sm:block">
                        ASSISTANCE
                    </h1>
                    <p class="text-xl md:text-2xl mb-8 font-noto text-white/90 max-w-3xl leading-relaxed">
                        Our dedicated peacekeepers provide immediate humanitarian assistance and crisis response in conflict
                        zones, ensuring the protection of vulnerable populations worldwide.
                    </p>
                    <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-6">
                        <a href="{{url('/')}}/page/contact"
                            class="btn-un-primary px-10 py-4 rounded-full text-lg font-bold shadow-lg transform hover:scale-105 transition duration-300">
                            <svg class="w-5 h-5 mr-3 inline" fill="currentColor" viewBox="0 0 20 20">
                                <path
                                    d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z">
                                </path>
                            </svg>
                            EMERGENCY SUPPORT
                        </a>
                    </div>
                </div>

                <!-- Slide 3 Content -->
                <div x-show="currentSlide === 3" x-transition:enter="transition-all ease-in-out duration-1200 delay-500"
                    x-transition:enter-start="opacity-0 transform translate-y-8"
                    x-transition:enter-end="opacity-100 transform translate-y-0"
                    x-transition:leave="transition-all ease-in-out duration-600"
                    x-transition:leave-start="opacity-100 transform translate-y-0"
                    x-transition:leave-end="opacity-0 transform -translate-y-8" class="max-w-4xl">
                    <div class="flex items-center mb-6">
                        <div class="w-20 h-px bg-unity-cyan"></div>
                        <svg class="w-6 h-6 mx-4 text-unity-cyan" fill="currentColor" viewBox="0 0 20 20">
                            <path
                                d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z">
                            </path>
                        </svg>
                        <div class="w-20 h-px bg-unity-cyan"></div>
                    </div>
                    <div class="bg-unity-cyan/30 backdrop-blur-sm px-6 py-3 rounded-full inline-block mb-6">
                        <p class="text-white font-bold uppercase tracking-wider">Global Unity Initiative</p>
                    </div>
                    <h1 class="text-4xl sm:text-5xl md:text-7xl font-bold mb-6 font-source-sans leading-tight break-words">
                        BUILDING <span class="text-unity-cyan">LASTING</span><br class="hidden sm:block">
                        PEACE TOGETHER
                    </h1>
                    <p class="text-xl md:text-2xl mb-8 font-noto text-white/90 max-w-3xl leading-relaxed">
                        Through international cooperation and multilateral partnerships, we work to create sustainable peace
                        and stability in post-conflict regions around the world.
                    </p>
                    <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-6">
                        <a href="{{url('/')}}/page/military-package"
                            class="btn-un-primary px-10 py-4 rounded-full text-lg font-bold shadow-lg transform hover:scale-105 transition duration-300">
                            <svg class="w-5 h-5 mr-3 inline" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            VIEW MISSIONS
                        </a>
                        <a href="{{url('/')}}/page/apply-online"
                            class="btn-un-secondary px-10 py-4 rounded-full text-lg font-bold transition duration-300">
                            <svg class="w-5 h-5 mr-3 inline" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd"
                                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            GET INVOLVED
                        </a>
                    </div>
                </div>
            </div>

            <!-- Enhanced Slider Controls -->
            <div class="absolute bottom-8 left-0 right-0 z-40 flex justify-center space-x-3">
                <button @click="currentSlide = 1"
                    :class="{ 'bg-peace-green scale-125': currentSlide === 1, 'bg-white/50 hover:bg-white/80': currentSlide !==
                            1 }"
                    class="w-4 h-4 rounded-full transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-peace-green"></button>
                <button @click="currentSlide = 2"
                    :class="{ 'bg-peace-green scale-125': currentSlide === 2, 'bg-white/50 hover:bg-white/80': currentSlide !==
                            2 }"
                    class="w-4 h-4 rounded-full transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-peace-green"></button>
                <button @click="currentSlide = 3"
                    :class="{ 'bg-peace-green scale-125': currentSlide === 3, 'bg-white/50 hover:bg-white/80': currentSlide !==
                            3 }"
                    class="w-4 h-4 rounded-full transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-peace-green"></button>
            </div>

            <!-- Enhanced Prev/Next Controls -->
            <button @click="currentSlide = currentSlide === 1 ? 3 : currentSlide - 1"
                class="absolute left-6 top-1/2 transform -translate-y-1/2 z-40 bg-un-blue-dark/80 hover:bg-un-blue-dark text-white rounded-full p-3 transition-all duration-300 border-2 border-peace-green/50 hover:border-peace-green">
                <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="currentSlide = currentSlide === 3 ? 1 : currentSlide + 1"
                class="absolute right-6 top-1/2 transform -translate-y-1/2 z-40 bg-un-blue-dark/80 hover:bg-un-blue-dark text-white rounded-full p-3 transition-all duration-300 border-2 border-peace-green/50 hover:border-peace-green">
                <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>
        </div>
    </section>

    <!-- Latest UN Peacekeeping News & Updates Section -->
    <section class="py-20 bg-un-gray relative overflow-x-hidden">
        <!-- Background Pattern -->
        <div class="absolute inset-0 dove-pattern opacity-5"></div>

        <div class="container mx-auto px-4 relative z-10">
            <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-16">
                <div class="mb-8 md:mb-0">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-px bg-un-blue-dark"></div>
                        <svg class="w-6 h-6 mx-4 text-un-blue-dark" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd"
                                d="M2 5a2 2 0 012-2h8a2 2 0 012 2v10a2 2 0 002 2H4a2 2 0 01-2-2V5zm3 1h6v4H5V6zm6 6H5v2h6v-2z"
                                clip-rule="evenodd"></path>
                            <path d="M15 7h1a2 2 0 012 2v5.5a1.5 1.5 0 01-3 0V7z"></path>
                        </svg>
                        <div class="w-12 h-px bg-un-blue-dark"></div>
                    </div>
                    <div class="bg-un-blue-dark/10 backdrop-blur-sm px-6 py-3 rounded-full inline-block mb-6">
                        <p class="text-un-blue-dark font-bold uppercase tracking-wider text-sm">Official UN Peacekeeping
                            Updates</p>
                    </div>
                    <h2 class="text-4xl md:text-5xl font-bold mb-6 font-source-sans text-un-blue-dark">
                        LATEST PEACEKEEPING <span class="text-peace-blue">NEWS & OPERATIONS</span>
                    </h2>
                    <p class="text-text-secondary max-w-2xl text-lg leading-relaxed font-noto">
                        Stay informed with the latest developments from UN Peacekeeping Operations worldwide. We are
                        committed to maintaining international peace and security through multilateral cooperation.
                    </p>
                </div>
                <a href="#"
                    class="btn-un-primary px-8 py-4 rounded-full font-bold shadow-lg transform hover:scale-105 transition duration-300">
                    <svg class="w-5 h-5 mr-3 inline" fill="currentColor" viewBox="0 0 20 20">
                        <path
                            d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z">
                        </path>
                    </svg>
                    VIEW ALL UPDATES
                </a>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- News Item 1 -->
                <div class="un-card transform transition duration-500 hover:-translate-y-3 group overflow-hidden">
                    <div class="relative">
                        <img src="{{ url('frontend/public/grepoksu/2020/07/Downloader.la-614097753c29a-370x250.jpg')}}"
                            alt="UN Peacekeeping Missions"
                            class="w-full h-64 object-cover group-hover:scale-105 transition duration-500">
                        <div
                            class="absolute inset-0 bg-gradient-to-t from-un-blue-dark/60 to-transparent opacity-0 group-hover:opacity-100 transition duration-300">
                        </div>
                        <div class="absolute top-4 left-4 bg-un-blue-dark text-white text-center p-4 rounded-xl shadow-lg">
                            <span class="text-2xl font-bold block">14</span>
                            <span class="text-sm font-semibold">SEP</span>
                        </div>
                        <div
                            class="absolute top-4 right-4 bg-peace-green text-white px-3 py-1 rounded-full text-xs font-bold">
                            FEATURED
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="flex text-sm text-text-light mb-4 space-x-4">
                            <span class="flex items-center">
                                <svg class="w-4 h-4 mr-2 text-un-blue-dark" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd"
                                        d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                        clip-rule="evenodd"></path>
                                </svg>
                                UN Operations
                            </span>
                            <span class="flex items-center">
                                <svg class="w-4 h-4 mr-2 text-un-blue-dark" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path>
                                    <path fill-rule="evenodd"
                                        d="M4 5a2 2 0 012-2h8a2 2 0 012 2v6a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 2a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z"
                                        clip-rule="evenodd"></path>
                                </svg>
                                Official Report
                            </span>
                        </div>
                        <h3
                            class="text-xl font-bold mb-4 text-un-blue-dark group-hover:text-peace-blue transition duration-300 font-source-sans">
                            <a href="{{url('/')}}/page/military-package" class="hover:text-peace-blue">
                                Peacekeeping Operations Overview & Assessment
                            </a>
                        </h3>
                        <p class="text-text-secondary mb-6 leading-relaxed font-noto">
                            Comprehensive analysis of current UN peacekeeping missions, their impact on regional stability,
                            and ongoing efforts to strengthen international peace and security...
                        </p>
                        <a href="{{url('/')}}/page/military-package"
                            class="inline-flex items-center text-peace-blue font-bold hover:text-humanitarian-teal transition duration-300">
                            READ FULL REPORT
                            <svg class="w-4 h-4 ml-2" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd"
                                    d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                                    clip-rule="evenodd"></path>
                            </svg>
                        </a>
                    </div>
                </div>

                <!-- News Item 2 -->
                <div class="un-card transform transition duration-500 hover:-translate-y-3 group overflow-hidden">
                    <div class="relative">
                        <img src="{{ url('frontend/public/grepoksu/2021/09/Downloader.la-613b478f30702-370x250.jpg')}}"
                            alt="Humanitarian Assistance Programs"
                            class="w-full h-64 object-cover group-hover:scale-105 transition duration-500">
                        <div
                            class="absolute inset-0 bg-gradient-to-t from-humanitarian-teal/60 to-transparent opacity-0 group-hover:opacity-100 transition duration-300">
                        </div>
                        <div
                            class="absolute top-4 left-4 bg-humanitarian-teal text-white text-center p-4 rounded-xl shadow-lg">
                            <span class="text-2xl font-bold block">15</span>
                            <span class="text-sm font-semibold">SEP</span>
                        </div>
                        <div
                            class="absolute top-4 right-4 bg-urgent-red text-white px-3 py-1 rounded-full text-xs font-bold">
                            URGENT
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="flex text-sm text-text-light mb-4 space-x-4">
                            <span class="flex items-center">
                                <svg class="w-4 h-4 mr-2 text-humanitarian-teal" fill="currentColor" viewBox="0 0 20 20">
                                    <path
                                        d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4zM18 9H2v5a2 2 0 002 2h12a2 2 0 002-2V9zM4 13a1 1 0 011-1h1a1 1 0 110 2H5a1 1 0 01-1-1zm5-1a1 1 0 100 2h1a1 1 0 100-2H9z">
                                    </path>
                                </svg>
                                Humanitarian Aid
                            </span>
                            <span class="flex items-center">
                                <svg class="w-4 h-4 mr-2 text-humanitarian-teal" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path>
                                    <path fill-rule="evenodd"
                                        d="M4 5a2 2 0 012-2h8a2 2 0 012 2v6a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 2a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z"
                                        clip-rule="evenodd"></path>
                                </svg>
                                Crisis Response
                            </span>
                        </div>
                        <h3
                            class="text-xl font-bold mb-4 text-un-blue-dark group-hover:text-humanitarian-teal transition duration-300 font-source-sans">
                            <a href="{{url('/')}}/page/adoption-block-leave" class="hover:text-humanitarian-teal">
                                Emergency Humanitarian Response Initiative
                            </a>
                        </h3>
                        <p class="text-text-secondary mb-6 leading-relaxed font-noto">
                            UN Peacekeeping operations launch comprehensive humanitarian assistance program to support
                            displaced populations and provide critical aid in conflict-affected regions...
                        </p>
                        <a href="{{url('/')}}/page/adoption-block-leave"
                            class="inline-flex items-center text-peace-blue font-bold hover:text-humanitarian-teal transition duration-300">
                            VIEW PROGRAM DETAILS
                            <svg class="w-4 h-4 ml-2" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd"
                                    d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                                    clip-rule="evenodd"></path>
                            </svg>
                        </a>
                    </div>
                </div>

                <!-- News Item 3 -->
                <div class="un-card transform transition duration-500 hover:-translate-y-3 group overflow-hidden">
                    <div class="relative">
                        <img src="{{ url('frontend/public/grepoksu/2021/09/610d069902352-370x250.jpg')}}"
                            alt="International Cooperation Training"
                            class="w-full h-64 object-cover group-hover:scale-105 transition duration-500">
                        <div
                            class="absolute inset-0 bg-gradient-to-t from-unity-cyan/60 to-transparent opacity-0 group-hover:opacity-100 transition duration-300">
                        </div>
                        <div class="absolute top-4 left-4 bg-unity-cyan text-white text-center p-4 rounded-xl shadow-lg">
                            <span class="text-2xl font-bold block">15</span>
                            <span class="text-sm font-semibold">SEP</span>
                        </div>
                        <div
                            class="absolute top-4 right-4 bg-hope-green text-white px-3 py-1 rounded-full text-xs font-bold">
                            TRAINING
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="flex text-sm text-text-light mb-4 space-x-4">
                            <span class="flex items-center">
                                <svg class="w-4 h-4 mr-2 text-unity-cyan" fill="currentColor" viewBox="0 0 20 20">
                                    <path
                                        d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z">
                                    </path>
                                </svg>
                                Peace Operations
                            </span>
                            <span class="flex items-center">
                                <svg class="w-4 h-4 mr-2 text-unity-cyan" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path>
                                    <path fill-rule="evenodd"
                                        d="M4 5a2 2 0 012-2h8a2 2 0 012 2v6a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 2a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z"
                                        clip-rule="evenodd"></path>
                                </svg>
                                International Training
                            </span>
                        </div>
                        <h3
                            class="text-xl font-bold mb-4 text-un-blue-dark group-hover:text-unity-cyan transition duration-300 font-source-sans">
                            <a href="{{url('/')}}/page/adoption-block-leave" class="hover:text-unity-cyan">
                                Multilateral Peacekeeping Training Center
                            </a>
                        </h3>
                        <p class="text-text-secondary mb-6 leading-relaxed font-noto">
                            Advanced international training facility prepares peacekeepers for complex multicultural
                            environments through comprehensive tactical and diplomatic training programs...
                        </p>
                        <a href="{{url('/')}}/page/adoption-block-leave"
                            class="inline-flex items-center text-peace-blue font-bold hover:text-unity-cyan transition duration-300">
                            EXPLORE TRAINING
                            <svg class="w-4 h-4 ml-2" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd"
                                    d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                                    clip-rule="evenodd"></path>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Statistics Bar -->
            <div class="mt-16 bg-gradient-un rounded-2xl p-8 text-white shadow-un">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center">
                    <div class="border-r border-white/20 last:border-r-0">
                        <div class="text-3xl font-bold text-peace-green mb-2">87K+</div>
                        <div class="text-sm font-medium uppercase tracking-wider font-noto">Peacekeepers Deployed</div>
                    </div>
                    <div class="border-r border-white/20 last:border-r-0">
                        <div class="text-3xl font-bold text-humanitarian-teal mb-2">70+</div>
                        <div class="text-sm font-medium uppercase tracking-wider font-noto">Countries Protected</div>
                    </div>
                    <div class="border-r border-white/20 last:border-r-0">
                        <div class="text-3xl font-bold text-unity-cyan mb-2">24/7</div>
                        <div class="text-sm font-medium uppercase tracking-wider font-noto">Crisis Response</div>
                    </div>
                    <div>
                        <div class="text-3xl font-bold text-hope-green mb-2">75+</div>
                        <div class="text-sm font-medium uppercase tracking-wider font-noto">Years of Service</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- UN Peacekeeping Mission Benefits Section -->
    <section class="py-20 bg-gradient-un text-white relative overflow-x-hidden shadow-un">
        <!-- Background Pattern Overlay -->
        <div class="absolute inset-0 peace-pattern opacity-30"></div>
        <div class="absolute top-0 right-0 w-96 h-96 bg-peace-green/10 rounded-full -translate-y-48 translate-x-48"></div>
        <div
            class="absolute bottom-0 left-0 w-96 h-96 bg-humanitarian-teal/10 rounded-full translate-y-48 -translate-x-48">
        </div>

        <div class="container mx-auto px-4 relative z-10">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
                <div>
                    <div class="flex items-center mb-6">
                        <div class="w-16 h-px bg-peace-green"></div>
                        <svg class="w-6 h-6 mx-4 text-peace-green" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd"
                                d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                clip-rule="evenodd"></path>
                        </svg>
                        <div class="w-16 h-px bg-peace-green"></div>
                    </div>
                    <div class="bg-peace-green/30 backdrop-blur-sm px-6 py-3 rounded-full inline-block mb-6">
                        <p class="text-white font-bold uppercase tracking-wider text-sm font-noto">Comprehensive
                            Peacekeeping Benefits</p>
                    </div>
                    <h2 class="text-4xl md:text-5xl font-bold mb-8 font-source-sans leading-tight">
                        COMPLETE <span class="text-peace-green">PEACEKEEPING</span><br>
                        MISSION SUPPORT
                    </h2>
                    <p class="text-white/90 mb-10 text-lg leading-relaxed font-noto">
                        Our comprehensive peacekeeping program ensures every peacekeeper receives the support needed to
                        maintain international peace and security. From family assistance to professional development, we
                        provide the foundation for successful peace operations.
                    </p>

                    <!-- Enhanced Statistics -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-10">
                        <div class="text-center bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-peace-green/30">
                            <div class="mb-3">
                                <span x-data="counter" x-text="Math.floor(current)"
                                    class="text-4xl font-bold text-peace-green" data-target="87000">0</span>
                                <span class="text-4xl font-bold text-peace-green">+</span>
                            </div>
                            <p class="text-white font-semibold uppercase tracking-wider text-sm font-noto">Active
                                Peacekeepers</p>
                            <p class="text-white/70 text-xs mt-1">Deployed Worldwide</p>
                        </div>
                        <div
                            class="text-center bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-humanitarian-teal/30">
                            <div class="mb-3">
                                <span x-data="counter" x-text="Math.floor(current)"
                                    class="text-4xl font-bold text-humanitarian-teal" data-target="70">0</span>
                                <span class="text-4xl font-bold text-humanitarian-teal">+</span>
                            </div>
                            <p class="text-white font-semibold uppercase tracking-wider text-sm font-noto">Countries
                                Protected</p>
                            <p class="text-white/70 text-xs mt-1">Under UN Protection</p>
                        </div>
                    </div>

                    <!-- Key Benefits List -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
                        <div class="flex items-center space-x-3">
                            <div class="w-8 h-8 bg-peace-green rounded-full flex items-center justify-center">
                                <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd"
                                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                                        clip-rule="evenodd"></path>
                                </svg>
                            </div>
                            <span class="text-white font-medium font-noto">Humanitarian Assistance</span>
                        </div>
                        <div class="flex items-center space-x-3">
                            <div class="w-8 h-8 bg-peace-green rounded-full flex items-center justify-center">
                                <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd"
                                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                                        clip-rule="evenodd"></path>
                                </svg>
                            </div>
                            <span class="text-white font-medium font-noto">Crisis Response Support</span>
                        </div>
                        <div class="flex items-center space-x-3">
                            <div class="w-8 h-8 bg-peace-green rounded-full flex items-center justify-center">
                                <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd"
                                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                                        clip-rule="evenodd"></path>
                                </svg>
                            </div>
                            <span class="text-white font-medium font-noto">Family Protection Services</span>
                        </div>
                        <div class="flex items-center space-x-3">
                            <div class="w-8 h-8 bg-peace-green rounded-full flex items-center justify-center">
                                <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd"
                                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                                        clip-rule="evenodd"></path>
                                </svg>
                            </div>
                            <span class="text-white font-medium font-noto">Mental Health Resources</span>
                        </div>
                    </div>

                    <!-- CTA Button -->
                    <a href="{{url('/')}}/page/apply-online"
                        class="btn-un-primary px-10 py-4 rounded-full text-lg font-bold shadow-lg transform hover:scale-105 transition duration-300 inline-flex items-center">
                        <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd"
                                d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
                                clip-rule="evenodd"></path>
                        </svg>
                        JOIN PEACEKEEPING MISSION
                    </a>
                </div>

                <div class="relative">
                    <!-- Main Image Container -->
                    <div class="relative">
                        <div class="bg-peace-green/20 absolute inset-0 rounded-2xl transform rotate-3 shadow-2xl"></div>
                        <div class="bg-humanitarian-teal/30 absolute inset-0 rounded-2xl transform -rotate-2 shadow-xl">
                        </div>
                        <img src="{{ url('frontend/public/grepoksu/2021/09/slide-04d.png')}}" alt="UN Peacekeeping Excellence"
                            class="relative z-10 rounded-2xl shadow-un w-full transform hover:scale-105 transition duration-500">

                        <!-- Floating Stats Cards -->
                        <div class="absolute -top-4 -right-4 bg-white rounded-xl p-4 shadow-lg z-20">
                            <div class="text-center">
                                <div class="text-2xl font-bold text-peace-blue">12</div>
                                <div class="text-xs text-text-secondary font-medium">Active Missions</div>
                            </div>
                        </div>

                        <div class="absolute -bottom-4 -left-4 bg-peace-green rounded-xl p-4 shadow-lg z-20">
                            <div class="text-center">
                                <div class="text-2xl font-bold text-white">24/7</div>
                                <div class="text-xs text-white font-medium">Support</div>
                            </div>
                        </div>
                    </div>

                    <!-- Decorative Elements -->
                    <div class="absolute top-8 right-8 w-16 h-16 border-4 border-peace-green rounded-full opacity-60">
                    </div>
                    <div class="absolute bottom-8 left-8 w-12 h-12 bg-humanitarian-teal rounded-full opacity-40"></div>
                </div>
            </div>
        </div>
    </section>

    <!-- Enhanced UNITED NATIONS PEACEKEEPING Welfare Department Section -->
    <section id="services" class="py-20 bg-white relative">
        <!-- Background Elements -->
        <div class="absolute inset-0 bg-hero-pattern opacity-5"></div>
        <div class="absolute top-0 right-0 w-64 h-64 bg-peace-green/10 rounded-full -translate-y-32 translate-x-32"></div>

        <div class="container mx-auto px-4 relative z-10">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
                <!-- Left Column - Enhanced Department Information -->
                <div>
                    <div class="flex items-center mb-6">
                        <div class="w-16 h-px bg-peace-green"></div>
                        <i class="fas fa-shield-alt text-peace-green mx-4 text-2xl"></i>
                        <div class="w-16 h-px bg-peace-green"></div>
                    </div>
                    <div class="bg-peace-green/10 backdrop-blur-sm px-4 py-2 rounded-full inline-block mb-6">
                        <p class="text-peace-green font-bold uppercase tracking-wider text-sm">Official UN Department</p>
                    </div>
                    <h2 class="text-4xl md:text-5xl font-bold mb-8 font-peacekeeping text-peace-dark">
                        UNITED NATIONS PEACEKEEPING <span class="text-peace-green">WELFARE</span><br>
                        DEPARTMENT
                    </h2>
                    <p class="text-gray-700 mb-10 text-lg leading-relaxed">
                        Our department serves as the cornerstone of UN peacekeeping family support, ensuring peacekeepers
                        can balance their professional duties with personal responsibilities. We provide comprehensive leave
                        programs, family support services, and career guidance to maintain the wellbeing of our
                        international peacekeepers.
                    </p>

                    <!-- Enhanced Progress Bars with Professional Styling -->
                    <div class="space-y-8">
                        <!-- Leave Success Rate -->
                        <div class="skill-item bg-gray-50 rounded-xl p-6 border border-peace-green/20">
                            <div class="flex justify-between items-center mb-4">
                                <div class="flex items-center space-x-3">
                                    <i class="fas fa-chart-line text-peace-green text-xl"></i>
                                    <h4 class="text-lg font-bold text-peace-dark">Leave Application Success Rate</h4>
                                </div>
                                <span
                                    class="text-2xl font-bold text-peace-green bg-peace-gold/20 px-3 py-1 rounded-full">95%</span>
                            </div>
                            <div class="w-full bg-gray-300 rounded-full h-4 shadow-inner">
                                <div class="bg-gradient-to-r from-peace-green via-peace-gold to-peace-green h-4 rounded-full transition-all duration-2000 ease-out shadow-lg"
                                    style="width: 95%">
                                    <div
                                        class="h-full bg-gradient-to-r from-transparent via-white/30 to-transparent rounded-full">
                                    </div>
                                </div>
                            </div>
                            <p class="text-sm text-gray-600 mt-2">Over 2.1 million applications successfully processed</p>
                        </div>

                        <!-- Support and Assistance -->
                        <div class="skill-item bg-gray-50 rounded-xl p-6 border border-peace-green/20">
                            <div class="flex justify-between items-center mb-4">
                                <div class="flex items-center space-x-3">
                                    <i class="fas fa-hands-helping text-peace-green text-xl"></i>
                                    <h4 class="text-lg font-bold text-peace-dark">Comprehensive Support Services</h4>
                                </div>
                                <span
                                    class="text-2xl font-bold text-peace-green bg-peace-gold/20 px-3 py-1 rounded-full">92%</span>
                            </div>
                            <div class="w-full bg-gray-300 rounded-full h-4 shadow-inner">
                                <div class="bg-gradient-to-r from-peace-green via-peace-gold to-peace-green h-4 rounded-full transition-all duration-2000 ease-out shadow-lg"
                                    style="width: 92%">
                                    <div
                                        class="h-full bg-gradient-to-r from-transparent via-white/30 to-transparent rounded-full">
                                    </div>
                                </div>
                            </div>
                            <p class="text-sm text-gray-600 mt-2">Family counseling, emergency assistance, and career
                                guidance</p>
                        </div>

                        <!-- Full Benefits Coverage -->
                        <div class="skill-item bg-gray-50 rounded-xl p-6 border border-peace-green/20">
                            <div class="flex justify-between items-center mb-4">
                                <div class="flex items-center space-x-3">
                                    <i class="fas fa-medal text-peace-green text-xl"></i>
                                    <h4 class="text-lg font-bold text-peace-dark">Full Benefits Coverage</h4>
                                </div>
                                <span
                                    class="text-2xl font-bold text-peace-green bg-peace-gold/20 px-3 py-1 rounded-full">88%</span>
                            </div>
                            <div class="w-full bg-gray-300 rounded-full h-4 shadow-inner">
                                <div class="bg-gradient-to-r from-peace-green via-peace-gold to-peace-green h-4 rounded-full transition-all duration-2000 ease-out shadow-lg"
                                    style="width: 88%">
                                    <div
                                        class="h-full bg-gradient-to-r from-transparent via-white/30 to-transparent rounded-full">
                                    </div>
                                </div>
                            </div>
                            <p class="text-sm text-gray-600 mt-2">Complete leave benefits with full pay and job protection
                            </p>
                        </div>
                    </div>

                    <!-- Department Credentials -->
                    <div class="mt-10 grid grid-cols-2 gap-6">
                        <div class="text-center bg-peace-green/10 rounded-xl p-4">
                            <div class="text-2xl font-bold text-peace-green">75+</div>
                            <div class="text-sm text-gray-600 font-medium">Years of Service</div>
                        </div>
                        <div class="text-center bg-peace-green/10 rounded-xl p-4">
                            <div class="text-2xl font-bold text-peace-green">24/7</div>
                            <div class="text-sm text-gray-600 font-medium">Support Available</div>
                        </div>
                    </div>
                </div>

                <!-- Right Column - Enhanced Service Blocks -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Apply for Leave -->
                    <div
                        class="service-block bg-white rounded-2xl shadow-peacekeeping p-8 relative overflow-hidden group transform transition duration-500 hover:-translate-y-3 hover:shadow-gold border border-peace-green/10">
                        <div
                            class="bg-gradient-to-br from-peace-green/20 to-peace-gold/20 rounded-full p-6 mb-6 inline-block">
                            <i class="fas fa-file-signature text-3xl text-peace-green"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-4 text-peace-dark">Apply for Peacekeeping Leave</h3>
                        <p class="text-gray-600 mb-6 leading-relaxed">Submit your official UN peacekeeping leave
                            application through our secure, streamlined process. Get approved faster with our digital
                            submission system.</p>

                        <!-- Enhanced Overlay -->
                        <div
                            class="absolute inset-0 bg-gradient-to-br from-peace-green via-peace-dark to-peace-green text-white p-8 flex flex-col justify-center opacity-0 group-hover:opacity-100 transition-all duration-500">
                            <div class="text-center">
                                <i class="fas fa-file-signature text-5xl mb-6 text-peace-gold"></i>
                                <h3 class="text-2xl font-bold mb-4">START APPLICATION</h3>
                                <p class="text-gray-100 mb-6">Begin your peacekeeping leave application process with our
                                    secure portal.</p>
                                <a href="{{url('/')}}/page/apply-online"
                                    class="btn-un-primary px-6 py-3 rounded-full font-bold inline-flex items-center">
                                    APPLY NOW <i class="fas fa-arrow-right ml-2"></i>
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Leave Eligibility -->
                    <div
                        class="service-block bg-white rounded-2xl shadow-peacekeeping p-8 relative overflow-hidden group transform transition duration-500 hover:-translate-y-3 hover:shadow-gold border border-peace-green/10">
                        <div
                            class="bg-gradient-to-br from-peace-green/20 to-peace-gold/20 rounded-full p-6 mb-6 inline-block">
                            <i class="fas fa-user-check text-3xl text-peace-green"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-4 text-peace-dark">Check Eligibility</h3>
                        <p class="text-gray-600 mb-6 leading-relaxed">Verify your eligibility for different types of UN
                            peacekeeping leave benefits and understand your entitlements as a peacekeeper.</p>

                        <!-- Enhanced Overlay -->
                        <div
                            class="absolute inset-0 bg-gradient-to-br from-peace-green via-peace-dark to-peace-green text-white p-8 flex flex-col justify-center opacity-0 group-hover:opacity-100 transition-all duration-500">
                            <div class="text-center">
                                <i class="fas fa-user-check text-5xl mb-6 text-peace-gold"></i>
                                <h3 class="text-2xl font-bold mb-4">VERIFY ELIGIBILITY</h3>
                                <p class="text-gray-100 mb-6">Check your qualification status for peacekeeping leave
                                    benefits.</p>
                                <a href="#eligibility"
                                    class="btn-un-primary px-6 py-3 rounded-full font-bold inline-flex items-center">
                                    CHECK NOW <i class="fas fa-arrow-right ml-2"></i>
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Leave Benefits -->
                    <div
                        class="service-block bg-white rounded-2xl shadow-peacekeeping p-8 relative overflow-hidden group transform transition duration-500 hover:-translate-y-3 hover:shadow-gold border border-peace-green/10">
                        <div
                            class="bg-gradient-to-br from-peace-green/20 to-peace-gold/20 rounded-full p-6 mb-6 inline-block">
                            <i class="fas fa-gift text-3xl text-peace-green"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-4 text-peace-dark">Explore Benefits</h3>
                        <p class="text-gray-600 mb-6 leading-relaxed">Discover the comprehensive benefits package available
                            to UN peacekeepers including health coverage, family support, and more.</p>

                        <!-- Enhanced Overlay -->
                        <div
                            class="absolute inset-0 bg-gradient-to-br from-peace-green via-peace-dark to-peace-green text-white p-8 flex flex-col justify-center opacity-0 group-hover:opacity-100 transition-all duration-500">
                            <div class="text-center">
                                <i class="fas fa-gift text-5xl mb-6 text-peace-gold"></i>
                                <h3 class="text-2xl font-bold mb-4">VIEW BENEFITS</h3>
                                <p class="text-gray-100 mb-6">Explore your complete peacekeeping benefits package.</p>
                                <a href="{{url('/')}}/page/military-package"
                                    class="btn-un-primary px-6 py-3 rounded-full font-bold inline-flex items-center">
                                    LEARN MORE <i class="fas fa-arrow-right ml-2"></i>
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Support Services -->
                    <div
                        class="service-block bg-white rounded-2xl shadow-peacekeeping p-8 relative overflow-hidden group transform transition duration-500 hover:-translate-y-3 hover:shadow-gold border border-peace-green/10">
                        <div
                            class="bg-gradient-to-br from-peace-green/20 to-peace-gold/20 rounded-full p-6 mb-6 inline-block">
                            <i class="fas fa-headset text-3xl text-peace-green"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-4 text-peace-dark">24/7 Support</h3>
                        <p class="text-gray-600 mb-6 leading-relaxed">Access round-the-clock support from our peacekeeping
                            leave specialists for any questions or emergency situations.</p>

                        <!-- Enhanced Overlay -->
                        <div
                            class="absolute inset-0 bg-gradient-to-br from-peace-green via-peace-dark to-peace-green text-white p-8 flex flex-col justify-center opacity-0 group-hover:opacity-100 transition-all duration-500">
                            <div class="text-center">
                                <i class="fas fa-headset text-5xl mb-6 text-peace-gold"></i>
                                <h3 class="text-2xl font-bold mb-4">GET SUPPORT</h3>
                                <p class="text-gray-100 mb-6">Connect with our expert support team immediately.</p>
                                <a href="{{url('/')}}/page/contact"
                                    class="btn-un-primary px-6 py-3 rounded-full font-bold inline-flex items-center">
                                    CONTACT US <i class="fas fa-arrow-right ml-2"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- UN Peacekeeping Leave Types Section -->
    <section class="py-16 bg-gradient-peacekeeping text-white relative overflow-hidden shadow-peacekeeping">
        <!-- Background Pattern Overlay -->
        <div class="absolute inset-0 bg-hero-pattern opacity-30"></div>
        <div class="container mx-auto px-4 relative z-10">
            <div class="text-center mb-12">
                <p class="text-un-blue-light font-medium uppercase mb-2">UNITED NATIONS PEACEKEEPING Welfare Department</p>
                <h2 class="text-3xl md:text-4xl font-bold mb-4">UN Peacekeeping Leave types we offer</h2>
                <p class="text-gray-300 max-w-3xl mx-auto">The UNITED NATIONS PEACEKEEPING Welfare Department is to help
                    our peacekeepers balance their work and family responsibilities</p>
            </div>

            <div class="relative">
                <!-- Slides Container -->
                <div class="overflow-hidden">
                    <div class="flex transition-transform duration-500 ease-in-out"
                        :style="'transform: translateX(-' + (activeSlide * 100) + '%)'">
                        <!-- Leave Type 1 -->
                        <div class="w-full md:w-1/3 flex-shrink-0 px-4">
                            <div class="bg-white/10 backdrop-blur-sm rounded-lg p-6 h-full">
                                <div class="bg-peace-green/20 rounded-full p-4 mb-4 inline-block">
                                    <i class="fas fa-baby text-3xl text-white"></i>
                                </div>
                                <h3 class="text-xl font-bold mb-3">Adoption Block Leave</h3>
                                <p class="text-gray-300 mb-4">Special leave time for peacekeepers who are adopting a child.
                                    This type of leave allows UN personnel to bond with their newly adopted child.</p>
                                <a href="{{url('/')}}/page/adoption-block-leave"
                                    class="text-un-blue-light hover:underline inline-flex items-center">
                                    Learn More <i class="fas fa-arrow-right ml-2"></i>
                                </a>
                            </div>
                        </div>

                        <!-- Leave Type 2 -->
                        <div class="w-full md:w-1/3 flex-shrink-0 px-4">
                            <div class="bg-white/10 backdrop-blur-sm rounded-lg p-6 h-full">
                                <div class="bg-peace-green/20 rounded-full p-4 mb-4 inline-block">
                                    <i class="fas fa-female text-3xl text-white"></i>
                                </div>
                                <h3 class="text-xl font-bold mb-3">Pregnancy Home Leave</h3>
                                <p class="text-gray-300 mb-4">Leave granted to pregnant peacekeepers. This allows time for
                                    medical appointments, rest, and preparation for childbirth.</p>
                                <a href="{{url('/')}}/page/adoption-block-leave"
                                    class="text-un-blue-light hover:underline inline-flex items-center">
                                    Learn More <i class="fas fa-arrow-right ml-2"></i>
                                </a>
                            </div>
                        </div>

                        <!-- Leave Type 3 -->
                        <div class="w-full md:w-1/3 flex-shrink-0 px-4">
                            <div class="bg-white/10 backdrop-blur-sm rounded-lg p-6 h-full">
                                <div class="bg-peace-green/20 rounded-full p-4 mb-4 inline-block">
                                    <i class="fas fa-dove text-3xl text-white"></i>
                                </div>
                                <h3 class="text-xl font-bold mb-3">Special Terminal Leave</h3>
                                <p class="text-gray-300 mb-4">Leave granted at the end of a peacekeeper's active duty
                                    period. This allows for transition time before officially separating from peacekeeping
                                    service.</p>
                                <a href="{{url('/')}}/page/special-terminal-leave"
                                    class="text-un-blue-light hover:underline inline-flex items-center">
                                    Learn More <i class="fas fa-arrow-right ml-2"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Controls -->
                <button @click="prev()"
                    class="absolute left-0 top-1/2 transform -translate-y-1/2 bg-white/20 hover:bg-white/30 text-white rounded-full p-2 transition">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                    </svg>
                </button>
                <button @click="next()"
                    class="absolute right-0 top-1/2 transform -translate-y-1/2 bg-white/20 hover:bg-white/30 text-white rounded-full p-2 transition">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                    </svg>
                </button>

                <!-- Indicators -->
                <div class="flex justify-center mt-6 space-x-2">
                    <button @click="activeSlide = 0"
                        :class="{ 'bg-white': activeSlide === 0, 'bg-gray-400': activeSlide !== 0 }"
                        class="w-3 h-3 rounded-full transition-colors duration-300"></button>
                    <button @click="activeSlide = 1"
                        :class="{ 'bg-white': activeSlide === 1, 'bg-gray-400': activeSlide !== 1 }"
                        class="w-3 h-3 rounded-full transition-colors duration-300"></button>
                </div>
            </div>
        </div>
    </section>

    <!-- FAQ Section -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                <div>
                    <img src="{{ url('frontend/public/grepoksu/2021/09/about-2.png')}}" alt="Military Personnel"
                        class="rounded-lg shadow-xl w-full">
                </div>

                <div>
                    <p class="text-peace-green font-medium uppercase mb-2">FREQUENTLY ASKED QUESTIONS</p>
                    <h2 class="text-3xl md:text-4xl font-bold mb-6">Common Questions About UN Peacekeeping Leave</h2>

                    <div x-data="{ selected: 0 }" class="space-y-4">
                        <!-- Question 1 -->
                        <div class="border border-gray-200 rounded-lg overflow-hidden">
                            <button @click="selected !== 0 ? selected = 0 : selected = null"
                                class="flex justify-between items-center w-full px-4 py-3 text-left font-medium"
                                :class="{ 'bg-peace-green/10': selected === 0 }">
                                <span>How much leave time am I entitled to?</span>
                                <svg :class="{ 'rotate-180': selected === 0 }" class="w-5 h-5 transition-transform"
                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M19 9l-7 7-7-7" />
                                </svg>
                            </button>
                            <div x-show="selected === 0" class="px-4 py-3 text-gray-600 bg-gray-50">
                                <p>Active duty peacekeepers typically accrue 2.5 days of leave per month, for a total of 30
                                    days per year. Special leave types may provide additional time for specific
                                    circumstances.</p>
                            </div>
                        </div>

                        <!-- Question 2 -->
                        <div class="border border-gray-200 rounded-lg overflow-hidden">
                            <button @click="selected !== 1 ? selected = 1 : selected = null"
                                class="flex justify-between items-center w-full px-4 py-3 text-left font-medium"
                                :class="{ 'bg-peace-green/10': selected === 1 }">
                                <span>How do I apply for peacekeeping leave?</span>
                                <svg :class="{ 'rotate-180': selected === 1 }" class="w-5 h-5 transition-transform"
                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M19 9l-7 7-7-7" />
                                </svg>
                            </button>
                            <div x-show="selected === 1" class="px-4 py-3 text-gray-600 bg-gray-50">
                                <p>You can apply for peacekeeping leave through our online application system. The process
                                    requires you to submit the type of leave requested, dates, and any supporting
                                    documentation.</p>
                            </div>
                        </div>

                        <!-- Question 3 -->
                        <div class="border border-gray-200 rounded-lg overflow-hidden">
                            <button @click="selected !== 2 ? selected = 2 : selected = null"
                                class="flex justify-between items-center w-full px-4 py-3 text-left font-medium"
                                :class="{ 'bg-peace-green/10': selected === 2 }">
                                <span>Can I carry over unused leave to the next year?</span>
                                <svg :class="{ 'rotate-180': selected === 2 }" class="w-5 h-5 transition-transform"
                                    fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M19 9l-7 7-7-7" />
                                </svg>
                            </button>
                            <div x-show="selected === 2" class="px-4 py-3 text-gray-600 bg-gray-50">
                                <p>Yes, peacekeepers can carry over up to 60 days of leave between fiscal years. However, we
                                    encourage using leave as it accrues rather than accumulating a large balance.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Enhanced Call to Action -->
    <section class="py-20 bg-gradient-peacekeeping text-white relative overflow-hidden shadow-peacekeeping">
        <!-- Background Pattern Overlay -->
        <div class="absolute inset-0 bg-hero-pattern opacity-30"></div>
        <div class="absolute top-0 left-0 w-64 h-64 bg-peace-gold/10 rounded-full -translate-y-32 -translate-x-32"></div>
        <div class="absolute bottom-0 right-0 w-80 h-80 bg-un-blue/10 rounded-full translate-y-40 translate-x-40"></div>

        <div class="container mx-auto px-4 text-center relative z-10">
            <div class="max-w-4xl mx-auto">
                <!-- Header -->
                <div class="flex items-center justify-center mb-8">
                    <div class="w-20 h-px bg-peace-gold"></div>
                    <i class="fas fa-dove text-peace-gold mx-6 text-2xl"></i>
                    <div class="w-20 h-px bg-peace-gold"></div>
                </div>

                <div class="bg-peace-green/30 backdrop-blur-sm px-6 py-3 rounded-full inline-block mb-8">
                    <p class="text-peace-gold font-bold uppercase tracking-wider">Take Action Today</p>
                </div>

                <h2 class="text-4xl md:text-6xl font-bold mb-8 font-peacekeeping leading-tight">
                    READY TO APPLY FOR<br>
                    <span class="text-peace-gold">PEACEKEEPING LEAVE?</span>
                </h2>

                <p class="text-xl mb-12 max-w-3xl mx-auto leading-relaxed text-gray-200">
                    Our expert team of UN peacekeeping leave specialists is standing by to assist you with your application.
                    Don't wait - start accessing the benefits you've earned through your dedicated service to international
                    peace.
                </p>

                <!-- Stats Row -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
                    <div class="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-peace-gold/30">
                        <div class="text-3xl font-bold text-peace-gold mb-2">
                            <i class="fas fa-clock"></i>
                        </div>
                        <div class="text-lg font-bold mb-1">24 Hours</div>
                        <div class="text-sm text-gray-300">Average Processing Time</div>
                    </div>
                    <div class="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-peace-gold/30">
                        <div class="text-3xl font-bold text-peace-gold mb-2">
                            <i class="fas fa-shield-alt"></i>
                        </div>
                        <div class="text-lg font-bold mb-1">100% Secure</div>
                        <div class="text-sm text-gray-300">UN-Grade Security</div>
                    </div>
                    <div class="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-peace-gold/30">
                        <div class="text-3xl font-bold text-peace-gold mb-2">
                            <i class="fas fa-headset"></i>
                        </div>
                        <div class="text-lg font-bold mb-1">Expert Support</div>
                        <div class="text-sm text-gray-300">Dedicated Peacekeeping Specialists</div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="flex flex-col sm:flex-row justify-center space-y-6 sm:space-y-0 sm:space-x-8 mb-12">
                    <a href="{{url('/')}}/page/apply-online"
                        class="btn-un-primary px-12 py-5 rounded-full text-xl font-bold shadow-gold transform hover:scale-105 transition duration-300 inline-flex items-center justify-center">
                        <i class="fas fa-file-signature mr-4 text-2xl"></i>
                        <span>APPLY ONLINE NOW</span>
                    </a>
                    <a href="{{url('/')}}/page/contact"
                        class="border-3 border-peace-gold text-peace-gold px-12 py-5 rounded-full text-xl font-bold hover:bg-peace-gold hover:text-peace-dark transition duration-300 inline-flex items-center justify-center">
                        <i class="fas fa-phone mr-4 text-2xl"></i>
                        <span>SPEAK TO SPECIALIST</span>
                    </a>
                </div>

                <!-- Emergency Contact -->
                <div class="bg-un-blue/90 backdrop-blur-sm rounded-xl p-6 border border-un-blue">
                    <div class="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-6">
                        <div class="flex items-center">
                            <i class="fas fa-exclamation-triangle text-white text-2xl mr-4"></i>
                            <div class="text-left">
                                <div class="text-lg font-bold text-white">Emergency Peacekeeping Leave Required?</div>
                                <div class="text-sm text-white/80">Call our 24/7 emergency hotline immediately</div>
                            </div>
                        </div>
                        <a href="tel:1-800-UNPEACE"
                            class="bg-white text-un-blue px-8 py-3 rounded-full font-bold text-lg hover:bg-gray-100 transition duration-300">
                            <i class="fas fa-phone mr-2"></i>1-800-UNPEACE
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
@stop

@push('scripts')
@endpush
