{{-- Setup Checklist — guides the client through customizing their site --}}
@if(!$setupChecklist['allDone'])
<div class="card card-flush mb-8 shadow-sm" style="border-left: 4px solid var(--bs-primary);">
    <div class="card-header pt-6 pb-3">
        <div class="card-title d-flex align-items-center gap-3">
            <div class="d-flex align-items-center justify-content-center rounded-circle bg-primary" style="width: 40px; height: 40px;">
                <i class="bi bi-rocket-takeoff text-white fs-4"></i>
            </div>
            <div>
                <h3 class="fw-bold text-gray-900 mb-0 fs-4">Configurá tu sitio</h3>
                <span class="text-muted fs-7">Tu sitio viene con contenido de ejemplo. Personalizalo con tu información real.</span>
            </div>
        </div>
        <div class="card-toolbar d-flex align-items-center gap-2">
            <span class="badge badge-light-primary fs-7 fw-semibold">{{ $setupChecklist['completed'] }}/{{ $setupChecklist['total'] }}</span>
        </div>
    </div>

    {{-- Progress bar --}}
    <div class="px-7 pb-3">
        <div class="progress" style="height: 5px;">
            <div class="progress-bar bg-primary" role="progressbar" style="width: {{ $setupChecklist['percent'] }}%"></div>
        </div>
    </div>

    <div class="card-body pt-2 pb-5">
        @foreach($setupChecklist['items'] as $item)
        <a href="{{ $item['url'] }}" class="d-flex align-items-center gap-3 py-3 px-3 rounded {{ $item['done'] ? 'bg-light-success' : 'bg-hover-light' }}" style="text-decoration: none;">
            @if($item['done'])
                <div class="d-flex align-items-center justify-content-center rounded-circle bg-success" style="width: 28px; height: 28px; min-width: 28px;">
                    <i class="bi bi-check-lg text-white fs-6"></i>
                </div>
            @else
                <div class="d-flex align-items-center justify-content-center rounded-circle border border-2 border-gray-300" style="width: 28px; height: 28px; min-width: 28px;">
                    <i class="bi {{ $item['icon'] }} text-gray-400 fs-7"></i>
                </div>
            @endif

            <div class="flex-grow-1">
                <span class="fw-semibold fs-6 d-block {{ $item['done'] ? 'text-gray-500 text-decoration-line-through' : 'text-gray-800' }}">
                    {{ $item['label'] }}
                </span>
                @if(!$item['done'] && !empty($item['desc']))
                    <span class="text-muted fs-7">{{ $item['desc'] }}</span>
                @endif
            </div>

            @if(!$item['done'])
                <span class="badge badge-light-primary fs-8">Editar</span>
            @endif
        </a>
        @endforeach

        <div class="d-flex align-items-center justify-content-between mt-4 pt-3" style="border-top: 1px solid var(--bs-gray-200);">
            <a href="{{ url('/') }}" target="_blank" class="btn btn-sm btn-primary fw-semibold">
                <i class="bi bi-eye me-1"></i> Ver mi sitio web
            </a>
            <form method="POST" action="{{ url('/site-data') }}" class="d-inline">
                @csrf
                <input type="hidden" name="setup[checklist_dismissed]" value="1">
                <input type="hidden" name="_tab" value="general">
                <button type="submit" class="btn btn-sm btn-light text-muted fw-normal">
                    Ocultar guía
                </button>
            </form>
        </div>
    </div>
</div>
@endif