<div class="flex items-center justify-between p-4 border-b border-slate-700 sticky top-0" style="background: #1e293b; z-index: 10;">
    <div>
        <div class="text-sm font-bold text-white">{{ $lead->lead_number }}</div>
        <div class="text-xs text-slate-400">{{ $lead->contact?->full_name }}</div>
    </div>
    <div class="flex gap-2">
        <a href="{{ route('leads.edit', $lead) }}" class="btn btn-secondary text-xs py-1 px-3"><i class="fas fa-edit"></i> Edit</a>
        <button @click="panelOpen = false" class="w-7 h-7 rounded flex items-center justify-center hover:bg-slate-700 text-slate-400"><i class="fas fa-times"></i></button>
    </div>
</div>

<div class="p-5 space-y-5">
    <!-- Status -->
    <div class="flex items-center gap-2">
        <span class="badge badge-{{ $lead->statusColor() }} text-sm">{{ $lead->statusLabel() }}</span>
        <span class="badge {{ $lead->priority === 'high' ? 'badge-red' : ($lead->priority === 'medium' ? 'badge-yellow' : 'badge-gray') }}">{{ ucfirst($lead->priority) }} Priority</span>
    </div>

    <!-- Progress Steps -->
    <div>
        <h3 class="text-xs text-slate-500 uppercase tracking-wide mb-3">Lead Progress</h3>
        <div class="flex items-center">
            @foreach([['label' => 'New', 'key' => 'new'], ['label' => 'Consult', 'key' => 'consult_booked'], ['label' => 'On Hold', 'key' => 'on_hold'], ['label' => 'Sold', 'key' => 'sold']] as $i => $step)
            <div class="stepper-step">
                <div class="stepper-circle {{ $lead->status === $step['key'] ? 'bg-blue-600 text-white' : ($lead->status === 'lost' ? 'bg-red-900 text-red-400' : 'bg-slate-700 text-slate-500') }}" style="font-size: 10px;">{{ $i + 1 }}</div>
                <div class="text-xs mt-1 text-slate-500" style="font-size: 10px;">{{ $step['label'] }}</div>
            </div>
            @if($i < 3)<div class="flex-1 h-px bg-slate-700 mb-4"></div>@endif
            @endforeach
        </div>
    </div>

    <!-- Contact Info -->
    @if($lead->contact)
    <div class="card p-4 space-y-2">
        <h3 class="text-xs text-slate-500 uppercase tracking-wide mb-3">Client Details</h3>
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-full bg-blue-900 flex items-center justify-center font-bold text-blue-300">
                {{ $lead->contact->initials }}
            </div>
            <div>
                <div class="text-sm font-medium text-white">{{ $lead->contact->full_name }}</div>
                <div class="text-xs text-slate-400">{{ $lead->contact->company ?? 'Individual' }}</div>
            </div>
        </div>
        @if($lead->contact->email)
        <div class="flex items-center gap-2 text-sm"><i class="fas fa-envelope text-slate-500 w-4"></i><a href="mailto:{{ $lead->contact->email }}" class="text-blue-400 hover:text-blue-300">{{ $lead->contact->email }}</a></div>
        @endif
        @if($lead->contact->phone)
        <div class="flex items-center gap-2 text-sm"><i class="fas fa-phone text-slate-500 w-4"></i><a href="tel:{{ $lead->contact->phone }}" class="text-slate-300">{{ $lead->contact->phone }}</a></div>
        @endif
    </div>
    @endif

    <!-- Project Details -->
    <div class="space-y-3">
        <h3 class="text-xs text-slate-500 uppercase tracking-wide">Project Overview</h3>
        <div class="grid grid-cols-2 gap-3">
            <div>
                <div class="text-xs text-slate-500">Type</div>
                <div class="text-sm text-white">{{ $lead->project_type ? ucfirst($lead->project_type) : '—' }}</div>
            </div>
            <div>
                <div class="text-xs text-slate-500">Budget</div>
                <div class="text-sm text-white">{{ $lead->budget_range ?? '—' }}</div>
            </div>
            <div>
                <div class="text-xs text-slate-500">Source</div>
                <div class="text-sm text-white">{{ $lead->source ?? '—' }}</div>
            </div>
            <div>
                <div class="text-xs text-slate-500">Expected Start</div>
                <div class="text-sm text-white">{{ $lead->expected_start?->format('M Y') ?? '—' }}</div>
            </div>
        </div>
    </div>

    <!-- Site Address -->
    @if($lead->site_address)
    <div>
        <h3 class="text-xs text-slate-500 uppercase tracking-wide mb-2">Site Address</h3>
        <div class="text-sm text-slate-300">{{ $lead->site_address }}, {{ $lead->site_suburb }} {{ $lead->site_state }} {{ $lead->site_postcode }}</div>
    </div>
    @endif

    <!-- Notes -->
    @if($lead->notes)
    <div>
        <h3 class="text-xs text-slate-500 uppercase tracking-wide mb-2">Notes</h3>
        <div class="text-sm text-slate-300 p-3 rounded-lg" style="background: #0f172a;">{{ $lead->notes }}</div>
    </div>
    @endif

    <!-- Quick Actions -->
    <div class="space-y-2">
        <h3 class="text-xs text-slate-500 uppercase tracking-wide mb-3">Quick Actions</h3>
        <a href="{{ route('leads.edit', $lead) }}" class="btn btn-secondary w-full justify-center"><i class="fas fa-edit"></i> Edit Lead</a>
        <a href="{{ route('jobs.create') }}" class="btn btn-primary w-full justify-center"><i class="fas fa-briefcase"></i> Convert to Job</a>
    </div>
</div>
