@php
    use App\Helpers\SeoHelper;
    use App\Support\Navigation\DynamicNavResolver;

    $navConfig = config('dynamic-nav');
    $isNavTestSandbox = (bool) preg_match('#-dynamic$#', DynamicNavResolver::normalizePath(request()->path()));
    $navItems = $isNavTestSandbox ? ($navConfig['items'] ?? []) : [];
    $megaNavData = $megaNavData ?? [];
    $navLabel = $navLabel ?? static function (string $key, string $fallback): string {
        $translated = __("messages.nav.{$key}");
        return $translated === "messages.nav.{$key}" ? $fallback : $translated;
    };
    $cta = $megaNavData['cta'] ?? ($navConfig['cta'] ?? ['label' => 'Get a quote', 'href' => '/contact']);
    $languages = $megaNavData['languages'] ?? [];
    $navState = $navState ?? ['mode' => 'default'];
    $mode = $navState['mode'] ?? 'default';
    $navTheme = $navState['theme'] ?? 'light';
    $heroTheme = $navState['heroTheme'] ?? $navTheme;
    $activeSubItem = array_key_exists('activeSubItem', $navState)
        ? $navState['activeSubItem']
        : ($mode === 'context' && count($navState['subItems'] ?? []) ? 'overview' : null);
    $subItems = $navState['subItems'] ?? [];
    $sectionLabel = $navState['sectionLabel'] ?? __('messages.breadcrumbs.services');
    $sectionHref = $navState['sectionHref'] ?? SeoHelper::localizedRoute('services.index', [], app()->getLocale());
    $pageLabel = $navState['pageLabel'] ?? 'Website Development';
    $currentPath = request()->path();
    $currentPathNormalized = '/' . ltrim($currentPath, '/');
    $logoHref = $navState['parentHref'] ?? SeoHelper::localizedRoute('home', [], app()->getLocale());
    $parentHref = $logoHref;
    $iconPath = asset('images/criazo-icon.svg');
    $wordmarkPath = asset('images/criazo-wordmark.svg');
    $currentLocale = app()->getLocale();
    $seoLanguages = config('seo.languages', []);
    $resolveLangHref = static function (string $locale, string $currentPath): string {
        $normalized = '/' . ltrim($currentPath, '/');
        $basePath = preg_replace('#^/(pt|es|fr|br|de|nl|it|us|ca)(?=/)#', '', $normalized) ?: '/';

        if ($locale === 'en') {
            return $basePath;
        }

        return '/' . $locale . $basePath;
    };
    $languages = collect($languages)->map(function ($entry) use ($seoLanguages, $currentPathNormalized, $resolveLangHref) {
        $locale = $entry['locale'] ?? 'en';
        $seo = $seoLanguages[$locale] ?? [];
        return [
            'locale' => $locale,
            'href' => $resolveLangHref($locale, $currentPathNormalized),
            'flag' => $seo['flag'] ?? '🌍',
            'language' => $seo['native_name'] ?? $locale,
            'region' => $seo['name'] ?? $locale,
        ];
    })->values()->all();
    $activeLang = collect($languages)->firstWhere('locale', $currentLocale) ?? $languages[0] ?? null;
@endphp

<nav
    id="dynamic-navigation"
    class="dn-nav"
    role="navigation"
    aria-label="Main navigation"
    data-mode="{{ $mode }}"
    data-theme="{{ $navTheme }}"
    data-hero-theme="{{ $heroTheme }}"
    data-dmm-label-open="{{ $navLabel('open_menu', 'Open menu') }}"
    data-dmm-label-close="{{ $navLabel('close_menu', 'Close menu') }}"
    @if($mode === 'context' && $activeSubItem) data-active-sub="{{ $activeSubItem }}" @endif
