<!DOCTYPE html>
<html lang="<?php echo e(session('locale', 'en')); ?>" dir="<?php echo e(in_array(session('locale', 'en'), ['ar']) ? 'rtl' : 'ltr'); ?>"
    class="scroll-smooth">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $__env->yieldContent('title', t('nav_home') . ' - Inve Security'); ?></title>
    <meta name="description" content="<?php echo $__env->yieldContent('description', 'Premium security solutions and digital protection services with golden standard excellence.'); ?>">

    <!-- Favicon -->
    <link rel="icon" href="https://cdn-icons-png.flaticon.com/512/9413/9413653.png" type="image/x-icon">

    <!-- Tailwind CSS v3.4+ via CDN -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Modern Font -->
    <link href="https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700,900&display=swap" rel="stylesheet">

    <!-- Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">

    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Satoshi', 'system-ui', 'sans-serif'],
                    },
                    colors: {
                        gold: {
                            50: '#fefce8',
                            100: '#fef9c3',
                            200: '#fef08a',
                            300: '#fde047',
                            400: '#facc15',
                            500: '#eab308',
                            600: '#ca8a04',
                            700: '#a16207',
                            800: '#854d0e',
                            900: '#713f12',
                        },
                        gray: {
                            50: '#f9fafb',
                            100: '#f3f4f6',
                            800: '#1f2937',
                            900: '#111827',
                        }
                    },
                    animation: {
                        'fade-in': 'fadeIn 0.5s ease-out',
                        'slide-up': 'slideUp 0.6s ease-out',
                        'shimmer': 'shimmer 2s infinite linear',
                        'float': 'float 6s ease-in-out infinite',
                    },
                    keyframes: {
                        fadeIn: {
                            '0%': { opacity: '0' },
                            '100%': { opacity: '1' },
                        },
                        slideUp: {
                            '0%': {
                                opacity: '0',
                                transform: 'translateY(20px)'
                            },
                            '100%': {
                                opacity: '1',
                                transform: 'translateY(0)'
                            },
                        },
                        shimmer: {
                            '0%': { transform: 'translateX(-100%)' },
                            '100%': { transform: 'translateX(100%)' },
                        },
                        float: {
                            '0%': { transform: 'translateY(0px)' },
                            '50%': { transform: 'translateY(-10px)' },
                            '100%': { transform: 'translateY(0px)' },
                        }
                    }
                }
            }
        }
    </script>

    <style>
        /* Custom styles */
        .nav-link {
            position: relative;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -4px;
            left: 50%;
            background: #facc15;
            transition: all 0.3s ease;
            transform: translateX(-50%);
        }

        .nav-link:hover::after {
            width: 100%;
        }

        .glass {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .glass-dark {
            background: rgba(15, 23, 42, 0.8);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        #mobile-menu {
            transform: translateX(100%);
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            opacity: 0;
            visibility: hidden;
        }

        #mobile-menu.open {
            transform: translateX(0);
            opacity: 1;
            visibility: visible;
        }

        /* Gold Text Effect */
        .gold-text {
            background: linear-gradient(135deg, #facc15 0%, #eab308 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Gold Button Styles */
        .btn-gold {
            background: linear-gradient(135deg, #facc15 0%, #eab308 100%);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(250, 204, 21, 0.3);
        }

        .btn-gold:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(250, 204, 21, 0.4);
        }

        .btn-gold::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transform: translateX(-100%);
        }

        .btn-gold:hover::after {
            animation: shimmer 1.5s infinite;
        }

        /* Gold Border */
        .gold-border {
            border-color: #facc15;
        }

        /* Gold Icon */
        .gold-icon {
            color: #facc15;
        }

        /* Gold Header */
        .header-gold {
            background: linear-gradient(135deg, rgba(250, 204, 21, 0.1) 0%, rgba(234, 179, 8, 0.05) 100%);
            border: 1px solid rgba(250, 204, 21, 0.2);
        }

        .dark .header-gold {
            background: linear-gradient(135deg, rgba(250, 204, 21, 0.15) 0%, rgba(234, 179, 8, 0.1) 100%);
            border: 1px solid rgba(250, 204, 21, 0.3);
        }

        /* RTL Support */
        .rtl .text-left {
            text-align: right;
        }

        .rtl .text-right {
            text-align: left;
        }

        .rtl .ml-3 {
            margin-left: 0;
            margin-right: 0.75rem;
        }

        .rtl .mr-3 {
            margin-right: 0;
            margin-left: 0.75rem;
        }

        .rtl .space-x-3>*+* {
            margin-left: 0;
            margin-right: 0.75rem;
        }

        .rtl .space-x-4>*+* {
            margin-left: 0;
            margin-right: 1rem;
        }

        .rtl .space-x-6>*+* {
            margin-left: 0;
            margin-right: 1.5rem;
        }

        .rtl .space-x-8>*+* {
            margin-left: 0;
            margin-right: 2rem;
        }

        .rtl #mobile-menu {
            transform: translateX(-100%);
        }

        .rtl #mobile-menu.open {
            transform: translateX(0);
        }

        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f5f9;
        }

        ::-webkit-scrollbar-thumb {
            background: #facc15;
            border-radius: 3px;
        }

        .dark ::-webkit-scrollbar-track {
            background: #1e293b;
        }

        /* Top bar responsive */
        @media (max-width: 768px) {
            .topbar-contact {
                flex-wrap: wrap;
                justify-content: center;
                gap: 0.75rem;
            }

            .topbar-contact>div {
                font-size: 0.75rem;
                padding: 0 0.5rem;
            }

            .mobile-dashboard-btn {
                display: flex !important;
                align-items: center;
                gap: 0.5rem;
                padding: 0.25rem 0.75rem;
                font-size: 0.875rem;
            }
        }

        /* Language switcher styles */
        .language-switcher {
            position: relative;
        }

        .language-dropdown {
            display: none;
            position: absolute;
            top: 100%;
            right: 0;
            background: white;
            border-radius: 0.75rem;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            min-width: 120px;
            z-index: 1000;
        }

        .rtl .language-dropdown {
            right: auto;
            left: 0;
        }

        .language-switcher:hover .language-dropdown {
            display: block;
        }

        .language-option {
            padding: 0.5rem 1rem;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .language-option:hover {
            background-color: #f3f4f6;
        }

        .language-option.active {
            background: linear-gradient(135deg, #facc15 0%, #eab308 100%);
            color: white;
        }

        /* Mobile dashboard button */
        .mobile-dashboard-btn {
            display: none;
        }

        /* Mobile menu overlay */
        .mobile-menu-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 40;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .mobile-menu-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        /* Gold Gradient Background */
        .gold-gradient-bg {
            background: linear-gradient(135deg, #fefce8 0%, #ffffff 100%);
        }

        .dark .gold-gradient-bg {
            background: linear-gradient(135deg, #0f172a 0%, #1a202c 100%);
        }

        /* Decorative Elements */
        .decorative-element {
            position: absolute;
            z-index: -1;
            opacity: 0.1;
            animation: float 6s ease-in-out infinite;
        }

        /* Gold Theme Toggle */
        .theme-toggle {
            position: relative;
            display: inline-block;
            width: 52px;
            height: 28px;
        }

        .theme-toggle input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .theme-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #cbd5e1;
            transition: .4s;
            border-radius: 34px;
        }

        .theme-slider:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .theme-slider:before::after {
            content: "☀️";
            font-size: 10px;
        }

        input:checked+.theme-slider {
            background-color: #facc15;
        }

        input:checked+.theme-slider:before {
            transform: translateX(24px);
            background-color: #1e293b;
        }

        input:checked+.theme-slider:before::after {
            content: "🌙";
        }

        /* Crown Icon Animation */
        .crown-icon {
            background: linear-gradient(135deg, #facc15 0%, #eab308 100%);
            box-shadow: 0 4px 15px rgba(250, 204, 21, 0.3);
            
        }
    </style>

    <?php
        $user = auth()->user();
    ?>

    <?php if(session('locale') == 'bn'): ?>
        <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=Anek+Bangla:wght@100..800&display=swap" rel="stylesheet">
        <style>
            body {
                font-family: "Anek Bangla", sans-serif;
            }
        </style>
    <?php endif; ?>

</head>

<body
    class="bg-white text-gray-900 dark:bg-gray-900 dark:text-white min-h-screen transition-colors duration-300 <?php echo e(in_array(session('locale', 'en'), ['ar']) ? 'rtl' : 'ltr'); ?> gold-gradient-bg">
    
    <!-- Decorative Golden Elements -->
    <div class="decorative-element top-10 left-10 w-72 h-72 rounded-full bg-gold-500"></div>
    <div class="decorative-element bottom-10 right-10 w-96 h-96 rounded-full bg-gold-600" style="animation-delay: 2s;"></div>
    <div class="decorative-element top-1/2 left-1/3 w-64 h-64 rounded-full bg-gold-400" style="animation-delay: 4s;"></div>

    <!-- Top Bar -->
    <div class="bg-gradient-to-r from-gold-600 to-gold-700 text-white py-2">
        <div class="max-w-6xl mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center space-y-2 md:space-y-0">
                <!-- Contact Info -->
                <div
                    class="flex flex-wrap items-center justify-center md:justify-start gap-4 md:gap-6 text-sm topbar-contact">
                    <div class="flex items-center space-x-2 topbar-item">
                        <i class="fas fa-phone text-gold-200 text-xs"></i>
                        <span class="truncate"><?php echo e($settings['company_phone']); ?></span>
                    </div>
                    <div class="flex items-center space-x-2 topbar-item">
                        <i class="fas fa-envelope text-gold-200 text-xs"></i>
                        <span class="truncate"><?php echo e($settings['company_email']); ?></span>
                    </div>
                    <div class="hidden md:flex items-center space-x-2 topbar-item">
                        <i class="fas fa-map-marker-alt text-gold-200 text-xs"></i>
                        <span class="truncate"><?php echo e($settings['company_address']); ?></span>
                    </div>
                </div>

                <!-- Additional Info & Language Switcher -->
                <div class="flex items-center space-x-4 text-sm">
                    <div class="hidden md:flex items-center space-x-2 topbar-item">
                        <i class="fas fa-clock text-gold-200 text-xs"></i>
                        <span><?php echo e($settings['working_hours']); ?></span>
                    </div>

                    <?php if($user): ?>
                        <!-- Desktop Dashboard Button -->
                        <a href="/dashboard"
                            class="hidden lg:flex items-center space-x-2 topbar-item bg-gold-500/20 px-3 py-1 rounded-full btn-gold">
                            <i class="fas fa-chart-line text-gold-100 text-sm"></i>
                            <span class="text-gold-100 font-medium"><?php echo e(t('topbar_dashboard')); ?></span>
                        </a>

                        <!-- Mobile Dashboard Button -->
                        <a href="/dashboard"
                            class="mobile-dashboard-btn items-center space-x-2 bg-gold-500/50 px-2 py-1 rounded-full btn-gold">
                            <i class="fas fa-chart-line text-gold-100 text-sm"></i>
                            <span class="text-gold-100 text-xs font-medium"><?php echo e(t('topbar_dashboard')); ?></span>
                        </a>
                    <?php else: ?>
                        <!-- Desktop Login Button -->
                        <a href="/login"
                            class="hidden lg:flex items-center space-x-2 topbar-item bg-gold-500/20 px-3 py-1 rounded-full btn-gold">
                            <i class="fas fa-sign-in-alt text-gold-100 text-sm"></i>
                            <span class="text-gold-100 font-medium"><?php echo e(t('topbar_login')); ?></span>
                        </a>

                        <!-- Mobile Login Button -->
                        <a href="/login"
                            class="mobile-dashboard-btn items-center space-x-2 bg-gold-500/20 px-2 py-1 rounded-full btn-gold">
                            <i class="fas fa-sign-in-alt text-gold-100 text-sm"></i>
                            <span class="text-gold-100 text-xs font-medium"><?php echo e(t('topbar_login')); ?></span>
                        </a>
                    <?php endif; ?>

                    <!-- Language Switcher -->
                    <div class="language-switcher">
                        <button
                            class="flex items-center space-x-2 px-3 py-1 rounded-lg bg-white/10 hover:bg-white/20 transition-colors btn-gold">
                            <i class="fas fa-globe text-gold-200 text-sm"></i>
                            <span class="text-white text-sm">
                                <?php if(session('locale', 'en') == 'en'): ?>
                                    EN
                                <?php elseif(session('locale', 'en') == 'ar'): ?>
                                    AR
                                <?php elseif(session('locale', 'en') == 'bn'): ?>
                                    BN
                                <?php endif; ?>
                            </span>
                            <i class="fas fa-chevron-down text-gold-200 text-xs"></i>
                        </button>
                        <div class="language-dropdown text-black">
                            <div class="language-option <?php echo e(session('locale', 'en') == 'en' ? 'active' : ''); ?>"
                                onclick="changeLanguage('en')">
                                English
                            </div>
                            <div class="language-option <?php echo e(session('locale', 'en') == 'ar' ? 'active' : ''); ?>"
                                onclick="changeLanguage('ar')">
                                العربية
                            </div>
                            <div class="language-option <?php echo e(session('locale', 'en') == 'bn' ? 'active' : ''); ?>"
                                onclick="changeLanguage('bn')">
                                বাংলা
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Mobile Menu Overlay -->
    <div id="mobile-menu-overlay" class="mobile-menu-overlay" onclick="closeMobileMenu()"></div>

    <!-- Header -->
    <header
        class="sticky top-0 z-50 bg-white/80 dark:bg-gray-900/80 backdrop-blur-lg border-b border-gray-200 dark:border-gray-800 glass">
        <div class="max-w-6xl mx-auto px-4">
            <div class="flex items-center justify-between h-16">
                <!-- Logo -->
                <a href="/" class="flex items-center space-x-3">
                    <?php if(!empty($settings['company_logo'])): ?>
                        <img src="<?php echo e(asset('storage/' . $settings['company_logo'])); ?>" alt="Logo"
                            class="h-10 w-auto">
                    <?php else: ?>
                        <div class="flex items-center space-x-2">
                            <div class="crown-icon w-10 h-10 rounded-xl flex items-center justify-center">
                                <i class="fas fa-crown text-white text-lg"></i>
                            </div>
                            <span class="text-xl font-bold">
                                <span class="gold-text">Inve</span> Security
                            </span>
                        </div>
                    <?php endif; ?>
                </a>

                <!-- Desktop Navigation -->
                <nav class="hidden lg:flex items-center space-x-8">
                    <a href="/"
                        class="nav-link text-gray-700 dark:text-gray-300 hover:text-gold-600 font-medium transition-colors">
                        <?php echo e(t('nav_home')); ?>

                    </a>
                    <a href="/about"
                        class="nav-link text-gray-700 dark:text-gray-300 hover:text-gold-600 font-medium transition-colors">
                        <?php echo e(t('nav_about')); ?>

                    </a>
                    <a href="/services"
                        class="nav-link text-gray-700 dark:text-gray-300 hover:text-gold-600 font-medium transition-colors">
                        <?php echo e(t('nav_services')); ?>

                    </a>
                    <a href="/packages"
                        class="nav-link text-gray-700 dark:text-gray-300 hover:text-gold-600 font-medium transition-colors">
                        <?php echo e(t('nav_package')); ?>

                    </a>
                    <a href="/blogs"
                        class="nav-link text-gray-700 dark:text-gray-300 hover:text-gold-600 font-medium transition-colors">
                        <?php echo e(t('nav_blog')); ?>

                    </a>
                    <a href="/contact"
                        class="nav-link text-gray-700 dark:text-gray-300 hover:text-gold-600 font-medium transition-colors">
                        <?php echo e(t('nav_contact')); ?>

                    </a>
                </nav>

                <!-- Right Section -->
                <div class="flex items-center space-x-4">
                    <!-- Social Links -->
                    <div class="hidden md:flex items-center space-x-3">
                        <a href="<?php echo e($settings['linkedin_url']); ?>"
                            class="w-8 h-8 rounded-lg bg-gray-100 dark:bg-gray-800 flex items-center justify-center hover:bg-gold-500 hover:text-white transition-colors">
                            <i class="fab fa-linkedin-in text-xs gold-icon"></i>
                        </a>
                        <a href="<?php echo e($settings['twitter_url']); ?>"
                            class="w-8 h-8 rounded-lg bg-gray-100 dark:bg-gray-800 flex items-center justify-center hover:bg-gold-500 hover:text-white transition-colors">
                            <i class="fab fa-twitter text-xs gold-icon"></i>
                        </a>
                        <a href="<?php echo e($settings['instagram_url']); ?>"
                            class="w-8 h-8 rounded-lg bg-gray-100 dark:bg-gray-800 flex items-center justify-center hover:bg-gold-500 hover:text-white transition-colors">
                            <i class="fab fa-instagram text-xs gold-icon"></i>
                        </a>
                    </div>

                    <!-- Theme Toggle -->
                    <label class="theme-toggle">
                        <input type="checkbox" id="themeToggle">
                        <span class="theme-slider"></span>
                    </label>

                    <!-- CTA Button -->
                    <a href="<?php echo e(route('package.build')); ?>"
                        class="hidden lg:block btn-gold text-gray-800 px-6 py-2.5 rounded-xl font-semibold hover:text-white transition-colors shadow-lg hover:shadow-xl">
                        <i class="fas fa-shield-alt mr-2"></i><?php echo e(t('nav_get_started')); ?>

                    </a>

                    <!-- Mobile Menu Button -->
                    <button id="mobile-menu-btn"
                        class="lg:hidden p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
                        <i class="fas fa-bars text-gray-600 dark:text-gray-400 text-lg"></i>
                    </button>
                </div>
            </div>
        </div>
    </header>

    <!-- Mobile Menu -->
    <div id="mobile-menu"
        class="fixed inset-y-0 right-0 w-full max-w-sm bg-white dark:bg-gray-900 z-50 lg:hidden shadow-2xl glass-dark">
        <!-- Single Close Button at Top Right -->
        <div class="flex justify-end p-4">
            <button id="mobile-menu-close"
                class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
                <i class="fas fa-times text-gray-600 dark:text-gray-400 text-xl"></i>
            </button>
        </div>

        <!-- Logo -->
        <div class="px-6 pb-6 border-b border-gray-200 dark:border-gray-800">
            <a href="/" class="flex items-center space-x-3">
                <?php if(!empty($settings['company_logo'])): ?>
                    <img src="<?php echo e(asset('storage/' . $settings['company_logo'])); ?>" alt="Logo"
                        class="h-10 w-auto">
                <?php else: ?>
                    <div class="flex items-center space-x-2">
                        <div class="crown-icon w-10 h-10 rounded-xl flex items-center justify-center">
                            <i class="fas fa-crown text-white text-lg"></i>
                        </div>
                        <span class="text-xl font-bold">
                            <span class="gold-text">Inve</span> Security
                        </span>
                    </div>
                <?php endif; ?>
            </a>
        </div>

        <!-- Navigation -->
        <nav class="flex-1 p-6 space-y-4 overflow-y-auto">
            <a href="/"
                class="flex items-center space-x-3 p-3 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
                <i class="fas fa-home text-gold-600 w-5"></i>
                <span class="text-lg font-medium"><?php echo e(t('nav_home')); ?></span>
            </a>
            <a href="/about"
                class="flex items-center space-x-3 p-3 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
                <i class="fas fa-info-circle text-gold-600 w-5"></i>
                <span class="text-lg font-medium"><?php echo e(t('nav_about')); ?></span>
            </a>
            <a href="/services"
                class="flex items-center space-x-3 p-3 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
                <i class="fas fa-cogs text-gold-600 w-5"></i>
                <span class="text-lg font-medium"><?php echo e(t('nav_services')); ?></span>
            </a>
            <a href="/packages"
                class="flex items-center space-x-3 p-3 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
                <i class="fas fa-box text-gold-600 w-5"></i>
                <span class="text-lg font-medium"><?php echo e(t('nav_package')); ?></span>
            </a>
            <a href="/blogs"
                class="flex items-center space-x-3 p-3 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
                <i class="fas fa-newspaper text-gold-600 w-5"></i>
                <span class="text-lg font-medium"><?php echo e(t('nav_blog')); ?></span>
            </a>
            <a href="/contact"
                class="flex items-center space-x-3 p-3 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
                <i class="fas fa-envelope text-gold-600 w-5"></i>
                <span class="text-lg font-medium"><?php echo e(t('nav_contact')); ?></span>
            </a>

            <!-- Mobile Dashboard/Login Button -->
            <?php if($user): ?>
                <a href="/dashboard"
                    class="flex items-center space-x-3 p-3 rounded-xl bg-gold-50 dark:bg-gold-900/20 text-gold-600 mt-4 btn-gold">
                    <i class="fas fa-chart-line w-5"></i>
                    <span class="text-lg font-medium"><?php echo e(t('topbar_dashboard')); ?></span>
                </a>
            <?php else: ?>
                <a href="/login"
                    class="flex items-center space-x-3 p-3 rounded-xl bg-gold-50 dark:bg-gold-900/20 text-gold-600 mt-4 btn-gold">
                    <i class="fas fa-sign-in-alt w-5"></i>
                    <span class="text-lg font-medium"><?php echo e(t('topbar_login')); ?></span>
                </a>
            <?php endif; ?>
        </nav>

        <!-- Mobile Social Links & CTA -->
        <div class="p-6 border-t border-gray-200 dark:border-gray-800">
            <div class="flex justify-center space-x-4 mb-6">
                <a href="<?php echo e($settings['linkedin_url']); ?>"
                    class="w-12 h-12 rounded-xl bg-gray-100 dark:bg-gray-800 flex items-center justify-center hover:bg-gold-500 hover:text-white transition-colors">
                    <i class="fab fa-linkedin-in"></i>
                </a>
                <a href="<?php echo e($settings['twitter_url']); ?>"
                    class="w-12 h-12 rounded-xl bg-gray-100 dark:bg-gray-800 flex items-center justify-center hover:bg-gold-500 hover:text-white transition-colors">
                    <i class="fab fa-twitter"></i>
                </a>
                <a href="<?php echo e($settings['instagram_url']); ?>"
                    class="w-12 h-12 rounded-xl bg-gray-100 dark:bg-gray-800 flex items-center justify-center hover:bg-gold-500 hover:text-white transition-colors">
                    <i class="fab fa-instagram"></i>
                </a>
            </div>
            <a href="<?php echo e(route('package.build')); ?>"
                class="w-full btn-gold text-gray-800 py-3 rounded-xl font-semibold text-center block hover:text-white transition-colors">
                <i class="fas fa-shield-alt mr-2"></i><?php echo e(t('nav_get_started')); ?>

            </a>
        </div>
    </div>

    <!-- Main Content -->
    <main class="min-h-screen">
        <?php echo $__env->yieldContent('content'); ?>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-50 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
        <div class="max-w-6xl mx-auto px-4 py-16">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Company Info -->
                <div class="lg:col-span-1">
                    <a href="/" class="flex items-center space-x-3 mb-6">
                        <?php if(!empty($settings['company_logo'])): ?>
                            <img src="<?php echo e(asset('storage/' . $settings['company_logo'])); ?>" alt="Logo"
                                class="h-10 w-auto">
                        <?php else: ?>
                            <div class="flex items-center space-x-2">
                                <div class="crown-icon w-10 h-10 rounded-xl flex items-center justify-center">
                                    <i class="fas fa-crown text-white text-lg"></i>
                                </div>
                                <span class="text-xl font-bold">
                                    <span class="gold-text">Inve</span> Security
                                </span>
                            </div>
                        <?php endif; ?>
                    </a>

                    <p class="text-gray-600 dark:text-gray-400 mb-6 leading-relaxed">
                        <?php echo e($settings['footer_text']); ?>

                    </p>
                    <div class="flex space-x-4">
                        <a target="_blank" href="<?php echo e($settings['instagram_url']); ?>"
                            class="w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded-xl flex items-center justify-center hover:bg-gold-500 hover:text-white transition-colors">
                            <i class="fab fa-linkedin-in"></i>
                        </a>
                        <a target="_blank" href="<?php echo e($settings['twitter_url']); ?>"
                            class="w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded-xl flex items-center justify-center hover:bg-gold-500 hover:text-white transition-colors">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a target="_blank" href="<?php echo e($settings['linkedin_url']); ?>"
                            class="w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded-xl flex items-center justify-center hover:bg-gold-500 hover:text-white transition-colors">
                            <i class="fab fa-instagram"></i>
                        </a>
                        <a target="_blank" href="<?php echo e($settings['facebook_url']); ?>"
                            class="w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded-xl flex items-center justify-center hover:bg-gold-500 hover:text-white transition-colors">
                            <i class="fab fa-facebook"></i>
                        </a>
                    </div>
                </div>

                <!-- Quick Links -->
                <div>
                    <h3 class="font-semibold text-gray-900 dark:text-white mb-6"><?php echo e(t('footer_quick_links')); ?></h3>
                    <ul class="space-y-4">
                        <li><a href="/"
                                class="text-gray-600 dark:text-gray-400 hover:text-gold-600 transition-colors"><?php echo e(t('nav_home')); ?></a>
                        </li>
                        <li><a href="/about"
                                class="text-gray-600 dark:text-gray-400 hover:text-gold-600 transition-colors"><?php echo e(t('nav_about')); ?></a>
                        </li>
                        <li><a href="/services"
                                class="text-gray-600 dark:text-gray-400 hover:text-gold-600 transition-colors"><?php echo e(t('nav_services')); ?></a>
                        </li>
                        <li><a href="/contact"
                                class="text-gray-600 dark:text-gray-400 hover:text-gold-600 transition-colors"><?php echo e(t('nav_contact')); ?></a>
                        </li>
                    </ul>
                </div>

                <!-- Contact -->
                <div>
                    <h3 class="font-semibold text-gray-900 dark:text-white mb-6"><?php echo e(t('footer_contact')); ?></h3>
                    <div class="space-y-4">
                        <div class="flex items-center space-x-3">
                            <i class="fas fa-map-marker-alt text-gold-600"></i>
                            <span class="text-gray-600 dark:text-gray-400"><?php echo e($settings['company_address']); ?></span>
                        </div>
                        <div class="flex items-center space-x-3">
                            <i class="fas fa-phone text-gold-600"></i>
                            <span class="text-gray-600 dark:text-gray-400"><?php echo e($settings['company_phone']); ?></span>
                        </div>
                        <div class="flex items-center space-x-3">
                            <i class="fas fa-envelope text-gold-600"></i>
                            <span class="text-gray-600 dark:text-gray-400"><?php echo e($settings['company_email']); ?></span>
                        </div>
                        <div class="flex items-center space-x-3">
                            <i class="fas fa-clock text-gold-600"></i>
                            <span class="text-gray-600 dark:text-gray-400"><?php echo e($settings['working_hours']); ?></span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Bottom Bar -->
            <div class="border-t border-gray-200 dark:border-gray-700 mt-12 pt-8 text-center">
                <p class="text-gray-600 dark:text-gray-400">
                    <?php echo e($settings['copyright_text']); ?> <span class="gold-text font-medium">Inve Security</span> <?php echo e(t('footer_rights')); ?>

                </p>
            </div>
        </div>
    </footer>

    <script>
        // Theme Toggle
        const themeToggle = document.getElementById('themeToggle');
        const htmlElement = document.documentElement;

        // Check for saved theme preference or respect OS preference
        if (localStorage.theme === 'dark' || (!localStorage.theme && window.matchMedia('(prefers-color-scheme: dark)')
                .matches)) {
            htmlElement.classList.add('dark');
            themeToggle.checked = true;
        } else {
            htmlElement.classList.remove('dark');
            themeToggle.checked = false;
        }

        themeToggle.addEventListener('change', function() {
            if (this.checked) {
                htmlElement.classList.add('dark');
                localStorage.theme = 'dark';
            } else {
                htmlElement.classList.remove('dark');
                localStorage.theme = 'light';
            }
        });

        // Mobile Menu Functions
        const mobileMenu = document.getElementById('mobile-menu');
        const mobileMenuOverlay = document.getElementById('mobile-menu-overlay');
        const mobileMenuBtn = document.getElementById('mobile-menu-btn');
        const mobileMenuClose = document.getElementById('mobile-menu-close');

        const openMobileMenu = () => {
            mobileMenu.classList.add('open');
            mobileMenuOverlay.classList.add('active');
            document.body.style.overflow = 'hidden';
        };

        const closeMobileMenu = () => {
            mobileMenu.classList.remove('open');
            mobileMenuOverlay.classList.remove('active');
            document.body.style.overflow = '';
        };

        mobileMenuBtn.addEventListener('click', openMobileMenu);
        mobileMenuClose.addEventListener('click', closeMobileMenu);
        mobileMenuOverlay.addEventListener('click', closeMobileMenu);

        // Close mobile menu when clicking on links
        document.querySelectorAll('#mobile-menu a').forEach(link => {
            link.addEventListener('click', closeMobileMenu);
        });

        // Language Switcher
        function changeLanguage(lang) {
            fetch('/change-language', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '<?php echo e(csrf_token()); ?>'
                    },
                    body: JSON.stringify({
                        locale: lang
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        location.reload();
                    }
                })
                .catch(error => {
                    console.error('Error changing language:', error);
                });
        }

        // Add shimmer effect to gold text elements
        document.addEventListener('DOMContentLoaded', function() {
            const goldTextElements = document.querySelectorAll('.gold-text');
            goldTextElements.forEach(el => {
                el.style.backgroundSize = '200% 100%';
                el.style.animation = 'shimmer 3s infinite linear';
            });

            // Add floating animation delays to decorative elements
            const decorativeElements = document.querySelectorAll('.decorative-element');
            decorativeElements.forEach((el, index) => {
                el.style.animationDelay = `${index * 2}s`;
            });

            // Auto-detect browser language
            const browserLang = navigator.language || navigator.userLanguage;
            const supportedLangs = ['en', 'ar', 'bn'];
            const shortLang = browserLang.split('-')[0];

            if (supportedLangs.includes(shortLang) && !sessionStorage.getItem('language_set')) {
                changeLanguage(shortLang);
                sessionStorage.setItem('language_set', 'true');
            }

            // Show mobile dashboard button on small screens
            const mobileDashboardBtn = document.querySelector('.mobile-dashboard-btn');
            if (mobileDashboardBtn && window.innerWidth < 1024) {
                mobileDashboardBtn.style.display = 'flex';
            }
        });

        // Handle window resize
        window.addEventListener('resize', function() {
            const mobileDashboardBtn = document.querySelector('.mobile-dashboard-btn');
            if (mobileDashboardBtn) {
                if (window.innerWidth < 1024) {
                    mobileDashboardBtn.style.display = 'flex';
                } else {
                    mobileDashboardBtn.style.display = 'none';
                }
            }

            // Close mobile menu on desktop
            if (window.innerWidth >= 1024) {
                closeMobileMenu();
            }
        });
    </script>
</body>

</html><?php /**PATH C:\laragon\www\crm_new\resources\views/frontend/layout.blade.php ENDPATH**/ ?>