<x-filament-widgets::widget>
    <x-filament::section>
        <x-slot name="heading">Recent activity</x-slot>
        <x-slot name="description">The latest things happening across Money-Wise</x-slot>

        @php
            $styles = [
                'signup'       => ['#2787b8', '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M19 8v6M22 11h-6"/>'],
                'assessment'   => ['#16a34a', '<path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>'],
                'consultation' => ['#1c2b5f', '<rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/>'],
                'lead'         => ['#d97706', '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M19 8v6M22 11h-6"/>'],
                'enrollment'   => ['#7c3aed', '<path d="M22 10 12 5 2 10l10 5 10-5Z"/><path d="M6 12.5V17c0 1.1 2.7 3 6 3s6-1.9 6-3v-4.5"/>'],
                'tool'         => ['#0ea5e9', '<rect x="4" y="2" width="16" height="20" rx="2"/><path d="M8 6h8M8 10h8M8 14h5"/>'],
            ];
        @endphp

        @if ($activity->isEmpty())
            <p class="text-sm text-gray-500">No activity yet, once members start signing up, taking assessments and booking consultations, you’ll see a live feed here.</p>
        @else
            <ul role="list" style="display:flex; flex-direction:column; gap:0.15rem;">
                @foreach ($activity as $item)
                    @php [$color, $path] = $styles[$item['type']] ?? $styles['lead']; @endphp
                    <li style="display:flex; align-items:center; gap:0.85rem; padding:0.6rem 0.25rem; border-bottom:1px solid rgba(28,43,95,0.06);">
                        <span style="flex:none; display:grid; place-items:center; height:2.25rem; width:2.25rem; border-radius:0.7rem; background:{{ $color }}1a; color:{{ $color }};">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:1.05rem;height:1.05rem;">{!! $path !!}</svg>
                        </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;">{{ $item['title'] }}</span>
                            <span style="display:block; color:#64748b; font-size:0.8rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">{{ $item['meta'] }}</span>
                        </span>
                        <span style="flex:none; color:#94a3b8; font-size:0.78rem; font-weight:600;">{{ $item['at']->diffForHumans(null, true) }} ago</span>
                    </li>
                @endforeach
            </ul>
        @endif
    </x-filament::section>
</x-filament-widgets::widget>
