{{$currentColumn := .CurrentColumn}}
<nav class="bg-primary shadow-lg sticky top-0 z-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
            <div class="flex items-center">
                <a href="/" class="flex items-center text-white">
                    <svg class="w-8 h-8 mr-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <circle cx="5" cy="19" r="3"/>
                        <circle cx="19" cy="19" r="3"/>
                        <path d="M5 16l3-9h8l3 9"/>
                        <path d="M8 10l-2 6M16 10l2 6"/>
                    </svg>
                    <span class="text-xl font-bold tracking-wide">
                        {{if .Site}}{{.Site.Title}}{{else}}TRICYCLE{{end}}
                    </span>
                </a>
            </div>
            <div class="hidden md:flex items-center space-x-8">
                <a href="/" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition {{if eq .Type "home"}}text-white bg-gray-700{{end}}">
                    Home
                </a>
                {{range .Columns}}
                {{if eq .Slug "products"}}
                <div class="relative group">
                    <a href="/{{.Slug}}" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition {{if and $currentColumn (eq $currentColumn.Id .Id)}}text-white bg-gray-700{{end}}">
                        {{.Name}}
                    </a>
                    <div class="absolute left-0 mt-0 w-56 bg-white rounded-md shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200">
                        <div class="py-1">
                            <a href="/cargo-electric" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Cargo Electric</a>
                            <a href="/cargo-fuel" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Cargo Fuel</a>
                            <a href="/agri-electric" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Agricultural Electric</a>
                            <a href="/agri-fuel" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Agricultural Fuel</a>
                            <a href="/hybrid" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Hybrid Models</a>
                        </div>
                    </div>
                </div>
                {{else}}
                <a href="/{{.Slug}}" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition {{if and $currentColumn (eq $currentColumn.Id .Id)}}text-white bg-gray-700{{end}}">
                    {{.Name}}
                </a>
                {{end}}
                {{end}}
                <a href="/contact" class="bg-accent hover:bg-accent-hover text-white px-4 py-2 rounded-md text-sm font-medium transition">
                    Get Quote
                </a>
            </div>
            <div class="md:hidden flex items-center">
                <button id="mobile-menu-btn" class="text-gray-300 hover:text-white p-2">
                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                    </svg>
                </button>
            </div>
        </div>
    </div>
    <div id="mobile-menu" class="hidden md:hidden bg-primary border-t border-gray-700">
        <div class="px-2 pt-2 pb-3 space-y-1">
            <a href="/" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">
                Home
            </a>
            {{range .Columns}}
            <a href="/{{.Slug}}" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">
                {{.Name}}
            </a>
            {{end}}
            <a href="/contact" class="bg-accent text-white block px-3 py-2 rounded-md text-base font-medium mt-4">
                Get Quote
            </a>
        </div>
    </div>
</nav>