{{-- ECA-style two-row header --}}
@php
$lc = ['locale' => app()->getLocale()];
$routeName = Route::currentRouteName();
$contactUrl = route('site.contact', $lc);
$accountRequestsUrl = (($customerUnreadNotifications ?? 0) > 0 && ($customerNotificationsUrl ?? null))
    ? $customerNotificationsUrl
    : route('site.account.requests', array_merge($lc, ['tab' => 'requests']));
$trackUrl = route('site.repair-tracking.index', $lc);
$authUser = auth()->user();
$accountAvatarUrl = $authUser
? (\App\Support\UserAvatar::url($authUser->avatar) ?: \App\Support\UserAvatar::fallbackUrl((int) $authUser->id))
: null;
$accountInitial = mb_substr((string) ($authUser?->name ?: $authUser?->mobile ?: '?'), 0, 1);
$navProductsActive = site_nav_products_active();
$navCategoriesActive = site_nav_categories_active();
$phone = $headerPhone ?? null;
$phoneHref = $headerPhoneHref ?? null;
$officeOnline = (bool) ($headerOfficeOnline ?? false);
$hasCategories = site_feature_enabled('categories')
    && isset($headerCategories)
    && $headerCategories->isNotEmpty();
$hasBlog = site_feature_enabled('articles_blog');
$hasNews = site_feature_enabled('news');
$showsProducts = site_shows_products();
$showsServices = site_shows_services();
$showsTracking = site_shows_tracking();
$menu = $rayanHeaderMenu ?? [
    'catalog' => [],
    'columns' => [],
    'featuredId' => null,
    'products' => [],
    'services' => [],
    'articles' => [],
    'news' => [],
    'productsIndexUrl' => $showsProducts ? route('site.products.index', $lc) : null,
    'servicesIndexUrl' => $showsServices ? route('site.services.index', $lc) : null,
    'blogIndexUrl' => $hasBlog ? route('site.blog.index', $lc) : null,
    'newsIndexUrl' => $hasNews ? route('site.news.index', $lc) : null,
];
@endphp

