{{#
    @name Header
    @desc The site header with brand logo, main navigation, and prominent SumUp voucher button
#}}

<header 
    x-data="{ mobileOpen: false, scrolled: false }"
    x-init="window.addEventListener('scroll', () => { scrolled = window.scrollY > 20 })"
    :class="scrolled ? 'bg-white/95 backdrop-blur-md shadow-xs border-b border-neutral-200/80 py-3' : 'bg-canvas border-b border-neutral-200/50 py-4'"
    class="sticky top-0 z-50 transition-all duration-200"
>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between gap-4">
            
            {{# Logo #}}
            <div class="shrink-0 flex items-center">
                <a href="/" class="flex items-center gap-3 group focus:outline-none" aria-label="The Foundation Beauty Studio Home">
                    <img 
                        src="/visuals/foundation-beauty-logo.svg" 
                        alt="The Foundation Beauty Studio" 
                        class="h-10 sm:h-12 w-auto transition-transform group-hover:scale-[1.02]" 
                    />
                </a>
            </div>

            {{# Desktop Navigation Links #}}
            <nav class="hidden lg:flex items-center gap-7 text-sm font-medium text-neutral-700">
                <a href="/" class="hover:text-accent-dark transition-colors {{ (current_uri == '/') ? 'text-accent-dark font-semibold' : '' }}">Home</a>
                <a href="/about" class="hover:text-accent-dark transition-colors {{ (current_uri == '/about') ? 'text-accent-dark font-semibold' : '' }}">About</a>
                <a href="/services" class="hover:text-accent-dark transition-colors {{ (current_uri begins_with '/services') ? 'text-accent-dark font-semibold' : '' }}">Services &amp; Pricing</a>
                <a href="/testimonials" class="hover:text-accent-dark transition-colors {{ (current_uri == '/testimonials') ? 'text-accent-dark font-semibold' : '' }}">Testimonials</a>
                <a href="/news" class="hover:text-accent-dark transition-colors {{ (current_uri begins_with '/news') ? 'text-accent-dark font-semibold' : '' }}">News</a>
                <a href="/contact" class="hover:text-accent-dark transition-colors {{ (current_uri == '/contact') ? 'text-accent-dark font-semibold' : '' }}">Contact</a>
            </nav>

            {{# Header Right CTAs #}}
            <div class="hidden sm:flex items-center gap-3">
                {{# Prominent SumUp Gift Card Link #}}
                <a 
                    href="{{ company:voucher_url }}" 
                    target="_blank" 
                    rel="noopener noreferrer"
                    class="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full border border-accent/40 bg-accent/10 hover:bg-accent/20 text-accent-dark text-xs font-semibold tracking-wide transition-all shadow-2xs"
                    title="Purchase a Gift Voucher via SumUp"
                >
                    <svg class="w-3.5 h-3.5 fill-current" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M5 5a3 3 0 015-2.236A3 3 0 0114.83 6H16a2 2 0 110 4h-5V9a1 1 0 10-2 0v1H4a2 2 0 110-4h1.17C5.06 5.687 5 5.35 5 5zm4 1V5a1 1 0 10-1.118.99A1.006 1.006 0 008 6h1zm4 0h-1V5a1 1 0 101.118.99A1.006 1.006 0 0013 6z" clip-rule="evenodd"/>
                        <path d="M9 11H3v5a2 2 0 002 2h4v-7zM11 18h4a2 2 0 002-2v-5h-6v7z"/>
                    </svg>
                    <span>Gift Cards</span>
                </a>

                {{# Book / Contact CTA #}}
                <a 
                    href="/contact" 
                    class="inline-flex items-center justify-center px-4 py-2 rounded-full bg-primary hover:bg-primary-hover text-white text-xs font-semibold tracking-wide uppercase transition-all shadow-xs"
                >
                    Book / Enquire
                </a>
            </div>

            {{# Mobile Menu Button #}}
            <div class="flex items-center gap-2 lg:hidden">
                <a 
                    href="{{ company:voucher_url }}" 
                    target="_blank" 
                    rel="noopener noreferrer"
                    class="p-2.5 rounded-full text-accent-dark hover:text-accent sm:hidden focus:outline-none focus:ring-2 focus:ring-accent/40"
                    title="Gift Cards"
                    aria-label="Purchase Gift Cards"
                >
                    <svg class="w-5 h-5 fill-current" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M5 5a3 3 0 015-2.236A3 3 0 0114.83 6H16a2 2 0 110 4h-5V9a1 1 0 10-2 0v1H4a2 2 0 110-4h1.17C5.06 5.687 5 5.35 5 5zm4 1V5a1 1 0 10-1.118.99A1.006 1.006 0 008 6h1zm4 0h-1V5a1 1 0 101.118.99A1.006 1.006 0 0013 6z" clip-rule="evenodd"/>
                        <path d="M9 11H3v5a2 2 0 002 2h4v-7zM11 18h4a2 2 0 002-2v-5h-6v7z"/>
                    </svg>
                </a>

                <button 
                    @click="mobileOpen = !mobileOpen"
                    type="button" 
                    class="p-2.5 rounded-xl text-neutral-700 hover:text-neutral-900 hover:bg-neutral-100/80 focus:outline-none focus:ring-2 focus:ring-accent/40 transition-colors"
                    aria-label="Toggle Navigation Menu"
                    :aria-expanded="mobileOpen.toString()"
                    aria-controls="mobile-navigation"
                    id="mobile-menu-button"
                >
                    <svg x-show="!mobileOpen" 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" />
                    </svg>
                    <svg x-show="mobileOpen" x-cloak 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="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>

        </div>

        {{# Mobile Dropdown Menu #}}
        <div 
            id="mobile-navigation"
            x-show="mobileOpen" 
            x-cloak
            @click.away="mobileOpen = false"
            @keydown.escape.window="mobileOpen = false"
            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="lg:hidden mt-3 pt-3 border-t border-neutral-200/80 pb-4 flex flex-col gap-1"
            role="navigation"
            aria-label="Mobile Navigation"
        >
            <a 
                @click="mobileOpen = false" 
                href="/" 
                class="px-4 py-3 rounded-xl text-base font-medium transition-all flex items-center justify-between {{ (current_uri == '/') ? 'bg-accent/15 text-accent-dark font-semibold' : 'text-neutral-800 hover:bg-neutral-100/80' }}"
            >
                <span>Home</span>
                {{ if (current_uri == '/') }}
                    <span class="w-1.5 h-1.5 rounded-full bg-accent"></span>
                {{ /if }}
            </a>

            <a 
                @click="mobileOpen = false" 
                href="/about" 
                class="px-4 py-3 rounded-xl text-base font-medium transition-all flex items-center justify-between {{ (current_uri == '/about') ? 'bg-accent/15 text-accent-dark font-semibold' : 'text-neutral-800 hover:bg-neutral-100/80' }}"
            >
                <span>About Victoria</span>
                {{ if (current_uri == '/about') }}
                    <span class="w-1.5 h-1.5 rounded-full bg-accent"></span>
                {{ /if }}
            </a>

            <a 
                @click="mobileOpen = false" 
                href="/services" 
                class="px-4 py-3 rounded-xl text-base font-medium transition-all flex items-center justify-between {{ (current_uri begins_with '/services') ? 'bg-accent/15 text-accent-dark font-semibold' : 'text-neutral-800 hover:bg-neutral-100/80' }}"
            >
                <span>Services &amp; Pricing</span>
                {{ if (current_uri begins_with '/services') }}
                    <span class="w-1.5 h-1.5 rounded-full bg-accent"></span>
                {{ /if }}
            </a>

            <a 
                @click="mobileOpen = false" 
                href="/testimonials" 
                class="px-4 py-3 rounded-xl text-base font-medium transition-all flex items-center justify-between {{ (current_uri == '/testimonials') ? 'bg-accent/15 text-accent-dark font-semibold' : 'text-neutral-800 hover:bg-neutral-100/80' }}"
            >
                <span>Testimonials</span>
                {{ if (current_uri == '/testimonials') }}
                    <span class="w-1.5 h-1.5 rounded-full bg-accent"></span>
                {{ /if }}
            </a>

            <a 
                @click="mobileOpen = false" 
                href="/news" 
                class="px-4 py-3 rounded-xl text-base font-medium transition-all flex items-center justify-between {{ (current_uri begins_with '/news') ? 'bg-accent/15 text-accent-dark font-semibold' : 'text-neutral-800 hover:bg-neutral-100/80' }}"
            >
                <span>News</span>
                {{ if (current_uri begins_with '/news') }}
                    <span class="w-1.5 h-1.5 rounded-full bg-accent"></span>
                {{ /if }}
            </a>

            <a 
                @click="mobileOpen = false" 
                href="/contact" 
                class="px-4 py-3 rounded-xl text-base font-medium transition-all flex items-center justify-between {{ (current_uri == '/contact') ? 'bg-accent/15 text-accent-dark font-semibold' : 'text-neutral-800 hover:bg-neutral-100/80' }}"
            >
                <span>Contact &amp; Book</span>
                {{ if (current_uri == '/contact') }}
                    <span class="w-1.5 h-1.5 rounded-full bg-accent"></span>
                {{ /if }}
            </a>

            <div class="pt-3 mt-2 border-t border-neutral-200/70 flex flex-col gap-2.5">
                <a 
                    href="{{ company:voucher_url }}" 
                    target="_blank" 
                    rel="noopener noreferrer"
                    class="flex items-center justify-center gap-2 py-3 rounded-full border border-accent/40 bg-accent/15 hover:bg-accent/25 text-accent-dark text-sm font-semibold transition-colors"
                >
                    <svg class="w-4 h-4 fill-current" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M5 5a3 3 0 015-2.236A3 3 0 0114.83 6H16a2 2 0 110 4h-5V9a1 1 0 10-2 0v1H4a2 2 0 110-4h1.17C5.06 5.687 5 5.35 5 5zm4 1V5a1 1 0 10-1.118.99A1.006 1.006 0 008 6h1zm4 0h-1V5a1 1 0 101.118.99A1.006 1.006 0 0013 6z" clip-rule="evenodd"/>
                        <path d="M9 11H3v5a2 2 0 002 2h4v-7zM11 18h4a2 2 0 002-2v-5h-6v7z"/>
                    </svg>
                    <span>Buy SumUp Gift Cards</span>
                </a>
                <a 
                    href="/contact" 
                    class="flex items-center justify-center py-3 rounded-full bg-primary hover:bg-primary-hover text-white text-sm font-semibold uppercase tracking-wider transition-colors shadow-xs"
                >
                    Book Appointment
                </a>

                {{# Quick studio phone & location snippet #}}
                <div class="pt-2 px-2 flex items-center justify-between text-xs text-neutral-500 border-t border-neutral-100">
                    <a href="tel:{{ company:phone }}" class="inline-flex items-center gap-1.5 font-medium text-neutral-700 hover:text-accent-dark py-1">
                        <svg class="w-3.5 h-3.5 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
                        <span>{{ company:phone }}</span>
                    </a>
                    <span class="text-neutral-400">&bull;</span>
                    <span class="text-neutral-500">Guildford High St</span>
                </div>
            </div>
        </div>

    </div>
</header>