@php
            use App\Models\Backend\menu\frontend\MenuCategory;
            use App\Models\Backend\menu\frontend\RoleMapping;
            
            $navbarCategoryId = MenuCategory::where('category_name', 'Navbar Public')->value('category_id');
            
            $buildSitemap = function($parentId = 0, $level = 0) use (&$buildSitemap, $navbarCategoryId) {
                $items = RoleMapping::with('menu')
                    ->where('role_code', 'public')
                    ->where('category_id', $navbarCategoryId)
                    ->where('parent_id', $parentId)
                    ->where('status', true)
                    ->orderBy('sort')
                    ->get()
                    ->unique('menu_id');
            
                $tree = [];
                foreach ($items as $item) {
                    if (!$item->menu || !$item->menu->menu_status) continue;
                    $tree[] = [
                        'menu' => $item->menu,
                        'level' => $level,
                        'children' => $buildSitemap($item->menu_id, $level + 1),
                    ];
                }
                return $tree;
            };
            
            $sitemap = $buildSitemap();
            @endphp
            <section class="sitemap-section">
                <div class="container">
                    <div class="sitemap-header">
                        <h1><span>Peta</span> Laman</h1>
                        <p>Senarai halaman dan pautan yang tersedia dalam portal ini.</p>
                    </div>
                    @if(count($sitemap))
                    <div class="sitemap-grid">
                        @foreach($sitemap as $item)
                        <div class="sitemap-card">
                            <a href="{{ $item['menu']->menu_link ?? '#' }}" class="sitemap-card-title">
                                @if($item['menu']->menu_icon)<i class="{{ $item['menu']->menu_icon }}"></i>@endif
                                {{ $item['menu']->menu_name }}
                            </a>
                            @if(count($item['children']))
                            <ul class="sitemap-list">
                                @foreach($item['children'] as $child)
                                <li>
                                    <a href="{{ $child['menu']->menu_link ?? '#' }}">{{ $child['menu']->menu_name }}</a>
                                    @if(count($child['children']))
                                    <ul class="sitemap-sublist">
                                        @foreach($child['children'] as $sub)
                                        <li><a href="{{ $sub['menu']->menu_link ?? '#' }}">{{ $sub['menu']->menu_name }}</a></li>
                                        @endforeach
                                    </ul>
                                    @endif
                                </li>
                                @endforeach
                            </ul>
                            @else
                            <p class="sitemap-no-children">Pautan langsung ke {{ $item['menu']->menu_name }}.</p>
                            @endif
                        </div>
                        @endforeach
                    </div>
                    @else
                    <div class="sitemap-empty">
                        <p>Tiada pautan buat masa ini.</p>
                    </div>
                    @endif
                </div>
            </section>
            <style>
            .sitemap-section { padding: 60px 0 80px; background: var(--gray-50); min-height: 60vh; }
            .sitemap-header { text-align: center; margin-bottom: 50px; }
            .sitemap-header h1 { font-size: 2rem; font-weight: 700; color: var(--gray-900); margin: 0 0 10px; }
            .sitemap-header h1 span { color: var(--accent); }
            .sitemap-header p { color: var(--gray-400); font-size: 1rem; margin: 0; }
            .sitemap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
            .sitemap-card { background: var(--white); border-radius: 16px; border: 1px solid var(--gray-200); padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
            .sitemap-card-title { display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 700; color: var(--gray-900); text-decoration: none; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--accent-light); }
            .sitemap-card-title i { color: var(--accent); }
            .sitemap-card-title:hover { color: var(--accent); }
            .sitemap-list { list-style: none; padding: 0; margin: 0; }
            .sitemap-list li { margin-bottom: 10px; }
            .sitemap-list li > a { display: block; font-size: 0.88rem; font-weight: 500; color: var(--gray-700); text-decoration: none; padding: 8px 12px; border-radius: 8px; transition: all 0.2s; }
            .sitemap-list li > a:hover { background: var(--gray-50); color: var(--accent); padding-left: 16px; }
            .sitemap-sublist { list-style: none; padding: 0 0 0 16px; margin: 4px 0 0; border-left: 2px solid var(--gray-200); }
            .sitemap-sublist li { margin-bottom: 4px; }
            .sitemap-sublist li a { display: block; font-size: 0.8rem; color: var(--gray-500); text-decoration: none; padding: 6px 10px; border-radius: 6px; transition: all 0.2s; }
            .sitemap-sublist li a:hover { color: var(--accent); background: var(--gray-50); }
            .sitemap-no-children { font-size: 0.85rem; color: var(--gray-400); margin: 0; padding: 8px 0; }
            .sitemap-empty { text-align: center; padding: 60px 0; color: var(--gray-400); }
            @media (max-width: 1024px) { .sitemap-grid { grid-template-columns: repeat(2, 1fr); } }
            @media (max-width: 768px) { .sitemap-grid { grid-template-columns: 1fr; } .sitemap-header h1 { font-size: 1.5rem; } }
            </style>