<?= $this->extend('layout/app') ?>

<?= $this->section('title') ?><?= esc($lead['name']) ?><?= $this->endSection() ?>
<?= $this->section('pageTitle') ?>Lead Profile<?= $this->endSection() ?>

<?= $this->section('content') ?>

<?php
$statusColorsMap = [
    'gray'    => 'bg-slate-100 text-slate-700 border-slate-200',
    'blue'    => 'bg-blue-100 text-blue-700 border-blue-200',
    'green'   => 'bg-emerald-100 text-emerald-700 border-emerald-200',
    'yellow'  => 'bg-amber-100 text-amber-700 border-amber-200',
    'orange'  => 'bg-orange-100 text-orange-700 border-orange-200',
    'red'     => 'bg-red-100 text-red-700 border-red-200',
    'purple'  => 'bg-purple-100 text-purple-700 border-purple-200',
    'pink'    => 'bg-pink-100 text-pink-700 border-pink-200',
    'indigo'  => 'bg-indigo-100 text-indigo-700 border-indigo-200',
    'cyan'    => 'bg-cyan-100 text-cyan-700 border-cyan-200',
];
$colorKey = strtolower($lead['status_color'] ?? 'gray');
$statusBadgeClass = $statusColorsMap[$colorKey] ?? $statusColorsMap['gray'];
?>

