@php
    $phone = config('site.phone_display');
    $phoneTel = config('site.phone_tel');
    $whatsapp = config('site.whatsapp');
    $waSvg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.435 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>';
@endphp
<header class="site-header fixed-top">
    <div class="top-bar">
        <div class="container d-flex flex-wrap justify-content-between align-items-center gap-2">
            <span class="top-bar-tagline"><i class="bi bi-patch-check me-1"></i>تصنيع وطني على حسب طلب العميل — غير مقيدين بمقاسات أو ألوان افتراضية</span>
            <div class="top-bar-contacts">
                <a href="tel:{{ $phoneTel }}" class="top-bar-link"><i class="bi bi-telephone-fill"></i><span dir="ltr" class="phone-number">{{ $phone }}</span></a>
                <a href="https://wa.me/{{ $whatsapp }}" target="_blank" rel="noopener" class="top-bar-link top-bar-wa"><span class="icon-wa">{!! $waSvg !!}</span>واتساب</a>
            </div>
        </div>
    </div>
    <nav class="navbar navbar-expand-lg navbar-custom">
        <div class="container navbar-mobile-bar">
            <a href="tel:{{ $phoneTel }}" class="mobile-icon-btn mobile-call-btn d-lg-none" aria-label="اتصال"><i class="bi bi-telephone-fill"></i></a>
            <a class="navbar-brand" href="{{ route('site.home') }}"><img src="{{ asset('site/assets/logo.png') }}" alt="{{ config('site.name') }}"></a>
            <div class="mobile-header-actions d-lg-none">
                <a href="https://wa.me/{{ $whatsapp }}" target="_blank" rel="noopener" class="mobile-icon-btn mobile-wa-btn" aria-label="واتساب"><span class="icon-wa">{!! $waSvg !!}</span></a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-label="القائمة"><span class="navbar-toggler-icon"></span></button>
            </div>
            <div class="collapse navbar-collapse" id="mainNav">
                <ul class="navbar-nav mx-auto mb-2 mb-lg-0">
                    <li class="nav-item"><a class="nav-link {{ request()->routeIs('site.home') ? 'active' : '' }}" href="{{ route('site.home') }}">الرئيسية</a></li>
                    <li class="nav-item"><a class="nav-link {{ request()->routeIs('site.about') ? 'active' : '' }}" href="{{ route('site.about') }}">من نحن</a></li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle {{ request()->routeIs('site.categories.*') ? 'active' : '' }}" href="#" role="button" data-bs-toggle="dropdown">الأقسام</a>
                        <ul class="dropdown-menu dropdown-menu-end">
                            @foreach($navCategories as $cat)
                                <li><a class="dropdown-item" href="{{ route('site.categories.show', $cat) }}">{{ $cat->name }}</a></li>
                            @endforeach
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="{{ route('site.categories.index') }}">جميع الأقسام</a></li>
                        </ul>
                    </li>
                    <li class="nav-item"><a class="nav-link {{ request()->routeIs('site.products.*') ? 'active' : '' }}" href="{{ route('site.products.index') }}">المنتجات</a></li>
                    <li class="nav-item"><a class="nav-link {{ request()->routeIs('site.blog.*') ? 'active' : '' }}" href="{{ route('site.blog.index') }}">المدونة</a></li>
                    <li class="nav-item"><a class="nav-link {{ request()->routeIs('site.quote') ? 'active' : '' }}" href="{{ route('site.quote') }}">عرض سعر</a></li>
                    <li class="nav-item"><a class="nav-link {{ request()->routeIs('site.contact') ? 'active' : '' }}" href="{{ route('site.contact') }}">تواصل معنا</a></li>
                </ul>
                <div class="navbar-actions d-flex flex-column flex-lg-row align-items-stretch align-items-lg-center gap-2">
                    <a href="tel:{{ $phoneTel }}" class="btn btn-call d-none d-lg-inline-flex"><i class="bi bi-telephone-fill"></i><span dir="ltr" class="phone-number">{{ $phone }}</span></a>
                    <a href="https://wa.me/{{ $whatsapp }}" target="_blank" rel="noopener" class="btn btn-wa d-none d-lg-inline-flex"><span class="icon-wa">{!! $waSvg !!}</span>واتساب</a>
                    <a href="{{ route('site.quote') }}" class="btn btn-quote">اطلب عرض سعر</a>
                </div>
            </div>
        </div>
    </nav>
</header>