@props([
    'percent' => 0,
    'missingFields' => [],
])

<section
    class="platform-card mb-8 border p-5 sm:p-6"
    style="border-color: color-mix(in srgb, var(--accent) 35%, var(--surface-border)); background: color-mix(in srgb, var(--accent) 6%, var(--surface-bg));"
    role="status"
>
    <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
        <div class="min-w-0 flex-1">
            <div class="mb-2 flex items-center gap-2">
                <span class="flex h-9 w-9 items-center justify-center rounded-xl" style="background: var(--accent-soft); color: var(--accent);">
                    <x-platform.lucide-icon name="user-round" class="h-5 w-5" />
                </span>
                <h2 class="text-base font-semibold">{{ __('platform.complete_profile_title') }}</h2>
            </div>

            <p class="platform-text-muted text-sm leading-6">
                {{ __('platform.complete_profile_message', ['percent' => $percent]) }}
            </p>

            @if (count($missingFields))
                <ul class="mt-3 space-y-1 text-sm">
                    @foreach ($missingFields as $field)
                        <li class="flex items-center gap-2">
                            <span class="h-1.5 w-1.5 rounded-full" style="background: var(--accent);"></span>
                            <span>{{ __($field['label']) }}</span>
                        </li>
                    @endforeach
                </ul>
            @endif
        </div>

        <div class="flex shrink-0 flex-col items-start gap-3 sm:items-end">
            <div class="w-full min-w-[140px] sm:w-auto">
                <div class="mb-1 flex items-center justify-between text-xs font-medium">
                    <span class="platform-text-muted">{{ __('platform.profile_completion') }}</span>
                    <span>%{{ $percent }}</span>
                </div>
                <div class="h-2 overflow-hidden rounded-full" style="background: var(--surface-border);">
                    <div class="h-full rounded-full transition-all" style="width: {{ $percent }}%; background: var(--accent);"></div>
                </div>
            </div>

            <a href="{{ route('platform.profile') }}" class="platform-btn-primary w-full sm:w-auto">
                {{ __('platform.complete_profile_cta') }}
            </a>
        </div>
    </div>
</section>