<div class="mb-5 flex items-center gap-3 flex-wrap">
    <a href="<?= esc(site_url('/agent/leads')) ?>" class="inline-flex items-center gap-1.5 px-3 py-2 rounded-xl bg-white border border-slate-200 text-sm text-slate-600 hover:bg-slate-50 hover:border-slate-300 transition-all shadow-sm">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
        </svg>
        Back to Leads
    </a>
    <span class="inline-flex items-center px-3 py-1.5 rounded-xl text-xs font-mono font-semibold bg-slate-100 text-slate-700 border border-slate-200">
        <?= esc($lead['lead_number']) ?>
    </span>
    <span class="inline-flex items-center px-3 py-1.5 rounded-xl text-xs font-semibold border <?= $statusBadgeClass ?>">
        <?= esc($lead['status_name'] ?? 'Unknown') ?>
    </span>

    <div class="ml-auto flex items-center gap-2">
        <a href="<?= esc($bookUrl ?? site_url('/agent/leads/book/' . (int)($lead['id'] ?? 0))) ?>" class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-gradient-to-br from-purple-600 to-indigo-600 text-white font-medium shadow-lg shadow-purple-500/25 hover:shadow-xl hover:shadow-purple-500/30 transition-all duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z" />
            </svg>
            Book Assessment
        </a>
        <a href="<?= esc(site_url('/agent/documents')) ?>" class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-gradient-to-br from-blue-500 to-indigo-600 text-white font-medium shadow-lg shadow-blue-500/25 hover:shadow-xl hover:shadow-blue-500/30 transition-all duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
            </svg>
            Call Scripts
        </a>
        <?php if (!empty($lead['phone'])): ?>
            <button type="button" id="profile-call-btn"
                    class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-gradient-to-br from-emerald-500 to-teal-600 text-white font-medium shadow-lg shadow-emerald-500/25 hover:shadow-xl hover:shadow-emerald-500/30 transition-all duration-200 <?= empty($cloudtalkConfigured) ? 'opacity-60' : '' ?>"
                    data-lead-id="<?= (int) $lead['id'] ?>"
                    data-lead-phone="<?= esc($lead['phone']) ?>"
                    data-lead-name="<?= esc($lead['name']) ?>"
                    data-lead-email="<?= esc($lead['email'] ?? '') ?>"
                    data-lead-company="<?= esc($lead['company_name'] ?? '') ?>">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                </svg>
                CloudTalk Call
            </button>
        <?php endif; ?>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

    <div class="lg:col-span-2 space-y-6">

        <div class="glass rounded-2xl border border-white/60 shadow-sm overflow-hidden">
            <div class="px-6 py-5 bg-gradient-to-r from-blue-50/60 via-white to-indigo-50/60 border-b border-slate-200/60">
                <div class="flex items-start gap-4 flex-wrap">
                    <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-white font-bold text-2xl shadow-lg shadow-blue-500/25">
                        <?= strtoupper(substr(esc($lead['name'] ?? 'U'), 0, 1)) ?>
                    </div>
                    <div class="flex-1 min-w-0">
                        <h2 class="text-2xl font-bold text-slate-800 mb-1"><?= esc($lead['name']) ?></h2>
                        <div class="flex flex-wrap items-center gap-3">
                            <?php if (!empty($lead['assigned_name'])): ?>
                                <span class="inline-flex items-center gap-1.5 text-sm text-slate-600">
                                    <div class="w-5 h-5 rounded-md bg-gradient-to-br from-emerald-400 to-cyan-500 flex items-center justify-center text-white text-[10px] font-bold">
                                        <?= strtoupper(substr(esc($lead['assigned_name']), 0, 1)) ?>
                                    </div>
                                    Assigned to: <strong class="text-slate-700"><?= esc($lead['assigned_name']) ?></strong>
                                </span>
                            <?php endif; ?>
                            <span class="text-sm text-slate-500">
                                Created: <?= date('F j, Y g:i A', strtotime($lead['created_at'])) ?>
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-5">

                <div class="md:col-span-2 border-b border-slate-100 pb-5 mb-1">
                    <p class="text-[11px] font-semibold text-slate-500 uppercase tracking-wide mb-2">Primary Contact</p>
                    <div class="flex flex-wrap gap-4">
                        <?php if (!empty($lead['email'])): ?>
                            <a href="mailto:<?= esc($lead['email']) ?>" class="inline-flex items-center gap-2.5 px-3.5 py-2 rounded-xl bg-white border border-slate-200 hover:border-blue-300 hover:bg-blue-50/50 transition-all group">
                                <div class="w-8 h-8 rounded-lg bg-blue-50 flex items-center justify-center group-hover:bg-blue-100 transition-colors">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                                    </svg>
                                </div>
                                <div class="min-w-0">
                                    <p class="text-[11px] font-semibold text-slate-400 uppercase tracking-wide">Email</p>
                                    <p class="text-sm text-slate-700 font-medium truncate"><?= esc($lead['email']) ?></p>
                                </div>
                            </a>
                        <?php endif; ?>
                        <?php if (!empty($lead['phone'])): ?>
                            <a href="tel:<?= esc($lead['phone']) ?>" class="inline-flex items-center gap-2.5 px-3.5 py-2 rounded-xl bg-white border border-slate-200 hover:border-emerald-300 hover:bg-emerald-50/50 transition-all group">
                                <div class="w-8 h-8 rounded-lg bg-emerald-50 flex items-center justify-center group-hover:bg-emerald-100 transition-colors">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                                    </svg>
                                </div>
                                <div class="min-w-0">
                                    <p class="text-[11px] font-semibold text-slate-400 uppercase tracking-wide">Phone</p>
                                    <p class="text-sm text-slate-700 font-medium truncate"><?= esc($lead['phone']) ?></p>
                                </div>
                            </a>
                        <?php endif; ?>
                    </div>
                    <?php if (empty($lead['email']) && empty($lead['phone'])): ?>
                        <p class="text-sm text-slate-400 italic">No contact information provided.</p>
                    <?php endif; ?>
                </div>

                <div>
                    <p class="text-[11px] font-semibold text-slate-500 uppercase tracking-wide mb-1.5">Company</p>
                    <p class="text-sm font-semibold text-slate-800"><?= esc($lead['company_name'] ?? '—') ?></p>
                </div>
                <div>
                    <p class="text-[11px] font-semibold text-slate-500 uppercase tracking-wide mb-1.5">License Number</p>
                    <p class="text-sm font-semibold text-slate-800 font-mono"><?= esc($lead['license_number'] ?? '—') ?></p>
                </div>
            </div>
        </div>

        <?php if (!empty($customFields)): ?>
            <div class="glass rounded-2xl border border-white/60 shadow-sm overflow-hidden">
                <div class="px-6 py-4 border-b border-slate-200/60 flex items-center gap-2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                    </svg>
                    <h3 class="font-semibold text-slate-800">Custom Fields</h3>
                </div>
                <div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-5">
                    <?php foreach ($customFields as $field): ?>
                        <?php
                            $fieldId = (int)$field['id'];
                            $value = isset($customValues[$fieldId]) ? $customValues[$fieldId]['field_value'] : null;
                            $options = [];
                            if (!empty($field['options_json'])) {
                                $decoded = json_decode($field['options_json'], true);
                                if (is_array($decoded)) $options = $decoded;
                            }
                            $displayValue = $value ?? '—';
                            if (!empty($options) && $value !== null) {
                                $optMap = [];
                                foreach ($options as $opt) {
                                    if (is_array($opt) && isset($opt['value'], $opt['label'])) {
                                        $optMap[$opt['value']] = $opt['label'];
                                    } else {
                                        $optMap[(string)$opt] = (string)$opt;
                                    }
                                }
                                $displayValue = $optMap[$value] ?? $value;
                            }
                        ?>
                        <div>
                            <p class="text-[11px] font-semibold text-slate-500 uppercase tracking-wide mb-1.5 flex items-center gap-1.5">
                                <?= esc($field['field_label']) ?>
                                <?php if (!empty($field['required'])): ?>
                                    <span class="text-red-500">*</span>
                                <?php endif; ?>
                                <span class="text-[10px] text-slate-400 normal-case font-medium">(<?= esc($field['field_type']) ?>)</span>
                            </p>
                            <?php if ($field['field_type'] === 'textarea'): ?>
                                <p class="text-sm text-slate-700 leading-relaxed whitespace-pre-wrap bg-slate-50 rounded-lg p-3 border border-slate-100 min-h-[60px]"><?= esc($displayValue) ?></p>
                            <?php elseif ($field['field_type'] === 'select' || $field['field_type'] === 'radio'): ?>
                                <p class="text-sm font-medium text-slate-800 inline-flex items-center px-3 py-1.5 rounded-lg bg-purple-50 text-purple-700 border border-purple-100"><?= esc($displayValue) ?></p>
                            <?php elseif ($field['field_type'] === 'checkbox'): ?>
                                <p class="text-sm font-medium text-slate-800">
                                    <?php if ($value == 1 || $value === 'true' || $value === '1' || $value === true): ?>
                                        <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-emerald-50 text-emerald-700 border border-emerald-100">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
                                            Yes
                                        </span>
                                    <?php elseif ($value !== null && $value !== ''): ?>
                                        <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-slate-50 text-slate-600 border border-slate-200">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
                                            No
                                        </span>
                                    <?php else: ?>
                                        <span class="text-slate-400">—</span>
                                    <?php endif; ?>
                                </p>
                            <?php else: ?>
                                <p class="text-sm font-medium text-slate-800 break-words"><?= esc($displayValue) ?></p>
                            <?php endif; ?>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
        <?php endif; ?>

        <?= view('_partials/lead_booking_block', [
            'lead'      => $lead,
            'bookings'  => $bookings  ?? [],
            'bookUrl'   => $bookUrl   ?? site_url('/agent/leads/book/' . (int)($lead['id'] ?? 0)),
            'cancelUrl' => site_url('/agent/bookings/cancel'),
            'viewUrl'   => site_url('/agent/bookings/view'),
            'tzDefault' => 'America/Los_Angeles',
        ]) ?>

        <div class="glass rounded-2xl border border-white/60 shadow-sm overflow-hidden">
            <div class="px-6 py-4 border-b border-slate-200/60 flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
                </svg>
                <h3 class="font-semibold text-slate-800">Notes</h3>
                <span class="ml-auto text-xs text-slate-500 font-medium"><?= count($notes) ?> note<?= count($notes) !== 1 ? 's' : '' ?></span>
            </div>

            <div class="px-6 py-5 border-b border-slate-100 bg-amber-50/40">
                <form action="<?= esc(site_url('/agent/leads/note/add/' . $lead['id'])) ?>" method="POST">
                    <?= csrf_field() ?>
                    <label class="block text-[11px] font-semibold text-slate-600 uppercase tracking-wide mb-2">Add a Note</label>
                    <textarea name="note_text" rows="3" required placeholder="Write a note about this lead..." class="w-full px-4 py-3 rounded-xl bg-white border border-slate-200 focus:border-amber-400 focus:ring-4 focus:ring-amber-100/60 outline-none text-sm resize-none transition-all shadow-sm placeholder:text-slate-500"></textarea>
                    <div class="mt-3 flex items-center justify-between gap-3 flex-wrap">
                        <p class="text-xs text-slate-500 flex items-center gap-1.5">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                            </svg>
                            Notes are visible to all team members
                        </p>
                        <button type="submit" class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-amber-600 text-white text-sm font-medium hover:bg-amber-700 transition-colors shadow-md shadow-amber-500/20">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
                            </svg>
                            Save Note
                        </button>
                    </div>
                </form>
            </div>

            <div class="divide-y divide-slate-100">
                <?php if (empty($notes)): ?>
                    <div class="px-6 py-12 text-center">
                        <div class="w-16 h-16 mx-auto mb-3 rounded-2xl bg-amber-50 flex items-center justify-center">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
                            </svg>
                        </div>
                        <p class="font-medium text-slate-700">No notes yet</p>
                        <p class="text-sm text-slate-500 mt-1">Be the first to add a note about this lead.</p>
                    </div>
                <?php else: ?>
                    <?php foreach ($notes as $note): ?>
                        <div class="px-6 py-4 hover:bg-slate-50/50 transition-colors">
                            <div class="flex items-start gap-3">
                                <div class="w-9 h-9 rounded-xl bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center text-white font-bold text-xs shadow-sm flex-shrink-0">
                                    <?= strtoupper(substr(esc($note['user_name'] ?? 'U'), 0, 1)) ?>
                                </div>
                                <div class="flex-1 min-w-0">
                                    <div class="flex items-center gap-2 flex-wrap mb-1">
                                        <span class="text-sm font-semibold text-slate-800"><?= esc($note['user_name'] ?? 'Unknown User') ?></span>
                                        <span class="text-xs text-slate-400">
                                            <?= date('M j, Y g:i A', strtotime($note['created_at'])) ?>
                                        </span>
                                    </div>
                                    <div class="text-sm text-slate-700 leading-relaxed whitespace-pre-wrap break-words">
                                        <?= esc($note['note_text']) ?>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div>
        </div>

        <?= view('_partials/call_history_block', [
            'calls'                => $calls ?? [],
            'cloudtalkConfigured'  => $cloudtalkConfigured ?? true,
        ]) ?>

    </div>

    <div class="space-y-6">

        <div class="glass rounded-2xl border border-white/60 shadow-sm overflow-hidden">
            <div class="px-5 py-4 border-b border-slate-200/60 flex items-center gap-2 bg-gradient-to-r from-slate-50 to-blue-50/50">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
                </svg>
                <h3 class="font-semibold text-slate-800">Quick Actions</h3>
            </div>
            <div class="p-4 space-y-2.5">
                <a href="<?= esc(site_url('/agent/documents')) ?>" class="flex items-center gap-3 p-3.5 rounded-xl bg-gradient-to-br from-blue-50 to-indigo-50 border border-blue-100 hover:border-blue-200 hover:shadow-md transition-all group">
                    <div class="w-10 h-10 rounded-xl bg-white flex items-center justify-center shadow-sm group-hover:shadow transition-shadow">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                        </svg>
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="font-semibold text-slate-800">Call Scripts</p>
                        <p class="text-xs text-slate-500 mt-0.5">Browse scripts & resources</p>
                    </div>
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-slate-400 group-hover:text-blue-600 group-hover:translate-x-0.5 transition-all" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                    </svg>
                </a>

                <?php if (!empty($lead['phone'])): ?>
                    <a href="tel:<?= esc($lead['phone']) ?>" class="flex items-center gap-3 p-3.5 rounded-xl bg-gradient-to-br from-emerald-50 to-teal-50 border border-emerald-100 hover:border-emerald-200 hover:shadow-md transition-all group">
                        <div class="w-10 h-10 rounded-xl bg-white flex items-center justify-center shadow-sm group-hover:shadow transition-shadow">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                            </svg>
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="font-semibold text-slate-800">Call Lead</p>
                            <p class="text-xs text-slate-500 mt-0.5"><?= esc($lead['phone']) ?></p>
                        </div>
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-slate-400 group-hover:text-emerald-600 group-hover:translate-x-0.5 transition-all" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                        </svg>
                    </a>
                <?php endif; ?>

                <?php if (!empty($lead['email'])): ?>
                    <a href="mailto:<?= esc($lead['email']) ?>" class="flex items-center gap-3 p-3.5 rounded-xl bg-gradient-to-br from-violet-50 to-purple-50 border border-violet-100 hover:border-violet-200 hover:shadow-md transition-all group">
                        <div class="w-10 h-10 rounded-xl bg-white flex items-center justify-center shadow-sm group-hover:shadow transition-shadow">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-violet-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                            </svg>
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="font-semibold text-slate-800">Send Email</p>
                            <p class="text-xs text-slate-500 mt-0.5 truncate"><?= esc($lead['email']) ?></p>
                        </div>
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-slate-400 group-hover:text-violet-600 group-hover:translate-x-0.5 transition-all" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                        </svg>
                    </a>
                <?php endif; ?>

                <a href="<?= esc(site_url('/agent/leads')) ?>" class="flex items-center gap-3 p-3.5 rounded-xl bg-slate-50 border border-slate-200 hover:bg-white hover:border-slate-300 hover:shadow-md transition-all group">
                    <div class="w-10 h-10 rounded-xl bg-white flex items-center justify-center shadow-sm group-hover:shadow transition-shadow border border-slate-100">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-slate-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                        </svg>
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="font-semibold text-slate-800">All Leads</p>
                        <p class="text-xs text-slate-500 mt-0.5">Browse other leads</p>
                    </div>
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-slate-400 group-hover:text-slate-600 group-hover:translate-x-0.5 transition-all" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                    </svg>
                </a>
            </div>
        </div>

        <div class="glass rounded-2xl border border-white/60 shadow-sm overflow-hidden">
            <div class="px-5 py-4 border-b border-slate-200/60 flex items-center gap-2 bg-gradient-to-r from-slate-50 to-emerald-50/50">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <h3 class="font-semibold text-slate-800">Call Tips</h3>
            </div>
            <div class="p-5 space-y-3 text-sm text-slate-600 leading-relaxed">
                <div class="flex items-start gap-2.5">
                    <div class="w-5 h-5 rounded-full bg-blue-100 text-blue-700 flex items-center justify-center font-bold text-[11px] flex-shrink-0 mt-0.5">1</div>
                    <p>Review <a href="<?= esc(site_url('/agent/documents')) ?>" class="text-blue-600 font-medium hover:underline">call scripts</a> before dialing to stay on message.</p>
                </div>
                <div class="flex items-start gap-2.5">
                    <div class="w-5 h-5 rounded-full bg-blue-100 text-blue-700 flex items-center justify-center font-bold text-[11px] flex-shrink-0 mt-0.5">2</div>
                    <p>Use the AI Assistant in documents to get instant answers to prospect questions.</p>
                </div>
                <div class="flex items-start gap-2.5">
                    <div class="w-5 h-5 rounded-full bg-blue-100 text-blue-700 flex items-center justify-center font-bold text-[11px] flex-shrink-0 mt-0.5">3</div>
                    <p>Always log outcomes and key details in the notes section for the team.</p>
                </div>
            </div>
        </div>

    </div>
</div>

<?= $this->endSection() ?>
