@php
    /** @var \App\Models\Lead $record */
    $record = $getRecord();
    $verificationStatus = (string) data_get($record->raw_data, 'verification.status', 'pending');
    $verificationScore = (int) data_get($record->raw_data, 'verification.score', 0);
    $emailStatus = (string) data_get($record->raw_data, 'email_quality.status', 'missing');
    $linkedinUrl = $getState()['linkedin_url'] ?? null;
@endphp

<div class="lf-lead-card-root p-5 md:p-6">
    <div class="grid grid-cols-1 gap-4 md:grid-cols-[minmax(0,1fr)_auto] md:items-start">
        <div class="min-w-0">
            <div class="flex items-start justify-between gap-3">
                <div class="min-w-0">
                    <h4 class="truncate text-lg font-semibold leading-tight text-gray-950 dark:text-white">
                        {{ $record->full_name ?: 'Unknown contact' }}
                    </h4>
                    <p class="mt-1 truncate text-sm font-medium text-gray-700 dark:text-gray-200">
                        {{ $record->role ?: 'Role not captured' }}
                    </p>
                    <p class="mt-1 truncate text-sm text-gray-500 dark:text-gray-400">
                        {{ $record->company ?: 'Company not captured' }}
                        @if (filled($record->location))
                            · {{ $record->location }}
                        @endif
                    </p>
                </div>

                @if ($record->is_saved)
                    <span class="shrink-0 inline-flex items-center rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-semibold text-emerald-700 ring-1 ring-emerald-200">
                        Saved
                    </span>
                @endif
            </div>

            <div class="mt-4 flex flex-wrap items-center gap-2">
                <span class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold
                    @class([
                        'bg-green-50 text-green-700 ring-1 ring-green-200' => $verificationStatus === 'verified',
                        'bg-blue-50 text-blue-700 ring-1 ring-blue-200' => $verificationStatus === 'likely',
                        'bg-amber-50 text-amber-700 ring-1 ring-amber-200' => $verificationStatus === 'unverified',
                        'bg-gray-50 text-gray-700 ring-1 ring-gray-200' => ! in_array($verificationStatus, ['verified', 'likely', 'unverified'], true),
                    ])">
                    {{ ucfirst($verificationStatus) }}{{ $verificationScore > 0 ? " · {$verificationScore}%" : '' }}
                </span>

                <span class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold
                    @class([
                        'bg-green-50 text-green-700 ring-1 ring-green-200' => $emailStatus === 'likely',
                        'bg-amber-50 text-amber-700 ring-1 ring-amber-200' => $emailStatus === 'risky',
                        'bg-red-50 text-red-700 ring-1 ring-red-200' => $emailStatus === 'invalid',
                        'bg-gray-50 text-gray-700 ring-1 ring-gray-200' => ! in_array($emailStatus, ['likely', 'risky', 'invalid'], true),
                    ])">
                    Email: {{ ucfirst($emailStatus) }}
                </span>

                @if ($record->status)
                    <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-1 text-xs font-semibold text-gray-700 ring-1 ring-gray-200">
                        {{ ucfirst($record->status) }}
                    </span>
                @endif
            </div>
        </div>

        <div class="flex flex-row items-center justify-between gap-3 md:flex-col md:items-end md:justify-start">
            @if (filled($linkedinUrl))
                <a href="{{ $linkedinUrl }}" target="_blank" rel="noopener noreferrer"
                    class="inline-flex items-center gap-1.5 rounded-lg bg-white px-3 py-2 text-xs font-semibold text-gray-900 ring-1 ring-gray-300 transition hover:bg-gray-50">
                    <x-heroicon-o-arrow-top-right-on-square class="h-3.5 w-3.5" />
                    Open LinkedIn
                </a>
            @endif

            <div class="text-xs text-gray-500 dark:text-gray-400">
                Added {{ optional($record->created_at)->diffForHumans() }}
            </div>
        </div>
    </div>
</div>