<style>
    .brand{
        display:flex;
        align-items:center;
        gap:12px;
        text-decoration:none;
        color:inherit;
    }
    .brand-mark{
        width:44px;height:44px;border-radius:14px;
        background: linear-gradient(135deg, #006a4e, #009e73);
        position:relative;
        border:1px solid rgba(15,23,42,.12);
    }
    .brand-mark::after{
        content:"";
        width:14px;height:14px;border-radius:999px;
        background:#f42a41;
        position:absolute;
        right:8px; top:50%;
        transform:translateY(-50%);
    }
    .brand-title{ font-weight:900; line-height:1.05; }
    .brand-sub{ font-size:12px; color:rgba(15,23,42,.62); margin-top:2px; }

    /* Desktop dropdown hover */
    .dd { position:relative; }
    .dd-menu{
        position:absolute;
        left:0;
        top:100%;
        margin-top:10px;
        width:230px;
        background:#fff;
        border:1px solid rgba(15,23,42,.12);
        border-radius:14px;
        box-shadow:0 16px 30px rgba(2, 6, 23, .10);
        padding:8px;
        opacity:0;
        visibility:hidden;
        transform: translateY(6px);
        transition: all .18s ease;
        z-index: 60;
    }
    .dd:hover .dd-menu{
        opacity:1;
        visibility:visible;
        transform: translateY(0);
    }
    .dd-item{
        display:block;
        padding:10px 12px;
        border-radius:10px;
        color: rgb(51 65 85);
        text-decoration:none;
        font-weight:700;
    }
    .dd-item:hover{
        background: rgb(241 245 249);
    }
    .dd-btn{
        display:flex;
        align-items:center;
        gap:6px;
    }

    /* Mobile menu smooth open/close already handled by JS */
</style>

<nav class="sticky top-0 z-50 relative bg-white/80 backdrop-blur border-b border-slate-200">
    <div class="mx-auto max-w-6xl px-4 sm:px-6">
        <div class="flex h-16 items-center justify-between">

            
            <a href="<?php echo e(route('home')); ?>" class="brand">
                <span class="brand-mark"></span>
                <span class="flex flex-col">
                    <span class="brand-title">Bangladesh Election</span>
                    <span class="brand-sub">নির্বাচন ব্যবস্থাপনা সিস্টেম</span>
                </span>
            </a>

            
            <div class="hidden md:flex items-center gap-1 text-sm font-semibold text-slate-700">

                <a href="<?php echo e(route('home')); ?>" class="px-3 py-2 rounded-lg hover:bg-slate-100">
                    হোম
                </a>

                
                <div class="dd">
                    <button type="button" class="px-3 py-2 rounded-lg hover:bg-slate-100 dd-btn">
                        নির্বাচন <span>▾</span>
                    </button>
                    <div class="dd-menu">
                        <a href="<?php echo e(route('seats.index')); ?>" class="dd-item">সীট</a>
                        <a href="<?php echo e(route('seats.statistics')); ?>" class="dd-item">সীট পরিসংখ্যান</a>
                        <a href="<?php echo e(route('candidates.index')); ?>" class="dd-item">প্রার্থী</a>
                        <a href="<?php echo e(route('voters.index')); ?>" class="dd-item">ভোটার</a>
                    </div>
                </div>

                
                <div class="dd">
                    <button type="button" class="px-3 py-2 rounded-lg hover:bg-slate-100 dd-btn">
                        টিম <span>▾</span>
                    </button>
                    <div class="dd-menu" style="width:210px;">
                        <a href="<?php echo e(route('teams.index')); ?>" class="dd-item">টিম তালিকা</a>
                        <a href="<?php echo e(route('teams.create')); ?>" class="dd-item">নতুন টিম</a>
                    </div>
                </div>

                
                <div class="dd">
                    <button type="button" class="px-3 py-2 rounded-lg hover:bg-slate-100 dd-btn">
                        এলাকা <span>▾</span>
                    </button>
                    <div class="dd-menu" style="width:240px;">
                        <a href="<?php echo e(route('divisions.index')); ?>" class="dd-item">বিভাগ</a>
                        <a href="<?php echo e(route('districts.index')); ?>" class="dd-item">জেলা</a>
                        <a href="<?php echo e(route('upazilas.index')); ?>" class="dd-item">উপজেলা</a>
                        <a href="<?php echo e(route('cities.index')); ?>" class="dd-item">সিটি</a>
                        <a href="<?php echo e(route('wards.index')); ?>" class="dd-item">ওয়ার্ড</a>
                        <a href="<?php echo e(route('voter-areas.index')); ?>" class="dd-item">ভোটার এলাকা</a>
                    </div>
                </div>

            </div>

            
            <div class="hidden md:flex items-center gap-3">
                <?php if(auth()->guard()->check()): ?>
                    <a href="<?php echo e(route('dashboard')); ?>"
                       class="rounded-xl bg-emerald-600 px-4 py-2 text-sm font-bold text-white hover:bg-emerald-700">
                        ড্যাশবোর্ড
                    </a>

                    <a href="<?php echo e(route('profile.edit')); ?>"
                       class="rounded-xl border px-4 py-2 text-sm font-bold text-slate-700 hover:bg-slate-50">
                        প্রোফাইল
                    </a>

                    <form method="POST" action="<?php echo e(route('logout')); ?>">
                        <?php echo csrf_field(); ?>
                        <button type="submit"
                                class="rounded-xl border px-4 py-2 text-sm font-bold text-slate-700 hover:bg-slate-50">
                            লগআউট
                        </button>
                    </form>
                <?php else: ?>
                    <a href="<?php echo e(route('login')); ?>"
                       class="rounded-xl bg-emerald-600 px-4 py-2 text-sm font-bold text-white hover:bg-emerald-700">
                        লগইন
                    </a>
                    <a href="<?php echo e(route('register')); ?>"
                       class="rounded-xl border px-4 py-2 text-sm font-bold text-slate-700 hover:bg-slate-50">
                        রেজিস্টার
                    </a>
                <?php endif; ?>
            </div>

            
            <button id="menuBtn" class="md:hidden p-2 rounded-lg hover:bg-slate-100" aria-label="Menu">
                ☰
            </button>
        </div>
    </div>

    
    <div id="mobileMenu"
         class="p-6 md:hidden absolute left-0 right-0 top-full border-t bg-white shadow-lg overflow-hidden max-h-0 opacity-0 transition-all duration-300 ease-in-out">

        <a href="<?php echo e(route('home')); ?>" class="block px-3 py-2 rounded-lg hover:bg-slate-100">হোম</a>

        <div class="mt-4 text-xs font-bold text-slate-500 uppercase">নির্বাচন</div>
        <a href="<?php echo e(route('seats.index')); ?>" class="text-xs block px-3 py-2 rounded-lg hover:bg-slate-100">সীট</a>
        <a href="<?php echo e(route('seats.statistics')); ?>" class="text-xs block px-3 py-2 rounded-lg hover:bg-slate-100">সীট পরিসংখ্যান</a>
        <a href="<?php echo e(route('candidates.index')); ?>" class="text-xs block px-3 py-2 rounded-lg hover:bg-slate-100">প্রার্থী</a>
        <a href="<?php echo e(route('voters.index')); ?>" class="text-xs block px-3 py-2 rounded-lg hover:bg-slate-100">ভোটার</a>

        <div class="mt-4 text-xs font-bold text-slate-500 uppercase">টিম</div>
        <a href="<?php echo e(route('teams.index')); ?>" class="text-xs block px-3 py-2 rounded-lg hover:bg-slate-100">টিম তালিকা</a>
        <a href="<?php echo e(route('teams.create')); ?>" class="text-xs block px-3 py-2 rounded-lg hover:bg-slate-100">নতুন টিম</a>

        <div class="mt-4 text-xs font-bold text-slate-500 uppercase">এলাকা</div>
        <a href="<?php echo e(route('divisions.index')); ?>" class="text-xs block px-3 py-2 rounded-lg hover:bg-slate-100">বিভাগ</a>
        <a href="<?php echo e(route('districts.index')); ?>" class="text-xs block px-3 py-2 rounded-lg hover:bg-slate-100">জেলা</a>
        <a href="<?php echo e(route('upazilas.index')); ?>" class="text-xs block px-3 py-2 rounded-lg hover:bg-slate-100">উপজেলা</a>
        <a href="<?php echo e(route('cities.index')); ?>" class="text-xs block px-3 py-2 rounded-lg hover:bg-slate-100">সিটি</a>
        <a href="<?php echo e(route('wards.index')); ?>" class="text-xs block px-3 py-2 rounded-lg hover:bg-slate-100">ওয়ার্ড</a>
        <a href="<?php echo e(route('voter-areas.index')); ?>" class="text-xs block px-3 py-2 rounded-lg hover:bg-slate-100">ভোটার এলাকা</a>

        <div class="pt-4 mt-4 border-t flex gap-2">
            <?php if(auth()->guard()->check()): ?>
                <a href="<?php echo e(route('dashboard')); ?>"
                   class="flex-1 text-center rounded-xl bg-emerald-600 px-4 py-2 text-white font-bold">
                    ড্যাশবোর্ড
                </a>
                <a href="<?php echo e(route('profile.edit')); ?>"
                   class="flex-1 text-center rounded-xl border px-4 py-2 font-bold text-slate-700">
                    প্রোফাইল
                </a>
                <form method="POST" action="<?php echo e(route('logout')); ?>" class="flex-1">
                    <?php echo csrf_field(); ?>
                    <button type="submit"
                            class="w-full rounded-xl border px-4 py-2 font-bold">
                        লগআউট
                    </button>
                </form>
            <?php else: ?>
                <a href="<?php echo e(route('login')); ?>"
                   class="flex-1 text-center rounded-xl bg-emerald-600 px-4 py-2 text-white font-bold">
                    লগইন
                </a>
                <a href="<?php echo e(route('register')); ?>"
                   class="flex-1 text-center rounded-xl border px-4 py-2 font-bold">
                    রেজিস্টার
                </a>
            <?php endif; ?>
        </div>
    </div>

    <script>
        const btn = document.getElementById('menuBtn');
        const menu = document.getElementById('mobileMenu');

        btn.addEventListener('click', () => {
            const isOpen = menu.classList.contains('open');

            if (!isOpen) {
                menu.classList.add('open');
                menu.classList.remove('max-h-0', 'opacity-0');
                menu.classList.add('opacity-100');
                menu.style.maxHeight = menu.scrollHeight + "px";
            } else {
                menu.style.maxHeight = menu.scrollHeight + "px";
                requestAnimationFrame(() => {
                    menu.style.maxHeight = "0px";
                    menu.classList.remove('opacity-100');
                    menu.classList.add('opacity-0');
                });
                setTimeout(() => {
                    menu.classList.remove('open');
                    menu.classList.add('max-h-0');
                }, 300);
            }
        });

        window.addEventListener('resize', () => {
            if (menu.classList.contains('open')) {
                menu.style.maxHeight = menu.scrollHeight + "px";
            }
        });
    </script>

</nav>
<?php /**PATH C:\Projects\election\resources\views/layout/navbar.blade.php ENDPATH**/ ?>