@php
    $state = $getState() ?? [];
    $a = $state['account'] ?? null;
    $m = $state['m'] ?? ['progress' => ['done' => 0, 'total' => 0], 'phases' => [], 'next' => null];
    $done = $m['progress']['done'] ?? 0;
    $total = max(1, $m['progress']['total'] ?? 1);
    $pct = (int) round($done / $total * 100);
    $status = $a->status ?? 'intake';
    $statusColor = ['live' => '#16a34a', 'synced' => '#2563eb', 'resolved' => '#0891b2', 'intake' => '#6b7280'][$status] ?? '#6b7280';
    $pad = '1.25rem';
@endphp

<div style="max-width: 960px; margin: 0 auto; padding: {{ $pad }} 0; display: flex; flex-direction: column; gap: {{ $pad }};">

    {{-- ── Yard header ── --}}
    <div class="rounded-xl border border-gray-200 dark:border-white/10 bg-white dark:bg-white/5" style="padding: {{ $pad }};">
        <div class="flex items-start justify-between gap-4">
            <div>
                <div class="text-lg font-bold text-gray-900 dark:text-white">{{ $a->yard_name ?? 'Yard' }}</div>
                <div class="text-sm text-gray-500 dark:text-gray-400">{{ $a->account_email ?? '—' }}</div>
            </div>
            <span class="text-xs font-semibold uppercase tracking-wide rounded-full px-2.5 py-1 text-white" style="background: {{ $statusColor }}">{{ $status }}</span>
        </div>
        <div class="mt-4 pt-4 border-t border-gray-100 dark:border-white/10" style="display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;">
            <div>
                <div class="text-xs text-gray-400 uppercase tracking-wide">GPS account</div>
                <div class="text-sm font-medium text-gray-800 dark:text-gray-100 mt-0.5">{{ $a->account_code ?? '—' }}</div>
            </div>
            <div>
                <div class="text-xs text-gray-400 uppercase tracking-wide">Webhook</div>
                <div class="text-sm font-medium mt-0.5" style="color: {{ ($a->webhook_configured ?? false) ? '#16a34a' : '#9ca3af' }}">
                    {{ ($a->webhook_configured ?? false) ? '✓ Configured' : 'Not configured' }}
                </div>
            </div>
            <div>
                <div class="text-xs text-gray-400 uppercase tracking-wide">Progress</div>
                <div class="text-sm font-medium text-gray-800 dark:text-gray-100 mt-0.5">{{ $done }} / {{ $total }} steps</div>
            </div>
        </div>
        @if(!empty($a->last_error))
            <div class="mt-3 text-sm rounded-lg px-3 py-2" style="background:#fef2f2; color:#b91c1c;">{{ $a->last_error }}</div>
        @endif
    </div>

    {{-- ── Progress + Next ── --}}
    <div class="rounded-xl border border-gray-200 dark:border-white/10 bg-white dark:bg-white/5" style="padding: {{ $pad }};">
        <div class="flex items-center justify-between mb-2.5">
            <span class="text-sm font-semibold text-gray-700 dark:text-gray-200">Onboarding progress</span>
            <span class="text-sm font-semibold text-gray-700 dark:text-gray-200">{{ $done }} / {{ $total }}</span>
        </div>
        <div class="w-full rounded-full bg-gray-100 dark:bg-white/10 overflow-hidden" style="height: 0.9rem;">
            <div class="h-full rounded-full transition-all duration-500" style="width: {{ $pct }}%; background:#3b82f6;"></div>
        </div>

        @if(!empty($m['next']))
            <div class="flex items-center gap-3 rounded-lg px-4 py-3" style="background:#eff6ff; margin-top: 2.5rem;">
                <span class="text-xs font-bold uppercase tracking-wide shrink-0" style="color:#2563eb;">Next</span>
                <span class="flex-1 text-sm text-gray-700">{{ $m['next']['label'] }}</span>
                @if(!empty($m['next']['key']))
                    <button type="button" wire:click="mountAction('{{ $m['next']['key'] }}')"
                        class="shrink-0 inline-flex items-center rounded-lg px-3 py-1.5 text-sm font-semibold text-white shadow-sm" style="background:#2563eb;">
                        {{ $m['next']['label'] }}
                    </button>
                @endif
            </div>
        @else
            <div class="rounded-lg px-4 py-3 text-sm font-medium" style="background:#f0fdf4; color:#15803d; margin-top: 2.5rem;">✓ All onboarding steps complete.</div>
        @endif
    </div>

    {{-- ── Phases ── --}}
    @foreach($m['phases'] as $phase)
        <div class="rounded-xl border border-gray-200 dark:border-white/10 bg-white dark:bg-white/5 overflow-hidden">
            <div class="flex items-center gap-3" style="padding: 0.75rem {{ $pad }}; background: rgba(0,0,0,0.015);">
                <span class="flex items-center justify-center text-xs font-bold text-white shrink-0" style="width:1.5rem; height:1.5rem; border-radius:9999px; background: {{ $phase['complete'] ? '#2563eb' : '#cbd5e1' }};">
                    {{ $phase['complete'] ? '✓' : $phase['number'] }}
                </span>
                <span class="flex-1 text-sm font-semibold text-gray-800 dark:text-gray-100">{{ $phase['title'] }}</span>
                <span class="text-xs text-gray-400">{{ $phase['done'] }}/{{ $phase['total'] }}</span>
            </div>

            <div>
                @foreach($phase['items'] as $it)
                    @php
                        $isDone = $it['status'] === 'done';
                        $icon = $isDone ? '✓' : ($it['status'] === 'pending' ? '○' : '–');
                    @endphp
                    <div class="flex items-center gap-3 text-sm border-t border-gray-50 dark:border-white/5" style="padding: 0.6rem {{ $pad }};">
                        <span class="shrink-0 w-4 text-center font-semibold" style="color: {{ $isDone ? '#16a34a' : '#9ca3af' }};">{{ $icon }}</span>
                        <span class="flex-1 text-gray-700 dark:text-gray-200">{{ $it['label'] }}</span>
                        <span class="text-[10px] uppercase tracking-wide rounded px-1.5 py-0.5" style="{{ $it['kind'] === 'auto' ? 'background:#dbeafe;color:#1d4ed8;' : 'background:#fef3c7;color:#b45309;' }}">{{ $it['kind'] }}</span>
                        <span class="text-xs text-gray-400 w-24 text-right truncate">{{ $it['detail'] }}</span>
                    </div>
                @endforeach
            </div>

            @if(!empty($phase['actions']) || !empty($phase['hint']))
                <div class="flex flex-wrap items-center gap-2 border-t border-gray-100 dark:border-white/10" style="padding: 0.75rem {{ $pad }}; background: rgba(0,0,0,0.015);">
                    @foreach($phase['actions'] as $action)
                        <button type="button" wire:click="mountAction('{{ $action['key'] }}')"
                            class="inline-flex items-center rounded-lg px-3 py-1.5 text-sm font-semibold shadow-sm {{ !empty($action['primary']) ? 'text-white' : 'text-gray-700 dark:text-gray-100' }}"
                            style="{{ !empty($action['primary']) ? 'background:#2563eb;' : 'background:#fff;border:1px solid #d1d5db;' }}">
                            {{ $action['label'] }}
                        </button>
                    @endforeach
                    @if(!empty($phase['hint']))
                        <span class="text-xs text-gray-400">{{ $phase['hint'] }}</span>
                    @endif
                </div>
            @endif
        </div>
    @endforeach
</div>