>
    {{-- Left: Logo / Back pill --}}
    <div class="dn-nav__left">
        <div class="dn-pill dn-pill--icon" data-dn-left-pill>
            <span class="dn-pill__icon-slot dn-pill__icon-slot--logo">
                <a href="{{ $logoHref }}" class="dn-logo-link" aria-label="Criazo home">
                    <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>
            <button
                type="button"
                class="dn-pill__icon-slot dn-pill__icon-slot--back"
                data-dn-back
                aria-label="Go back"
                tabindex="{{ $mode === 'context' ? '0' : '-1' }}"
            >
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <path d="M19 12H5M12 19l-7-7 7-7"/>
                </svg>
            </button>
        </div>
    </div>

    {{-- Center: Default nav OR Context pills --}}
    <div class="dn-nav__center">
        {{-- Default state: main nav pill --}}
        <div
            class="dn-pill dn-pill--nav dn-pill--default-nav"
            data-dn-default-pill
            @if($mode === 'context') aria-hidden="true" inert @endif
        >
            <div class="dn-default-nav-indicator" aria-hidden="true"></div>
            <div class="dn-nav-links" data-dn-default-scroll>
                @foreach($navItems as $item)
                    @php
                        $itemHref = $item['href'];
                        $itemPath = parse_url($itemHref, PHP_URL_PATH) ?? $itemHref;
                        $itemPathNormalized = '/' . ltrim(rtrim($itemPath, '/'), '/');
                        $itemHash = str_contains($itemHref, '#')
                            ? substr($itemHref, strpos($itemHref, '#') + 1)
                            : '';

                        $isActive = false;
                        if ($mode === 'context') {
                            $isActive = ($navState['sectionId'] ?? '') === $item['id'];
                        } elseif ($item['id'] === 'home') {
                            $isActive = in_array($currentPathNormalized, ['/home-dynamic', $itemPathNormalized], true);
                        } elseif ($itemHash) {
                            $isActive = false;
                        } else {
                            $isActive = $currentPathNormalized === $itemPathNormalized;
                        }
                    @endphp
                    <a
                        href="{{ $item['href'] }}"
                        class="dn-nav-link{{ $isActive ? ' is-active' : '' }}"
                        data-section-id="{{ $item['id'] }}"
                        data-nav-id="{{ $item['id'] }}"
                        data-context="{{ !empty($item['context']) ? 'true' : 'false' }}"
                        @if($isActive) aria-current="page" @endif
                    ><span>{{ $item['label'] }}</span></a>
                @endforeach
            </div>
        </div>

        {{-- Context state: breadcrumb + subnav --}}
        <div
            class="dn-context-group"
            data-dn-context-group
            @if($mode !== 'context') aria-hidden="true" inert @else aria-hidden="false" @endif
        >
            <div class="dn-pill dn-pill--breadcrumb" data-dn-breadcrumb-pill>
                <div class="dn-breadcrumb" data-dn-breadcrumb>
                    <div class="dn-breadcrumb__layer dn-breadcrumb__layer--default">
                        <a href="{{ $logoHref }}" class="dn-breadcrumb__home-link" aria-label="Criazo home">
                            <img src="{{ $iconPath }}" alt="" class="dn-breadcrumb__logo" width="16" height="16" decoding="async">
                        </a>
                        <span class="dn-breadcrumb__sep" aria-hidden="true">/</span>
                        <a href="{{ $sectionHref }}" class="dn-breadcrumb__parent">{{ $sectionLabel }}</a>
                        <span class="dn-breadcrumb__sep" aria-hidden="true">/</span>
                        <span class="dn-breadcrumb__current">{{ $pageLabel }}</span>
                    </div>
                    <button
                        type="button"
                        class="dn-breadcrumb__layer dn-breadcrumb__layer--back dn-breadcrumb__back-action"
                        data-dn-back-preview
                        aria-hidden="true"
                        tabindex="-1"
                    >
                        <span class="dn-breadcrumb__back-hint">Go back to</span>
                        <span class="dn-breadcrumb__back-target" data-dn-back-target>Home</span>
                    </button>
                </div>
            </div>

            @if(count($subItems))
            <div class="dn-pill dn-pill--subnav" data-dn-subnav-pill>
                <div class="dn-subnav-indicator" aria-hidden="true"></div>
                <div class="dn-subnav-scroll" role="tablist" aria-label="Section navigation">
                    @foreach($subItems as $sub)
                        <a
                            href="{{ $sub['href'] }}"
                            class="dn-subnav-link{{ ($sub['id'] ?? '') === $activeSubItem ? ' is-active' : '' }}"
                            data-sub-id="{{ $sub['id'] }}"
                            role="tab"
                            @if(($sub['id'] ?? '') === $activeSubItem) aria-selected="true" aria-current="page" @else aria-selected="false" @endif
                        >{{ $sub['label'] }}</a>
                    @endforeach
                </div>
            </div>
            @endif
        </div>
        @if($mode === 'context' && count($subItems))
        <script>
            (function () {
                var hash = (location.hash || '').replace('#', '');
                if (!hash) return;
                var active = document.querySelector('.dn-subnav-link.is-active');
                var target = document.querySelector('.dn-subnav-link[data-sub-id="' + hash + '"]');
                if (!target || (active && active === target)) return;
                if (active) {
                    active.classList.remove('is-active');
                    active.removeAttribute('aria-current');
                    active.setAttribute('aria-selected', 'false');
                }
                target.classList.add('is-active');
                target.setAttribute('aria-current', 'page');
                target.setAttribute('aria-selected', 'true');
                var nav = document.getElementById('dynamic-navigation');
                if (nav) nav.dataset.activeSub = hash;
            })();
        </script>
        @endif
    </div>

    {{-- Right: Language + CTA + Mobile menu --}}
    <div class="dn-nav__right">
        <div class="dn-lang" data-dn-lang data-dmm-lang>
            <button
                type="button"
                class="dn-pill dn-pill--lang-trigger"
                data-dn-lang-trigger
                data-dmm-lang-trigger
                aria-expanded="false"
                aria-haspopup="listbox"
                aria-controls="dmm-lang-popup"
                aria-label="Change language, current: {{ $activeLang['language'] ?? 'English' }}"
            >
                <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-dn-lang-popup data-dmm-lang-popup role="listbox" aria-label="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="{{ $navLabel('open_menu', 'Open menu') }}"
        >
            <span class="dn-menu-icon" aria-hidden="true">
                <span></span><span></span><span></span>
            </span>
        </button>
    </div>
