@if(!$onboarding['is_completed'])
<div class="rounded-2xl border-2 border-primary/20 bg-gradient-to-br from-primary/5 to-white shadow-sm dark:border-primary/30 dark:from-primary/10 dark:to-gray-800" x-data="{ collapsed: false }">
    <div class="flex items-start justify-between p-6 pb-4 cursor-pointer" @click="collapsed = !collapsed">
        <div>
            <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-1">
                👋 Bienvenue sur votre espace prestataire
            </h2>
            <p class="text-sm text-gray-600 dark:text-gray-400">
                Configurez les éléments essentiels pour utiliser la plateforme.
            </p>
        </div>
        <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition flex-shrink-0 ml-4">
            <svg class="w-5 h-5 transform transition-transform" :class="collapsed ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
            </svg>
        </button>
    </div>

    <div x-show="!collapsed" x-collapse>
        <div class="px-6 pb-6">
            <!-- Progress Bar -->
            <div class="mb-6">
                <div class="flex items-center justify-between mb-2">
                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Progression</span>
                    <span class="text-sm font-bold text-primary">{{ $onboarding['progress'] }}%</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700 overflow-hidden">
                    <div class="bg-primary h-2.5 rounded-full transition-all duration-500" style="width: {{ $onboarding['progress'] }}%"></div>
                </div>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                    {{ $onboarding['completed_count'] }} sur {{ $onboarding['total_count'] }} étapes complétées
                </p>
            </div>

            <!-- Checklist -->
            <div class="space-y-3">
                @foreach($onboarding['steps'] as $step)
                <div class="flex items-start gap-3 p-3 rounded-lg {{ $step['completed'] ? 'bg-green-50 dark:bg-green-900/20' : 'bg-white dark:bg-gray-800' }} border {{ $step['completed'] ? 'border-green-200 dark:border-green-800' : 'border-gray-200 dark:border-gray-700' }} transition">
                    <div class="flex-shrink-0 mt-0.5">
                        @if($step['completed'])
                            <div class="w-6 h-6 rounded-full bg-green-500 flex items-center justify-center">
                                <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                </svg>
                            </div>
                        @else
                            <div class="w-6 h-6 rounded-full border-2 border-gray-300 dark:border-gray-600"></div>
                        @endif
                    </div>
                    <div class="flex-1 min-w-0">
                        <h3 class="text-sm font-semibold {{ $step['completed'] ? 'text-green-700 dark:text-green-400' : 'text-gray-900 dark:text-white' }}">
                            {{ $step['label'] }}
                        </h3>
                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
                            {{ $step['description'] }}
                        </p>
                    </div>
                    @if(!$step['completed'])
                    <div class="flex-shrink-0">
                        <a href="{{ $step['route'] }}" class="inline-flex items-center px-3 py-1.5 text-xs font-medium text-white bg-primary hover:bg-primary/90 rounded-lg transition whitespace-nowrap">
                            {{ $step['action_label'] }}
                            <svg class="w-3 h-3 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                            </svg>
                        </a>
                    </div>
                    @endif
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
@endif