@php
            $allDownloads = \App\Models\Backend\ContentDownload::where('download_status', 'ACTIVE')->where('download_language', $lang)->orderBy('download_category')->orderBy('download_title')->get();
            $categories = \App\Models\Backend\Ref::where('cat', 'DOWNLOAD_CAT')->orderBy('sort')->pluck('descr', 'code');
            $grouped = [];
            foreach ($allDownloads as $d) {
                $catCode = $d->download_category ?? 'OTHER';
                $grouped[$catCode][] = $d;
            }
            @endphp
            @if($allDownloads->count())
            <section class="download-section">
                <div class="container">
                    <div class="download-header">
                        <span class="download-badge">Muat Turun</span>
                        <h1 class="download-title">Dokumen & Sumber</h1>
                        <p class="download-subtitle">Muat turun borang, panduan, laporan dan dokumen-dokumen lain yang diperlukan.</p>
                    </div>
            
                    <div class="download-grid">
                        @foreach($grouped as $catCode => $items)
                        @php $catName = $categories[$catCode] ?? $catCode; @endphp
                        <div class="download-category">
                            <h2 class="download-cat-title">{{ $catName }}</h2>
                            <div class="download-list">
                                @foreach($items as $item)
                                <div class="download-item">
                                    <div class="download-info">
                                        <span class="download-item-title">{{ $item->download_title }}</span>
                                        @if($item->download_source)
                                        <span class="download-source">{{ $item->download_source }}</span>
                                        @endif
                                    </div>
                                    @if($item->download_file)
                                    <a href="{{ \Illuminate\Support\Facades\Storage::url($item->download_file) }}" class="download-btn" download>
                                        <i class="fas fa-download"></i> Muat Turun
                                    </a>
                                    @else
                                    <span class="download-btn disabled">
                                        <i class="fas fa-clock"></i> Segera
                                    </span>
                                    @endif
                                </div>
                                @endforeach
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </section>
            
            <style>
            .download-section {
                padding: 60px 0 80px;
                background: var(--gray-50);
                min-height: 60vh;
            }
            .download-header {
                text-align: center;
                margin-bottom: 50px;
            }
            .download-badge {
                display: inline-block;
                background: var(--accent-light);
                color: var(--accent);
                padding: 6px 16px;
                border-radius: 999px;
                font-size: 0.75rem;
                font-weight: 600;
                margin-bottom: 16px;
            }
            .download-title {
                font-size: 2rem;
                font-weight: 700;
                color: var(--gray-900);
                margin: 0 0 12px;
            }
            .download-subtitle {
                color: var(--gray-400);
                font-size: 1rem;
                margin: 0;
            }
            .download-grid {
                max-width: 900px;
                margin: 0 auto;
                display: flex;
                flex-direction: column;
                gap: 40px;
            }
            .download-category {
            
            }
            .download-cat-title {
                font-size: 1.2rem;
                font-weight: 600;
                color: var(--gray-900);
                margin: 0 0 16px;
                padding-bottom: 12px;
                border-bottom: 2px solid var(--gray-200);
                display: flex;
                align-items: center;
                gap: 10px;
            }
            .download-cat-title::before {
                content: '';
                width: 4px;
                height: 20px;
                background: var(--accent);
                border-radius: 2px;
                display: block;
            }
            .download-list {
                display: flex;
                flex-direction: column;
                gap: 8px;
            }
            .download-item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 16px;
                background: var(--white);
                padding: 16px 20px;
                border-radius: 12px;
                border: 1px solid var(--gray-200);
                transition: box-shadow 0.2s, border-color 0.2s;
            }
            .download-item:hover {
                border-color: var(--accent);
                box-shadow: var(--shadow-md);
            }
            .download-info {
                flex: 1;
                min-width: 0;
            }
            .download-item-title {
                display: block;
                font-size: 0.9rem;
                font-weight: 500;
                color: var(--gray-800);
                margin-bottom: 4px;
            }
            .download-source {
                display: block;
                font-size: 0.8rem;
                color: var(--gray-400);
            }
            .download-btn {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                padding: 8px 18px;
                background: var(--primary);
                color: var(--white);
                border-radius: 8px;
                font-size: 0.8rem;
                font-weight: 500;
                text-decoration: none;
                white-space: nowrap;
                transition: background 0.2s;
            }
            .download-btn:hover {
                background: var(--primary-light);
            }
            .download-btn.disabled {
                background: var(--gray-200);
                color: var(--gray-400);
                cursor: default;
                pointer-events: none;
            }
            .download-btn i { font-size: 0.75rem; }
            @media (max-width: 768px) {
                .download-section { padding: 30px 0 50px; }
                .download-title { font-size: 1.4rem; }
                .download-item { flex-direction: column; align-items: stretch; gap: 12px; }
                .download-btn { justify-content: center; }
            }
            @media (max-width: 480px) {
                .download-title { font-size: 1.2rem; }
                .download-item { padding: 14px 16px; }
            }
            </style>
            @else
            <section style="padding:80px 0;text-align:center;background:var(--gray-50);min-height:50vh;">
                <div class="container">
                    <i class="fas fa-download" style="font-size:3rem;color:var(--gray-300);margin-bottom:20px;"></i>
                    <h2 style="color:var(--gray-500);font-weight:500;font-size:1.2rem;">Tiada Muat Turun</h2>
                    <p style="color:var(--gray-400);margin:10px 0 30px;">Tiada dokumen muat turun buat masa ini. Sila kembali semula kemudian.</p>
                    <a href="/{{ $siteSlug }}" style="display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:var(--primary);color:white;border-radius:10px;text-decoration:none;font-size:0.85rem;"><i class="fas fa-arrow-left"></i> Kembali ke Laman Utama</a>
                </div>
            </section>
            @endif