{{ $headerConfig := .Site.Params.header }}
<div class="mobile-menu-wrapper">
    <input type="checkbox" id="nav-toggle" class="nav-toggle">
    <header class="fixed w-full top-0 z-50 {{ with $headerConfig.background }}{{ . }}{{ else }}bg-white/80 backdrop-blur-sm{{ end }} {{ with $headerConfig.border }}{{ . }}{{ else }}border-b border-gray-100{{ end }}">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
            <nav class="flex items-center justify-between h-20">
                <!-- Logo and Title -->
                <a href="{{ .Site.BaseURL }}" class="flex items-center space-x-4">
                    {{ with $headerConfig.logo }}
                        <img src="{{ .src | relURL }}" alt="{{ $.Site.Title }}" class="{{ with .class }}{{ . }}{{ else }}h-12{{ end }}">
                    {{ else }}
                        <span class="text-3xl font-bold text-gray-900">{{ .Site.Title }}</span>
                    {{ end }}
                    {{ if .Site.Title }}
                        <span class="text-3xl font-semibold text-gray-800">{{ .Site.Title }}</span>
                    {{ end }}
                </a>

                <!-- Navigation -->
                <div class="hidden md:flex items-center {{ with $headerConfig.menu.spacing }}{{ . }}{{ else }}space-x-8{{ end }}">
                    {{ range .Site.Menus.main }}
                        <a href="{{ .URL }}" class="{{ with $headerConfig.menu.linkClass }}{{ . }}{{ else }}text-base text-gray-900 hover:text-primary-600 font-bold transition duration-200{{ end }}">{{ .Name }}</a>
                    {{ end }}
                </div>

                <!-- CTA Buttons -->
                {{ if not $headerConfig.hideButtons }}
                <div class="hidden md:flex items-center space-x-4">
                    {{ with $headerConfig.buttons.signIn }}
                    <a href="{{ .url | default "#" }}" class="{{ with .class }}{{ . }}{{ else }}inline-flex items-center justify-center px-6 py-3 rounded-lg font-bold transition duration-200 ease-in-out border-2 border-gray-200 hover:border-primary-600 hover:text-primary-600{{ end }}">
                        {{ .text | default "Sign in" }}
                    </a>
                    {{ end }}
                    
                    {{ with $headerConfig.buttons.getStarted }}
                    <a href="{{ .url | default "#" }}" class="{{ with .class }}{{ . }}{{ else }}inline-flex items-center justify-center px-6 py-3 rounded-lg font-bold transition duration-200 ease-in-out bg-primary-600 text-white hover:bg-primary-700 hover:scale-105{{ end }}">
                        {{ .text | default "Get Started" }}
                    </a>
                    {{ end }}
                </div>
                {{ end }}

                <!-- Mobile Menu Toggle -->
                <div class="md:hidden">
                    <label for="nav-toggle" class="p-2 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-600 focus:ring-offset-2 transition-colors cursor-pointer">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                        </svg>
                    </label>
                </div>
            </nav>
        </div>

        <!-- Mobile Menu -->
        <div class="nav-content md:hidden w-full fixed left-0 right-0 top-20 bg-white border-t border-gray-100 shadow-lg">
            <div class="w-full px-6 py-4">
                {{ range .Site.Menus.main }}
                    <a href="{{ .URL }}" class="{{ with $headerConfig.menu.mobileLinkClass }}{{ . }}{{ else }}block text-xl text-gray-900 hover:text-primary-600 font-bold transition duration-200 py-2{{ end }}">{{ .Name }}</a>
                {{ end }}
                
                {{ if not $headerConfig.hideButtons }}
                <div class="pt-4 space-y-4">
                    {{ with $headerConfig.buttons.signIn }}
                    <a href="{{ .url | default "#" }}" class="{{ with .mobileClass }}{{ . }}{{ else }}block text-center px-6 py-3 rounded-lg font-bold transition duration-200 ease-in-out border-2 border-gray-200 hover:border-primary-600 hover:text-primary-600{{ end }}">
                        {{ .text | default "Sign in" }}
                    </a>
                    {{ end }}
                    
                    {{ with $headerConfig.buttons.getStarted }}
                    <a href="{{ .url | default "#" }}" class="{{ with .mobileClass }}{{ . }}{{ else }}block text-center px-6 py-3 rounded-lg font-bold transition duration-200 ease-in-out bg-primary-600 text-white hover:bg-primary-700 hover:scale-105{{ end }}">
                        {{ .text | default "Get Started" }}
                    </a>
                    {{ end }}
                </div>
                {{ end }}
            </div>
        </div>
    </header>

    <style>
        .mobile-menu-wrapper {
            position: relative;
        }
        .nav-toggle {
            display: none;
        }
        .nav-content {
            display: none;
        }
        .nav-toggle:checked ~ header .nav-content {
            display: block;
        }
    </style>
</div>