@php
    use Illuminate\Support\Facades\Storage;
    $logo = $siteSettings->logo;
    $businessLogoPath = public_path('assets/images/hillcrest-living-logo.png');
    $logoUrl = $logo
        ? Storage::disk($logo->disk)->url($logo->path)
        : (file_exists($businessLogoPath) ? asset('assets/images/hillcrest-living-logo.png') : null);
    $logoAlt = $logo?->alt_text ?: 'Hillcrest Living Ltd logo';
@endphp

<header
    class="sticky top-0 z-50 border-b transition-colors duration-300"
    x-data="{ mobileOpen: false, scrolled: false }"
    x-init="window.addEventListener('scroll', () => { scrolled = window.scrollY > 16 })"
    :class="scrolled ? 'border-neutral-200 bg-white/95 backdrop-blur-md' : 'border-transparent bg-transparent'"
>
    <nav class="mx-auto flex max-w-7xl items-center justify-between gap-4 px-4 py-2.5 lg:px-8" aria-label="Primary">
        <a href="{{ route('home') }}" class="flex min-h-[64px] items-center gap-2">
            @if($logoUrl)
                <img
                    src="{{ $logoUrl }}"
                    alt="{{ $logoAlt }}"
                    class="h-16 w-auto object-contain md:h-20"
                >
            @else
                <span class="font-display text-xl font-semibold tracking-wide text-[var(--color-heading)]" style="font-family: var(--font-heading);">HILLCREST LIVING LTD</span>
            @endif
        </a>

        <div class="hc-main-menu-panel hidden items-center gap-1 rounded-full px-2 py-1.5 md:flex">
            <x-site.nav-link href="{{ route('home') }}" route="home">Home</x-site.nav-link>
            <x-site.nav-link href="{{ url('/about') }}">About</x-site.nav-link>
            <x-site.nav-link href="{{ route('services.index') }}" route="services.index">Services</x-site.nav-link>
            <x-site.nav-link href="{{ route('how-it-works') }}" route="how-it-works">How it works</x-site.nav-link>
            <x-site.nav-link href="{{ route('careers.index') }}" route="careers.*">Careers</x-site.nav-link>
            <x-site.nav-link href="{{ route('contact.show') }}" route="contact.*">Contact</x-site.nav-link>
        </div>

        <div class="hidden md:block">
            <a
                href="{{ route('referral.show') }}"
                class="hc-btn-primary px-4 py-2"
            >
                Make a referral
            </a>
        </div>

        <button
            type="button"
            class="inline-flex min-h-[40px] min-w-[40px] items-center justify-center rounded-lg border border-neutral-200 bg-white text-neutral-800 shadow-sm md:hidden"
            @click="mobileOpen = !mobileOpen"
            :aria-expanded="mobileOpen.toString()"
            aria-controls="mobile-nav"
        >
            <span class="sr-only">Menu</span>
            <span x-show="!mobileOpen">☰</span>
            <span x-show="mobileOpen" x-cloak>✕</span>
        </button>
    </nav>

    <div
        id="mobile-nav"
        x-show="mobileOpen"
        x-cloak
        x-transition:enter="transition ease-out duration-220"
        x-transition:enter-start="opacity-0 -translate-y-2 scale-[0.98]"
        x-transition:enter-end="opacity-100 translate-y-0 scale-100"
        x-transition:leave="transition ease-in duration-160"
        x-transition:leave-start="opacity-100 translate-y-0 scale-100"
        x-transition:leave-end="opacity-0 -translate-y-1 scale-[0.99]"
        class="border-t border-neutral-200 bg-white/95 backdrop-blur-sm md:hidden"
    >
        <div class="flex max-h-[72vh] flex-col gap-1.5 overflow-y-auto px-4 py-3">
            <a @click="mobileOpen = false" class="hc-mobile-nav-link {{ request()->routeIs('home') ? 'hc-mobile-nav-link-active' : '' }}" href="{{ route('home') }}">Home</a>
            <a @click="mobileOpen = false" class="hc-mobile-nav-link {{ request()->is('about') ? 'hc-mobile-nav-link-active' : '' }}" href="{{ url('/about') }}">About</a>
            <a @click="mobileOpen = false" class="hc-mobile-nav-link {{ request()->routeIs('services.index') ? 'hc-mobile-nav-link-active' : '' }}" href="{{ route('services.index') }}">Services</a>
            <a @click="mobileOpen = false" class="hc-mobile-nav-link {{ request()->routeIs('how-it-works') ? 'hc-mobile-nav-link-active' : '' }}" href="{{ route('how-it-works') }}">How it works</a>
            <a @click="mobileOpen = false" class="hc-mobile-nav-link {{ request()->routeIs('careers.*') ? 'hc-mobile-nav-link-active' : '' }}" href="{{ route('careers.index') }}">Careers</a>
            <a @click="mobileOpen = false" class="hc-mobile-nav-link {{ request()->routeIs('contact.*') ? 'hc-mobile-nav-link-active' : '' }}" href="{{ route('contact.show') }}">Contact</a>
            <div class="mt-1.5 grid grid-cols-2 gap-1.5 text-sm">
                <a @click="mobileOpen = false" class="rounded-lg border border-neutral-200 px-3 py-2 font-medium text-neutral-700 hover:bg-neutral-50" href="{{ route('news.index') }}">News</a>
                <a @click="mobileOpen = false" class="rounded-lg border border-neutral-200 px-3 py-2 font-medium text-neutral-700 hover:bg-neutral-50" href="{{ url('/who-we-support') }}">Who we support</a>
                <a @click="mobileOpen = false" class="rounded-lg border border-neutral-200 px-3 py-2 font-medium text-neutral-700 hover:bg-neutral-50" href="{{ url('/testimonials') }}">Testimonials</a>
                <a @click="mobileOpen = false" class="rounded-lg border border-neutral-200 px-3 py-2 font-medium text-neutral-700 hover:bg-neutral-50" href="{{ route('downloads.index') }}">Downloads</a>
            </div>
            <a @click="mobileOpen = false" class="hc-btn-primary mt-2 px-3 py-2.5 text-center" href="{{ route('referral.show') }}">Make a referral</a>
        </div>
    </div>
</header>