</nav>

@php
    $isNavTestSandbox = (bool) preg_match('#-dynamic$#', DynamicNavResolver::normalizePath(request()->path()));
    $dynamicNavJsConfig = [
        'items' => $isNavTestSandbox ? $navItems : [],
        'routes' => $isNavTestSandbox ? ($navConfig['routes'] ?? []) : [],
        'cta' => $cta,
        'parentHref' => $parentHref,
        'navState' => [
            'mode' => $mode,
            'theme' => $navTheme,
            'heroTheme' => $heroTheme,
            'sectionId' => $navState['sectionId'] ?? null,
            'sectionLabel' => $sectionLabel,
            'sectionHref' => $sectionHref,
            'pageLabel' => $pageLabel,
            'pageHref' => $navState['pageHref'] ?? null,
            'activeSubItem' => $activeSubItem,
            'subItems' => $subItems,
            'parentHref' => $parentHref,
            'backUrl' => $navState['backUrl'] ?? $sectionHref,
        ],
    ];
@endphp

<script>
    window.__dynamicNavConfig = @json($dynamicNavJsConfig);
</script>
@if($heroTheme === 'dark')
<script>
(function () {
    var nav = document.getElementById('dynamic-navigation');
    var shell = nav && nav.closest('.dn-nav-shell');
    var hero = document.querySelector('[data-dn-hero-theme="dark"]');
    if (!nav || !hero) return;
    var offset = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--dn-scroll-offset')) || 104;
    var theme = hero.getBoundingClientRect().bottom > offset + 8 ? 'dark' : 'light';
    nav.dataset.theme = theme;
    if (shell) shell.dataset.theme = theme;
})();
</script>
@endif