@php
    $navConfig = config('dynamic-nav-megamenu');
    $navState = $navState ?? ['mode' => 'default', 'theme' => 'light', 'heroTheme' => 'light'];
    $navTheme = $navState['theme'] ?? 'light';
    $megaTriggers = $megaNavData['megaTriggers'] ?? ($navConfig['mega_triggers'] ?? []);
    $staticLinks = $megaNavData['staticLinks'] ?? [];
    $cta = $megaNavData['cta'] ?? ($navConfig['cta'] ?? ['label' => 'Get a quote', 'href' => '/contact']);
    $languages = $megaNavData['languages'] ?? [];
    $currentLocale = app()->getLocale();
    $activeLang = collect($languages)->firstWhere('locale', $currentLocale) ?? $languages[0] ?? null;
    $logoHref = $navState['parentHref'] ?? ($navConfig['parent_href'] ?? '/');
    $iconPath = asset('images/criazo-icon.svg');
    $wordmarkPath = asset('images/criazo-wordmark.svg');
    $industrySections = $megaNavData['industrySections'] ?? [];
    $otherProjects = $megaNavData['otherProjects'] ?? [];
    $portfolioIndexHref = $megaNavData['portfolioIndexHref'] ?? '/portfolio';
    $serviceGroups = $megaNavData['serviceGroups'] ?? [];
    $servicesIndexHref = $megaNavData['servicesIndexHref'] ?? '/services';
    $industriesIndexHref = $megaNavData['industriesIndexHref'] ?? ($industrySections[0]['href'] ?? '/services');
    $featuredProject = $megaNavData['featuredProject'] ?? null;
    $portfolioMobileProjects = $featuredProject
        ? array_merge([array_merge($featuredProject, ['is_featured' => true])], array_slice($otherProjects, 0, 4))
        : array_slice($otherProjects, 0, 5);
    $navLabel = static function (string $key, string $fallback): string {
        $translated = __("messages.nav.{$key}");
        return $translated === "messages.nav.{$key}" ? $fallback : $translated;
    };
@endphp

