@php
    $active = $active ?? null;
    $menuItems = [
        [
            'key' => 'dashboard',
            'icon' => '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" /></svg>',
            'label' => __('menu.dashboard')
        ],
        [
            'key' => 'menu',
            'icon' => '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75c0-.231-.035-.454-.1-.664M6.75 7.5H18a2.25 2.25 0 0 1 2.25 2.25v9a2.25 2.25 0 0 1-2.25 2.25H6.75a2.25 2.25 0 0 1-2.25-2.25V9.75A2.25 2.25 0 0 1 6.75 7.5Z" /></svg>',
            'label' => __('menu.menu')
        ],
        [
            'key' => 'shop.index',
            'icon' => '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" /></svg>',
            'label' => __('menu.shop')
        ],
    ];
    
    if (\Illuminate\Support\Facades\Auth::check() && \Illuminate\Support\Facades\Auth::user()->is_admin) {
        $menuItems[] = [
            'key' => 'admin.dashboard',
            'icon' => '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M10.34 15.84c-.68-.34-1.44-.54-2.24-.54-2.83 0-5.13 2.3-5.13 5.13h14.77c0-2.83-2.3-5.13-5.13-5.13-.8 0-1.56.2-2.24.54M12 11.25a3.375 3.375 0 1 0 0-6.75 3.375 3.375 0 0 0 0 6.75Z" /></svg>',
            'label' => app()->getLocale() == 'fa' ? 'پنل ادمین' : 'Admin Panel'
        ];
  }
@endphp

<style>
.desktop-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(224, 229, 236, 0.8) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 30px rgba(163, 177, 198, 0.2);
    display: none;
    animation: fadeInNav 0.6s ease forwards;
}

@media (min-width: 1024px) {
    .desktop-nav {
        display: block;
    }
}

@keyframes fadeInNav {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.desktop-nav__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.6rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.desktop-nav__list {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.desktop-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.9rem;
    color: rgba(74, 85, 104, 0.8);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 12px;
    transition: all 0.3s ease;
    overflow: hidden;
}

.desktop-nav__icon svg {
    width: 1.2rem;
    height: 1.2rem;
    transition: transform 0.3s ease, color 0.3s ease;
}

.desktop-nav__link::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #6c5ce7;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease, opacity 0.4s ease;
    border-radius: 12px;
    z-index: 0;
}

.desktop-nav__link:hover {
    color: #6c5ce7;
}

.desktop-nav__link:hover::before {
    opacity: 0.1;
    transform: scaleX(1);
}

.desktop-nav__icon,
.desktop-nav__label {
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease, color 0.3s ease;
}

.desktop-nav__link:hover .desktop-nav__icon {
    transform: rotate(-8deg) scale(1.1);
}
.desktop-nav__link:hover .desktop-nav__label {
    transform: translateY(-1px);
}

.desktop-nav__link.is-active {
    color: #6c5ce7;
    background: rgba(108, 92, 231, 0.1);
    border: 1px solid rgba(108, 92, 231, 0.15);
}
.desktop-nav__link.is-active::before {
    display: none;
}
.desktop-nav__link.is-active .desktop-nav__icon {
    transform: scale(1.1);
}

.desktop-nav__link {
    animation: slideIn 0.6s ease both;
}
.desktop-nav__link:nth-child(1) { animation-delay: 0.05s; }
.desktop-nav__link:nth-child(2) { animation-delay: 0.1s; }
.desktop-nav__link:nth-child(3) { animation-delay: 0.15s; }
.desktop-nav__link:nth-child(4) { animation-delay: 0.2s; }
.desktop-nav__link:nth-child(5) { animation-delay: 0.25s; }

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


    .mobile-wave-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        display: block;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    @media (min-width: 1024px) {
        .mobile-wave-nav {
            display: none;
        }
    }

    .mobile-wave-nav__container {
        position: relative;
        height: 65px;
        background: #ffffff;
        box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.1);
    }

    .wave-shape {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }

    .wave-path {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    fill: #ffffff;
    stroke: #1b1b18;
    stroke-width: 1.5px;
    }

    .mobile-wave-nav__list {
        display: flex;
        align-items: flex-end;
        justify-content: space-around;
        list-style: none;
        margin: 0;
        padding: 0;
        height: 65px;
        position: relative;
    }

    .mobile-wave-nav__item {
        flex: 1;
        display: flex;
        justify-content: center;
        position: relative;
        height: 100%;
    }

    .mobile-wave-nav__link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        gap: 0.25rem;
        padding: 0.5rem 0.25rem;
        color: #9ca3af;
        text-decoration: none;
        transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        position: relative;
        width: 100%;
        padding-bottom: 0.75rem;
    }

    .mobile-wave-nav__link.is-active {
        color: #667eea;
        transform: translateY(-20px);
    }

    .mobile-wave-nav__icon {
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    color: inherit;
        line-height: 1;
    }

    .mobile-wave-nav__icon svg {
        width: 24px;
        height: 24px;
    }

    .mobile-wave-nav__link.is-active .mobile-wave-nav__icon {
    transform: scale(1.3);
    filter: drop-shadow(0 4px 12px rgba(102, 126, 234, 0.4));
    }

    .mobile-wave-nav__label {
        font-size: 0.625rem;
        font-weight: 500;
        white-space: nowrap;
        opacity: 0.7;
        transition: all 0.3s ease;
    }

    .mobile-wave-nav__link.is-active .mobile-wave-nav__label {
        opacity: 1;
        font-weight: 700;
        font-size: 0.65rem;
    }

    .active-circle {
        position: absolute;
        top: -8px;
        width: 50px;
        height: 50px;
        background: #ffffff;
        border-radius: 50%;
        opacity: 0;
        transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        box-shadow: 0 -4px 20px rgba(102, 126, 234, 0.4);
        transform: scale(0);
    }

    .mobile-wave-nav__link.is-active .active-circle {
        opacity: 1;
        transform: scale(1);
    }

    .ripple {
        position: absolute;
        border-radius: 50%;
        background-color: rgba(102, 126, 234, 0.3);
        width: 0;
        height: 0;
        pointer-events: none;
        transform: translate(-50%, -50%);
        animation: ripple-animation 0.6s ease-out;
        top: 50%;
        left: 50%;
    }

    @keyframes ripple-animation {
        to {
            width: 80px;
            height: 80px;
            opacity: 0;
        }
    }
    button.item-card {
            font-family: inherit;
            border: 1px solid rgba(255, 255, 255, 0.2);
            cursor: pointer;
        }

        .item-card--file {
            justify-content: center;
        }

        .item-card__action-label {
            display: inline-block;
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--theme-color-accent, #00eaff);
            margin-top: 1rem;
            opacity: 0.8;
            transition: opacity 0.3s ease, color 0.3s ease;
        }

        .item-card:hover .item-card__action-label {
            opacity: 1;
        }

        button.item-card.send-to-bot:disabled {
            opacity: 0.7;
            cursor: wait;
            transform: translateY(0);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15);
            border-color: rgba(255, 255, 255, 0.2);
        }
        
