<nav x-data="{ open: false, scrolled: false }" 
     @scroll.window="scrolled = window.scrollY > 20"
     :class="{ 'nav-scrolled': scrolled }"
     class="nav-base">

    <style>
        .nav-base {
            position: sticky;
            top: 0;
            z-index: 50;
            transition: all 0.3s ease;
            background: var(--charcoal);
        }
        .nav-scrolled {
            background: rgba(26,24,20,0.97) !important;
            backdrop-filter: blur(12px);
            box-shadow: 0 1px 0 rgba(255,255,255,0.05);
        }

        .nav-link {
            font-size: 0.75rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            font-weight: 500;
            color: var(--mist);
            text-decoration: none;
            padding: 0.35rem 0;
            position: relative;
            transition: color 0.2s ease;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 1px;
            background: var(--amber);
            transition: width 0.3s ease;
        }
        .nav-link:hover { color: var(--cream); }
        .nav-link:hover::after { width: 100%; }
        .nav-link.active { color: var(--cream); }
        .nav-link.active::after { width: 100%; }

        .dropdown-menu {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            background: var(--ink);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 8px;
            min-width: 180px;
            padding: 0.5rem 0;
            box-shadow: 0 16px 40px rgba(0,0,0,0.4);
            opacity: 0;
            transform: translateY(-8px);
            pointer-events: none;
            transition: all 0.2s ease;
        }
        .dropdown-wrapper:hover .dropdown-menu,
        .dropdown-wrapper:focus-within .dropdown-menu {
            opacity: 1;
            transform: translateY(0);
            pointer-events: all;
        }
        .dropdown-item {
            display: block;
            padding: 0.6rem 1.2rem;
            font-size: 0.8rem;
            letter-spacing: 0.05em;
            color: var(--mist);
            text-decoration: none;
            transition: all 0.15s;
        }
        .dropdown-item:hover {
            color: var(--cream);
            background: rgba(255,255,255,0.04);
        }

        .mobile-nav-link {
            display: block;
            padding: 0.8rem 1.5rem;
            font-size: 0.8rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            font-weight: 500;
            color: var(--mist);
            text-decoration: none;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            transition: color 0.2s, background 0.2s;
        }
        .mobile-nav-link:hover, .mobile-nav-link.active {
            color: var(--cream);
            background: rgba(200, 136, 58, 0.08);
        }

        /* Explicit Display Logic */
        .desktop-only { display: none !important; }
        .mobile-only { display: flex !important; }

        @media (min-width: 640px) {
            .desktop-only { display: flex !important; }
            .mobile-only { display: none !important; }
        }
    </style>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div style="display: flex; justify-content: space-between; align-items: center; height: 64px;">

            <!-- Logo -->
            <a href="<?php echo e(route('home')); ?>" class="serif" 
               style="font-size: 1.5rem; font-weight: 600; color: var(--cream); text-decoration: none; letter-spacing: 0.1em; flex-shrink: 0;">
                <?php if(!empty($siteSettings['company_logo'])): ?>
                    <img src="<?php echo e(asset('storage/' . $siteSettings['company_logo'])); ?>" alt="<?php echo e($siteSettings['company_name'] ?? 'Logo'); ?>" style="height: 40px; width: auto;">
                <?php else: ?>
                    <?php echo e($siteSettings['company_name'] ?? 'MAISON'); ?>

                <?php endif; ?>
            </a>

            <!-- Desktop Nav Links (centered) -->
            <div style="gap: 2.5rem; align-items: center;" class="desktop-only">
                <a href="<?php echo e(route('home')); ?>" class="nav-link <?php echo e(request()->routeIs('home') ? 'active' : ''); ?>">Shop</a>
                <?php if(auth()->guard()->check()): ?>
                    <a href="<?php echo e(route('dashboard')); ?>" class="nav-link <?php echo e(request()->routeIs('dashboard') ? 'active' : ''); ?>">Dashboard</a>
                    <a href="<?php echo e(route('order.index')); ?>" class="nav-link <?php echo e(request()->routeIs('order.*') ? 'active' : ''); ?>">Orders</a>
                <?php endif; ?>
                <?php if(auth()->check() && auth()->user()->is_admin): ?>
                    <!-- Admin Dropdown -->
                    <div class="dropdown-wrapper" style="position: relative; cursor: pointer;">
                        <button class="nav-link <?php echo e(request()->is('admin/categories*') || request()->is('admin/products*') ? 'active' : ''); ?>" 
                                style="background: none; border: none; display: flex; align-items: center; gap: 0.3rem; color: var(--amber);">
                            Catalog
                            <svg style="width:12px;height:12px;" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
                            </svg>
                        </button>
                        <div class="dropdown-menu" style="left: 0; right: auto;">
                            <a href="<?php echo e(route('admin.categories.index')); ?>" class="dropdown-item">Categories</a>
                            <a href="<?php echo e(route('admin.products.index')); ?>" class="dropdown-item">Products</a>
                            <a href="<?php echo e(route('admin.stock.index')); ?>" class="dropdown-item">Stock / Inventory</a>
                        </div>
                    </div>

                    <a href="<?php echo e(route('admin.orders.index')); ?>" class="nav-link <?php echo e(request()->routeIs('admin.orders.*') ? 'active' : ''); ?>" style="color: var(--amber);">Orders</a>
                    
                    <?php if(auth()->user()->role === 'super_admin' || auth()->user()->role === 'admin' || auth()->user()->role === 'manager'): ?>
                        <!-- Marketing Dropdown -->
                        <div class="dropdown-wrapper" style="position: relative; cursor: pointer;">
                            <button class="nav-link <?php echo e(request()->is('admin/campaigns*') ? 'active' : ''); ?>" 
                                    style="background: none; border: none; display: flex; align-items: center; gap: 0.3rem; color: var(--amber);">
                                Marketing
                                <svg style="width:12px;height:12px;" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
                                </svg>
                            </button>
                            <div class="dropdown-menu" style="left: 0; right: auto;">
                                <a href="<?php echo e(route('admin.campaigns.index')); ?>" class="dropdown-item">Campaigns</a>
                                <a href="<?php echo e(route('admin.banners.index')); ?>" class="dropdown-item">Hero Banners</a>
                            </div>
                        </div>
                    <?php endif; ?>

                    <?php if(auth()->user()->role === 'super_admin'): ?>
                        <!-- System Dropdown -->
                        <div class="dropdown-wrapper" style="position: relative; cursor: pointer;">
                            <button class="nav-link <?php echo e(request()->is('admin/settings*') || request()->is('admin/users*') ? 'active' : ''); ?>" 
                                    style="background: none; border: none; display: flex; align-items: center; gap: 0.3rem; color: var(--amber);">
                                System
                                <svg style="width:12px;height:12px;" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
                                </svg>
                            </button>
                            <div class="dropdown-menu" style="left: 0; right: auto;">
                                <a href="<?php echo e(route('admin.settings.index')); ?>" class="dropdown-item">Site Settings</a>
                                <a href="<?php echo e(route('admin.users.index')); ?>" class="dropdown-item">Manage Users</a>
                            </div>
                        </div>
                    <?php elseif(auth()->user()->role === 'admin'): ?>
                        <a href="<?php echo e(route('admin.settings.index')); ?>" class="nav-link <?php echo e(request()->routeIs('admin.settings.*') ? 'active' : ''); ?>" style="color: var(--amber);">Settings</a>
                    <?php endif; ?>
                <?php endif; ?>
            </div>

            <!-- Desktop Right: Cart + User -->
            <div style="align-items: center; gap: 1.5rem;" class="desktop-only">
                <!-- Cart -->
                <a href="<?php echo e(route('cart.index')); ?>" 
                   style="color: var(--mist); text-decoration: none; display: flex; align-items: center; gap: 0.4rem; transition: color 0.2s;"
                   onmouseover="this.style.color='var(--cream)'" onmouseout="this.style.color='var(--mist)'">
                    <div style="position: relative; display: flex; align-items: center;">
                        <svg xmlns="http://www.w3.org/2000/svg" style="width:20px;height:20px;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
                        </svg>
                        <?php if($cartCount > 0): ?>
                            <span style="position: absolute; top: -8px; right: -8px; background: var(--amber); color: var(--charcoal); font-size: 0.65rem; font-weight: 700; min-width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--charcoal); padding: 0 4px; box-sizing: border-box;">
                                <?php echo e($cartCount); ?>

                            </span>
                        <?php endif; ?>
                    </div>
                    <span style="font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500;">Cart</span>
                </a>

                <?php if(auth()->guard()->check()): ?>
                    <!-- User Dropdown -->
                    <div class="dropdown-wrapper" style="position: relative; cursor: pointer;">
                        <button style="display: flex; align-items: center; gap: 0.5rem; background: none; border: 1px solid rgba(255,255,255,0.12); border-radius: 100px; padding: 0.4rem 0.9rem 0.4rem 0.5rem; cursor: pointer; color: var(--mist); transition: all 0.2s;" 
                                onmouseover="this.style.borderColor='rgba(200,136,58,0.5)'; this.style.color='var(--cream)'"
                                onmouseout="this.style.borderColor='rgba(255,255,255,0.12)'; this.style.color='var(--mist)'">
                            <div style="width: 26px; height: 26px; border-radius: 50%; background: var(--amber); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; color: var(--charcoal);">
                                <?php echo e(strtoupper(substr(Auth::user()->name, 0, 1))); ?>

                            </div>
                            <span style="font-size: 0.78rem; font-weight: 500;"><?php echo e(Auth::user()->name); ?></span>
                            <svg style="width:12px;height:12px;" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
                            </svg>
                        </button>
                        <div class="dropdown-menu">
                            <a href="<?php echo e(route('profile.edit')); ?>" class="dropdown-item">Profile</a>
                            <form method="POST" action="<?php echo e(route('logout')); ?>">
                                <?php echo csrf_field(); ?>
                                <button type="submit" class="dropdown-item" style="width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:inherit;">
                                    Log Out
                                </button>
                            </form>
                        </div>
                    </div>
                <?php else: ?>
                    <a href="<?php echo e(route('login')); ?>" class="nav-link">Log In</a>
                    <?php if(Route::has('register')): ?>
                        <a href="<?php echo e(route('register')); ?>" 
                           style="font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; background: var(--amber); color: var(--charcoal); text-decoration: none; padding: 0.45rem 1.1rem; border-radius: 100px; transition: all 0.2s;"
                           onmouseover="this.style.background='var(--amber-light)'"
                           onmouseout="this.style.background='var(--amber)'">
                            Register
                        </a>
                    <?php endif; ?>
                <?php endif; ?>
            </div>

            <!-- Mobile Hamburger -->
            <button @click="open = !open" 
                    style="align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; background: none; cursor: pointer; color: var(--mist);"
                    class="mobile-only">
                <svg style="width:20px;height:20px;" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                    <path :class="{'hidden': open, 'inline-flex': !open}" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h16" />
                    <path :class="{'hidden': !open, 'inline-flex': open}" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        </div>
    </div>

    <!-- Mobile Menu Container -->
    <div x-show="open" 
         x-cloak
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0 -translate-y-2"
         x-transition:enter-end="opacity-100 translate-y-0"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="opacity-100 translate-y-0"
         x-transition:leave-end="opacity-0 -translate-y-2"
         class="mobile-only"
         style="border-top: 1px solid rgba(255,255,255,0.06); background: var(--ink); flex-direction: column; width: 100%;">
        <div style="padding: 1rem 0; width: 100%;">
            <a href="<?php echo e(route('home')); ?>" class="mobile-nav-link <?php echo e(request()->routeIs('home') ? 'active' : ''); ?>">Shop</a>
            <a href="<?php echo e(route('cart.index')); ?>" class="mobile-nav-link" style="display: flex; justify-content: space-between; align-items: center;">
                Cart
                <?php if($cartCount > 0): ?>
                    <span style="background: var(--amber); color: var(--charcoal); font-size: 0.7rem; font-weight: 700; padding: 0.1rem 0.6rem; border-radius: 100px;">
                        <?php echo e($cartCount); ?>

                    </span>
                <?php endif; ?>
            </a>
            <?php if(auth()->guard()->check()): ?>
                <a href="<?php echo e(route('dashboard')); ?>" class="mobile-nav-link">Dashboard</a>
                <a href="<?php echo e(route('order.index')); ?>" class="mobile-nav-link">My Orders</a>
                <a href="<?php echo e(route('profile.edit')); ?>" class="mobile-nav-link">Profile</a>
                <?php if(auth()->user()->is_admin): ?>
                    <div style="padding: 0.5rem 1.5rem; font-size: 0.65rem; color: var(--amber); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;">Admin</div>
                    <a href="<?php echo e(route('admin.categories.index')); ?>" class="mobile-nav-link" style="padding-left: 2.5rem;">— Categories</a>
                    <a href="<?php echo e(route('admin.products.index')); ?>" class="mobile-nav-link" style="padding-left: 2.5rem;">— Products</a>
                    <a href="<?php echo e(route('admin.stock.index')); ?>" class="mobile-nav-link" style="padding-left: 2.5rem;">— Stock Management</a>
                    <a href="<?php echo e(route('admin.orders.index')); ?>" class="mobile-nav-link">Orders</a>
                    <a href="<?php echo e(route('admin.campaigns.index')); ?>" class="mobile-nav-link">Campaigns</a>
                    <a href="<?php echo e(route('admin.banners.index')); ?>" class="mobile-nav-link">Hero Banners</a>
                    <?php if(auth()->user()->role === 'super_admin'): ?>
                        <a href="<?php echo e(route('admin.settings.index')); ?>" class="mobile-nav-link">Site Settings</a>
                        <a href="<?php echo e(route('admin.users.index')); ?>" class="mobile-nav-link">Manage Users</a>
                    <?php elseif(auth()->user()->role === 'admin'): ?>
                        <a href="<?php echo e(route('admin.settings.index')); ?>" class="mobile-nav-link">Settings</a>
                    <?php endif; ?>
                <?php endif; ?>
                <form method="POST" action="<?php echo e(route('logout')); ?>" style="margin: 0;">
                    <?php echo csrf_field(); ?>
                    <button type="submit" class="mobile-nav-link" style="width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:inherit;color:var(--terracotta);">
                        Log Out
                    </button>
                </form>
            <?php else: ?>
                <a href="<?php echo e(route('login')); ?>" class="mobile-nav-link">Log In</a>
                <?php if(Route::has('register')): ?>
                    <a href="<?php echo e(route('register')); ?>" class="mobile-nav-link" style="color: var(--amber);">Register</a>
                <?php endif; ?>
            <?php endif; ?>
        </div>
    </div>
</nav>
<?php /**PATH D:\Laravel\ecom\resources\views\layouts\navigation.blade.php ENDPATH**/ ?>