{{-- Institutional CCHP header: top utility strip + sticky logo/nav/search --}}
@php
    $lc = ['locale' => app()->getLocale()];
    $routeName = Route::currentRouteName();
    $contactUrl = route('site.contact', $lc);
    $accountRequestsUrl = (($accountBadgeCount ?? 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();
    $phone = $headerPhone ?? null;
    $phoneHref = $headerPhoneHref ?? null;
    $email = trim((string) ($headerContact?->email ?? ''));
    $hasCategories = site_feature_enabled('categories')
        && isset($headerCategories)
        && $headerCategories->isNotEmpty();
    $hasNews = site_feature_enabled('news');
    $hasActivities = site_feature_enabled('activities');
    $hasBlog = site_feature_enabled('articles_blog');
    $showsProducts = site_shows_products();
    $showsServices = site_shows_services();
    $showsTracking = site_shows_tracking();

    $menu = $cchpHeaderMenu ?? [
        'industry' => [],
        'specialty' => [],
        'catalog' => [],
        'featuredId' => null,
        'market' => null,
        'association' => ['topics' => [], 'pages' => []],
        'newsCategories' => [],
        'activityCategories' => [],
        'news' => [],
        'newsPreview' => [],
        'newsActions' => [],
        'articles' => [],
        'newsIndexUrl' => route('site.news.index', $lc),
        'activitiesIndexUrl' => route('site.activities.index', $lc),
        'aboutUrl' => route('site.about', $lc),
        'faqUrl' => route('site.faq', $lc),
        'blogIndexUrl' => route('site.blog.index', $lc),
        'itemsIndexUrl' => route('site.items.index', $lc),
        'industriesIndexUrl' => route('site.industries.index', $lc),
    ];

    $routeCategory = request()->route('category');
    $currentCategoryId = $routeCategory instanceof \App\Models\Category
        ? (int) $routeCategory->id
        : (int) request()->integer('category_id');

    $marketIds = $menu['market']['descendantIds'] ?? [];
    $navMarketActive = $currentCategoryId > 0 && in_array($currentCategoryId, $marketIds, true);
    $navCategoriesActive = site_nav_categories_active() && ! $navMarketActive;
    $navActivitiesActive = request()->routeIs('site.activities.*');
    $navAssociationActive = request()->routeIs('site.about', 'site.contact', 'site.faq');
    $categoryColumns = [
        ['heading' => __('site.mega_industry_areas'), 'items' => $menu['industry']],
        ['heading' => __('site.mega_special_topics'), 'items' => $menu['specialty']],
    ];
@endphp

<div
    x-data="siteHeader()"
    x-ref="headerRoot"
    data-featured-id="{{ $menu['featuredId'] ?? '' }}"
    @keydown.escape.window="closeAll()"
    class="cchp-header-shell"
>
    

    <div class="cchp-header">
        <div class="cchp-header__bar">
            <div class="site-container">
                <div class="cchp-header__row">
                <div class="cchp-header__brand">
                    <x-site.logo class="min-w-0 max-w-[min(100%,11rem)] sm:max-w-none" />
                </div>

                <nav class="cchp-nav hidden desktop:flex" aria-label="{{ __('site.nav_menu') }}">
                    <a
                        href="{{ route('site.home', $lc) }}"
                        @class(['cchp-nav__link', 'is-active' => request()->routeIs('site.home')])
                    >{{ __('site.nav_home') }}</a>

                    @if ($hasCategories && $menu['catalog'] !== [])
                        <div
                            class="cchp-nav__item"
                            data-cchp-flyout="categories"
                            @mouseenter="openFlyout('categories')"
                            @mouseleave="closeFlyoutSoon()"
                        >
                            <button
                                type="button"
                                @class(['cchp-nav__link cchp-nav__link--flyout', 'is-active' => $navCategoriesActive])
                                :class="{ 'is-active': dropdown === 'categories' }"
                                @click="toggleFlyout('categories')"
                                :aria-expanded="(dropdown === 'categories').toString()"
                                aria-haspopup="true"
                                aria-controls="cchp-mega-categories"
                            >
                                <span>{{ __('site.browse_categories') }}</span>
                                <span class="cchp-nav__chevron" aria-hidden="true"></span>
                            </button>
                        </div>
                    @endif

                    @if ($hasActivities)
                        <div
                            class="cchp-nav__item"
                            data-cchp-flyout="activities"
                            @mouseenter="openFlyout('activities')"
                            @mouseleave="closeFlyoutSoon()"
                        >
                            <button
                                type="button"
                                @class(['cchp-nav__link cchp-nav__link--flyout', 'is-active' => $navActivitiesActive])
                                :class="{ 'is-active': dropdown === 'activities' }"
                                @click="toggleFlyout('activities')"
                                :aria-expanded="(dropdown === 'activities').toString()"
                                aria-haspopup="true"
                                aria-controls="cchp-mega-activities"
                            >
                                <span>{{ __('site.nav_activities') }}</span>
                                <span class="cchp-nav__chevron" aria-hidden="true"></span>
                            </button>

                            <div
                                id="cchp-mega-activities"
                                class="cchp-nav-popover cchp-nav-popover--activities hidden desktop:block"
                                data-cchp-flyout="activities"
                                x-cloak
                                x-show="dropdown === 'activities'"
                                x-transition:enter="transition ease-out duration-300 origin-top"
                                x-transition:enter-start="opacity-0 -translate-y-3 scale-[0.98]"
                                x-transition:enter-end="opacity-100 translate-y-0 scale-100"
                                x-transition:leave="transition ease-in duration-200 origin-top"
                                x-transition:leave-start="opacity-100 translate-y-0 scale-100"
                                x-transition:leave-end="opacity-0 -translate-y-2 scale-[0.98]"
                                @click.outside="closeFlyoutOutside($event, 'activities')"
                            >
                                <div class="cchp-nav-popover__panel">
                                    <div class="cchp-nav-popover__grid cchp-nav-popover__grid--activities">
                                        <div class="cchp-nav-popover__col">
                                            <h5 class="cchp-mega__heading">{{ __('site.nav_activities') }}</h5>
                                            <ul class="cchp-mega__list">
                                                @forelse ($menu['activityCategories'] as $item)
                                                    <li>
                                                        <a href="{{ $item['url'] }}" class="cchp-mega__parent">
                                                            @if ($item['image'])
                                                                <img src="{{ $item['image'] }}" alt="" class="cchp-mega__parent-img" />
                                                            @else
                                                                <span class="cchp-mega__parent-img cchp-mega__parent-img--empty" aria-hidden="true"></span>
                                                            @endif
                                                            <span>{{ $item['title'] }}</span>
                                                        </a>
                                                    </li>
                                                @empty
                                                    <li class="cchp-mega__empty">{{ __('site.mega_activities_empty') }}</li>
                                                @endforelse
                                            </ul>
                                        </div>

                                        <div class="cchp-nav-popover__col cchp-nav-popover__col--latest">
                                            <h5 class="cchp-mega__heading">{{ __('site.mega_latest_activities') }}</h5>
                                            <div class="cchp-mega__news-grid">
                                                @forelse (($menu['activitiesPreview'] ?? []) as $item)
                                                    <a href="{{ $item['url'] }}" class="cchp-mega__news-card">
                                                        @if ($item['image'])
                                                            <img src="{{ $item['image'] }}" alt="" class="cchp-mega__news-card-img" />
                                                        @else
                                                            <span class="cchp-mega__news-card-img cchp-mega__news-card-img--empty" aria-hidden="true"></span>
                                                        @endif
                                                        <span class="cchp-mega__news-card-title">{{ $item['title'] }}</span>
                                                        @if ($item['date'])
                                                            <time class="cchp-mega__news-card-date" datetime="{{ $item['datetime'] }}">{{ $item['date'] }}</time>
                                                        @endif
                                                    </a>
                                                @empty
                                                    <p class="cchp-mega__empty">{{ __('site.mega_activities_items_empty') }}</p>
                                                @endforelse
                                            </div>
                                        </div>
                                    </div>
                                    <div class="cchp-nav-popover__footer">
                                        <a href="{{ $menu['activitiesIndexUrl'] }}" class="cchp-mega__more">{{ __('site.mega_view_all_activities') }}</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif

                    @if ($hasNews)
                        <div
                            class="cchp-nav__item"
                            data-cchp-flyout="news"
                            @mouseenter="openFlyout('news')"
                            @mouseleave="closeFlyoutSoon()"
                        >
                            <button
                                type="button"
                                @class(['cchp-nav__link cchp-nav__link--flyout', 'is-active' => request()->routeIs('site.news.*')])
                                :class="{ 'is-active': dropdown === 'news' }"
                                @click="toggleFlyout('news')"
                                :aria-expanded="(dropdown === 'news').toString()"
                                aria-haspopup="true"
                                aria-controls="cchp-mega-news"
                            >
                                <span>{{ __('site.nav_news_short') }}</span>
                                <span class="cchp-nav__chevron" aria-hidden="true"></span>
                            </button>

                            <div
                                id="cchp-mega-news"
                                class="cchp-nav-popover cchp-nav-popover--news hidden desktop:block"
                                data-cchp-flyout="news"
                                x-cloak
                                x-show="dropdown === 'news'"
                                x-transition:enter="transition ease-out duration-300 origin-top"
                                x-transition:enter-start="opacity-0 -translate-y-3 scale-[0.98]"
                                x-transition:enter-end="opacity-100 translate-y-0 scale-100"
                                x-transition:leave="transition ease-in duration-200 origin-top"
                                x-transition:leave-start="opacity-100 translate-y-0 scale-100"
                                x-transition:leave-end="opacity-0 -translate-y-2 scale-[0.98]"
                                @click.outside="closeFlyoutOutside($event, 'news')"
                            >
                                <div class="cchp-nav-popover__panel">
                                    <div class="cchp-nav-popover__grid cchp-nav-popover__grid--news">
                                        <div class="cchp-nav-popover__col">
                                            <h5 class="cchp-mega__heading">{{ __('site.nav_news') }}</h5>
                                            <ul class="cchp-mega__list">
                                                @forelse ($menu['newsCategories'] as $item)
                                                    <li>
                                                        <a href="{{ $item['url'] }}" class="cchp-mega__parent">
                                                            @if ($item['image'])
                                                                <img src="{{ $item['image'] }}" alt="" class="cchp-mega__parent-img" />
                                                            @else
                                                                <span class="cchp-mega__parent-img cchp-mega__parent-img--empty" aria-hidden="true"></span>
                                                            @endif
                                                            <span>{{ $item['title'] }}</span>
                                                        </a>
                                                    </li>
                                                @empty
                                                    <li class="cchp-mega__empty">{{ __('site.mega_news_empty') }}</li>
                                                @endforelse
                                            </ul>
                                        </div>

                                        <div class="cchp-nav-popover__col cchp-nav-popover__col--latest">
                                            <h5 class="cchp-mega__heading">{{ __('site.mega_latest_news') }}</h5>
                                            <div class="cchp-mega__news-grid">
                                                @forelse ($menu['newsPreview'] as $item)
                                                    <a href="{{ $item['url'] }}" class="cchp-mega__news-card">
                                                        @if ($item['image'])
                                                            <img src="{{ $item['image'] }}" alt="" class="cchp-mega__news-card-img" />
                                                        @else
                                                            <span class="cchp-mega__news-card-img cchp-mega__news-card-img--empty" aria-hidden="true"></span>
                                                        @endif
                                                        <span class="cchp-mega__news-card-title">{{ $item['title'] }}</span>
                                                        @if ($item['date'])
                                                            <time class="cchp-mega__news-card-date" datetime="{{ $item['datetime'] }}">{{ $item['date'] }}</time>
                                                        @endif
                                                    </a>
                                                @empty
                                                    <p class="cchp-mega__empty">{{ __('site.mega_news_empty') }}</p>
                                                @endforelse
                                            </div>
                                        </div>
                                    </div>
                                    <div class="cchp-nav-popover__footer">
                                        <a href="{{ $menu['newsIndexUrl'] }}" class="cchp-mega__more">{{ __('site.mega_view_all_news') }}</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif

                    @if ($hasBlog)
                        <div
                            class="cchp-nav__item"
                            data-cchp-flyout="articles"
                            @mouseenter="openFlyout('articles')"
                            @mouseleave="closeFlyoutSoon()"
                        >
                            <button
                                type="button"
                                @class(['cchp-nav__link cchp-nav__link--flyout', 'is-active' => request()->routeIs('site.blog.*')])
                                :class="{ 'is-active': dropdown === 'articles' }"
                                @click="toggleFlyout('articles')"
                                :aria-expanded="(dropdown === 'articles').toString()"
                                aria-haspopup="true"
                                aria-controls="cchp-mega-articles"
                            >
                                <span>{{ __('site.nav_blog') }}</span>
                                <span class="cchp-nav__chevron" aria-hidden="true"></span>
                            </button>

                            <div
                                id="cchp-mega-articles"
                                class="cchp-nav-popover hidden desktop:block"
                                data-cchp-flyout="articles"
                                x-cloak
                                x-show="dropdown === 'articles'"
                                x-transition:enter="transition ease-out duration-300 origin-top"
                                x-transition:enter-start="opacity-0 -translate-y-3 scale-[0.98]"
                                x-transition:enter-end="opacity-100 translate-y-0 scale-100"
                                x-transition:leave="transition ease-in duration-200 origin-top"
                                x-transition:leave-start="opacity-100 translate-y-0 scale-100"
                                x-transition:leave-end="opacity-0 -translate-y-2 scale-[0.98]"
                                @click.outside="closeFlyoutOutside($event, 'articles')"
                            >
                                <div class="cchp-nav-popover__panel">
                                    @include('partials.site.header-mega-cards', [
                                        'heading' => __('site.mega_articles'),
                                        'items' => $menu['articles'],
                                        'empty' => __('site.mega_articles_empty'),
                                        'moreUrl' => $menu['blogIndexUrl'],
                                    ])
                                </div>
                            </div>
                        </div>
                    @endif

                    @if ($menu['market'])
                        <div
                            class="cchp-nav__item"
                            data-cchp-flyout="market"
                            @mouseenter="openFlyout('market')"
                            @mouseleave="closeFlyoutSoon()"
                        >
                            <button
                                type="button"
                                @class(['cchp-nav__link cchp-nav__link--flyout', 'is-active' => $navMarketActive])
                                :class="{ 'is-active': dropdown === 'market' }"
                                @click="toggleFlyout('market')"
                                :aria-expanded="(dropdown === 'market').toString()"
                                aria-haspopup="true"
                                aria-controls="cchp-mega-market"
                            >
                                <span>{{ $menu['market']['title'] }}</span>
                                <span class="cchp-nav__chevron" aria-hidden="true"></span>
                            </button>

                            <div
                                id="cchp-mega-market"
                                class="cchp-nav-popover hidden desktop:block"
                                data-cchp-flyout="market"
                                x-cloak
                                x-show="dropdown === 'market'"
                                x-transition:enter="transition ease-out duration-300 origin-top"
                                x-transition:enter-start="opacity-0 -translate-y-3 scale-[0.98]"
                                x-transition:enter-end="opacity-100 translate-y-0 scale-100"
                                x-transition:leave="transition ease-in duration-200 origin-top"
                                x-transition:leave-start="opacity-100 translate-y-0 scale-100"
                                x-transition:leave-end="opacity-0 -translate-y-2 scale-[0.98]"
                                @click.outside="closeFlyoutOutside($event, 'market')"
                            >
                                <div class="cchp-nav-popover__panel">
                                    <div class="cchp-nav-popover__grid cchp-nav-popover__grid--market">
                                        <div class="cchp-nav-popover__col">
                                            <h5 class="cchp-mega__heading">{{ __('site.mega_market') }}</h5>
                                            <a href="{{ $menu['market']['url'] }}" class="cchp-mega__parent">
                                                @if ($menu['market']['image'])
                                                    <img src="{{ $menu['market']['image'] }}" alt="" class="cchp-mega__parent-img" />
                                                @endif
                                                <span>{{ $menu['market']['title'] }}</span>
                                            </a>
                                            @if ($menu['market']['children'] !== [])
                                                <ul class="cchp-mega__list">
                                                    @foreach ($menu['market']['children'] as $child)
                                                        <li>
                                                            <a href="{{ $child['url'] }}" class="cchp-mega__link">{{ $child['title'] }}</a>
                                                        </li>
                                                    @endforeach
                                                </ul>
                                            @endif
                                        </div>

                                        <div class="cchp-nav-popover__col cchp-mega__col--feature">
                                            <h5 class="cchp-mega__heading">{{ __('site.mega_market_watch') }}</h5>
                                            <div class="cchp-mega__feature">
                                                @if ($menu['market']['image'])
                                                    <img src="{{ $menu['market']['image'] }}" alt="" class="cchp-mega__feature-img" />
                                                @endif
                                                <p class="cchp-mega__feature-title">{{ $menu['market']['title'] }}</p>
                                                @if ($menu['market']['excerpt'] !== '')
                                                    <p class="cchp-mega__feature-excerpt">{{ $menu['market']['excerpt'] }}</p>
                                                @endif
                                                <a href="{{ $menu['market']['url'] }}" class="cchp-mega__feature-cta">{{ __('site.mega_view_details') }}</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
 

                    @if ($showsProducts)
                        <a
                            href="{{ route('site.products.index', $lc) }}"
                            @class(['cchp-nav__link', 'is-active' => $navProductsActive])
                        >{{ __('site.nav_products') }}</a>
                    @endif
                    @if ($showsServices)
                        <a
                            href="{{ route('site.services.index', $lc) }}"
                            @class(['cchp-nav__link', 'is-active' => request()->routeIs('site.services.*')])
                        >{{ __('site.nav_services') }}</a>
                    @endif
                    @if ($showsTracking)
                        <a
                            href="{{ $trackUrl }}"
                            @class(['cchp-nav__link', 'is-active' => request()->routeIs('site.repair-tracking.*')])
                        >{{ __('site.cta_track') }}</a>
                    @endif

                    <div
                        class="cchp-nav__item"
                        data-cchp-flyout="association"
                        @mouseenter="openFlyout('association')"
                        @mouseleave="closeFlyoutSoon()"
                    >
                        <button
                            type="button"
                            @class(['cchp-nav__link cchp-nav__link--flyout', 'is-active' => $navAssociationActive])
                            :class="{ 'is-active': dropdown === 'association' }"
                            @click="toggleFlyout('association')"
                            :aria-expanded="(dropdown === 'association').toString()"
                            aria-haspopup="true"
                            aria-controls="cchp-mega-association"
                        >
                            <span>{{ __('site.nav_association') }}</span>
                            <span class="cchp-nav__chevron" aria-hidden="true"></span>
                        </button>

                        <div
                            id="cchp-mega-association"
                            class="cchp-nav-popover cchp-nav-popover--association hidden desktop:block"
                            data-cchp-flyout="association"
                            x-cloak
                            x-show="dropdown === 'association'"
                            x-transition:enter="transition ease-out duration-300 origin-top"
                            x-transition:enter-start="opacity-0 -translate-y-3 scale-[0.98]"
                            x-transition:enter-end="opacity-100 translate-y-0 scale-100"
                            x-transition:leave="transition ease-in duration-200 origin-top"
                            x-transition:leave-start="opacity-100 translate-y-0 scale-100"
                            x-transition:leave-end="opacity-0 -translate-y-2 scale-[0.98]"
                            @click.outside="closeFlyoutOutside($event, 'association')"
                        >
                            <div class="cchp-nav-popover__panel">
                                <ul class="cchp-mega__list cchp-nav-popover__list--compact">
                                    @if (($menu['aboutUrl'] ?? null))
                                        <li>
                                            <a href="{{ $menu['aboutUrl'] }}" class="cchp-mega__link">{{ __('site.nav_about') }}</a>
                                        </li>
                                    @endif
                                    <li>
                                        <a href="{{ $contactUrl }}" class="cchp-mega__link">{{ __('site.nav_contact') }}</a>
                                    </li>
                                    @if (($menu['faqUrl'] ?? null))
                                        <li>
                                            <a href="{{ $menu['faqUrl'] }}" class="cchp-mega__link">{{ __('site.nav_faq') }}</a>
                                        </li>
                                    @endif
                                </ul>
                            </div>
                        </div>
                    </div>
                </nav>

                <div class="cchp-header__actions">
                @auth
                        <a
                            href="{{ $accountRequestsUrl }}"
                            @class(['cchp-member-cta hidden desktop:inline-flex', 'is-active' => request()->routeIs('site.account.*')])
                            title="{{ __('site.auth_account') }}"
                            aria-label="{{ __('site.auth_account') }}"
                        >
                            @if (($accountBadgeCount ?? 0) > 0)
                                <span class="cchp-member-cta__badge" aria-hidden="true">{{ $accountBadgeCount > 9 ? '9+' : $accountBadgeCount }}</span>
                            @endif
                            @if ($accountAvatarUrl)
                                <img src="{{ $accountAvatarUrl }}" alt="" class="cchp-member-cta__avatar" data-account-avatar />
                            @else
                                <span class="cchp-member-cta__avatar cchp-member-cta__avatar--initial" data-account-avatar-fallback aria-hidden="true">{{ $accountInitial }}</span>
                            @endif
                            <span class="cchp-member-cta__label">{{ __('site.member_profile') }}</span>
                        </a>
                    @else
                        @feature('header.login')
                        <button
                            type="button"
                            class="cchp-member-cta hidden desktop:inline-flex"
                            @click="$store.siteAuth.show()"
                            title="{{ __('site.member_login') }}"
                        >
                            <x-site.svg-icon name="login" class="h-5 w-5" />
                            <span class="cchp-member-cta__label">{{ __('site.member_login') }}</span>
                        </button>
                        @endfeature
                    @endauth


                    @feature('header.search')
                    <button
                        type="button"
                        class="cchp-icon-btn"
                        @click="openSearch()"
                        aria-haspopup="dialog"
                        aria-controls="site-search-input"
                        aria-label="{{ __('site.search_trigger') }}"
                    >
                        <x-site.svg-icon name="search" class="h-6 w-6" />
                    </button>
                    @endfeature

                  

                    @feature('header.theme')
                    <button
                        type="button"
                        class="cchp-icon-btn"
                        @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="cchp-icon-btn 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>
        </div>

        @if ($hasCategories && $menu['catalog'] !== [])
            <div
                id="cchp-mega-categories"
                class="cchp-mega cchp-mega--rich hidden desktop:block"
                data-cchp-flyout="categories"
                x-cloak
                x-show="dropdown === 'categories'"
                x-transition:enter="transition ease-out duration-200 origin-top"
                x-transition:enter-start="opacity-0 -translate-y-3"
                x-transition:enter-end="opacity-100 translate-y-0"
                x-transition:leave="transition ease-in duration-150 origin-top"
                x-transition:leave-start="opacity-100 translate-y-0"
                x-transition:leave-end="opacity-0 -translate-y-3"
                @mouseenter="openFlyout('categories')"
                @mouseleave="closeFlyoutSoon()"
                @click.outside="closeFlyoutOutside($event, 'categories')"
            >
                <div class="site-container">
                    <div class="cchp-mega__panel">
                        <div class="cchp-mega__grid cchp-mega__grid--categories">
                            @foreach ($categoryColumns as $column)
                                @if ($column['items'] !== [])
                                    <div class="cchp-mega__col">
                                        <h5 class="cchp-mega__heading">{{ $column['heading'] }}</h5>
                                        <ul class="cchp-mega__groups">
                                            @foreach ($column['items'] as $item)
                                                <li class="cchp-mega__group">
                                                    <a
                                                        href="{{ $item['url'] }}"
                                                        class="cchp-mega__parent"
                                                        @mouseenter="featuredId = {{ (int) $item['id'] }}"
                                                    >
                                                        @if ($item['image'])
                                                            <img src="{{ $item['image'] }}" alt="" class="cchp-mega__parent-img" />
                                                        @else
                                                            <span class="cchp-mega__parent-img cchp-mega__parent-img--empty" aria-hidden="true"></span>
                                                        @endif
                                                        <span>{{ $item['title'] }}</span>
                                                    </a>
                                                    @if ($item['children'] !== [])
                                                        <ul class="cchp-mega__list">
                                                            @foreach ($item['children'] as $child)
                                                                <li>
                                                                    <a href="{{ $child['url'] }}" class="cchp-mega__link">{{ $child['title'] }}</a>
                                                                </li>
                                                            @endforeach
                                                        </ul>
                                                    @endif
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endif
                            @endforeach

                            <div class="cchp-mega__col cchp-mega__col--footer">
                                <a href="{{ $menu['industriesIndexUrl'] ?? route('site.industries.index', $lc) }}" class="cchp-mega__more">
                                    {{ __('site.industries_title') }}
                                </a>
                            </div>

                            <div class="cchp-mega__col cchp-mega__col--feature">
                                <h5 class="cchp-mega__heading">{{ __('site.mega_featured') }}</h5>
                                @foreach ($menu['catalog'] as $item)
                                    <div class="cchp-mega__feature" x-show="featuredId === {{ (int) $item['id'] }}" x-cloak>
                                        @if ($item['image'])
                                            <img src="{{ $item['image'] }}" alt="" class="cchp-mega__feature-img" />
                                        @else
                                            <div class="cchp-mega__feature-img cchp-mega__feature-img--empty" aria-hidden="true"></div>
                                        @endif
                                        <p class="cchp-mega__feature-title">{{ $item['title'] }}</p>
                                        @if ($item['excerpt'] !== '')
                                            <p class="cchp-mega__feature-excerpt">{{ $item['excerpt'] }}</p>
                                        @endif
                                        <a href="{{ $item['url'] }}" class="cchp-mega__feature-cta">{{ __('site.mega_view_details') }}</a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <div id="mobile-site-nav" class="cchp-mobile desktop:hidden" x-show="mobileOpen" x-cloak>
            <nav class="site-container cchp-mobile__nav" role="navigation">
                @if ($routeName)
                    <a class="cchp-mobile__link" href="{{ route('site.home', $lc) }}" @click="mobileOpen=false">{{ __('site.nav_home') }}</a>

                    @if ($hasActivities)
                        <a class="cchp-mobile__link" href="{{ $menu['activitiesIndexUrl'] }}" @click="mobileOpen=false">{{ __('site.nav_activities') }}</a>
                    @endif
                    @if ($hasNews)
                        <a class="cchp-mobile__link" href="{{ route('site.news.index', $lc) }}" @click="mobileOpen=false">{{ __('site.nav_news_short') }}</a>
                    @endif
                    @if ($hasBlog)
                        <a class="cchp-mobile__link" href="{{ route('site.blog.index', $lc) }}" @click="mobileOpen=false">{{ __('site.nav_blog') }}</a>
                    @endif
                    @if (! empty($menu['aboutUrl']))
                        <a class="cchp-mobile__link" href="{{ $menu['aboutUrl'] }}" @click="mobileOpen=false">{{ __('site.nav_about') }}</a>
                    @endif
                    @if ($menu['market'])
                        <a class="cchp-mobile__link" href="{{ $menu['market']['url'] }}" @click="mobileOpen=false">{{ $menu['market']['title'] }}</a>
                    @endif

                    <a class="cchp-mobile__link" href="{{ route('site.faq', $lc) }}" @click="mobileOpen=false">{{ __('site.nav_faq') }}</a>

                    @if ($showsProducts)
                        <a class="cchp-mobile__link" href="{{ route('site.products.index', $lc) }}" @click="mobileOpen=false">{{ __('site.nav_products') }}</a>
                    @endif
                    @if ($showsServices)
                        <a class="cchp-mobile__link" href="{{ route('site.services.index', $lc) }}" @click="mobileOpen=false">{{ __('site.nav_services') }}</a>
                    @endif
                    @if ($showsTracking)
                        <a class="cchp-mobile__link" href="{{ $trackUrl }}" @click="mobileOpen=false">{{ __('site.cta_track') }}</a>
                    @endif

                    <a class="cchp-mobile__link" href="{{ $contactUrl }}" @click="mobileOpen=false">{{ __('site.nav_contact') }}</a>

                    @auth
                        <a class="cchp-mobile__link cchp-mobile__link--accent" href="{{ $accountRequestsUrl }}" @click="mobileOpen=false">{{ __('site.auth_account') }}</a>
                    @endauth

                    @if ($hasCategories)
                        <div class="cchp-mobile__cats">
                            <x-site.category-tree :categories="$headerCategories" :collapse-sub="false" />
                        </div>
                    @endif
                @endif
            </nav>
        </div>
    </div>
</div>