<div class="dmm-overlay-root" data-dmm-overlay>
    @include('components.dynamic-navigation.nav-backdrop')
    <div class="dn-nav-shell is-nav-booting" data-theme="{{ $navTheme }}" aria-live="off">
        <nav
            id="dynamic-megamenu-navigation"
            class="dn-nav"
            role="navigation"
            aria-label="{{ __('messages.accessibility.main_navigation') }}"
            data-mode="default"
            data-theme="{{ $navTheme }}"
            data-dmm-label-open="{{ $navLabel('open_menu', 'Open menu') }}"
            data-dmm-label-close="{{ $navLabel('close_menu', 'Close menu') }}"
        >
    <div class="dn-nav__left">
        <div class="dn-pill dn-pill--icon" data-dmm-left-pill>
            <span class="dn-pill__icon-slot dn-pill__icon-slot--logo">
                <a href="{{ $logoHref }}" class="dn-logo-link" aria-label="{{ __('messages.accessibility.go_to_homepage') }}">
                    <img class="dn-logo-link__mark" src="{{ $iconPath }}" alt="" width="22" height="22" decoding="async">
                    <span class="dn-logo-link__grow" aria-hidden="true">
                        <span class="dn-logo-link__grow-inner">
                            <img class="dn-logo-link__wordmark" src="{{ $wordmarkPath }}" alt="" decoding="async">
                        </span>
                    </span>
                </a>
            </span>
        </div>
    </div>

    <div class="dn-nav__center">
        <div class="dn-pill dn-pill--nav dn-pill--default-nav" data-dmm-nav-pill>
            <div class="dn-default-nav-indicator" aria-hidden="true"></div>
            <div class="dn-nav-links" data-dmm-nav-scroll>
                @foreach($megaTriggers as $trigger)
                    <button
                        type="button"
                        class="dn-nav-link"
                        data-mega-trigger="{{ $trigger['panel'] }}"
                        data-nav-id="{{ $trigger['id'] }}"
                        aria-expanded="false"
                        aria-haspopup="true"
                        aria-controls="dmm-mega-panel"
                    ><span>{{ $trigger['label'] }}</span></button>
                @endforeach
                @foreach($staticLinks as $link)
                    <a
                        href="{{ $link['href'] }}"
                        class="dn-nav-link"
                        data-nav-id="{{ $link['id'] }}"
                    ><span>{{ $link['label'] }}</span></a>
                @endforeach
            </div>
        </div>

        <div class="dmm-mega-root" data-dmm-mega-root hidden aria-hidden="true">
            <div
                id="dmm-mega-panel"
                class="dmm-mega-panel"
                data-dmm-mega-panel
                role="region"
                aria-label="{{ __('messages.accessibility.services_portfolio_navigation') }}"
            >
                @include('components.dynamic-megamenu-navigation.mega-panels', ['megaNavData' => $megaNavData])
            </div>
        </div>
    </div>

    <div class="dn-nav__right">
        <div class="dn-lang" data-dmm-lang>
            <button
                type="button"
                class="dn-pill dn-pill--lang-trigger"
                data-dmm-lang-trigger
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-controls="dmm-lang-popup"
                aria-label="{{ __('messages.nav.change_language_current', ['language' => $activeLang['language'] ?? __('messages.nav.lang_en')]) }}"
            >
                <span class="dn-lang-trigger__flag" aria-hidden="true">{{ $activeLang['flag'] ?? '🌍' }}</span>
                <span class="dn-lang-trigger__code" aria-hidden="true">{{ strtoupper($activeLang['locale'] ?? 'en') }}</span>
                <span class="dn-lang-trigger__grow">
                    <span class="dn-lang-trigger__grow-inner">
                        <span class="dn-lang-trigger__meta">
                            <span class="dn-lang-trigger__label">{{ $activeLang['language'] ?? 'English' }}</span>
                            <svg class="dn-lang-chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6"/>
                            </svg>
                        </span>
                    </span>
                </span>
            </button>

            <div class="dn-lang-popup" id="dmm-lang-popup" data-dmm-lang-popup role="listbox" aria-label="{{ __('messages.nav.select_language') }}" hidden>
                @foreach($languages as $lang)
                    <button
                        type="button"
                        class="dn-lang-option{{ $currentLocale === ($lang['locale'] ?? 'en') ? ' is-active' : '' }}"
                        data-lang-href="{{ $lang['href'] }}"
                        role="option"
                        aria-selected="{{ $currentLocale === ($lang['locale'] ?? 'en') ? 'true' : 'false' }}"
                    >
                        <span class="dn-lang-option__flag" aria-hidden="true">{{ $lang['flag'] }}</span>
                        <span class="dn-lang-option__text">
                            <span class="dn-lang-option__language">{{ $lang['language'] }}</span>
                            <span class="dn-lang-option__region">{{ $lang['region'] }}</span>
                        </span>
                        @if($currentLocale === ($lang['locale'] ?? 'en'))
                        <svg class="dn-lang-option__check" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                        </svg>
                        @endif
                    </button>
                @endforeach
            </div>
        </div>

        <a href="{{ $cta['href'] }}" class="dn-pill dn-pill--cta">
            <span class="dn-cta-label">{{ $cta['label'] }}</span>
            <svg class="dn-cta-icon md:hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
            </svg>
        </a>

        <button
            type="button"
            class="dn-pill dn-pill--icon dn-pill--menu"
            data-dmm-menu
            aria-expanded="false"
            aria-label="{{ __('messages.nav.open_menu') }}"
        >
            <span class="dn-menu-icon" aria-hidden="true">
                <span></span><span></span><span></span>
            </span>
        </button>
    </div>
        </nav>
    </div>

    @include('components.dynamic-navigation.mobile-overlay', [
        'megaNavData' => $megaNavData,
        'navLabel' => $navLabel,
        'logoHref' => $logoHref,
    ])

    <div class="dmm-mega-backdrop" data-dmm-mega-backdrop hidden aria-hidden="true"></div>
</div>

<script>
    window.__dynamicMegamenuNavConfig = @json([
        'parentHref' => $logoHref,
        'cta' => $cta,
    ]);
</script>