@php
    $onboardingService = app(\App\Domains\Workspace\Services\OnboardingService::class);
    $obStatus = $onboardingService->getStatus();
@endphp

@if(!$obStatus['is_checklist_dismissed'] && $obStatus['percentage'] < 100)
    <div class="bg-gradient-to-r from-blue-900 to-indigo-950 rounded-xl p-5 text-white shadow-sm space-y-4">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 border-b border-white/10 pb-3">
            <div>
                <h2 class="text-sm font-bold tracking-tight">Get the most from LeadPilot</h2>
                <p class="text-xs text-blue-200 mt-0.5">Complete your workspace setup to ensure no lead is left behind.</p>
            </div>
            <div class="flex items-center gap-3">
                <span class="text-xs font-bold text-blue-200">{{ $obStatus['percentage'] }}% Complete</span>
                <form action="{{ route('onboarding.checklist.dismiss') }}" method="POST">
                    @csrf
                    <button type="submit" class="text-xs text-white/60 hover:text-white underline">Dismiss</button>
                </form>
            </div>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-5 gap-3 text-xs">
            <div class="flex items-center gap-2 p-2.5 rounded-lg {{ $obStatus['milestones']['business_profile'] ? 'bg-white/10 text-white' : 'bg-black/20 text-white/50' }}">
                <i data-lucide="{{ $obStatus['milestones']['business_profile'] ? 'check-circle-2' : 'circle' }}" class="w-4 h-4 {{ $obStatus['milestones']['business_profile'] ? 'text-emerald-400' : 'text-white/40' }}"></i>
                <span class="font-medium">Business Profile</span>
            </div>

            <div class="flex items-center gap-2 p-2.5 rounded-lg {{ $obStatus['milestones']['lead_capture'] ? 'bg-white/10 text-white' : 'bg-black/20 text-white/50' }}">
                <i data-lucide="{{ $obStatus['milestones']['lead_capture'] ? 'check-circle-2' : 'circle' }}" class="w-4 h-4 {{ $obStatus['milestones']['lead_capture'] ? 'text-emerald-400' : 'text-white/40' }}"></i>
                <span class="font-medium">Lead Capture</span>
            </div>

            <div class="flex items-center gap-2 p-2.5 rounded-lg {{ $obStatus['milestones']['follow_up_sequence'] ? 'bg-white/10 text-white' : 'bg-black/20 text-white/50' }}">
                <i data-lucide="{{ $obStatus['milestones']['follow_up_sequence'] ? 'check-circle-2' : 'circle' }}" class="w-4 h-4 {{ $obStatus['milestones']['follow_up_sequence'] ? 'text-emerald-400' : 'text-white/40' }}"></i>
                <span class="font-medium">Follow-Up Sequence</span>
            </div>

            <div class="flex items-center gap-2 p-2.5 rounded-lg {{ $obStatus['milestones']['email_configured'] ? 'bg-white/10 text-white' : 'bg-black/20 text-white/50' }}">
                <i data-lucide="{{ $obStatus['milestones']['email_configured'] ? 'check-circle-2' : 'circle' }}" class="w-4 h-4 {{ $obStatus['milestones']['email_configured'] ? 'text-emerald-400' : 'text-white/40' }}"></i>
                <span class="font-medium">Email Delivery</span>
            </div>

            <div class="flex items-center gap-2 p-2.5 rounded-lg {{ $obStatus['milestones']['first_lead_created'] ? 'bg-white/10 text-white' : 'bg-black/20 text-white/50' }}">
                <i data-lucide="{{ $obStatus['milestones']['first_lead_created'] ? 'check-circle-2' : 'circle' }}" class="w-4 h-4 {{ $obStatus['milestones']['first_lead_created'] ? 'text-emerald-400' : 'text-white/40' }}"></i>
                <span class="font-medium">First Enquiry</span>
            </div>
        </div>
    </div>
@endif