@php
    $aboutLink = collect($staticLinks)->firstWhere('id', 'about');
    $contactLink = collect($staticLinks)->firstWhere('id', 'contact');
    $servicesLabel = $navLabel('services', 'Solutions and Services');
    $industriesLabel = $navLabel('industries', 'Business Types');
    $portfolioLabel = $navLabel('portfolio', 'Our Portfolio');
    $languageLabel = $navLabel('region_and_language', 'Region and language');
    $languages = $languages ?? [];
    $currentLocale = $currentLocale ?? app()->getLocale();
    $logoHref = $logoHref ?? config('dynamic-nav-megamenu.parent_href', '/');
    $iconPath = $iconPath ?? asset('images/criazo-icon.svg');
    $wordmarkPath = $wordmarkPath ?? asset('images/criazo-wordmark.svg');
@endphp

<div class="dmm-mobile-shell" data-dmm-mobile-shell>
    <div class="dmm-mobile-toolbar">
        <div class="dmm-mobile-toolbar__start">
            <div class="dmm-mobile-toolbar__start-pill" data-dmm-mobile-start-pill>
                <span class="dmm-mobile-toolbar__slot dmm-mobile-toolbar__slot--logo">
                    <a
                        href="{{ $logoHref }}"
                        class="dmm-mobile-toolbar__logo"
                        data-dmm-mobile-logo
                        aria-label="{{ __('messages.accessibility.go_to_homepage') }}"
                    >
                        <img class="dmm-mobile-toolbar__logo-mark" src="{{ $iconPath }}" alt="" width="22" height="22" decoding="async">
                        <span class="dmm-mobile-toolbar__logo-grow" aria-hidden="true">
                            <span class="dmm-mobile-toolbar__logo-grow-inner">
                                <img class="dmm-mobile-toolbar__logo-wordmark" src="{{ $wordmarkPath }}" alt="" decoding="async">
                            </span>
                        </span>
                    </a>
                </span>
                <button
                    type="button"
                    class="dmm-mobile-toolbar__slot dmm-mobile-toolbar__slot--back"
                    data-dmm-mobile-back
                    aria-label="{{ $navLabel('back', 'Back') }}"
                    aria-hidden="true"
                    tabindex="-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>
        <button
            type="button"
            class="dmm-mobile-toolbar__close"
            data-dmm-mobile-close
            aria-label="{{ $navLabel('close_menu', 'Close menu') }}"
        >
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true">
                <path stroke-linecap="round" d="M6 6l12 12M18 6L6 18"/>
            </svg>
        </button>
    </div>

    <div class="dmm-mobile-stage" data-dmm-mobile-stage>
        {{-- Root --}}
        <div class="dmm-mobile-view is-active" data-dmm-mobile-view="root">
            <nav class="dmm-mobile-primary" aria-label="{{ $navLabel('menu', 'Menu') }}">
                <button type="button" class="dmm-mobile-primary__item" data-dmm-mobile-goto="services">
                    {{ $servicesLabel }}
                </button>
                <button type="button" class="dmm-mobile-primary__item" data-dmm-mobile-goto="industries">
                    {{ $industriesLabel }}
                </button>
                <button type="button" class="dmm-mobile-primary__item" data-dmm-mobile-goto="portfolio">
                    {{ $portfolioLabel }}
                </button>
                @if($aboutLink)
                    <a href="{{ $aboutLink['href'] }}" class="dmm-mobile-primary__item dmm-mobile-primary__item--link">
                        {{ $aboutLink['label'] }}
                    </a>
                @endif
            </nav>

            <div class="dmm-mobile-utilities">
                <button
                    type="button"
                    class="dmm-mobile-utility"
                    data-dmm-mobile-goto="language"
                    aria-label="{{ $languageLabel }} — {{ $activeLang['language'] ?? __('messages.nav.lang_en') }}"
                >
                    <span class="dmm-mobile-utility__icon" aria-hidden="true">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                            <circle cx="12" cy="12" r="9"/>
                            <path stroke-linecap="round" d="M3 12h18M12 3a15 15 0 0 1 0 18M12 3a15 15 0 0 0 0 18"/>
                        </svg>
                    </span>
                    <span class="dmm-mobile-utility__text">
                        <span class="dmm-mobile-utility__label">{{ $languageLabel }}</span>
                        <span class="dmm-mobile-utility__value">{{ $activeLang['language'] ?? __('messages.nav.lang_en') }}</span>
                    </span>
                </button>
            </div>
        </div>

        {{-- Language / region --}}
        <div class="dmm-mobile-view" data-dmm-mobile-view="language" hidden>
            <p class="dmm-mobile-eyebrow">{{ $languageLabel }}</p>
            <nav class="dmm-mobile-list" aria-label="{{ $languageLabel }}">
                @foreach($languages as $lang)
                    @php $isCurrent = $currentLocale === ($lang['locale'] ?? 'en'); @endphp
                    <a
                        href="{{ $lang['href'] }}"
                        class="dmm-mobile-list__item dmm-mobile-list__item--link{{ $isCurrent ? ' is-current' : '' }}"
                        @if($isCurrent) aria-current="page" @endif
                    >
                        <span>{{ $lang['language'] }}</span>
                        @if($isCurrent)
                            <svg class="dmm-mobile-list__item-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
                    </a>
                @endforeach
            </nav>
        </div>

        {{-- Services index --}}
        <div class="dmm-mobile-view" data-dmm-mobile-view="services" hidden>
            <p class="dmm-mobile-eyebrow">{{ $servicesLabel }}</p>
            <nav class="dmm-mobile-list" aria-label="{{ $servicesLabel }}">
                @foreach($serviceGroups as $group)
                    <button
                        type="button"
                        class="dmm-mobile-list__item"
                        data-dmm-mobile-goto="service-{{ $group['id'] }}"
                    >{{ $group['label'] }}</button>
                @endforeach
                <a href="{{ $servicesIndexHref }}" class="dmm-mobile-list__all">
                    <span class="dmm-mobile-list__all-label">{{ $navLabel('all_services', 'All services') }}</span>
                    <svg class="dmm-mobile-list__all-chevron" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M9 18l6-6-6-6"/>
                    </svg>
                </a>
            </nav>
        </div>

        {{-- Service detail --}}
        @foreach($serviceGroups as $group)
            @php
                $discoverLinks = $group['discover'] ?? [];
                $moreLinks = $group['more'] ?? [];
            @endphp
            <div class="dmm-mobile-view" data-dmm-mobile-view="service-{{ $group['id'] }}" hidden>
                <p class="dmm-mobile-eyebrow">{{ $navLabel('discover', 'Discover') }}</p>
                <nav class="dmm-mobile-list" aria-label="{{ $group['label'] }}">
                    @foreach($discoverLinks as $link)
                        <a href="{{ $link['href'] }}" class="dmm-mobile-list__item dmm-mobile-list__item--link">
                            {{ $link['label'] }}
                        </a>
                    @endforeach
                </nav>

                @if(! empty($moreLinks))
                    <p class="dmm-mobile-section-label">{{ $navLabel('more', 'More') }}</p>
                    <nav class="dmm-mobile-list dmm-mobile-list--compact" aria-label="{{ $navLabel('more', 'More') }}">
                        @foreach($moreLinks as $link)
                            <a href="{{ $link['href'] }}" class="dmm-mobile-list__item dmm-mobile-list__item--link">
                                {{ $link['label'] }}
                            </a>
                        @endforeach
                    </nav>
                @endif

                <a href="{{ $group['href'] }}" class="dmm-mobile-view-footer-link">
                    {{ __('messages.nav.learn_more_about', ['name' => $group['label']]) }}
                </a>
            </div>
        @endforeach

        {{-- Industries index --}}
        <div class="dmm-mobile-view" data-dmm-mobile-view="industries" hidden>
            <p class="dmm-mobile-eyebrow">{{ $industriesLabel }}</p>
            <nav class="dmm-mobile-list" aria-label="{{ $industriesLabel }}">
                @foreach($industrySections as $section)
                    <button
                        type="button"
                        class="dmm-mobile-list__item"
                        data-dmm-mobile-goto="industry-{{ $section['id'] }}"
                    >{{ $section['label'] }}</button>
                @endforeach
                <a href="{{ $industriesIndexHref }}" class="dmm-mobile-list__all">
                    <span class="dmm-mobile-list__all-label">{{ $navLabel('all_industries', 'All industries') }}</span>
                    <svg class="dmm-mobile-list__all-chevron" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M9 18l6-6-6-6"/>
                    </svg>
                </a>
            </nav>
        </div>

        {{-- Industry detail --}}
        @foreach($industrySections as $section)
            @php
                $items = $section['items'] ?? [];
                $primaryItems = array_slice($items, 0, 6);
                $specialtyItems = array_slice($items, 6);
            @endphp
            <div class="dmm-mobile-view" data-dmm-mobile-view="industry-{{ $section['id'] }}" hidden>
                <p class="dmm-mobile-eyebrow">{{ $navLabel('discover', 'Discover') }}</p>
                <nav class="dmm-mobile-list" aria-label="{{ $section['label'] }}">
                    @foreach($primaryItems as $item)
                        <a href="{{ $item['href'] }}" class="dmm-mobile-list__item dmm-mobile-list__item--link">
                            {{ $item['label'] }}
                        </a>
                    @endforeach
                </nav>

                @if(! empty($specialtyItems))
                    <p class="dmm-mobile-section-label">{{ $navLabel('specialties', 'Specialties') }}</p>
                    <nav class="dmm-mobile-list dmm-mobile-list--compact" aria-label="{{ $navLabel('specialties', 'Specialties') }}">
                        @foreach($specialtyItems as $item)
                            <a href="{{ $item['href'] }}" class="dmm-mobile-list__item dmm-mobile-list__item--link">
                                {{ $item['label'] }}
                            </a>
                        @endforeach
                    </nav>
                @endif

                <a href="{{ $section['href'] }}" class="dmm-mobile-view-footer-link">
                    {{ __('messages.nav.learn_more_about', ['name' => $section['label']]) }}
                </a>
            </div>
        @endforeach

        {{-- Portfolio --}}
        <div class="dmm-mobile-view" data-dmm-mobile-view="portfolio" hidden>
            <p class="dmm-mobile-eyebrow">{{ $portfolioLabel }}</p>
            <div class="dmm-mobile-portfolio__head">
                <span class="dmm-mobile-portfolio__label">{{ $navLabel('recent_work', 'Recent work') }}</span>
                <a href="{{ $portfolioIndexHref }}" class="dmm-mobile-portfolio__all">
                    {{ $navLabel('view_all_projects', 'View all projects') }}
                </a>
            </div>
            <div class="dmm-mobile-portfolio__grid">
                @foreach($portfolioMobileProjects as $project)
                    <a
                        href="{{ $project['href'] }}"
                        class="dmm-bento__cell dmm-bento__cell--mobile{{ ! empty($project['is_featured']) ? ' dmm-bento__cell--mobile-hero' : '' }}"
                        aria-label="{{ $project['title'] }}"
                    >
                        <span class="dmm-bento__media">
                            @if(! empty($project['image']))
                                <img src="{{ asset($project['image']) }}" alt="" loading="lazy" decoding="async">
                            @endif
                            <span class="dmm-bento__scrim" aria-hidden="true"></span>
                        </span>
                        <span class="dmm-bento__content">
                            @if(! empty($project['is_featured']))
                                <span class="dmm-bento__badge">{{ $navLabel('featured', 'Featured') }}</span>
                            @endif
                            <span class="dmm-bento__title">{{ $project['title'] }}</span>
                            @if(! empty($project['category']))
                                <span class="dmm-bento__cat">{{ $project['category'] }}</span>
                            @endif
                        </span>
                    </a>
                @endforeach
            </div>
        </div>
    </div>

    <div class="dmm-mobile-footer">
        <a href="{{ $cta['href'] }}" class="dmm-mobile-btn dmm-mobile-btn--outline">
            {{ $cta['label'] }}
        </a>
        @if($contactLink)
            <a href="{{ $contactLink['href'] }}" class="dmm-mobile-btn dmm-mobile-btn--primary">
                {{ $contactLink['label'] }}
            </a>
        @else
            <a href="{{ $cta['href'] }}" class="dmm-mobile-btn dmm-mobile-btn--primary">
                {{ $cta['label'] }}
            </a>
        @endif
    </div>
</div>