@php
    $navigation = filament()->getNavigation();
    $activeGroupLabel = collect($navigation)->first(fn ($g) => $g->isActive())?->getLabel() ?? '';
@endphp

<div
    class="lg:hidden w-full"
    x-data="{ open: @js($activeGroupLabel) }"
>
    @foreach ($navigation as $group)
        @php
            $groupLabel = $group->getLabel();
            $items      = $group->getItems();
            $isActive   = $group->isActive();
        @endphp

        <div class="border-b border-gray-100 dark:border-white/5 last:border-0">

            {{-- Module row --}}
            <button
                type="button"
                x-on:click="open = (open === @js($groupLabel)) ? '' : @js($groupLabel)"
                class="w-full flex items-center justify-between px-4 py-3 text-sm font-semibold transition-colors
                    {{ $isActive
                        ? 'text-primary-600 dark:text-primary-400'
                        : 'text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-white/5' }}"
            >
                <div class="flex items-center gap-3">
                    <x-filament::icon :icon="$group->getIcon()" class="w-5 h-5 flex-shrink-0" />
                    <span>{{ $groupLabel }}</span>
                </div>
                <svg
                    x-bind:style="open === @js($groupLabel) ? 'transform:rotate(90deg)' : 'transform:rotate(0deg)'"
                    style="transition:transform 0.2s ease;flex-shrink:0"
                    width="14" height="14" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor" stroke-width="2.5"
                >
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
                </svg>
            </button>

            {{-- Sub-items --}}
            <div x-show="open === @js($groupLabel)" style="display:none">
                <div style="margin-left:44px; border-left:2px solid #e5e7eb; padding:4px 0;">
                    @foreach ($items as $item)
                        @php
                            $isItemActive = $item->isActive();
                            $itemUrl      = $item->getUrl();
                            $childItems   = $item->getChildItems();
                        @endphp

                        @if (count($childItems))
                            <p style="padding:10px 16px 4px 16px; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:#9ca3af;">
                                {{ $item->getLabel() }}
                            </p>
                            @foreach ($childItems as $child)
                                <a
                                    href="{{ $child->getUrl() }}"
                                    style="display:block; padding:8px 16px; font-size:14px; text-decoration:none; transition:color 0.15s;
                                        {{ $child->isActive() ? 'color:#2563eb; font-weight:500;' : 'color:#6b7280;' }}"
                                    onmouseover="this.style.color='#111827'"
                                    onmouseout="this.style.color='{{ $child->isActive() ? '#2563eb' : '#6b7280' }}'"
                                >
                                    {{ $child->getLabel() }}
                                </a>
                            @endforeach
                        @else
                            <a
                                href="{{ $itemUrl }}"
                                style="display:block; padding:9px 16px; font-size:14px; text-decoration:none; transition:color 0.15s;
                                    {{ $isItemActive ? 'color:#2563eb; font-weight:500;' : 'color:#6b7280;' }}"
                                onmouseover="this.style.color='#111827'"
                                onmouseout="this.style.color='{{ $isItemActive ? '#2563eb' : '#6b7280' }}'"
                            >
                                {{ $item->getLabel() }}
                            </a>
                        @endif
                    @endforeach
                </div>
            </div>

        </div>
    @endforeach
</div>