@php
    $primaryBranch = ($siteData?->branches ?? [])[0] ?? null;
    $contactEmail = $siteData?->email ?: ($primaryBranch['email'] ?? '');
    $contactPhone = $siteData?->phone ?: ($primaryBranch['phone'] ?? '');
    $contactAddress = $siteData?->getTranslation('address', app()->getLocale(), false)
        ?: $siteData?->getTranslation('address', 'en', false)
        ?: ($primaryBranch['address'] ?? '');
    $navLinks = [
        ['route' => 'home', 'label' => trans('site.nav.home')],
        ['route' => 'about', 'label' => trans('site.nav.about')],
        ['route' => 'services', 'label' => trans('site.nav.services')],
        ['route' => 'clinic.search', 'label' => trans('site.nav.doctors')],
        ['route' => 'before-after', 'label' => trans('site.nav.before_after')],
        ['route' => 'blog.index', 'label' => trans('site.nav.blog')],
        ['route' => 'contact', 'label' => trans('site.nav.contact')],
    ];
@endphp
<!-- Mobile Menu -->
<div class="vs-menu-wrapper">
    <div class="vs-menu-area text-center">
        <button class="vs-menu-toggle"><i class="fal fa-times"></i></button>
        <div class="mobile-logo">
            <a href="{{ route('home') }}"><img src="{{ asset('assets_web/img/logo.png') }}" class="logoimg" loading="lazy" alt="{{ $siteData?->name ?? 'BST Clinics' }}"></a>
        </div>

        <div class="vs-mobile-menu">
            <ul>
                @foreach ($navLinks as $link)
                    <li><a href="{{ route($link['route']) }}" class="{{ request()->routeIs($link['route']) ? 'active-menu' : '' }}">{{ $link['label'] }}</a></li>
                @endforeach
            </ul>
            <ul>
                <li>
                    <div class="dropdown">
                        <a href="#" class="langmob dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fal fa-globe"></i> {{ strtoupper(app()->getLocale()) }}
                        </a>
                        <div class="dropdown-menu">
                            @foreach(LaravelLocalization::getSupportedLocales() as $localeCode => $properties)
                                <a class="dropdown-item @if($localeCode === app()->getLocale()) active @endif" rel="alternate" hreflang="{{ $localeCode }}" href="{{ LaravelLocalization::getLocalizedURL($localeCode, null, [], true) }}">
                                    {{ $properties['native'] }}
                                </a>
                            @endforeach
                        </div>
                    </div>
                </li>
                <li>
                    <a href="{{ route('appointment') }}" class="vs-btn style3 mt-2">
                        {{ trans('site.nav.appointment') }}
                        <i class="fal fa-calendar-alt"></i>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

<!-- Popup Search Box -->
<div class="popup-search-box d-none d-lg-block">
    <button class="searchClose border-theme text-theme"><i class="fal fa-times"></i></button>
    <form action="{{ route('search') }}" method="GET">
        <input type="search" name="q" required minlength="2" class="border-theme" placeholder="{{ trans('site.search_placeholder') }}">
        <button type="submit"><i class="fal fa-search"></i></button>
    </form>
</div>

