<!DOCTYPE html>
<html lang="en" data-theme="light">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UNITED NATIONS PEACEKEEPING</title>

    <!-- Tailwind CSS + DaisyUI CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet" type="text/css" />

    <!-- Alpine.js CDN -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

    <!-- Alpine.js Initialization -->
    <script src="{{ url('frontend/public/js/alpine-init.js')}}" defer></script>

    <!-- UN Peacekeeping Color System & Custom Tailwind Configuration -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        // UN Peacekeeping Primary Colors
                        'un-blue': '#009fdb',
                        'un-blue-dark': '#005a8b',
                        'un-blue-light': '#4fc3f7',
                        'peace-blue': '#0066cc',
                        'peacekeeping-navy': '#003d82',

                        // UN Secondary Colors
                        'un-white': '#ffffff',
                        'un-gray': '#f5f5f5',
                        'un-gray-dark': '#666666',
                        'un-silver': '#c0c0c0',

                        // Peace & Humanitarian Colors
                        'peace-green': '#00a651',
                        'hope-green': '#4caf50',
                        'humanitarian-teal': '#00bcd4',
                        'unity-cyan': '#26c6da',
                        'harmony-lime': '#8bc34a',

                        // UN Peacekeeping Color System (backward compatibility aliases)
                        'military-green': '#00a651',
                        'military-dark-green': '#00a651',
                        'military-light': '#4fc3f7',
                        'military-dark': '#003d82',
                        'eagle-gold': '#fdb913',
                        'usa-red': '#00bcd4',

                        // Peacekeeping Color Aliases
                        'peace-gold': '#fdb913',
                        'peace-dark': '#003d82',

                        // Global Support Colors
                        'alert-amber': '#ffc107',
                        'warning-orange': '#ff9800',
                        'urgent-red': '#f44336',
                        'success-emerald': '#4caf50',
                        'info-blue': '#2196f3',

                        // Cultural Diversity Colors
                        'diversity-purple': '#9c27b0',
                        'unity-indigo': '#3f51b5',
                        'cooperation-teal': '#009688',
                        'solidarity-blue': '#2196f3',

                        // Accessibility & Text Colors
                        'text-primary': '#212121',
                        'text-secondary': '#757575',
                        'text-light': '#9e9e9e',
                        'surface-light': '#fafafa',
                        'surface-medium': '#eeeeee',
                    },
                    fontFamily: {
                        'inter': ['Inter', 'sans-serif'],
                        'source-sans': ['Source Sans Pro', 'sans-serif'],
                        'noto': ['Noto Sans', 'sans-serif'],
                        'peacekeeping': ['Open Sans', 'sans-serif'],
                        'military': ['Source Sans Pro', 'sans-serif'],
                    },
                    backgroundImage: {
                        'bg-gradient-military': 'linear-gradient(135deg, #009fdb 0%, #005a8b 100%)',
                        'gradient-un': 'linear-gradient(135deg, #009fdb 0%, #005a8b 100%)',
                        'gradient-peace': 'linear-gradient(135deg, #4fc3f7 0%, #0066cc 100%)',
                        'gradient-peacekeeping': 'linear-gradient(135deg, #003d82 0%, #009fdb 100%)',
                        'gradient-humanitarian': 'linear-gradient(135deg, #00bcd4 0%, #009fdb 100%)',
                        'gradient-unity': 'linear-gradient(135deg, #26c6da 0%,#009fdb 100%)',
                        'gradient-light': 'linear-gradient(135deg, #fafafa 0%, #eeeeee 100%)',
                        'gradient-overlay': 'linear-gradient(rgba(0,159,219,0.9), rgba(0,90,139,0.9))',
                        'hero-pattern': 'linear-gradient(rgba(0,61,130,0.9), rgba(0,159,219,0.9)), 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=\'%23ffffff\' fill-opacity=\'0.05\'%3E%3Cpath d=\'M20 20c0-8.84 7.16-16 16-16v16H20zm16 16c-8.84 0-16-7.16-16-16h16v16z\'/%3E%3C/g%3E%3C/svg%3E")',
                        'peace-pattern': 'linear-gradient(rgba(0,159,219,0.95), rgba(0,102,204,0.95)), 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=\'%23ffffff\' fill-opacity=\'0.05\'%3E%3Cpath d=\'M20 20c0-8.84 7.16-16 16-16v16H20zm16 16c-8.84 0-16-7.16-16-16h16v16z\'/%3E%3C/g%3E%3C/svg%3E")',
                        'dove-pattern': '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.03\'%3E%3Ccircle cx=\'30\' cy=\'30\' r=\'2\'/%3E%3Ccircle cx=\'10\' cy=\'10\' r=\'1\'/%3E%3Ccircle cx=\'50\' cy=\'50\' r=\'1\'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")',
                    },
                    boxShadow: {
                        'un': '0 8px 32px rgba(0,159,219,0.15)',
                        'peace': '0 4px 20px rgba(0,102,204,0.2)',
                        'soft': '0 2px 16px rgba(0,0,0,0.08)',
                        'elevated': '0 12px 40px rgba(0,0,0,0.1)',
                        'military': '0 8px 32px rgba(0,166,81,0.15)',
                        'peacekeeping': '0 8px 32px rgba(0,166,81,0.15)',
                        'gold': '0 8px 25px rgba(253,185,19,0.3)',
                    },
                    animation: {
                        'fade-in': 'fadeIn 0.8s ease-in-out',
                        'slide-up': 'slideUp 0.6s ease-out',
                        'float': 'float 3s ease-in-out infinite',
                        'peace-pulse': 'peacePulse 2s ease-in-out infinite',
                    }
                },
            }
        }
    </script>

    <!-- CSS Custom Properties for UN Color System -->
    <style>
        :root {
            /* UN Primary Colors */
            --un-blue: #009fdb;
            --un-blue-dark: #005a8b;
            --un-blue-light: #4fc3f7;
            --peace-blue: #0066cc;
            --peacekeeping-navy: #003d82;

            /* UN Secondary Colors */
            --un-white: #ffffff;
            --un-gray: #f5f5f5;
            --un-gray-dark: #666666;
            --un-silver: #c0c0c0;

            /* Peace Colors */
            --peace-green: #00a651;
            --hope-green: #4caf50;
            --humanitarian-teal: #00bcd4;
            --unity-cyan: #26c6da;

            /* UN Peacekeeping Color System (backward compatibility) */


            --military-green: #009fdb;
            --military-dark-green: #005a8b;
            --military-light: #4fc3f7;
            --military-dark: #003d82;
            --eagle-gold: #fdb913;
            --usa-red: #00bcd4;

            /* Peacekeeping Color Variables */
            --peace-gold: #fdb913;
            --peace-dark: #003d82;

            /* Status Colors */
            --alert-amber: #ffc107;
            --urgent-red: #f44336;
            --success-emerald: #4caf50;
            --info-blue: #2196f3;
        }

        /* Global base styles with UN theming */
        body {
            color: var(--text-primary);
            background-color: var(--un-gray);
        }
    </style>

    <!-- Modern Fonts for UN Peacekeeping -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Source+Sans+Pro:wght@300;400;600;700&family=Noto+Sans:wght@300;400;500;600;700&family=Open+Sans:wght@300;400;500;600;700&display=swap"
        rel="stylesheet">

    <!-- Modern Icons: Lucide Icons + Heroicons -->
    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

    <!-- UN Peacekeeping Custom Styles -->
    <style>
        /* Alpine.js Cloak */
        [x-cloak] {
            display: none !important;
        }

        /* UN Peacekeeping Animations */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-10px);
            }
        }

        @keyframes peacePulse {

            0%,
            100% {
                box-shadow: 0 0 0 0 rgba(0, 159, 219, 0.7);
            }

            70% {
                box-shadow: 0 0 0 15px rgba(0, 159, 219, 0);
            }
        }

        @keyframes shimmer {
            0% {
                transform: translateX(-100%);
            }

            100% {
                transform: translateX(100%);
            }
        }

        /* UN Navigation Styles */
        .un-nav-link {
            position: relative;
            padding: 8px 16px;
            border-radius: 8px;
            font-weight: 500;
            transition: all 0.3s ease;
            color: var(--un-white);
        }

        .un-nav-link::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--un-blue-light), var(--peace-green));
            transition: all 0.3s ease;
            transform: translateX(-50%);
        }

        .un-nav-link:hover {
            background: rgba(255, 255, 255, 0.1);
            color: var(--un-blue-light);
        }

        .un-nav-link:hover::before {
            width: 80%;
        }

        .un-nav-link.active {
            background: rgba(255, 255, 255, 0.15);
            color: var(--un-blue-light);
        }

        .un-nav-link.active::before {
            width: 80%;
        }

        /* UN Button Styles */
        .btn-un-primary {
            background: linear-gradient(135deg, var(--un-blue) 0%, var(--peace-blue) 100%);
            border: none;
            color: white;
            font-weight: 600;
            padding: 12px 24px;
            border-radius: 8px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .btn-un-primary::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s;
        }

        .btn-un-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 159, 219, 0.3);
        }

        .btn-un-primary:hover::before {
            left: 100%;
        }

        .btn-un-secondary {
            background: transparent;
            border: 2px solid var(--un-blue-light);
            color: var(--un-blue-light);
            font-weight: 600;
            padding: 10px 22px;
            border-radius: 8px;
            transition: all 0.3s ease;
        }

        .btn-un-secondary:hover {
            background: var(--un-blue-light);
            color: white;
            transform: translateY(-2px);
        }

        /* Military Button Styles (for backward compatibility) */
        .btn-military {
            background: linear-gradient(135deg, var(--eagle-gold) 0%, #ffd54f 100%);
            border: none;
            color: var(--military-dark-green);
            font-weight: 700;
            padding: 12px 24px;
            border-radius: 8px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            text-transform: uppercase;
        }

        .btn-military::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left 0.5s;
        }

        .btn-military:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(253, 185, 19, 0.3);
        }

        .btn-military:hover::before {
            left: 100%;
        }

        /* UN Badge Styles */
        .un-badge {
            background: linear-gradient(135deg, var(--peace-green) 0%, var(--hope-green) 100%);
            color: white;
            font-weight: 600;
            font-size: 0.75rem;
            padding: 4px 12px;
            border-radius: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .un-badge-secondary {
            background: linear-gradient(135deg, var(--humanitarian-teal) 0%, var(--unity-cyan) 100%);
            color: white;
        }

        /* UN Header Styles */
        .un-header {
            background: var(--gradient-un);
            position: relative;
            overflow: hidden;
        }

        .un-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--peace-pattern);
            opacity: 0.1;
        }

        /* UN Organization Logo Styles */
        .un-logo-container {
            position: relative;
            background: linear-gradient(135deg, var(--un-white) 0%, var(--un-gray) 100%);
            border-radius: 50%;
            padding: 8px;
            box-shadow: 0 8px 32px rgba(0, 159, 219, 0.2);
        }

        .un-logo-container::after {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(135deg, var(--un-blue), var(--peace-blue));
            border-radius: 50%;
            z-index: -1;
        }

        /* UN Status Indicators */
        .un-status-active {
            display: inline-block;
            width: 8px;
            height: 8px;
            background: var(--success-emerald);
            border-radius: 50%;
            animation: var(--peace-pulse) 2s infinite;
        }

        /* UN Mobile Menu */
        .un-mobile-menu {
            background: linear-gradient(135deg, var(--peacekeeping-navy) 0%, var(--un-blue-dark) 100%);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .un-mobile-menu-item {
            color: var(--un-white);
            padding: 16px 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
            font-weight: 500;
            display: flex;
            align-items: center;
        }

        .un-mobile-menu-item:hover {
            background: rgba(255, 255, 255, 0.1);
            color: var(--un-blue-light);
            padding-left: 28px;
        }

        /* UN Cards */
        .un-card {
            background: var(--un-white);
            border-radius: 12px;
            padding: 24px;
            box-shadow: var(--un);
            transition: all 0.3s ease;
            border: 1px solid rgba(0, 159, 219, 0.1);
        }

        .un-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--elevated);
        }

        /* UN Statistics */
        .un-stat-container {
            background: linear-gradient(135deg, var(--un-white) 0%, var(--surface-light) 100%);
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }

        .un-stat-container:hover {
            border-color: var(--un-blue-light);
            transform: scale(1.05);
        }

        .un-stat-number {
            font-size: 2.5rem;
            font-weight: 800;
            background: linear-gradient(135deg, var(--un-blue) 0%, var(--peace-blue) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Accessibility Improvements */
        .un-focus-visible:focus-visible {
            outline: 2px solid var(--un-blue-light);
            outline-offset: 2px;
        }

        /* Reduced Motion Support */
        @media (prefers-reduced-motion: reduce) {

            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }

        /* High Contrast Mode */
        @media (prefers-contrast: high) {
            .un-header {
                background: var(--peacekeeping-navy);
            }

            .un-nav-link {
                border: 1px solid currentColor;
            }
        }

        /* Dark Mode Support */
        @media (prefers-color-scheme: dark) {
            .un-card {
                background: #1a1a1a;
                color: #ffffff;
                border-color: rgba(255, 255, 255, 0.1);
            }
        }
    </style>
</head>

<body class="font-inter text-text-primary bg-un-gray overflow-x-hidden">
    <!-- UN Peacekeeping Top Status Bar -->
    <div class="navbar bg-gradient-un text-white shadow-soft border-b border-un-blue-light/20">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center w-full py-2">
                <!-- Left Status Info -->
                <div class="flex items-center space-x-6">
                    <div class="flex items-center font-medium">
                        <svg class="w-4 h-4 mr-2 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>
                        <span class="un-badge mr-3">VERIFIED</span>
                        Official UN Peacekeeping Operations Portal
                    </div>
                    <div class="hidden md:flex items-center text-sm">
                        <svg class="w-4 h-4 mr-2 text-humanitarian-teal" 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>
                        24/7 Crisis Response: +1-800-UN-PEACE
                    </div>
                </div>

                <!-- Right Status Indicators -->
                <div class="flex items-center space-x-4">
                    <div class="flex items-center">
                        <div class="un-status-active mr-2"></div>
                        <span class="text-xs font-medium text-peace-green">OPERATIONAL</span>
                    </div>
                    <div class="flex items-center bg-peace-green/20 px-3 py-1 rounded-full">
                        <svg class="w-4 h-4 text-peace-green mr-2" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd"
                                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"
                                clip-rule="evenodd"></path>
                        </svg>
                        <span class="text-xs font-medium text-peace-green">SECURED</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Main UN Peacekeeping Header -->
    <header class="un-header text-white shadow-un relative">
        <!-- Background Image Overlay for Better Contrast -->
        <div class="absolute inset-0 bg-gradient-to-r from-un-blue-dark/95 via-un-blue/90 to-peacekeeping-navy/95">
        </div>
        <div class="absolute inset-0 dove-pattern opacity-10"></div>

        <div class="relative z-10">
            <!-- Main Header Content -->
            <div class="container mx-auto px-4 py-8">
                <div class="flex flex-col lg:flex-row justify-between items-center">
                    <!-- Enhanced UN Logo and Organization Info -->
                    <div class="flex items-center mb-8 lg:mb-0">
                        <div class="un-logo-container mr-6 shadow-xl border-4 border-white/20">
                            <img src="{{ url('frontend/storage/app/public/photos/Ux41r8XfG4Cv436L55af15KnMZKWtNFB8l4udSzy.jpg')}}"
                                alt="United Nations Peacekeeping Logo" class="h-20 w-20 rounded-full object-cover">
                        </div>
                        <div>
                            <h1
                                class="text-3xl lg:text-4xl font-bold tracking-wide font-source-sans mb-2 text-white drop-shadow-lg">
                                UNITED NATIONS PEACEKEEPING
                            </h1>
                            <p class="text-white/90 text-lg font-noto italic mb-3 drop-shadow-md">
                                "Maintaining International Peace and Security"
                            </p>
                            <div class="flex items-center flex-wrap gap-3">
                                <span class="un-badge shadow-lg">ESTABLISHED 1945</span>
                                <div class="flex items-center bg-white/10 backdrop-blur-sm px-3 py-2 rounded-full">
                                    <div class="flex space-x-1 mr-2">
                                        <div class="w-2 h-2 bg-peace-green rounded-full animate-peace-pulse shadow-sm">
                                        </div>
                                        <div class="w-2 h-2 bg-humanitarian-teal rounded-full animate-peace-pulse shadow-sm"
                                            style="animation-delay: 0.2s"></div>
                                        <div class="w-2 h-2 bg-white rounded-full animate-peace-pulse shadow-sm"
                                            style="animation-delay: 0.4s"></div>
                                        <div class="w-2 h-2 bg-unity-cyan rounded-full animate-peace-pulse shadow-sm"
                                            style="animation-delay: 0.6s"></div>
                                        <div class="w-2 h-2 bg-hope-green rounded-full animate-peace-pulse shadow-sm"
                                            style="animation-delay: 0.8s"></div>
                                    </div>
                                    <span class="text-xs text-white font-semibold">GLOBAL PRESENCE</span>
                                </div>
                                <span class="un-badge-secondary shadow-lg">193 MEMBER STATES</span>
                            </div>
                        </div>
                    </div>

                    <!-- Mission Statistics & Quick Access -->
                    <div class="text-center lg:text-right text-white">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <!-- Active Missions -->
                            <div
                                class="bg-white/95 backdrop-blur-sm rounded-xl p-6 shadow-xl border border-white/20 hover:scale-105 transition-all duration-300">
                                <svg class="w-8 h-8 text-peace-green mx-auto mb-2" 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>
                                <div class="text-3xl font-bold text-un-blue mb-1">12</div>
                                <div class="text-sm text-un-blue-dark font-medium">Active Missions</div>
                            </div>

                            <!-- Peacekeepers Deployed -->
                            <div
                                class="bg-white/95 backdrop-blur-sm rounded-xl p-6 shadow-xl border border-white/20 hover:scale-105 transition-all duration-300">
                                <svg class="w-8 h-8 text-humanitarian-teal mx-auto mb-2" 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="text-3xl font-bold text-humanitarian-teal mb-1">87K+</div>
                                <div class="text-sm text-un-blue-dark font-medium">Peacekeepers</div>
                            </div>

                            <!-- Countries Served -->
                            <div
                                class="bg-white/95 backdrop-blur-sm rounded-xl p-6 shadow-xl border border-white/20 hover:scale-105 transition-all duration-300 md:col-span-2">
                                <svg class="w-8 h-8 text-unity-cyan mx-auto mb-2" 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="flex items-center justify-center">
                                    <div class="text-3xl font-bold text-unity-cyan mr-2">70+</div>
                                    <div class="text-sm text-un-blue-dark font-medium">Countries<br>Protected</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- UN Peacekeeping Navigation -->
                <nav class="mt-8 border-t border-white/30 pt-6 bg-white/5 backdrop-blur-sm rounded-t-xl"
                    x-data="{ mobileMenuOpen: false }">
                    <div class="flex flex-col lg:flex-row justify-between items-center px-6 py-4">
                        <!-- Main Navigation -->
                        <div class="hidden lg:flex items-center space-x-2 mb-4 lg:mb-0">
                            <a href="{{url('/')}}" class="un-nav-link active">
                                <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                    <path
                                        d="M10.707 2.293a1 1 0 00-1.414 0l-9 9a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l2.293 2.293a1 1 0 001.414-1.414l-9-9z">
                                    </path>
                                </svg>
                                HOME
                            </a>
                            <a href="{{url('/')}}/page/about" class="un-nav-link">
                                <svg class="w-4 h-4 mr-2" 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>
                                ABOUT MISSIONS
                            </a>
                            <a href="{{url('/')}}/page/apply-online" class="un-nav-link">
                                <svg class="w-4 h-4 mr-2" 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>
                                APPLY FOR SERVICE
                            </a>
                            <a href="{{url('/')}}/page/career-opportunities" class="un-nav-link">
                                <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd"
                                        d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.57A22.952 22.952 0 0110 13a22.95 22.95 0 01-8-1.43V8a2 2 0 012-2h2zm2-1a1 1 0 011-1h2a1 1 0 011 1v1H8V5zm1 5a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1z"
                                        clip-rule="evenodd"></path>
                                </svg>
                                CAREERS
                            </a>
                            <a href="{{url('/')}}/page/contact" class="un-nav-link">
                                <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z">
                                    </path>
                                    <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
                                </svg>
                                CONTACT
                            </a>
                            <a href="{{url('/')}}#resources" class="un-nav-link">
                                <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                    <path
                                        d="M9 4.804A7.968 7.968 0 005.5 4c-1.255 0-2.443.29-3.5.804v10A7.969 7.969 0 015.5 14c1.669 0 3.218.51 4.5 1.385A7.962 7.962 0 0114.5 14c1.255 0 2.443.29 3.5.804v-10A7.968 7.968 0 0014.5 4c-1.255 0-2.443.29-3.5.804V4.804z">
                                    </path>
                                </svg>
                                RESOURCES
                            </a>
                            <a href="{{url('/')}}/page/track-personnel" class="un-nav-link">
                                <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                    <path
                                        d="M9 4.804A7.968 7.968 0 005.5 4c-1.255 0-2.443.29-3.5.804v10A7.969 7.969 0 015.5 14c1.669 0 3.218.51 4.5 1.385A7.962 7.962 0 0114.5 14c1.255 0 2.443.29 3.5.804v-10A7.968 7.968 0 0014.5 4c-1.255 0-2.443.29-3.5.804V4.804z">
                                    </path>
                                </svg>
                                TRACK PERSONNEL
                            </a>
                        </div>

                        <!-- Call-to-Action Buttons -->
                        <div class="flex items-center space-x-4 mb-4 lg:mb-0">
                            <a href="{{url('/')}}/page/portal" class="btn-un-primary shadow-lg hover:shadow-xl">
                                <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd"
                                        d="M3 3a1 1 0 011 1v12a1 1 0 11-2 0V4a1 1 0 011-1zm7.707 3.293a1 1 0 010 1.414L9.414 9H17a1 1 0 110 2H9.414l1.293 1.293a1 1 0 01-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0z"
                                        clip-rule="evenodd"></path>
                                </svg>
                                PEACEKEEPER PORTAL
                            </a>
                            <a href="{{url('/')}}/page/book-flight" class="btn-un-primary shadow-lg hover:shadow-xl">
                                <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                    <path
                                        d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z">
                                    </path>
                                </svg>
                                BOOK DEPLOYMENT
                            </a>
                        </div>

                        <!-- Mobile Menu Button -->
                        <button @click="mobileMenuOpen = !mobileMenuOpen"
                            class="lg:hidden fixed top-4 right-4 z-50 btn-un-primary p-3 rounded-full shadow-un"
                            :class="{ 'bg-urgent-red': mobileMenuOpen }">
                            <svg x-show="!mobileMenuOpen" class="w-6 h-6" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M4 6h16M4 12h16M4 18h16"></path>
                            </svg>
                            <svg x-show="mobileMenuOpen" class="w-6 h-6" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M6 18L18 6M6 6l12 12"></path>
                            </svg>
                        </button>
                    </div>

                    <!-- Enhanced Mobile Menu -->
                    <div x-cloak x-show="mobileMenuOpen" x-transition:enter="transition ease-out duration-300"
                        x-transition:enter-start="opacity-0 transform scale-90"
                        x-transition:enter-end="opacity-100 transform scale-100"
                        x-transition:leave="transition ease-in duration-200"
                        x-transition:leave-start="opacity-100 transform scale-100"
                        x-transition:leave-end="opacity-0 transform scale-90" @click.away="mobileMenuOpen = false"
                        class="fixed top-20 right-4 un-mobile-menu min-w-80 py-6 px-2 shadow-elevated rounded-lg z-40">
                        <div class="text-center mb-6 pb-4 border-b border-white/20">
                            <div class="text-un-blue-light font-bold text-sm">UN PEACEKEEPING PORTAL</div>
                            <div class="text-xs text-white/70">Maintaining Peace Worldwide</div>
                        </div>

                        <div class="space-y-2">
                            <a href="{{url('/')}}" class="un-mobile-menu-item" @click="mobileMenuOpen = false">
                                <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
                                    <path
                                        d="M10.707 2.293a1 1 0 00-1.414 0l-9 9a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l2.293 2.293a1 1 0 001.414-1.414l-9-9z">
                                    </path>
                                </svg>
                                HOME
                            </a>
                            <a href="{{url('/')}}/page/about" class="un-mobile-menu-item" @click="mobileMenuOpen = false">
                                <svg class="w-5 h-5 mr-3" 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>
                                ABOUT MISSIONS
                            </a>
                            <a href="{{url('/')}}/page/apply-online" class="un-mobile-menu-item" @click="mobileMenuOpen = false">
                                <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>
                                APPLY FOR SERVICE
                            </a>
                            <a href="{{url('/')}}/page/career-opportunities" class="un-mobile-menu-item"
                                @click="mobileMenuOpen = false">
                                <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd"
                                        d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.57A22.952 22.952 0 0110 13a22.95 22.95 0 01-8-1.43V8a2 2 0 012-2h2zm2-1a1 1 0 011-1h2a1 1 0 011 1v1H8V5zm1 5a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1z"
                                        clip-rule="evenodd"></path>
                                </svg>
                                CAREERS
                            </a>
                            <a href="{{url('/')}}/page/contact" class="un-mobile-menu-item" @click="mobileMenuOpen = false">
                                <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z">
                                    </path>
                                    <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
                                </svg>
                                CONTACT
                            </a>
                            <a href="{{url('/')}}#resources" class="un-mobile-menu-item"
                                @click="mobileMenuOpen = false">
                                <svg class="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
                                    <path
                                        d="M9 4.804A7.968 7.968 0 005.5 4c-1.255 0-2.443.29-3.5.804v10A7.969 7.969 0 015.5 14c1.669 0 3.218.51 4.5 1.385A7.962 7.962 0 0114.5 14c1.255 0 2.443.29 3.5.804v-10A7.968 7.968 0 0014.5 4c-1.255 0-2.443.29-3.5.804V4.804z">
                                    </path>
                                </svg>
                                RESOURCES
                            </a>
                        </div>

                        <div class="mt-6 pt-4 border-t border-white/20 space-y-3">
                            <a href="{{url('/')}}/page/contact" class="btn-un-primary w-full text-center block"
                                @click="mobileMenuOpen = false">
                                <svg class="w-4 h-4 mr-2 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 ASSISTANCE
                            </a>
                        </div>
                    </div>
                </nav>
            </div>
        </div>
    </header>


    <div class="overflow-x-hidden w-full">

        @yield('content')

        <!-- Enhanced JavaScript for Animations and Interactions -->
        <script>
            // Counter Animation
            document.addEventListener('alpine:init', () => {
                Alpine.data('counter', (element) => ({
                    current: 0,
                    target: parseInt(element.$el.dataset.target),

                    init() {
                        const observer = new IntersectionObserver((entries) => {
                            entries.forEach(entry => {
                                if (entry.isIntersecting) {
                                    this.animateCounter();
                                    observer.unobserve(entry.target);
                                }
                            });
                        });

                        observer.observe(this.$el);
                    },

                    animateCounter() {
                        const increment = this.target / 100;
                        const timer = setInterval(() => {
                            this.current += increment;
                            if (this.current >= this.target) {
                                this.current = this.target;
                                clearInterval(timer);
                            }
                        }, 30);
                    }
                }));

                // Leave Types Carousel
                Alpine.data('leaveTypesCarousel', () => ({
                    activeSlide: 0,
                    totalSlides: 2,

                    init() {
                        // Auto-play carousel
                        setInterval(() => {
                            this.next();
                        }, 8000);
                    },

                    next() {
                        this.activeSlide = this.activeSlide === this.totalSlides ? 0 : this.activeSlide + 1;
                    },

                    prev() {
                        this.activeSlide = this.activeSlide === 0 ? this.totalSlides : this.activeSlide - 1;
                    }
                }));
            });

            // Enhanced scroll animations
            document.addEventListener('DOMContentLoaded', function() {
                // Add smooth scrolling for anchor links
                document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                    anchor.addEventListener('click', function(e) {
                        e.preventDefault();
                        const target = document.querySelector(this.getAttribute('href'));
                        if (target) {
                            target.scrollIntoView({
                                behavior: 'smooth',
                                block: 'start'
                            });
                        }
                    });
                });

                // Parallax effect for hero section
                window.addEventListener('scroll', () => {
                    const scrolled = window.pageYOffset;
                    const rate = scrolled * -0.5;
                    const heroImages = document.querySelectorAll('.hero-slide img');
                    heroImages.forEach(img => {
                        img.style.transform = `translateY(${rate}px)`;
                    });
                });

                // Add loading animation
                window.addEventListener('load', () => {
                    document.body.classList.add('loaded');
                });
            });

            // Professional form validation for military applications
            function validateMilitaryForm(form) {
                const requiredFields = form.querySelectorAll('[required]');
                let isValid = true;

                requiredFields.forEach(field => {
                    if (!field.value.trim()) {
                        field.classList.add('border-red-500');
                        isValid = false;
                    } else {
                        field.classList.remove('border-red-500');
                    }
                });

                return isValid;
            }

            // Security notification for sensitive data
            function showSecurityNotice() {
                if (!localStorage.getItem('securityNoticeShown')) {
                    setTimeout(() => {
                        alert(
                            'SECURITY NOTICE: This is an official United Nation system. All activities are monitored and recorded for security purposes.');
                        localStorage.setItem('securityNoticeShown', 'true');
                    }, 3000);
                }
            }

            showSecurityNotice();
        </script>

        <!-- Additional CSS for enhanced animations -->

    </div> <!-- End overflow-x-hidden wrapper -->

    <!-- Enhanced UN Peacekeeping Footer -->
    <footer class="relative bg-gradient-un text-white overflow-hidden shadow-elevated">
        <!-- Background Pattern Overlay -->
        <div class="absolute inset-0 dove-pattern opacity-20"></div>

        <!-- Top CTA Section -->
        <div class="relative z-10 bg-gradient-peace/95 py-16">
            <!-- CTA Background Pattern Overlay -->
            <div class="absolute inset-0 peace-pattern opacity-30"></div>
            <div class="container mx-auto px-4 text-center relative z-10">
                <div class="max-w-4xl mx-auto">
                    <h2 class="text-4xl font-bold mb-6 font-source-sans">
                        <span class="block text-un-blue-light">Building Peace</span>
                        <span class="block">Together for a Better World</span>
                    </h2>
                    <p class="text-xl opacity-90 mb-8 font-noto leading-relaxed">
                        Join our global mission to maintain international peace and security.
                        Your service makes a difference in protecting vulnerable communities worldwide.
                    </p>
                    <div class="flex flex-wrap justify-center gap-4">
                        <a href="{{url('/')}}/page/apply-online" class="btn-un-primary px-8 py-4 text-lg">
                            <svg class="w-5 h-5 mr-2 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>
                            Apply for Service
                        </a>
                        <a href="{{url('/')}}/page/contact" class="btn-un-secondary px-8 py-4 text-lg">
                            <svg class="w-5 h-5 mr-2 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>
            </div>
        </div>

        <!-- Main Footer Content -->
        <div class="relative z-10 pt-16 pb-8">
            <div class="container mx-auto px-4">
                <!-- UN Logo and Mission Section -->
                <div class="mb-12 text-center">
                    <div class="flex items-center justify-center mb-6">
                        <div class="un-logo-container mr-4">
                            <img src="{{ url('frontend/storage/app/public/photos/Ux41r8XfG4Cv436L55af15KnMZKWtNFB8l4udSzy.jpg')}}"
                                alt="United Nations Peacekeeping" class="w-16 h-16 object-cover rounded-full">
                        </div>
                        <div class="text-left">
                            <h3 class="text-2xl font-bold font-source-sans">UNITED NATIONS PEACEKEEPING</h3>
                            <p class="text-un-blue-light opacity-90 font-noto">Maintaining International Peace and
                                Security</p>
                        </div>
                    </div>
                    <div class="w-32 h-1 bg-gradient-to-r from-transparent via-peace-green to-transparent mx-auto">
                    </div>
                </div>

                <!-- Enhanced Grid Layout -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">

                    <!-- Mission Section -->
                    <div class="lg:col-span-1">
                        <h3 class="text-xl font-bold mb-6 flex items-center font-source-sans">
                            <svg class="w-5 h-5 mr-3 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>
                            Our Peacekeeping Mission
                        </h3>
                        <p class="mb-4 text-white/80 leading-relaxed font-noto">
                            The United Nations Peacekeeping Operations are deployed to help countries torn by conflict
                            create conditions for lasting peace. We protect civilians and support the transition to
                            stable governance.
                        </p>
                        <p class="mb-6 text-white/80 leading-relaxed font-noto">
                            Our blue helmets serve with courage and dedication, bringing hope to millions in some of the
                            world's most challenging environments.
                        </p>

                        <!-- UN Peacekeeping Stats -->
                        <div class="grid grid-cols-2 gap-4 mb-6">
                            <div class="text-center p-3 bg-white/10 rounded-lg backdrop-blur-sm">
                                <div class="text-2xl font-bold text-peace-green">75+</div>
                                <div class="text-xs text-white/70">Years of Service</div>
                            </div>
                            <div class="text-center p-3 bg-white/10 rounded-lg backdrop-blur-sm">
                                <div class="text-2xl font-bold text-humanitarian-teal">24/7</div>
                                <div class="text-xs text-white/70">Crisis Response</div>
                            </div>
                        </div>

                        <!-- Enhanced Social Media -->
                        <div class="flex space-x-3">
                            <a href="#"
                                class="w-10 h-10 bg-white/10 backdrop-blur-sm rounded-full flex items-center justify-center text-white hover:bg-blue-600 transition-all duration-300 hover:scale-110"
                                aria-label="Facebook">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                                    <path
                                        d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
                                </svg>
                            </a>
                            <a href="#"
                                class="w-10 h-10 bg-white/10 backdrop-blur-sm rounded-full flex items-center justify-center text-white hover:bg-blue-400 transition-all duration-300 hover:scale-110"
                                aria-label="Twitter">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                                    <path
                                        d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />
                                </svg>
                            </a>
                            <a href="#"
                                class="w-10 h-10 bg-white/10 backdrop-blur-sm rounded-full flex items-center justify-center text-white hover:bg-pink-600 transition-all duration-300 hover:scale-110"
                                aria-label="Instagram">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                                    <path
                                        d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 6.62 5.367 11.987 11.988 11.987 6.62 0 11.987-5.367 11.987-11.987C24.014 5.367 18.637.001 12.017.001zM8.449 16.988c-1.297 0-2.448-.49-3.323-1.297C4.198 14.864 3.708 13.713 3.708 12.416s.49-2.448 1.297-3.323C5.832 8.198 6.983 7.708 8.28 7.708s2.448.49 3.323 1.297c.827.827 1.317 1.978 1.317 3.275s-.49 2.448-1.297 3.323c-.875.827-2.026 1.317-3.323 1.317zm7.718 0c-1.297 0-2.448-.49-3.323-1.297-.827-.827-1.317-1.978-1.317-3.275s.49-2.448 1.297-3.323c.875-.827 2.026-1.317 3.323-1.317s2.448.49 3.323 1.297c.827.827 1.317 1.978 1.317 3.275s-.49 2.448-1.297 3.323c-.875.827-2.026 1.317-3.323 1.317z" />
                                </svg>
                            </a>
                            <a href="#"
                                class="w-10 h-10 bg-white/10 backdrop-blur-sm rounded-full flex items-center justify-center text-white hover:bg-blue-700 transition-all duration-300 hover:scale-110"
                                aria-label="LinkedIn">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                                    <path
                                        d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
                                </svg>
                            </a>
                        </div>
                    </div>

                    <!-- Operations Section -->
                    <div>
                        <h3 class="text-xl font-bold mb-6 flex items-center font-source-sans">
                            <svg class="w-5 h-5 mr-3 text-humanitarian-teal" 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>
                            Current Operations
                        </h3>
                        <ul class="space-y-3">
                            <li><a href="{{url('/')}}/page/adoption-block-leave"
                                    class="flex items-center text-white/80 hover:text-white hover:translate-x-2 transition-all duration-300">
                                    <svg class="w-3 h-3 mr-3 text-peace-green" 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>
                                    Civilian Protection Missions
                                </a></li>
                            <li><a href="{{url('/')}}/page/pregnancy-home-leave"
                                    class="flex items-center text-white/80 hover:text-white hover:translate-x-2 transition-all duration-300">
                                    <svg class="w-3 h-3 mr-3 text-peace-green" 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>
                                    Humanitarian Assistance
                                </a></li>
                            <li><a href="{{url('/')}}/page/special-terminal-leave"
                                    class="flex items-center text-white/80 hover:text-white hover:translate-x-2 transition-all duration-300">
                                    <svg class="w-3 h-3 mr-3 text-peace-green" 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>
                                    Peace Building Programs
                                </a></li>
                            <li><a href="{{url('/')}}/page/military-package"
                                    class="flex items-center text-white/80 hover:text-white hover:translate-x-2 transition-all duration-300">
                                    <svg class="w-3 h-3 mr-3 text-peace-green" 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>
                                    Security Sector Reform
                                </a></li>
                            <li><a href="{{url('/')}}/page/career-opportunities"
                                    class="flex items-center text-white/80 hover:text-white hover:translate-x-2 transition-all duration-300">
                                    <svg class="w-3 h-3 mr-3 text-peace-green" 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>
                                    Election Monitoring
                                </a></li>
                            <li><a href="{{url('/')}}/page/apply-online"
                                    class="flex items-center text-white/80 hover:text-white hover:translate-x-2 transition-all duration-300">
                                    <svg class="w-3 h-3 mr-3 text-peace-green" 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>
                                    Service Application
                                </a></li>
                        </ul>
                    </div>

                    <!-- Quick Links Section -->
                    <div>
                        <h3 class="text-xl font-bold mb-6 flex items-center font-source-sans">
                            <svg class="w-5 h-5 mr-3 text-unity-cyan" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd"
                                    d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            Quick Access
                        </h3>
                        <ul class="space-y-3">
                            <li><a href="{{url('/')}}"
                                    class="flex items-center text-white/80 hover:text-white hover:translate-x-2 transition-all duration-300">
                                    <svg class="w-3 h-3 mr-3 text-unity-cyan" fill="currentColor"
                                        viewBox="0 0 20 20">
                                        <path
                                            d="M10.707 2.293a1 1 0 00-1.414 0l-9 9a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l2.293 2.293a1 1 0 001.414-1.414l-9-9z">
                                        </path>
                                    </svg>
                                    Home
                                </a></li>
                            <li><a href="{{url('/')}}/page/about"
                                    class="flex items-center text-white/80 hover:text-white hover:translate-x-2 transition-all duration-300">
                                    <svg class="w-3 h-3 mr-3 text-unity-cyan" 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>
                                    About Our Mission
                                </a></li>
                            <li><a href="{{url('/')}}/page/contact"
                                    class="flex items-center text-white/80 hover:text-white hover:translate-x-2 transition-all duration-300">
                                    <svg class="w-3 h-3 mr-3 text-unity-cyan" fill="currentColor"
                                        viewBox="0 0 20 20">
                                        <path
                                            d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z">
                                        </path>
                                        <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
                                    </svg>
                                    Contact Operations
                                </a></li>
                            <li><a href="{{url('/')}}#news"
                                    class="flex items-center text-white/80 hover:text-white hover:translate-x-2 transition-all duration-300">
                                    <svg class="w-3 h-3 mr-3 text-unity-cyan" 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>
                                    News & Updates
                                </a></li>
                            <li><a href="{{url('/')}}#reports"
                                    class="flex items-center text-white/80 hover:text-white hover:translate-x-2 transition-all duration-300">
                                    <svg class="w-3 h-3 mr-3 text-unity-cyan" fill="currentColor"
                                        viewBox="0 0 20 20">
                                        <path fill-rule="evenodd"
                                            d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z"
                                            clip-rule="evenodd"></path>
                                    </svg>
                                    Annual Reports
                                </a></li>
                            <li><a href="{{url('/')}}#transparency"
                                    class="flex items-center text-white/80 hover:text-white hover:translate-x-2 transition-all duration-300">
                                    <svg class="w-3 h-3 mr-3 text-unity-cyan" fill="currentColor"
                                        viewBox="0 0 20 20">
                                        <path fill-rule="evenodd"
                                            d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
                                            clip-rule="evenodd"></path>
                                    </svg>
                                    Transparency Portal
                                </a></li>
                        </ul>
                    </div>

                    <!-- Enhanced Contact Section -->
                    <div>
                        <h3 class="text-xl font-bold mb-6 flex items-center font-source-sans">
                            <svg class="w-5 h-5 mr-3 text-hope-green" 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>
                            24/7 Command Center
                        </h3>

                        <!-- Contact Cards -->
                        <div class="space-y-4 mb-6">
                            <div
                                class="p-4 bg-white/10 backdrop-blur-sm rounded-lg hover:bg-white/20 transition-colors duration-300">
                                <div class="flex items-start">
                                    <svg class="w-4 h-4 mt-1 mr-3 text-hope-green" fill="currentColor"
                                        viewBox="0 0 20 20">
                                        <path fill-rule="evenodd"
                                            d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
                                            clip-rule="evenodd"></path>
                                    </svg>
                                    <div>
                                        <h4 class="font-semibold text-sm">UN Headquarters</h4>
                                        <p class="text-xs text-white/70">11075 Santa Monica Blvd,Suite 250 Los Angeles
                                            CA 90025</p>
                                    </div>
                                </div>
                            </div>

                            <div
                                class="p-4 bg-white/10 backdrop-blur-sm rounded-lg hover:bg-white/20 transition-colors duration-300">
                                <div class="flex items-start">
                                    <svg class="w-4 h-4 mt-1 mr-3 text-hope-green" fill="currentColor"
                                        viewBox="0 0 20 20">
                                        <path
                                            d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z">
                                        </path>
                                        <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
                                    </svg>
                                    <div>
                                        <h4 class="font-semibold text-sm">Operations Center</h4>
                                        <a href="mailto:support@miliatry.com"
                                            class="text-xs text-white/70 hover:text-white">support@miliatry.com</a>
                                    </div>
                                </div>
                            </div>

                            <div
                                class="p-4 bg-white/10 backdrop-blur-sm rounded-lg hover:bg-white/20 transition-colors duration-300">
                                <div class="flex items-start">
                                    <svg class="w-4 h-4 mt-1 mr-3 text-hope-green" 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>
                                    <div>
                                        <h4 class="font-semibold text-sm">Crisis Hotline</h4>
                                        <a href="tel:+13105079391"
                                            class="text-xs text-white/70 hover:text-white">+13105079391</a>
                                    </div>
                                </div>
                            </div>

                            <div
                                class="p-4 bg-white/10 backdrop-blur-sm rounded-lg hover:bg-white/20 transition-colors duration-300">
                                <div class="flex items-start">
                                    <svg class="w-4 h-4 mt-1 mr-3 text-hope-green" fill="currentColor"
                                        viewBox="0 0 20 20">
                                        <path fill-rule="evenodd"
                                            d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z"
                                            clip-rule="evenodd"></path>
                                    </svg>
                                    <div>
                                        <h4 class="font-semibold text-sm">Response Time</h4>
                                        <p class="text-xs text-white/70">24/7 Global Operations<br>Emergency: &lt; 1
                                            Hour</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Emergency Notice -->
                        <div class="p-3 bg-urgent-red/20 border border-urgent-red/30 rounded-lg">
                            <p class="text-xs text-red-200">
                                <svg class="w-4 h-4 mr-2 inline" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd"
                                        d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
                                        clip-rule="evenodd"></path>
                                </svg>
                                <strong>Emergency:</strong> For life-threatening situations, contact local authorities
                                immediately
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Trust Badges Section -->
                <div class="border-t border-white/20 pt-8 mb-8">
                    <div class="text-center mb-6">
                        <h4 class="text-lg font-semibold mb-4 font-source-sans">Trusted by the International Community
                        </h4>
                        <div class="flex flex-wrap justify-center items-center gap-8 opacity-70">
                            <div class="flex items-center">
                                <svg class="w-6 h-6 text-peace-green mr-2" 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>
                                <span class="text-sm font-noto">UN Certified</span>
                            </div>
                            <div class="flex items-center">
                                <svg class="w-6 h-6 text-humanitarian-teal mr-2" fill="currentColor"
                                    viewBox="0 0 20 20">
                                    <path fill-rule="evenodd"
                                        d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
                                        clip-rule="evenodd"></path>
                                </svg>
                                <span class="text-sm font-noto">Secure & Confidential</span>
                            </div>
                            <div class="flex items-center">
                                <svg class="w-6 h-6 text-unity-cyan mr-2" fill="currentColor" viewBox="0 0 20 20">
                                    <path
                                        d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
                                    </path>
                                </svg>
                                <span class="text-sm font-noto">Excellence in Service</span>
                            </div>
                            <div class="flex items-center">
                                <svg class="w-6 h-6 text-hope-green mr-2" 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>
                                <span class="text-sm font-noto">193 Member States</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Enhanced Copyright Section -->
                <div class="border-t border-white/20 pt-6">
                    <div class="flex flex-col md:flex-row justify-between items-center">
                        <div class="text-center md:text-left mb-4 md:mb-0">
                            <p class="text-sm text-white/80 font-noto">
                                &copy; 2026 United Nations Peacekeeping Operations. All Rights Reserved.
                            </p>
                            <p class="text-xs text-white/60 mt-1 font-noto">
                                Maintaining International Peace and Security Since 1945 | Charter-based Authority
                            </p>
                        </div>
                        <div class="flex items-center space-x-4 text-xs">
                            <div class="flex items-center">
                                <svg class="w-3 h-3 mr-1 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>
                                <span class="text-white/60">193 Nations United</span>
                            </div>
                            <div class="flex items-center">
                                <div class="un-status-active mr-1" style="width: 6px; height: 6px;"></div>
                                <span class="text-white/60">Live Status</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    @stack('scripts')
</body>

</html>
