<x-filament-widgets::widget>
    <div style="display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));">
        {{-- Top guides --}}
        <x-filament::section>
            <x-slot name="heading">Most-downloaded guides</x-slot>
            @forelse ($guides as $i => $guide)
                <div style="display:flex; align-items:center; gap:0.85rem; padding:0.55rem 0; {{ ! $loop->last ? 'border-bottom:1px solid rgba(28,43,95,0.06);' : '' }}">
                    <span style="flex:none; display:grid; place-items:center; height:1.9rem; width:1.9rem; border-radius:0.6rem; background:#1c2b5f; color:#fff; font-family:Sora,sans-serif; font-weight:800; font-size:0.85rem;">{{ $i + 1 }}</span>
                    <span style="min-width:0; flex:1;">
                        <span style="display:block; font-weight:700; color:#15204a; font-size:0.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">{{ $guide->title }}</span>
                        <span style="display:block; color:#64748b; font-size:0.78rem;">{{ ucfirst($guide->category ?? 'Guide') }}</span>
                    </span>
                    <span style="flex:none; font-family:Sora,sans-serif; font-weight:800; color:#2787b8;">{{ number_format($guide->download_count) }}</span>
                </div>
            @empty
                <p class="text-sm text-gray-500">No guides yet.</p>
            @endforelse
        </x-filament::section>

        {{-- Top courses --}}
        <x-filament::section>
            <x-slot name="heading">Top courses by enrolment</x-slot>
            @forelse ($courses as $i => $course)
                <div style="display:flex; align-items:center; gap:0.85rem; padding:0.55rem 0; {{ ! $loop->last ? 'border-bottom:1px solid rgba(28,43,95,0.06);' : '' }}">
                    <span style="flex:none; display:grid; place-items:center; height:1.9rem; width:1.9rem; border-radius:0.6rem; background:#58b9e6; color:#0d142e; font-family:Sora,sans-serif; font-weight:800; font-size:0.85rem;">{{ $i + 1 }}</span>
                    <span style="min-width:0; flex:1;">
                        <span style="display:block; font-weight:700; color:#15204a; font-size:0.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">{{ $course->title }}</span>
                        <span style="display:block; color:#64748b; font-size:0.78rem;">{{ ucfirst($course->level ?? 'All levels') }}</span>
                    </span>
                    <span style="flex:none; font-family:Sora,sans-serif; font-weight:800; color:#2787b8;">{{ number_format($course->enrollments_count) }}</span>
                </div>
            @empty
                <p class="text-sm text-gray-500">No courses yet.</p>
            @endforelse
        </x-filament::section>
    </div>
</x-filament-widgets::widget>