<!-- Header Area -->
<header class="header-wrapper header-layout1">
    <div class="header-top bg-title py-2 d-none d-md-block">
        <div class="container container-style1 py-1">
            <div class="row justify-content-center justify-content-xl-between">
                <div class="col-auto">
                    <ul class="header-top-info list-unstyled m-0">
                        @if ($contactEmail)
                            <li><i class="far fa-envelope"></i><a href="mailto:{{ $contactEmail }}" class="text-reset">{{ $contactEmail }}</a></li>
                        @endif
                        @if ($contactAddress)
                            <li><i class="far fa-map-marker-alt"></i>{{ $contactAddress }}</li>
                        @endif
                        @php($topBarHours = ($siteData ?? new \App\Models\Site\SiteData())->visitingHoursForDisplay()[0] ?? null)
                        @if ($topBarHours)
                            <li><i class="far fa-clock"></i>{{ $topBarHours['days'] }}: {{ $topBarHours['time'] }}</li>
                        @endif
                    </ul>
                </div>
                <div class="col-auto d-none d-xxl-block">
                    <ul class="head-top-links text-end">
                        <li>
                            <ul class="header-social">
                                @if (!empty($siteData?->facebook))
                                    <li><a href="{{ $siteData->facebook }}" target="_blank" rel="noopener"><i class="fab fa-facebook-f"></i></a></li>
                                @endif
                                @if (!empty($siteData?->instagram))
                                    <li><a href="{{ $siteData->instagram }}" target="_blank" rel="noopener"><i class="fab fa-instagram"></i></a></li>
                                @endif
                                @if (!empty($siteData?->linkedin))
                                    <li><a href="{{ $siteData->linkedin }}" target="_blank" rel="noopener"><i class="fab fa-linkedin-in"></i></a></li>
                                @endif
                                @if (!empty($siteData?->twitter))
                                    <li><a href="{{ $siteData->twitter }}" target="_blank" rel="noopener"><i class="fab fa-x-twitter"></i></a></li>
                                @endif
                            </ul>
                        </li>
                        <li>
                            <div class="dropdown">
                                <a class="dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="fal fa-globe"></i> {{ LaravelLocalization::getSupportedLocales()[app()->getLocale()]['native'] ?? strtoupper(app()->getLocale()) }}
                                </a>
                                <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink1">
                                    @foreach(LaravelLocalization::getSupportedLocales() as $localeCode => $properties)
                                        <li>
                                            <a class="dropdown-item @if($localeCode === app()->getLocale()) active @endif" rel="alternate" hreflang="{{ $localeCode }}" href="{{ LaravelLocalization::getLocalizedURL($localeCode, null, [], true) }}">
                                                {{ $properties['native'] }}
                                            </a>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="sticky-wrap">
        <div class="sticky-active">
            <div class="header-main">
                <div class="container container-style1 position-relative">
                    <div class="row align-items-center justify-content-between">
                        <div class="col-auto">
                            <div class="header1-logo py-2">
                                <a href="{{ route('home') }}"><img src="{{ asset('assets_web/img/logo.png') }}" class="logoimg" loading="lazy" alt="{{ $siteData?->name ?? 'BST Clinics' }}"></a>
                            </div>
                        </div>
                        <div class="col text-end text-lg-center">
                            <nav class="main-menu menu-style1 d-none d-lg-block">
                                <ul>
                                    @foreach ($navLinks as $link)
                                        <li><a href="{{ route($link['route']) }}" class="{{ request()->routeIs($link['route']) ? 'active-menu' : '' }}">{{ $link['label'] }}</a></li>
                                    @endforeach
                                </ul>
                            </nav>
                            <button class="vs-menu-toggle d-inline-block d-lg-none"><i class="fas fa-bars"></i></button>
                        </div>
                        <div class="col-auto gap-3 d-none d-lg-flex">
                            <div class="dropdown">
                                <a href="#" class="icon-btn1 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="fal fa-globe"></i> {{ strtoupper(app()->getLocale()) }}
                                </a>
                                <ul class="dropdown-menu">
                                    @foreach(LaravelLocalization::getSupportedLocales() as $localeCode => $properties)
                                        <li>
                                            <a class="dropdown-item @if($localeCode === app()->getLocale()) active @endif" rel="alternate" hreflang="{{ $localeCode }}" href="{{ LaravelLocalization::getLocalizedURL($localeCode, null, [], true) }}">
                                                {{ $properties['native'] }}
                                            </a>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                            <a href="{{ route('search') }}" class="icon-btn style3 searchBoxTggler header-1" aria-label="{{ trans('site.search.title') }}"><i class="far fa-search"></i></a>
                            @auth('web')
                                @include('web_site.partials.notification-bell')
                            @endauth
                        </div>
                        <div class="col-auto d-none-xxxl header-btn1">
                            <a href="{{ route('appointment') }}" class="vs-btn style2">{{ trans('site.nav.appointment') }}<i class="fal fa-calendar-alt"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>