@php
    $serviceGroups = $megaNavData['serviceGroups'] ?? [];
    $industrySections = $megaNavData['industrySections'] ?? [];
    $featuredProject = $megaNavData['featuredProject'] ?? null;
    $otherProjects = $megaNavData['otherProjects'] ?? [];
    $portfolioIndexHref = $megaNavData['portfolioIndexHref'] ?? '/portfolio';
    $servicesIndexHref = $megaNavData['servicesIndexHref'] ?? ($serviceGroups[0]['href'] ?? '/services');
    $industriesIndexHref = $megaNavData['industriesIndexHref'] ?? ($industrySections[0]['href'] ?? '/services');
    $portfolioFeatured = $featuredProject
        ? array_merge($featuredProject, ['is_featured' => true])
        : null;
    $portfolioBento = array_slice($otherProjects, 0, $portfolioFeatured ? 4 : 5);
    $navLabel = static function (string $key, string $fallback): string {
        $translated = __("messages.nav.{$key}");
        return $translated === "messages.nav.{$key}" ? $fallback : $translated;
    };
@endphp

<div class="dmm-mega-panel__inner">
    {{-- Services --}}
    <div class="dmm-mega-shell" data-dmm-mega-content="Services" hidden>
        <nav class="dmm-mega-rail" data-dmm-mega-rail aria-label="{{ __('messages.accessibility.services_navigation') }}">
            <a href="{{ $servicesIndexHref }}" class="dmm-mega-rail__head">
                {{ $navLabel('all_services', 'All services') }}
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
            </a>
            @foreach($serviceGroups as $group)
                <button
                    type="button"
                    class="dmm-mega-rail__item"
                    data-dmm-mega-rail-item="{{ $group['id'] }}"
                >{{ $group['label'] }}</button>
            @endforeach
        </nav>

        <div class="dmm-mega-detail" data-dmm-mega-detail>
            @foreach($serviceGroups as $group)
                <div class="dmm-mega-detail__pane" data-dmm-mega-pane="{{ $group['id'] }}" hidden>
                    <div class="dmm-mega-detail__col dmm-mega-detail__col--stack">
                        <span class="dmm-mega-detail__label">{{ $navLabel('discover', 'Discover') }}</span>
                        <ul class="dmm-mega-detail__list dmm-mega-detail__list--grid">
                            @foreach($group['discover'] as $link)
                                <li>
                                    <a href="{{ $link['href'] }}" class="dmm-mega-detail__link">
                                        <span class="dmm-mega-detail__link-text">{{ $link['label'] }}</span>
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                        @if(!empty($group['more']))
                            <span class="dmm-mega-detail__label">{{ $navLabel('more', 'More') }}</span>
                            <ul class="dmm-mega-detail__list dmm-mega-detail__list--grid">
                                @foreach($group['more'] as $link)
                                    <li>
                                        <a href="{{ $link['href'] }}" class="dmm-mega-detail__link">
                                            <span class="dmm-mega-detail__link-text">{{ $link['label'] }}</span>
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        @endif
                    </div>
                    <a href="{{ $group['href'] }}" class="dmm-mega-detail__lead dmm-mega-detail__lead--footer">
                        {{ __('messages.nav.learn_more_about', ['name' => $group['label']]) }}
                    </a>
                </div>
            @endforeach
        </div>
    </div>

    {{-- Industries --}}
    <div class="dmm-mega-shell dmm-mega-shell--industries" data-dmm-mega-content="Industries" hidden>
        <nav class="dmm-mega-rail" data-dmm-mega-rail aria-label="{{ __('messages.accessibility.industry_navigation') }}">
            <a href="{{ $industriesIndexHref }}" class="dmm-mega-rail__head">
                {{ $navLabel('all_industries', 'All industries') }}
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
            </a>
            @foreach($industrySections as $section)
                <button
                    type="button"
                    class="dmm-mega-rail__item"
                    data-dmm-mega-rail-item="{{ $section['id'] }}"
                >{{ $section['label'] }}</button>
            @endforeach
        </nav>

        <div class="dmm-mega-detail" data-dmm-mega-detail>
            @foreach($industrySections as $section)
                <div class="dmm-mega-detail__pane" data-dmm-mega-pane="{{ $section['id'] }}" hidden>
                    <div class="dmm-mega-detail__col dmm-mega-detail__col--stack">
                        <span class="dmm-mega-detail__label">{{ $navLabel('discover', 'Discover') }}</span>
                        <ul class="dmm-mega-detail__list dmm-mega-detail__list--grid">
                            @foreach(array_slice($section['items'] ?? [], 0, 6) as $item)
                                <li>
                                    <a href="{{ $item['href'] }}" class="dmm-mega-detail__link">
                                        <span class="dmm-mega-detail__link-text">{{ $item['label'] }}</span>
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                        @if(count($section['items'] ?? []) > 6)
                            <span class="dmm-mega-detail__label">{{ $navLabel('specialties', 'Specialties') }}</span>
                            <ul class="dmm-mega-detail__list dmm-mega-detail__list--grid">
                                @foreach(array_slice($section['items'] ?? [], 6) as $item)
                                    <li>
                                        <a href="{{ $item['href'] }}" class="dmm-mega-detail__link">
                                            <span class="dmm-mega-detail__link-text">{{ $item['label'] }}</span>
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        @endif
                    </div>
                    <a href="{{ $section['href'] }}" class="dmm-mega-detail__lead dmm-mega-detail__lead--footer">
                        {{ __('messages.nav.learn_more_about', ['name' => $section['label']]) }}
                    </a>
                </div>
            @endforeach
        </div>
    </div>

    {{-- Portfolio — compact bento grid --}}
    <div class="dmm-mega-shell dmm-mega-shell--portfolio" data-dmm-mega-content="Portfolio" data-dmm-mega-static hidden>
        <div class="dmm-mega-portfolio-layout">
            <div class="dmm-mega-portfolio-main__head">
                <h3 class="dmm-mega-portfolio-main__title">{{ $navLabel('recent_work', 'Recent work') }}</h3>
                <a href="{{ $portfolioIndexHref }}" class="dmm-mega-portfolio-main__all">
                    {{ $navLabel('view_all_projects', 'View all projects') }}
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
                </a>
            </div>

            <div class="dmm-portfolio-bento{{ $portfolioFeatured ? '' : ' dmm-portfolio-bento--no-hero' }}">
                @if($portfolioFeatured)
                    <a
                        href="{{ $portfolioFeatured['href'] }}"
                        class="dmm-bento__cell dmm-bento__cell--hero"
                        aria-label="{{ $portfolioFeatured['title'] }}"
                    >
                        <span class="dmm-bento__media">
                            @if($portfolioFeatured['image'])
                                <img src="{{ asset($portfolioFeatured['image']) }}" alt="" loading="lazy" decoding="async">
                            @endif
                            <span class="dmm-bento__scrim" aria-hidden="true"></span>
                        </span>
                        <span class="dmm-bento__content">
                            <span class="dmm-bento__badge">{{ $navLabel('featured', 'Featured') }}</span>
                            <span class="dmm-bento__title">{{ $portfolioFeatured['title'] }}</span>
                            <span class="dmm-bento__cat">{{ $portfolioFeatured['category'] }}</span>
                        </span>
                    </a>
                @endif

                @foreach($portfolioBento as $index => $project)
                    <a
                        href="{{ $project['href'] }}"
                        class="dmm-bento__cell dmm-bento__cell--slot dmm-bento__cell--slot-{{ $index + 1 }}"
                        aria-label="{{ $project['title'] }}"
                    >
                        <span class="dmm-bento__media">
                            @if($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">
                            <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>