<div
    x-data="siteHeader()"
    x-ref="headerRoot"
    data-featured-id="{{ $menu['featuredId'] ?? '' }}"
    @keydown.escape.window="closeAll()"
    class="eca-header-shell">
    {{-- Top utility bar: scrolls away --}}
    <div class="eca-topbar">
        <div class="site-container">
            <div class="eca-topbar__inner">
                <div class="eca-topbar__meta">
                    @if ($phone && $phoneHref)
                    <a href="{{ $phoneHref }}" class="eca-topbar__phone" dir="ltr">
                        <x-site.svg-icon name="contact_us" class="h-3.5 w-3.5 shrink-0 opacity-70" />
                        <span>{{ $phone }}</span>
                    </a>
                    @endif
                    <span class="eca-topbar__hours">
                        @if ($officeOnline)
                       
                        <span class="hidden sm:inline eca-topbar__hours-sep">·</span>
                        @endif
                        <span class="{{ $officeOnline ? 'hidden sm:inline' : '' }}">{{ __('site.topbar_hours') }}</span>
                    </span>
                </div>
                <div class="eca-topbar__ctas">
                    @feature('header.language')
                    <x-site.language-switch class="eca-topbar__langs" />
                    @endfeature
                   
                </div>
            </div>
        </div>
    </div>

    {{-- Sticky main header --}}
    <div class="eca-header">
        {{-- Row 1: logo | search | actions --}}
        <div class="site-container">
            <div class="eca-header__row">
                <div class="flex min-w-0 shrink-0 items-center">
                    <x-site.logo class="min-w-0 max-w-[min(100%,12rem)] sm:max-w-none" />
                </div>

                @feature('header.search')
                <button
                    type="button"
                    class="eca-header-search hidden min-w-0 desktop:flex"
                    @click="openSearch()"
                    aria-haspopup="dialog"
                    aria-controls="site-search-input">
                    <x-site.svg-icon name="search" class="h-6 w-6 shrink-0 text-brand-muted" />
                    <span class="truncate">{{ site_profile()->label('search_placeholder', __('site.search_placeholder')) }}</span>
                </button>
                @endfeature

                <div class="flex items-center gap-1 rtl:gap-reverse sm:gap-2">
                    @feature('header.search')
                    <button
                        type="button"
                        class="eca-header-icon desktop:hidden"
                        @click="openSearch()"
                        aria-label="{{ __('site.search_trigger') }}">
                        <x-site.svg-icon name="search" class="h-6 w-6" />
                    </button>
                    @endfeature

                    <a href="{{ site_whatsapp_url() }}" target="_blank" rel="noopener" class="eca-header-icon hidden sm:inline-flex" title="{{ __('site.cta_whatsapp') }}">
                        <x-site.svg-icon name="socials" class="h-6 w-6 text-emerald-600" />
                    </a>

                    <a href="{{ $contactUrl }}" class="eca-header-icon hidden sm:inline-flex" title="{{ __('site.nav_contact') }}">
                        <x-site.svg-icon name="contact_us" class="h-6 w-6" />
                    </a>

                    <div class="relative hidden desktop:block">
                        @auth
                        <a
                            href="{{ $accountRequestsUrl }}"
                            @class([ 'eca-header-icon eca-header-icon--account inline-flex w-auto max-w-[7rem] gap-1.5 px-2 sm:max-w-[9rem]' , 'eca-header-icon--account-active'=> request()->routeIs('site.account.*'),
                            ])
                            title="{{ __('site.auth_account') }}"
                            aria-label="{{ __('site.auth_account') }}">
                            @if (($customerUnreadNotifications ?? 0) > 0)
                                <span class="eca-header-icon__badge" aria-hidden="true">{{ $customerUnreadNotifications > 9 ? '9+' : $customerUnreadNotifications }}</span>
                            @endif
                            @if ($accountAvatarUrl)
                            <img src="{{ $accountAvatarUrl }}" alt="" class="eca-header-icon__avatar" data-account-avatar />
                            @else
                            <span class="eca-header-icon__avatar eca-header-icon__avatar--initial" data-account-avatar-fallback aria-hidden="true">{{ $accountInitial }}</span>
                            @endif
                            <span class="hidden truncate text-xs font-semibold sm:inline">{{ $authUser->name ?: $authUser->mobile }}</span>
                        </a>
                        @else
                        @feature('header.login')
                        <button
                            type="button"
                            class="eca-header-icon inline-flex"
                            @click="$store.siteAuth.show()"
                            title="{{ __('site.auth_login') }}">
                            <x-site.svg-icon name="login" class="h-6 w-6" />
                            <span class="sr-only">{{ __('site.auth_login') }}</span>
                        </button>
                        @endfeature
                        @endauth
                    </div>

                    @feature('header.theme')
                    <button
                        type="button"
                        class="eca-header-icon  inline-flex"
                        @click="$store.siteTheme.toggle()"
                        :aria-pressed="(!$store.siteTheme.isDark).toString()"
                        :title="$store.siteTheme.isDark ? '{{ __('site.theme_light') }}' : '{{ __('site.theme_dark') }}'">
                        <x-site.svg-icon x-show="$store.siteTheme.isDark" x-cloak name="light" class="h-6 w-6" />
                        <x-site.svg-icon x-show="!$store.siteTheme.isDark" name="dark" class="h-6 w-6" />
                    </button>
                    @endfeature

                    <button
                        type="button"
                        class="eca-header-icon desktop:hidden"
                        @click="toggleMobile()"
                        :aria-expanded="mobileOpen.toString()"
                        aria-controls="mobile-site-nav"
                        aria-label="{{ __('site.nav_menu') }}">
                        <x-site.svg-icon name="bar" class="h-6 w-6" />
                    </button>
                </div>
            </div>
        </div>

        {{-- Row 2: main page nav (desktop) --}}
        <div class="eca-nav-bar font-sans">
            <div class="site-container">
                <nav class="eca-nav-bar__track" aria-label="{{ __('site.nav_menu') }}">
                    <a
                        href="{{ route('site.home', $lc) }}"
                        @class(['eca-nav-bar__link', 'eca-nav-bar__link--active'=> request()->routeIs('site.home')])
                        >
                        {{ __('site.nav_home') }}
                    </a>
                    @if ($hasCategories && $menu['catalog'] !== [])
                    <div
                        class="eca-nav-bar__item"
                        data-cchp-flyout="categories"
                        @mouseenter="openFlyout('categories')"
                        @mouseleave="closeFlyoutSoon()"
                    >
                        <button
                            type="button"
                            @class([ 'eca-nav-bar__link eca-nav-bar__link--mega' , 'eca-nav-bar__link--active'=> $navCategoriesActive,
                            ])
                            :class="{ 'eca-nav-bar__link--active': dropdown === 'categories' }"
                            @click="toggleFlyout('categories')"
                            :aria-expanded="(dropdown === 'categories').toString()"
                            aria-haspopup="true"
                            aria-controls="rayan-mega-categories"
                        >
                            <span>{{ __('site.browse_categories') }}</span>
                            <span class="cchp-nav__chevron" aria-hidden="true"></span>
                        </button>
                    </div>
                    @endif
                    @if ($showsProducts)
                    <div
                        class="eca-nav-bar__item"
                        data-cchp-flyout="products"
                        @mouseenter="openFlyout('products')"
                        @mouseleave="closeFlyoutSoon()"
                    >
                        <button
                            type="button"
                            @class(['eca-nav-bar__link eca-nav-bar__link--mega', 'eca-nav-bar__link--active'=> $navProductsActive])
                            :class="{ 'eca-nav-bar__link--active': dropdown === 'products' }"
                            @click="toggleFlyout('products')"
                            :aria-expanded="(dropdown === 'products').toString()"
                            aria-haspopup="true"
                            aria-controls="rayan-mega-products"
                        >
                            <span>{{ __('site.nav_products') }}</span>
                            <span class="cchp-nav__chevron" aria-hidden="true"></span>
                        </button>
                    </div>
                    @endif
                    @if ($showsServices)
                    <div
                        class="eca-nav-bar__item"
                        data-cchp-flyout="services"
                        @mouseenter="openFlyout('services')"
                        @mouseleave="closeFlyoutSoon()"
                    >
                        <button
                            type="button"
                            @class(['eca-nav-bar__link eca-nav-bar__link--mega', 'eca-nav-bar__link--active'=> request()->routeIs('site.services.*')])
                            :class="{ 'eca-nav-bar__link--active': dropdown === 'services' }"
                            @click="toggleFlyout('services')"
                            :aria-expanded="(dropdown === 'services').toString()"
                            aria-haspopup="true"
                            aria-controls="rayan-mega-services"
                        >
                            <span>{{ __('site.nav_services') }}</span>
                            <span class="cchp-nav__chevron" aria-hidden="true"></span>
                        </button>
                    </div>
                    @endif

                    @if ($hasBlog)
                    <div
                        class="eca-nav-bar__item"
                        data-cchp-flyout="articles"
                        @mouseenter="openFlyout('articles')"
                        @mouseleave="closeFlyoutSoon()"
                    >
                        <button
                            type="button"
                            @class(['eca-nav-bar__link eca-nav-bar__link--mega', 'eca-nav-bar__link--active'=> request()->routeIs('site.blog.*')])
                            :class="{ 'eca-nav-bar__link--active': dropdown === 'articles' }"
                            @click="toggleFlyout('articles')"
                            :aria-expanded="(dropdown === 'articles').toString()"
                            aria-haspopup="true"
                            aria-controls="rayan-mega-articles"
                        >
                            <span>{{ __('site.nav_blog') }}</span>
                              <span class="cchp-nav__chevron" aria-hidden="true"></span>
                        </button>
                    </div>
                    @endif
                    @if ($hasNews)
                    <div
                        class="eca-nav-bar__item"
                        data-cchp-flyout="news"
                        @mouseenter="openFlyout('news')"
                        @mouseleave="closeFlyoutSoon()"
                    >
                        <button
                            type="button"
                            @class(['eca-nav-bar__link eca-nav-bar__link--mega', 'eca-nav-bar__link--active'=> request()->routeIs('site.news.*')])
                            :class="{ 'eca-nav-bar__link--active': dropdown === 'news' }"
                            @click="toggleFlyout('news')"
                            :aria-expanded="(dropdown === 'news').toString()"
                            aria-haspopup="true"
                            aria-controls="rayan-mega-news"
                        >
                            <span>{{ __('site.nav_news') }}</span>
                            <span class="cchp-nav__chevron" aria-hidden="true"></span>
                        </button>
                    </div>
                    @endif
                    <a
                        href="{{ route('site.faq', $lc) }}"
                        @class(['eca-nav-bar__link', 'eca-nav-bar__link--active'=> request()->routeIs('site.faq')])
                        >
                        {{ __('site.nav_faq') }}
                    </a>
                    @if ($showsTracking)
                    <a
                        href="{{ $trackUrl }}"
                        @class(['eca-nav-bar__link', 'eca-nav-bar__link--active'=> request()->routeIs('site.repair-tracking.*')])
                    >
                        {{ __('site.cta_track') }}
                    </a>
                    @endif
                    <a
                        href="{{ route('site.contact', $lc) }}"
                        @class(['eca-nav-bar__link', 'eca-nav-bar__link--active'=> request()->routeIs('site.contact')])
                        >
                        {{ __('site.nav_contact') }}
                    </a>
                </nav>
            </div>
        </div>

        @if ($hasCategories && $menu['catalog'] !== [])
        <x-site.header-mega-panel name="categories" id="rayan-mega-categories">
            <div class="cchp-mega__grid cchp-mega__grid--categories">
                <nav class="cchp-mega__col cchp-mega__col--primary" aria-label="{{ __('site.browse_categories') }}">
                    <ul class="cchp-mega__primary-list cchp-mega__primary-list--cards">
                        @foreach ($menu['catalog'] as $item)
                            <li>
                                <a
                                    href="{{ $item['url'] }}"
                                    class="cchp-mega__primary-card"
                                    :class="{ 'is-active': featuredId === {{ (int) $item['id'] }} }"
                                    @mouseenter="featuredId = {{ (int) $item['id'] }}"
                                    @focus="featuredId = {{ (int) $item['id'] }}"
                                >
                                    <span class="cchp-mega__primary-icon" aria-hidden="true">
                                        @if ($item['image'])
                                            <img src="{{ $item['image'] }}" alt="" />
                                        @else
                                            <span class="cchp-mega__primary-icon-fallback"></span>
                                        @endif
                                    </span>
                                    <span class="cchp-mega__primary-body">
                                        <span class="cchp-mega__primary-title">{{ $item['title'] }}</span>
                                        @if ($item['excerpt'] !== '')
                                            <span class="cchp-mega__primary-desc">{{ $item['excerpt'] }}</span>
                                        @endif
                                    </span>
                                    <span class="cchp-mega__primary-arrow" aria-hidden="true">
                                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
                                            <path d="M9.5 3.5 5 8l4.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg>
                                    </span>
                                </a>
                            </li>
                        @endforeach
                    </ul>
                    <a
                        href="{{ $menu['industriesIndexUrl'] ?? route('site.products.index', $lc) }}"
                        class="cchp-mega__more cchp-mega__more--utility"
                    >
                        {{ $menu['categoriesMoreLabel'] ?? __('site.mega_view_all_categories') }}
                    </a>
                </nav>

                <section class="cchp-mega__col cchp-mega__col--preview" aria-live="polite">
                    @foreach ($menu['catalog'] as $item)
                        <div
                            class="cchp-mega__preview-panel"
                            x-show="featuredId === {{ (int) $item['id'] }}"
                            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-1"
                            x-cloak
                        >
                            <div class="cchp-mega__preview-hero">
                                @if ($item['image'])
                                    <img src="{{ $item['image'] }}" alt="" class="cchp-mega__preview-img" />
                                @else
                                    <div class="cchp-mega__preview-img cchp-mega__preview-img--empty" aria-hidden="true"></div>
                                @endif
                                <div class="cchp-mega__preview-intro">
                                    <h5 class="cchp-mega__preview-title">{{ $item['title'] }}</h5>
                                    @if ($item['excerpt'] !== '')
                                        <p class="cchp-mega__preview-excerpt">{{ $item['excerpt'] }}</p>
                                    @endif
                                    <a href="{{ $item['url'] }}" class="cchp-mega__preview-cta">
                                        {{ __('site.mega_view_category', ['title' => $item['title']]) }}
                                        <span class="cchp-mega__preview-cta-arrow" aria-hidden="true">→</span>
                                    </a>
                                </div>
                            </div>

                            @if ($item['children'] !== [])
                                <ul class="cchp-mega__preview-links">
                                    @foreach ($item['children'] as $child)
                                        <li>
                                            <a href="{{ $child['url'] }}" class="cchp-mega__preview-child">
                                                <span class="cchp-mega__preview-child-title">{{ $child['title'] }}</span>
                                                <span class="cchp-mega__preview-child-arrow" aria-hidden="true">
                                                    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true">
                                                        <path d="M9.5 3.5 5 8l4.5 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                                    </svg>
                                                </span>
                                            </a>
                                        </li>
                                    @endforeach
                                </ul>
                            @endif
                        </div>
                    @endforeach
                </section>
            </div>
        </x-site.header-mega-panel>
        @endif

        @if ($showsProducts)
        <x-site.header-mega-panel name="products" id="rayan-mega-products">
            <div class="cchp-mega__grid cchp-mega__grid--news">
                @include('partials.site.header-mega-cards', [
                    'heading' => __('site.nav_products'),
                    'items' => $menu['products'],
                    'empty' => __('site.mega_products_empty'),
                    'moreUrl' => $menu['productsIndexUrl'],
                ])
            </div>
        </x-site.header-mega-panel>
        @endif

        @if ($showsServices)
        <x-site.header-mega-panel name="services" id="rayan-mega-services">
            <div class="cchp-mega__grid cchp-mega__grid--news">
                @include('partials.site.header-mega-cards', [
                    'heading' => __('site.nav_services'),
                    'items' => $menu['services'],
                    'empty' => __('site.mega_services_empty'),
                    'moreUrl' => $menu['servicesIndexUrl'],
                ])
            </div>
        </x-site.header-mega-panel>
        @endif

        @if ($hasBlog)
        <x-site.header-mega-panel name="articles" id="rayan-mega-articles">
            <div class="cchp-mega__grid cchp-mega__grid--news">
                @include('partials.site.header-mega-cards', [
                    'heading' => __('site.mega_articles'),
                    'items' => $menu['articles'],
                    'empty' => __('site.mega_articles_empty'),
                    'moreUrl' => $menu['blogIndexUrl'],
                ])
            </div>
        </x-site.header-mega-panel>
        @endif

        @if ($hasNews)
        <x-site.header-mega-panel name="news" id="rayan-mega-news">
            <div class="cchp-mega__grid cchp-mega__grid--news">
                @include('partials.site.header-mega-cards', [
                    'heading' => __('site.nav_news'),
                    'items' => $menu['news'],
                    'empty' => __('site.mega_news_empty'),
                    'moreUrl' => $menu['newsIndexUrl'],
                ])
            </div>
        </x-site.header-mega-panel>
        @endif

        {{-- Mobile panel --}}
        <div id="mobile-site-nav" class="border-t border-brand-border   desktop:hidden" x-show="mobileOpen" x-cloak>
            <nav class="site-container py-4 text-sm" role="navigation">
                <div class="mb-3 flex flex-wrap gap-2 px-2">
                    <x-site.profile-cta name="primary" class="text-xs" @click="mobileOpen=false" />
                    <x-site.profile-cta name="secondary" variant="outline" class="text-xs" @click="mobileOpen=false" />
                </div>

                @if ($routeName)
                @php
                $mobileLinks = [
                route('site.home', $lc) => __('site.nav_home'),
                route('site.faq', $lc) => __('site.nav_faq'),
                route('site.contact', $lc) => __('site.nav_contact'),
                ];
                if (site_shows_products()) {
                $mobileLinks[route('site.products.index', $lc)] = __('site.nav_products');
                }
                if (site_shows_services()) {
                $mobileLinks[route('site.services.index', $lc)] = __('site.nav_services');
                }
                $mobileLinks[route('site.items.index', $lc)] = __('site.nav_items');
                if (site_feature_enabled('articles_blog')) {
                $mobileLinks[route('site.blog.index', $lc)] = __('site.nav_blog');
                }
                if (site_feature_enabled('news')) {
                $mobileLinks[route('site.news.index', $lc)] = __('site.nav_news');
                }
                @endphp
                @foreach ($mobileLinks as $href => $label)
                <a class="site-pressable flex     px-2 py-3 hover:bg-brand-accent/10     " href="{{ $href }}" @click="mobileOpen=false">{{ $label }}</a>
                @endforeach

                @auth
                <a
                    class="site-pressable flex px-2 py-3 font-semibold text-brand-accent hover:bg-brand-accent/10 {{ request()->routeIs('site.account.*') ? 'bg-brand-accent/10' : '' }}"
                    href="{{ $accountRequestsUrl }}"
                    @click="mobileOpen=false">
                    {{ __('site.auth_account') }}
                </a>
                @else
                @feature('header.login')
                <button type="button" class="site-pressable flex w-full px-2 py-3 text-start font-semibold text-brand-accent hover:bg-brand-accent/10" @click="mobileOpen=false; $store.siteAuth.show()">{{ __('site.auth_login') }}</button>
                @endfeature
                @endauth

                @if (isset($headerCategories) && $headerCategories->isNotEmpty())
                <div class="eca-category-tree-panel mt-4">
                    <x-site.category-tree :categories="$headerCategories" :collapse-sub="false" />
                </div>
                @endif

                @feature('header.language')
                <p class="mt-4 px-2 text-[11px] font-semibold uppercase text-brand-muted">{{ __('site.lang_menu') }}</p>
                <div class="px-2 pb-2 pt-2">
                    <x-site.language-switch :compact="false" />
                </div>
                @endfeature
                @endif
            </nav>
        </div>
    </div>{{-- /.eca-header sticky --}}
</div>