@php
    $navPages = $navPages ?? collect();
    $cur = '/' . ltrim(request()->path() === '/' ? '' : request()->path(), '/');
    $opts = (array) ($site->options ?? []);
    $c = (array) ($site->contact ?? []);
    $social = (array) ($site->social ?? []);
    $ctaLabel = $opts['cta_label'] ?? 'Book appointment';
    $ctaUrl   = $opts['cta_url'] ?? '#contact';
@endphp
<header class="vv-header" :class="{ 'is-scrolled': scrolled }">
    {{-- top contact bar --}}
    <div class="vv-topbar">
        <div class="vs-container vv-topbar-in">
            <div class="vv-topbar-left">
                @if(!empty($c['phone']))<span><i class="fas fa-phone"></i> {{ $c['phone'] }}</span>@endif
                @if(!empty($c['email']))<span><i class="fas fa-envelope"></i> {{ $c['email'] }}</span>@endif
            </div>
            <div class="vv-topbar-right">
                <span><i class="fas fa-clock"></i> {{ $c['hours_short'] ?? 'Mon–Sat: 8am – 7pm' }}</span>
                @foreach(['facebook','instagram','youtube','twitter'] as $net)
                    @if(!empty($social[$net]))<a href="{{ $social[$net] }}" target="_blank" rel="noopener"><i class="fab fa-{{ $net }}"></i></a>@endif
                @endforeach
            </div>
        </div>
    </div>

    {{-- main bar --}}
    <div class="vv-mainbar">
        <div class="vs-container vv-mainbar-in">
            <a href="/" class="vs-logo vv-logo">
                @if($site->logoUrl())<img src="{{ $site->logoUrl() }}" alt="{{ $site->name }}">
                @else<span class="vv-logo-mark"><i class="fas fa-stethoscope"></i></span>@endif
                <span class="vv-logo-text">{{ $site->name ?: 'Our Clinic' }}</span>
            </a>
            <nav class="vv-nav" aria-label="Primary">
                @foreach($navPages as $p)
                    @php($href = $p->is_home ? '/' : '/' . $p->slug)
                    <a href="{{ $href }}" class="{{ $cur === $href ? 'is-active' : '' }}">{{ $p->title }}</a>
                @endforeach
                <a href="/portal" class="vv-portal">Client Portal</a>
            </nav>
            <a href="{{ $ctaUrl }}" class="vv-cta"><i class="fas fa-calendar-check"></i> {{ $ctaLabel }}</a>
            <button class="vv-burger" @click="menu = true" aria-label="Open menu"><i class="fas fa-bars"></i></button>
        </div>
    </div>

    {{-- mobile drawer --}}
    <div class="vs-drawer" :class="{ 'is-open': menu }" x-cloak>
        <div class="vs-drawer-overlay" @click="menu = false"></div>
        <div class="vs-drawer-panel">
            <button class="vs-drawer-close" @click="menu = false"><i class="fas fa-times"></i></button>
            <nav>
                @foreach($navPages as $p)
                    <a href="{{ $p->is_home ? '/' : '/' . $p->slug }}" @click="menu=false">{{ $p->title }}</a>
                @endforeach
                <a href="/portal" @click="menu=false">Client Portal</a>
                <a href="{{ $ctaUrl }}" class="vv-cta" @click="menu=false" style="margin-top:14px;justify-content:center;">{{ $ctaLabel }}</a>
            </nav>
        </div>
    </div>
</header>