</style>

<nav class="desktop-nav">
     <div class="desktop-nav__container">
         <!-- Brand Logo & Link -->
         <a href="https://ramai.ir" target="_blank" style="display: flex; align-items: center; gap: 8px; text-decoration: none;">
             <div style="width: 32px; height: 32px; border-radius: 50%; overflow: hidden; border: 1.5px solid rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center;">
                 <img src="{{ asset('assets/images/Ramlogo.jpg') }}" alt="Logo" style="width: 100%; height: 100%; object-fit: cover;">
             </div>
             <span style="font-family: 'Vazirmatn', sans-serif; font-weight: 800; font-size: 0.9rem; color: #4a5568;">هوش معماری رام</span>
         </a>

         <ul class="desktop-nav__list">
             @foreach($menuItems as $item)
                 @php $routeName = $item['key']; @endphp
                 <li>
                     <a href="{{ route($routeName) }}" target="_blank" class="desktop-nav__link {{ $active === $item['key'] ? 'is-active' : '' }}">
                         <span class="desktop-nav__icon">{!! $item['icon'] !!}</span>
                         <span class="desktop-nav__label">{{ $item['label'] }}</span>
                     </a>
                 </li>
             @endforeach
         </ul>
     </div>
</nav>


<nav class="mobile-wave-nav">
    <div class="mobile-wave-nav__container">
        <svg class="wave-shape" viewBox="0 0 375 65" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
               <path class="wave-path" d="M 0,65 L 0,65 L 375,65 L 375,65 Z" />
        </svg>

        <ul class="mobile-wave-nav__list" id="mobileNavList">
            @foreach($menuItems as $index => $item)
                @php $routeName = $item['key']; @endphp
                <li class="mobile-wave-nav__item" data-index="{{ $index }}">
                    <a href="{{ route($routeName) }}"
                       target="_blank"
                       class="mobile-wave-nav__link {{ $active === $item['key'] ? 'is-active' : '' }}"
                       data-menu="{{ $item['key'] }}">
                        <div class="active-circle"></div>
                        <span class="mobile-wave-nav__icon">{!! $item['icon'] !!}</span>
                        <span class="mobile-wave-nav__label">{{ $item['label'] }}</span>
                    </a>
                </li>
            @endforeach
        </ul>
    </div>
</nav>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const navList = document.getElementById('mobileNavList');
        const wavePath = document.querySelector('.wave-path');
        const navItems = document.querySelectorAll('.mobile-wave-nav__item');
        const navLinks = document.querySelectorAll('.mobile-wave-nav__link');

        function updateWavePath() {
            const activeLink = document.querySelector('.mobile-wave-nav__link.is-active');
            if (!activeLink || !wavePath) return;

            const item = activeLink.closest('.mobile-wave-nav__item');
            const itemIndex = parseInt(item.dataset.index);
            const itemCount = navItems.length;
            const containerWidth = navList.offsetWidth;
            const itemWidth = containerWidth / itemCount;
            
            const centerX = (itemIndex * itemWidth) + (itemWidth / 2);

            const waveWidth = itemWidth * 1.5;
            const waveHeight = 25;

            const startX = centerX - waveWidth / 2;
            const endX = centerX + waveWidth / 2;

            const path = `
                M 0,65
                L ${startX},65
                Q ${startX + 10},65 ${startX + 20},${65 - waveHeight * 0.3}
                Q ${centerX - 20},${65 - waveHeight} ${centerX},${65 - waveHeight}
                Q ${centerX + 20},${65 - waveHeight} ${endX - 20},${65 - waveHeight * 0.3}
                Q ${endX - 10},65 ${endX},65
                L ${containerWidth},65
                L ${containerWidth},65
                Z
            `;
            
            wavePath.setAttribute('d', path);
        }

        function createRipple(event, element) {
            const ripple = document.createElement('span');
            ripple.classList.add('ripple');
            element.appendChild(ripple);
            
            setTimeout(() => {
                ripple.remove();
            }, 600);
        }

   
        navLinks.forEach((link, index) => {
            link.addEventListener('click', function(e) {
                navLinks.forEach(l => l.classList.remove('is-active'));
                this.classList.add('is-active');
                
   
                updateWavePath();
                
       
                createRipple(e, this);
            });
        });

 
        updateWavePath();

        let resizeTimer;
        window.addEventListener('resize', function() {
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(function() {
                updateWavePath();
            }, 100);
        });
    });
</script>