@php $pageTitle = __('messages.dashboard.leads_dashboard'); @endphp
@include('dashboard.partials.head', ['pageTitle' => $pageTitle])

<div class="flex h-screen overflow-hidden">
    @include('dashboard.partials.sidebar')

    <div class="flex-1 flex flex-col min-w-0 h-screen overflow-hidden">
        <header class="glass-bar sticky top-0 z-30 border-b border-black/[0.06] flex-shrink-0">
            <div class="px-5 sm:px-8 h-[3.25rem] flex items-center justify-between gap-4">
                <div class="flex items-center gap-3 min-w-0">
                    <button type="button" id="mobileMenuBtn" class="md:hidden p-2 -ml-2 rounded-[10px] text-apple-charcoal/60 hover:bg-black/[0.04] hover:text-apple-charcoal transition-colors" aria-label="Menu">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
                    </button>
                    <div class="min-w-0">
                        <h1 class="text-[17px] font-semibold tracking-tight text-apple-charcoal truncate">{{ __('messages.dashboard.leads_dashboard') }}</h1>
                        <p class="text-[12px] text-apple-gray hidden sm:block">{{ __('messages.dashboard.welcome') }}, {{ Auth::user()->name }}</p>
                    </div>
                </div>
                <div class="flex items-center gap-2 sm:gap-3 flex-shrink-0">
                    <button type="button" id="push-notify-btn" class="inline-flex items-center gap-2 px-3 sm:px-4 py-2 text-[13px] font-medium text-apple-charcoal/70 bg-white rounded-[10px] shadow-panel hover:shadow-panel-hover border border-black/[0.06] transition-all" title="{{ __('messages.dashboard.enable_notifications') }}">
                        <svg id="push-icon-off" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
                        <svg id="push-icon-on" class="w-4 h-4 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        <span id="push-label" class="hidden sm:inline">{{ __('messages.dashboard.notifications') }}</span>
                    </button>
                    <a href="{{ route('dashboard.leads.export', ['status' => $status ?? '', 'market' => $market ?? '', 'range' => $dateRange, 'tab' => ($tab ?? 'all') !== 'all' ? ($tab ?? 'all') : '']) }}"
                       class="inline-flex items-center gap-2 px-3 sm:px-4 py-2 text-[13px] font-medium text-apple-charcoal/70 bg-white rounded-[10px] shadow-panel hover:shadow-panel-hover border border-black/[0.06] transition-all">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                        <span class="hidden sm:inline">{{ __('messages.dashboard.export') }}</span>
                    </a>
                </div>
            </div>
        </header>

        <main class="flex-1 overflow-y-auto">
            <div class="max-w-[1400px] mx-auto px-5 sm:px-8 py-6">
            @if(!($pushConfig['beams_server_ready'] ?? true))
            <div class="mb-5 rounded-[12px] border border-amber-200 bg-amber-50 px-4 py-3 text-[13px] text-amber-900">
                <strong>Background push is not configured.</strong> Add <code class="text-[12px] bg-white/70 px-1 py-0.5 rounded">PUSHER_BEAMS_SECRET_KEY</code> to <code class="text-[12px] bg-white/70 px-1 py-0.5 rounded">.env</code> (Pusher → Beams → Credentials). In-tab alerts still work via Pusher Channels when the dashboard is open.
            </div>
            @endif
            <div id="push-blocked-banner" class="hidden mb-5 rounded-[12px] border border-red-200 bg-red-50 px-4 py-3 text-[13px] text-red-900">
                <strong>{{ __('messages.dashboard.notifications_blocked') }}.</strong>
                {{ __('messages.dashboard.notifications_blocked_hint') }}
            </div>
            @php
                $listFilters = array_filter([
                    'tab' => ($tab ?? 'all') !== 'all' ? ($tab ?? 'all') : null,
                    'market' => $market ?: null,
                    'range' => $dateRange,
                    'search' => $search ?: null,
                    'source' => $source ?? null,
                    'referral' => $referral ?? null,
                ], fn ($value) => filled($value));
                $hasActiveFilters = $search || $status || ($market ?? '') || $dateRange !== '30' || ($source ?? '') || ($referral ?? '') || (($tab ?? 'all') !== 'all');
                $activeTab = $tab ?? 'all';
            @endphp

            <!-- Lead type tabs -->
            <section class="mb-6">
                <div class="inline-flex flex-wrap gap-1 p-1 bg-black/[0.04] rounded-[12px]">
                    <a href="{{ route('dashboard.leads.index', array_merge($listFilters, ['tab' => null, 'status' => $status ?: null])) }}"
                       class="px-4 py-2 rounded-[10px] text-[13px] font-semibold transition-colors {{ $activeTab === 'all' ? 'bg-white text-apple-charcoal shadow-panel' : 'text-apple-charcoal/65 hover:text-apple-charcoal' }}">
                        {{ __('messages.dashboard.tab_all_leads') }}
                        <span class="ml-1 text-apple-gray font-medium">({{ $tabCounts['all'] ?? $stats['total'] }})</span>
                    </a>
                    <a href="{{ route('dashboard.leads.index', array_merge($listFilters, ['tab' => 'contact', 'status' => $status ?: null])) }}"
                       class="px-4 py-2 rounded-[10px] text-[13px] font-semibold transition-colors {{ $activeTab === 'contact' ? 'bg-white text-apple-charcoal shadow-panel' : 'text-apple-charcoal/65 hover:text-apple-charcoal' }}">
                        {{ __('messages.dashboard.tab_contact_leads') }}
                        <span class="ml-1 text-apple-gray font-medium">({{ $tabCounts['contact'] ?? 0 }})</span>
                    </a>
                    <a href="{{ route('dashboard.leads.index', array_merge($listFilters, ['tab' => 'quotes', 'status' => $status ?: null])) }}"
                       class="px-4 py-2 rounded-[10px] text-[13px] font-semibold transition-colors {{ $activeTab === 'quotes' ? 'bg-white text-apple-charcoal shadow-panel' : 'text-apple-charcoal/65 hover:text-apple-charcoal' }}">
                        {{ __('messages.dashboard.tab_quote_leads') }}
                        <span class="ml-1 text-apple-gray font-medium">({{ $tabCounts['quotes'] ?? 0 }})</span>
                    </a>
                </div>
                @if($activeTab === 'quotes')
                <p class="mt-3 text-[13px] text-apple-gray">{{ __('messages.dashboard.tab_quotes_hint') }}</p>
                @endif
            </section>

            <!-- Stats -->
            <section class="mb-8">
                <div class="grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-7 gap-3">
                    <a href="{{ route('dashboard.leads.index', array_merge($listFilters, ['status' => ''])) }}" class="panel panel-hover rounded-[1rem] p-4 sm:p-5 {{ !$status ? 'ring-2 ring-apple-blue/30' : '' }}">
                        <div class="text-[26px] sm:text-[28px] font-semibold tracking-tight text-apple-charcoal">{{ $stats['total'] }}</div>
                        <div class="text-[12px] sm:text-[13px] font-medium text-apple-gray mt-1">{{ __('messages.dashboard.all_leads') }}</div>
                    </a>
                    <a href="{{ route('dashboard.leads.index', array_merge($listFilters, ['status' => 'submitted'])) }}" class="panel panel-hover rounded-[1rem] p-4 sm:p-5 {{ $status === 'submitted' ? 'ring-2 ring-apple-blue/30' : '' }}">
                        <div class="text-[26px] sm:text-[28px] font-semibold tracking-tight text-apple-charcoal">{{ $stats['submitted'] }}</div>
                        <div class="text-[12px] sm:text-[13px] font-medium text-apple-gray mt-1 flex items-center gap-1.5"><span class="w-1.5 h-1.5 rounded-full bg-apple-blue"></span>{{ __('messages.dashboard.status_submitted') }}</div>
                    </a>
                    <a href="{{ route('dashboard.leads.index', array_merge($listFilters, ['status' => 'hot'])) }}" class="panel panel-hover rounded-[1rem] p-4 sm:p-5 {{ $status === 'hot' ? 'ring-2 ring-apple-blue/30' : '' }}">
                        <div class="text-[26px] sm:text-[28px] font-semibold tracking-tight text-apple-charcoal">{{ $stats['hot'] }}</div>
                        <div class="text-[12px] sm:text-[13px] font-medium text-apple-gray mt-1 flex items-center gap-1.5"><span class="w-1.5 h-1.5 rounded-full bg-apple-orange"></span>{{ __('messages.dashboard.status_hot') }}</div>
                    </a>
                    <a href="{{ route('dashboard.leads.index', array_merge($listFilters, ['status' => 'warm'])) }}" class="panel panel-hover rounded-[1rem] p-4 sm:p-5 {{ $status === 'warm' ? 'ring-2 ring-apple-blue/30' : '' }}">
                        <div class="text-[26px] sm:text-[28px] font-semibold tracking-tight text-apple-charcoal">{{ $stats['warm'] }}</div>
                        <div class="text-[12px] sm:text-[13px] font-medium text-apple-gray mt-1 flex items-center gap-1.5"><span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span>{{ __('messages.dashboard.status_warm') }}</div>
                    </a>
                    <a href="{{ route('dashboard.leads.index', array_merge($listFilters, ['status' => 'cold'])) }}" class="panel panel-hover rounded-[1rem] p-4 sm:p-5 {{ $status === 'cold' ? 'ring-2 ring-apple-blue/30' : '' }}">
                        <div class="text-[26px] sm:text-[28px] font-semibold tracking-tight text-apple-charcoal">{{ $stats['cold'] }}</div>
                        <div class="text-[12px] sm:text-[13px] font-medium text-apple-gray mt-1 flex items-center gap-1.5"><span class="w-1.5 h-1.5 rounded-full bg-apple-zinc"></span>{{ __('messages.dashboard.status_cold') }}</div>
                    </a>
                    <a href="{{ route('dashboard.leads.index', array_merge($listFilters, ['status' => 'abandoned'])) }}" class="panel panel-hover rounded-[1rem] p-4 sm:p-5 {{ $status === 'abandoned' ? 'ring-2 ring-apple-blue/30' : '' }}">
                        <div class="text-[26px] sm:text-[28px] font-semibold tracking-tight text-apple-charcoal">{{ $stats['abandoned'] }}</div>
                        <div class="text-[12px] sm:text-[13px] font-medium text-apple-gray mt-1 flex items-center gap-1.5"><span class="w-1.5 h-1.5 rounded-full bg-apple-red"></span>{{ __('messages.dashboard.status_abandoned') }}</div>
                    </a>
                    <a href="{{ route('dashboard.leads.index', array_merge($listFilters, ['status' => 'archived'])) }}" class="panel panel-hover rounded-[1rem] p-4 sm:p-5 {{ $status === 'archived' ? 'ring-2 ring-apple-blue/30' : '' }}">
                        <div class="text-[26px] sm:text-[28px] font-semibold tracking-tight text-apple-charcoal">{{ $stats['archived'] ?? 0 }}</div>
                        <div class="text-[12px] sm:text-[13px] font-medium text-apple-gray mt-1 flex items-center gap-1.5"><span class="w-1.5 h-1.5 rounded-full bg-apple-gray"></span>{{ __('messages.dashboard.status_archived') }}</div>
                    </a>
                </div>
            </section>

            <!-- Filters -->
            <section class="mb-6">
                <form id="filterForm" method="GET" action="{{ route('dashboard.leads.index') }}" class="flex flex-wrap items-center gap-2 sm:gap-3 glass-panel p-2 rounded-[1rem]">
                    @if(($tab ?? 'all') !== 'all') <input type="hidden" name="tab" value="{{ $tab }}"> @endif
                    @if($source ?? false) <input type="hidden" name="source" value="{{ $source }}"> @endif
                    @if($referral ?? false) <input type="hidden" name="referral" value="{{ $referral }}"> @endif
                    <div class="relative flex-1 min-w-[200px]">
                        <svg class="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-black/30" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                        <input type="text" name="search" value="{{ $search }}" placeholder="{{ __('messages.dashboard.search_placeholder') }}"
                               class="w-full pl-10 pr-4 py-2.5 text-[15px] bg-white border-0 rounded-criazo shadow-sm placeholder:text-black/40 focus:ring-2 focus:ring-criazo-primary/30 focus:outline-none transition-shadow">
                    </div>
                    <select name="status" onchange="document.getElementById('filterForm').submit()" class="px-4 py-2.5 text-[15px] bg-white rounded-criazo shadow-sm border-0 focus:ring-2 focus:ring-criazo-primary/30 focus:outline-none text-black/80 transition-shadow">
                        <option value="">{{ __('messages.dashboard.all_status') }}</option>
                        <option value="submitted" {{ $status === 'submitted' ? 'selected' : '' }}>{{ __('messages.dashboard.status_submitted') }}</option>
                        <option value="hot" {{ $status === 'hot' ? 'selected' : '' }}>{{ __('messages.dashboard.status_hot') }}</option>
                        <option value="warm" {{ $status === 'warm' ? 'selected' : '' }}>{{ __('messages.dashboard.status_warm') }}</option>
                        <option value="cold" {{ $status === 'cold' ? 'selected' : '' }}>{{ __('messages.dashboard.status_cold') }}</option>
                        <option value="abandoned" {{ $status === 'abandoned' ? 'selected' : '' }}>{{ __('messages.dashboard.status_abandoned') }}</option>
                        <option value="contacted" {{ $status === 'contacted' ? 'selected' : '' }}>{{ __('messages.dashboard.status_contacted') }}</option>
                        <option value="converted" {{ $status === 'converted' ? 'selected' : '' }}>{{ __('messages.dashboard.status_converted') }}</option>
                        <option value="lost" {{ $status === 'lost' ? 'selected' : '' }}>{{ __('messages.dashboard.status_lost') }}</option>
                        <option value="archived" {{ $status === 'archived' ? 'selected' : '' }}>{{ __('messages.dashboard.status_archived') }}</option>
                    </select>
                    <select name="market" onchange="document.getElementById('filterForm').submit()" class="px-4 py-2.5 text-[15px] bg-white rounded-criazo shadow-sm border-0 focus:ring-2 focus:ring-criazo-primary/30 focus:outline-none text-black/80 transition-shadow">
                        <option value="">{{ __('messages.dashboard.all_markets') }}</option>
                        <option value="us" {{ ($market ?? '') === 'us' ? 'selected' : '' }}>{{ __('messages.dashboard.market_us') }}</option>
                        <option value="europe" {{ ($market ?? '') === 'europe' ? 'selected' : '' }}>{{ __('messages.dashboard.market_europe') }}</option>
                        <option value="brazil" {{ ($market ?? '') === 'brazil' ? 'selected' : '' }}>{{ __('messages.dashboard.market_brazil') }}</option>
                        <option value="other" {{ ($market ?? '') === 'other' ? 'selected' : '' }}>{{ __('messages.dashboard.market_other') }}</option>
                    </select>
                    <select name="range" class="px-4 py-2.5 text-[15px] bg-white rounded-criazo shadow-sm border-0 focus:ring-2 focus:ring-criazo-primary/30 focus:outline-none text-black/80 transition-shadow">
                        <option value="7" {{ $dateRange === '7' ? 'selected' : '' }}>{{ __('messages.dashboard.last_7_days') }}</option>
                        <option value="30" {{ $dateRange === '30' ? 'selected' : '' }}>{{ __('messages.dashboard.last_30_days') }}</option>
                        <option value="90" {{ $dateRange === '90' ? 'selected' : '' }}>{{ __('messages.dashboard.last_90_days') }}</option>
                        <option value="all" {{ $dateRange === 'all' ? 'selected' : '' }}>{{ __('messages.dashboard.all_time') }}</option>
                    </select>
                    <button type="submit" class="px-6 py-2.5 text-[15px] font-semibold bg-criazo-primary text-white rounded-criazo hover:bg-criazo-hover transition-colors shadow-sm">
                        {{ __('messages.dashboard.filter') }}
                    </button>
                    @if($hasActiveFilters)
                    <a href="{{ route('dashboard.leads.index') }}" class="px-4 py-2.5 text-[14px] font-medium text-black/50 bg-black/5 rounded-criazo hover:bg-black/10 hover:text-black/80 transition-colors">{{ __('messages.dashboard.clear') }}</a>
                    @endif
                </form>
                @if(($source ?? '') || ($referral ?? ''))
                <div class="mt-3 flex flex-wrap items-center gap-2 text-[13px]">
                    @if($source ?? false)
                    <a href="{{ route('dashboard.leads.index', array_filter(array_merge($listFilters, ['status' => $status ?: null]), fn ($value, $key) => $key !== 'source' && filled($value), ARRAY_FILTER_USE_BOTH)) }}" class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white border border-black/10 text-black/70 hover:border-criazo-primary/30 hover:text-criazo-primary transition-colors">
                        <span>{{ __('messages.dashboard.source_page') }}: {{ \App\Helpers\LeadTrackingHelper::sourcePageLabel($source) }}</span>
                        <span aria-hidden="true">&times;</span>
                    </a>
                    @endif
                    @if($referral ?? false)
                    <a href="{{ route('dashboard.leads.index', array_filter(array_merge($listFilters, ['status' => $status ?: null]), fn ($value, $key) => $key !== 'referral' && filled($value), ARRAY_FILTER_USE_BOTH)) }}" class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white border border-black/10 text-black/70 hover:border-criazo-primary/30 hover:text-criazo-primary transition-colors">
                        <span>{{ __('messages.dashboard.referral_sources') }}: {{ $referral }}</span>
                        <span aria-hidden="true">&times;</span>
                    </a>
                    @endif
                </div>
                @endif
            </section>

            @if(session('success'))
            <div class="mb-6 p-4 bg-green-500/10 border border-green-500/20 rounded-criazo-lg text-[15px] text-green-800">
                {{ session('success') }}
            </div>
            @endif

            <!-- Layout: grid of lead cards (left) + sidebar (right) -->
            <div class="flex flex-col xl:flex-row xl:gap-8 gap-6">
                <!-- Lead cards -->
                <div class="flex-1 min-w-0">
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                    @forelse($leads as $lead)
                        @php
                            $sourceLabel = \App\Helpers\LeadTrackingEnrichment::referralSourceLabel($lead->utm_source, $lead->referrer_domain);
                            $deviceLabel = $lead->device_type ? ucfirst($lead->device_type) : '';
                        @endphp
                        <article class="lead-card panel panel-hover rounded-[1rem] flex flex-col relative">
                            {{-- Header --}}
                            <div class="p-4 pb-3 flex items-start gap-3">
                                <a href="{{ route('dashboard.leads.show', $lead) }}" class="w-11 h-11 rounded-full flex items-center justify-center bg-black/[0.05] text-apple-charcoal font-semibold text-[15px] flex-shrink-0 border border-black/[0.06] hover:bg-black/[0.08] transition-colors no-underline">
                                    {{ $lead->name ? strtoupper(substr($lead->name, 0, 2)) : '?' }}
                                </a>
                                <div class="flex-1 min-w-0">
                                    <div class="flex items-start justify-between gap-2">
                                        <a href="{{ route('dashboard.leads.show', $lead) }}" class="font-semibold text-[16px] text-apple-charcoal truncate leading-tight hover:text-apple-blue transition-colors no-underline">
                                            {{ $lead->name ?: __('messages.dashboard.unknown_visitor') }}
                                        </a>
                                        <time class="text-[11px] font-medium text-apple-gray whitespace-nowrap flex-shrink-0" datetime="{{ $lead->created_at->toIso8601String() }}">{{ $lead->created_at->diffForHumans() }}</time>
                                    </div>
                                    <div class="flex flex-wrap items-center gap-2 mt-1.5">
                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-semibold uppercase tracking-wide
                                            @switch($lead->status)
                                                @case('submitted') bg-apple-blue/10 text-apple-blue @break
                                                @case('hot') bg-apple-orange/10 text-apple-orange @break
                                                @case('warm') bg-amber-500/10 text-amber-700 @break
                                                @case('cold') bg-black/[0.06] text-apple-zinc @break
                                                @case('contacted') bg-apple-purple/10 text-apple-purple @break
                                                @case('converted') bg-apple-green/10 text-apple-green @break
                                                @case('lost') bg-apple-red/10 text-apple-red @break
                                                @case('archived') bg-black/[0.06] text-apple-gray @break
                                                @default bg-black/[0.06] text-apple-zinc
                                            @endswitch
                                        ">{{ __('messages.dashboard.status_' . $lead->status) }}</span>
                                        <span class="text-[11px] font-medium text-apple-gray">{{ $lead->form_completion_percentage }}% {{ __('messages.dashboard.label_completion') }}</span>
                                        @if($lead->isQuoteLead())
                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold uppercase tracking-wide bg-violet-500/10 text-violet-700">{{ __('messages.dashboard.badge_quote') }}</span>
                                        @endif
                                        @if($lead->hasContactActivity() && $lead->isQuoteLead())
                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold uppercase tracking-wide bg-criazo-primary/10 text-criazo-primary">{{ __('messages.dashboard.badge_quote_contact') }}</span>
                                        @endif
                                    </div>
                                    @if($lead->isQuoteLead() && ($lead->quote_completion_percentage ?? 0) > 0)
                                    <p class="mt-1 text-[11px] text-apple-gray">{{ __('messages.dashboard.quote_progress', ['percent' => $lead->quote_completion_percentage, 'step' => $lead->quote_step ?: '—']) }}</p>
                                    @endif
                                    @if($lead->email)
                                    <a href="mailto:{{ $lead->email }}" class="mt-2 block text-[14px] font-medium text-apple-blue hover:underline truncate select-text">{{ $lead->email }}</a>
                                    @elseif($lead->phone)
                                    <a href="tel:{{ $lead->phone }}" class="mt-2 block text-[14px] font-medium text-apple-blue hover:underline select-text">{{ $lead->phone }}</a>
                                    @else
                                    <p class="mt-2 text-[13px] text-apple-gray">{{ __('messages.dashboard.no_email_yet') }}</p>
                                    @endif
                                </div>
                            </div>

                            @if($lead->message)
                            <div class="px-4 py-4 border-t border-black/[0.04]">
                                <p class="text-[14px] text-apple-charcoal/75 leading-relaxed line-clamp-2 select-text bg-apple-bg rounded-[10px] px-3.5 py-3 border border-black/[0.04]" title="{{ $lead->message }}">{{ Str::limit(preg_replace('/\s+/', ' ', trim($lead->message)), 140) }}</p>
                            </div>
                            @endif

                            {{-- Meta chips --}}
                            <div class="px-4 pb-4 pt-1 flex flex-wrap gap-1.5">
                                <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[12px] font-medium bg-black/[0.04] text-apple-charcoal/80">
                                    {{ __('messages.dashboard.market_' . $lead->market) }}
                                </span>
                                @if($lead->service_name)
                                @php $displayServices = \App\Helpers\LeadTrackingHelper::formatContactServices($lead->service_name, $lead->locale); @endphp
                                <span class="inline-flex items-center px-2.5 py-1 rounded-full text-[12px] font-medium bg-black/[0.04] text-apple-charcoal/80 truncate max-w-[10rem]" title="{{ $displayServices }}">{{ $displayServices }}</span>
                                @endif
                                @if($lead->estimated_price_min && $lead->estimated_price_max)
                                <span class="inline-flex items-center px-2.5 py-1 rounded-full text-[12px] font-medium bg-emerald-500/10 text-emerald-700 truncate max-w-[12rem]" title="{{ __('messages.dashboard.estimated_range') }}">€{{ number_format((float) $lead->estimated_price_min, 0) }}–€{{ number_format((float) $lead->estimated_price_max, 0) }}</span>
                                @endif
                                <span class="inline-flex items-center px-2.5 py-1 rounded-full text-[12px] font-medium bg-black/[0.04] text-apple-charcoal/80 truncate max-w-[8rem]" title="{{ $sourceLabel }}">{{ $sourceLabel }}</span>
                                @if($deviceLabel)
                                <span class="inline-flex items-center px-2.5 py-1 rounded-full text-[12px] font-medium bg-black/[0.04] text-apple-charcoal/80">{{ $deviceLabel }}</span>
                                @endif
                            </div>

                            {{-- Action bar --}}
                            <div class="mt-auto border-t border-black/[0.06] px-3 py-2.5 flex items-center gap-2">
                                <a href="{{ route('dashboard.leads.show', $lead) }}" class="flex-1 inline-flex items-center justify-center gap-1.5 px-3 py-2 text-[13px] font-semibold text-white bg-apple-blue rounded-[10px] hover:bg-[#0077ED] transition-colors shadow-panel no-underline">
                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                                    {{ __('messages.dashboard.view_lead') }}
                                </a>
                                @if($lead->email)
                                <a href="mailto:{{ $lead->email }}" class="inline-flex items-center justify-center gap-1.5 px-3 py-2 text-[13px] font-semibold text-apple-charcoal bg-white border border-black/[0.08] rounded-[10px] hover:bg-black/[0.02] transition-colors shadow-panel no-underline" title="{{ __('messages.dashboard.link_email') }}">
                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
                                    <span class="hidden sm:inline">{{ __('messages.dashboard.link_email') }}</span>
                                </a>
                                @endif
                                @if($lead->phone)
                                <a href="tel:{{ $lead->phone }}" class="inline-flex items-center justify-center gap-1.5 px-3 py-2 text-[13px] font-semibold text-apple-charcoal bg-white border border-black/[0.08] rounded-[10px] hover:bg-black/[0.02] transition-colors shadow-panel no-underline" title="{{ __('messages.dashboard.link_call') }}">
                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
                                    <span class="hidden sm:inline">{{ __('messages.dashboard.link_call') }}</span>
                                </a>
                                @endif
                                <div class="relative lead-card-menu-wrap flex-shrink-0">
                                    <button type="button" class="inline-flex items-center justify-center w-9 h-9 text-apple-charcoal/60 bg-white border border-black/[0.08] rounded-[10px] hover:bg-black/[0.02] hover:text-apple-charcoal transition-colors lead-card-menu-btn" data-lead-id="{{ $lead->id }}" data-lead-status="{{ $lead->status }}" title="{{ __('messages.dashboard.actions') }}" aria-haspopup="true" aria-expanded="false">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
                                    </button>
                                    <div class="lead-card-dropdown hidden absolute right-0 bottom-full mb-1.5 py-1.5 w-48 bg-white rounded-[12px] shadow-panel-hover border border-black/[0.08] z-50">
                                        <button type="button" class="lead-dropdown-change-status w-full text-left px-4 py-2.5 text-[14px] font-medium text-apple-charcoal hover:bg-black/[0.04]" data-lead-id="{{ $lead->id }}" data-lead-status="{{ $lead->status }}">{{ __('messages.dashboard.change_status') }}</button>
                                        <div class="h-px bg-black/[0.06] my-1"></div>
                                        @if($lead->status !== 'archived')
                                        <button type="button" class="lead-dropdown-set-status-btn w-full text-left px-4 py-2.5 text-[14px] font-medium text-apple-charcoal hover:bg-black/[0.04]" data-url="{{ route('dashboard.leads.update-status', $lead) }}" data-status="archived">{{ __('messages.dashboard.archive') }}</button>
                                        @else
                                        <button type="button" class="lead-dropdown-set-status-btn w-full text-left px-4 py-2.5 text-[14px] font-medium text-apple-charcoal hover:bg-black/[0.04]" data-url="{{ route('dashboard.leads.update-status', $lead) }}" data-status="cold">{{ __('messages.dashboard.unarchive') }}</button>
                                        @endif
                                        <button type="button" class="lead-dropdown-delete-btn w-full text-left px-4 py-2.5 text-[14px] font-medium text-apple-red hover:bg-apple-red/5" data-destroy-url="{{ route('dashboard.leads.destroy', $lead) }}" data-confirm="{{ __('messages.dashboard.delete_lead_confirm') }}">{{ __('messages.dashboard.delete') }}</button>
                                    </div>
                                </div>
                            </div>
                        </article>
                    @empty
                    <div class="col-span-full panel rounded-[1.25rem] p-16 text-center">
                        <div class="w-14 h-14 rounded-2xl bg-black/[0.04] flex items-center justify-center mx-auto mb-4">
                            <svg class="w-7 h-7 text-apple-gray" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                        </div>
                        <p class="text-[17px] font-semibold text-apple-charcoal">{{ __('messages.dashboard.no_leads_found') }}</p>
                        <p class="mt-1 text-[15px] text-apple-gray">{{ __('messages.dashboard.no_leads_message') }}</p>
                    </div>
                    @endforelse
                    </div>

                    @if($leads->hasPages())
                    <div class="mt-6">
                        {{ $leads->withQueryString()->links() }}
                    </div>
                    @endif
                </div>

                <!-- Right: sidebar (TODAY, Top Sources, By Service) -->
                <aside class="xl:w-80 flex-shrink-0 w-full space-y-6">
                    @if(($tab ?? 'all') === 'quotes' || ($stats['quotes'] ?? 0) > 0)
                    <div class="bg-white rounded-criazo-lg p-6 shadow-criazo border border-black/[0.04]">
                        <h3 class="text-[14px] font-semibold text-black/80 tracking-wide mb-5">{{ __('messages.dashboard.section_quote_funnel') }}</h3>
                        <div class="space-y-3 text-[14px]">
                            <div class="flex justify-between"><span class="text-black/50">{{ __('messages.dashboard.tab_quote_leads') }}</span><span class="font-semibold">{{ $stats['quotes'] ?? 0 }}</span></div>
                            <div class="flex justify-between"><span class="text-black/50">{{ __('messages.dashboard.quote_to_contact_count') }}</span><span class="font-semibold">{{ $stats['quote_to_contact'] ?? 0 }}</span></div>
                            <div class="flex justify-between"><span class="text-black/50">{{ __('messages.dashboard.quote_abandoned_count') }}</span><span class="font-semibold text-apple-red">{{ $stats['quote_abandoned'] ?? 0 }}</span></div>
                        </div>
                    </div>
                    @endif

                    <div class="bg-white rounded-criazo-lg p-6 shadow-criazo border border-black/[0.04]">
                        <h3 class="text-[14px] font-semibold text-black/80 tracking-wide mb-5">{{ __('messages.dashboard.section_today') }}</h3>
                        <div class="grid grid-cols-2 gap-4">
                            <div class="rounded-2xl bg-black/[0.02] p-5 text-center border border-black/5">
                                <div class="text-3xl font-semibold tracking-tight text-black">{{ $stats['today_total'] }}</div>
                                <div class="text-[12px] font-medium text-black/40 mt-1.5">{{ __('messages.dashboard.new') }}</div>
                            </div>
                            <div class="rounded-2xl bg-black/[0.02] p-5 text-center border border-black/5">
                                <div class="text-3xl font-semibold tracking-tight text-black">{{ $stats['today_submitted'] }}</div>
                                <div class="text-[12px] font-medium text-black/40 mt-1.5">{{ __('messages.dashboard.status_submitted') }}</div>
                            </div>
                        </div>
                        <div class="mt-5 pt-5 border-t border-black/5 flex justify-between items-center">
                            <span class="text-[13px] font-medium text-black/50">{{ __('messages.dashboard.conversion_rate') }}</span>
                            <span class="text-[15px] font-semibold text-black/80">{{ $stats['conversion_rate'] }}%</span>
                        </div>
                    </div>

                    <div class="bg-white rounded-criazo-lg p-6 shadow-criazo border border-black/[0.04]">
                        <h3 class="text-[14px] font-semibold text-black/80 tracking-wide mb-5">{{ __('messages.dashboard.top_sources') }}</h3>
                        <div class="space-y-4">
                            @forelse(array_slice($topSources ?? [], 0, 5) as $sourceRow)
                            @php
                                $sourceActive = ($source ?? '') === $sourceRow['source_page'];
                                $sourceLinkParams = array_filter(array_merge($listFilters, [
                                    'status' => $status ?: null,
                                    'source' => $sourceActive ? null : $sourceRow['source_page'],
                                ]), fn ($value) => filled($value));
                            @endphp
                            <a href="{{ route('dashboard.leads.index', $sourceLinkParams) }}" class="flex items-center justify-between text-[14px] rounded-lg px-2 py-1.5 -mx-2 transition-colors {{ $sourceActive ? 'bg-criazo-primary/5 ring-1 ring-criazo-primary/20 text-criazo-primary' : 'hover:bg-black/[0.03] text-black/70' }}" title="{{ $sourceRow['source_page'] }}">
                                <span class="font-medium truncate max-w-[140px]">{{ \App\Helpers\LeadTrackingHelper::sourcePageLabel($sourceRow['source_page']) }}</span>
                                <span class="font-semibold text-black/80 bg-black/5 px-2.5 py-1 rounded-lg text-[13px] shadow-sm">{{ $sourceRow['count'] }}</span>
                            </a>
                            @empty
                            <p class="text-[14px] text-black/40 italic">{{ __('messages.dashboard.no_data_yet') }}</p>
                            @endforelse
                        </div>
                    </div>

                    <div class="bg-white rounded-criazo-lg p-6 shadow-criazo border border-black/[0.04]">
                        <h3 class="text-[14px] font-semibold text-black/80 tracking-wide mb-2">{{ __('messages.dashboard.referral_sources') }}</h3>
                        <p class="text-[12px] text-black/40 mb-5">{{ __('messages.dashboard.referral_sources_hint') }}</p>
                        <div class="space-y-4">
                            @forelse(array_slice($topReferralSources ?? [], 0, 8) as $ref)
                            @php
                                $referralActive = ($referral ?? '') === $ref['source_label'];
                                $referralLinkParams = array_filter(array_merge($listFilters, [
                                    'status' => $status ?: null,
                                    'referral' => $referralActive ? null : $ref['source_label'],
                                ]), fn ($value) => filled($value));
                            @endphp
                            <a href="{{ route('dashboard.leads.index', $referralLinkParams) }}" class="flex items-center justify-between text-[14px] rounded-lg px-2 py-1.5 -mx-2 transition-colors {{ $referralActive ? 'bg-criazo-primary/5 ring-1 ring-criazo-primary/20 text-criazo-primary' : 'hover:bg-black/[0.03] text-black/70' }}" title="{{ $ref['source_label'] }}">
                                <span class="font-medium truncate max-w-[140px]">{{ Str::limit($ref['source_label'], 20) }}</span>
                                <span class="font-semibold text-black/80 bg-black/5 px-2.5 py-1 rounded-lg text-[13px] shadow-sm">{{ $ref['count'] }}</span>
                            </a>
                            @empty
                            <p class="text-[14px] text-black/40 italic">{{ __('messages.dashboard.no_data_yet') }}</p>
                            @endforelse
                        </div>
                    </div>

                    <div class="bg-white rounded-criazo-lg p-6 shadow-criazo border border-black/[0.04]">
                        <h3 class="text-[14px] font-semibold text-black/80 tracking-wide mb-2">{{ __('messages.dashboard.by_market') }}</h3>
                        <p class="text-[12px] text-black/40 mb-5">{{ __('messages.dashboard.by_market_hint') }}</p>
                        <div class="space-y-4">
                            @foreach($marketBreakdown ?? [] as $row)
                            @php
                                $marketActive = ($market ?? '') === $row['market'];
                                $marketLinkParams = array_filter(array_merge($listFilters, [
                                    'status' => $status ?: null,
                                    'market' => $marketActive ? null : $row['market'],
                                ]), fn ($value) => filled($value));
                            @endphp
                            <a href="{{ route('dashboard.leads.index', $marketLinkParams) }}" class="block rounded-2xl p-4 border transition-colors {{ $marketActive ? 'bg-criazo-primary/5 border-criazo-primary/20 ring-1 ring-criazo-primary/20' : 'bg-black/[0.02] border-black/5 hover:bg-black/[0.04]' }}">
                                <div class="flex items-center justify-between text-[14px] mb-2">
                                    <span class="font-semibold text-black/80">{{ __('messages.dashboard.market_' . $row['market']) }}</span>
                                    <span class="font-semibold text-black bg-white shadow-sm px-2.5 py-0.5 rounded-lg text-[13px]">{{ $row['total'] }}</span>
                                </div>
                                <div class="flex items-center gap-4 text-[12px] font-medium text-black/50 bg-white/50 rounded-lg p-2">
                                    <div>{{ $row['submitted'] }} {{ __('messages.dashboard.status_submitted') }}</div>
                                    <div>{{ $row['abandoned'] }} {{ __('messages.dashboard.status_abandoned') }}</div>
                                    <div class="ml-auto">{{ $row['conversion_rate'] }}%</div>
                                </div>
                            </a>
                            @endforeach
                        </div>
                    </div>

                    <div class="bg-white rounded-criazo-lg p-6 shadow-criazo border border-black/[0.04]">
                        <h3 class="text-[14px] font-semibold text-black/80 tracking-wide mb-5">{{ __('messages.dashboard.by_service') }}</h3>
                        <div class="space-y-4">
                            @forelse(array_slice($serviceBreakdown, 0, 5) as $service)
                            <div class="flex items-center justify-between text-[14px] group">
                                <span class="text-black/70 font-medium truncate max-w-[140px] group-hover:text-criazo-primary transition-colors">{{ \App\Helpers\LeadTrackingHelper::formatContactServices($service['service_name'] ?? null) ?? __('messages.dashboard.not_specified') }}</span>
                                <span class="font-semibold text-black/80 bg-black/5 px-2.5 py-1 rounded-lg text-[13px] shadow-sm">{{ $service['count'] }}</span>
                            </div>
                            @empty
                            <p class="text-[14px] text-black/40 italic">{{ __('messages.dashboard.no_data_yet') }}</p>
                            @endforelse
                        </div>
                    </div>
                </aside>
            </div>
            </div>
        </main>
    </div>
</div>

    <!-- Status Modal -->
    <div id="statusModal" class="fixed inset-0 bg-black/40 backdrop-blur-sm hidden items-center justify-center z-50 p-4">
        <div class="bg-white rounded-criazo-lg p-6 max-w-sm w-full shadow-2xl">
            <h3 class="text-[17px] font-semibold text-black mb-4">{{ __('messages.dashboard.update_status') }}</h3>
            <select id="statusSelect" class="w-full px-4 py-3 text-[15px] bg-black/[0.04] border-0 rounded-criazo focus:ring-2 focus:ring-criazo-primary/30 focus:outline-none text-black/90 mb-4">
                <option value="cold">{{ __('messages.dashboard.status_cold') }}</option>
                <option value="warm">{{ __('messages.dashboard.status_warm') }}</option>
                <option value="hot">{{ __('messages.dashboard.status_hot') }}</option>
                <option value="submitted">{{ __('messages.dashboard.status_submitted') }}</option>
                <option value="contacted">{{ __('messages.dashboard.status_contacted') }}</option>
                <option value="converted">{{ __('messages.dashboard.status_converted') }}</option>
                <option value="lost">{{ __('messages.dashboard.status_lost') }}</option>
                <option value="archived">{{ __('messages.dashboard.status_archived') }}</option>
            </select>
            <div class="flex gap-3">
                <button onclick="closeStatusModal()" class="flex-1 px-4 py-2.5 text-[15px] font-medium text-black/70 bg-black/5 rounded-criazo hover:bg-black/10 transition-colors">{{ __('messages.dashboard.cancel') }}</button>
                <button onclick="saveStatus()" class="flex-1 px-4 py-2.5 text-[15px] font-medium bg-criazo-primary text-white rounded-criazo hover:bg-criazo-hover transition-colors">{{ __('messages.dashboard.save') }}</button>
            </div>
        </div>
    </div>

    <script>
        window.dashboardLeadsUrl = "{{ route('dashboard.leads.index') }}";
        let currentLeadId = null;

        function closeAllLeadDropdowns() {
            document.querySelectorAll('.lead-card-dropdown').forEach((el) => el.classList.add('hidden'));
            document.querySelectorAll('.lead-card-menu-btn').forEach((btn) => btn.setAttribute('aria-expanded', 'false'));
            document.querySelectorAll('.lead-card.is-menu-open').forEach((card) => card.classList.remove('is-menu-open', 'z-30'));
        }

        function openStatusModal(leadId, currentStatus) {
            currentLeadId = leadId;
            document.getElementById('statusSelect').value = currentStatus;
            document.getElementById('statusModal').classList.remove('hidden');
            document.getElementById('statusModal').classList.add('flex');
        }
        function closeStatusModal() {
            document.getElementById('statusModal').classList.add('hidden');
            document.getElementById('statusModal').classList.remove('flex');
            currentLeadId = null;
        }
        async function saveStatus() {
            const status = document.getElementById('statusSelect').value;
            try {
                const response = await fetch(`${window.dashboardLeadsUrl}/${currentLeadId}/status`, {
                    method: 'PATCH',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    },
                    body: JSON.stringify({ status }),
                });
                if (response.ok) {
                    window.location.reload();
                    return;
                }
                let message = 'Could not update lead status.';
                try {
                    const data = await response.json();
                    if (data?.message) message = data.message;
                } catch (_) {}
                alert(message);
            } catch (e) {
                console.error(e);
                alert('Could not update lead status.');
            }
            closeStatusModal();
        }
        document.getElementById('statusModal').addEventListener('click', (e) => { if (e.target === e.currentTarget) closeStatusModal(); });

        async function quickSetStatus(url, status) {
            const response = await fetch(url, {
                method: 'PATCH',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                },
                body: JSON.stringify({ status }),
            });
            if (response.ok) {
                window.location.reload();
                return true;
            }
            let message = 'Could not update lead status.';
            try {
                const data = await response.json();
                if (data?.message) message = data.message;
            } catch (_) {}
            alert(message);
            return false;
        }

        document.addEventListener('click', async (e) => {
            const changeBtn = e.target.closest('.lead-dropdown-change-status');
            if (changeBtn) {
                e.preventDefault();
                e.stopPropagation();
                const id = changeBtn.dataset.leadId;
                const status = changeBtn.dataset.leadStatus;
                closeAllLeadDropdowns();
                if (id && status) openStatusModal(id, status);
                return;
            }

            const setStatusBtn = e.target.closest('.lead-dropdown-set-status-btn');
            if (setStatusBtn) {
                e.preventDefault();
                e.stopPropagation();
                const url = setStatusBtn.dataset.url;
                const status = setStatusBtn.dataset.status;
                closeAllLeadDropdowns();
                if (url && status) {
                    try {
                        await quickSetStatus(url, status);
                    } catch (err) {
                        console.error(err);
                    }
                }
                return;
            }

            const deleteBtn = e.target.closest('.lead-dropdown-delete-btn');
            if (deleteBtn) {
                e.preventDefault();
                e.stopPropagation();
                const url = deleteBtn.dataset.destroyUrl;
                const msg = deleteBtn.dataset.confirm;
                closeAllLeadDropdowns();
                if (!url) return;
                if (msg && !confirm(msg)) return;
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = url;
                const csrf = document.querySelector('meta[name="csrf-token"]');
                if (csrf) {
                    const input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = '_token';
                    input.value = csrf.content;
                    form.appendChild(input);
                }
                const method = document.createElement('input');
                method.type = 'hidden';
                method.name = '_method';
                method.value = 'DELETE';
                form.appendChild(method);
                document.body.appendChild(form);
                form.submit();
                return;
            }

            const menuBtn = e.target.closest('.lead-card-menu-btn');
            if (menuBtn) {
                e.preventDefault();
                e.stopPropagation();
                const wrap = menuBtn.closest('.lead-card-menu-wrap');
                const card = menuBtn.closest('.lead-card');
                const dropdown = wrap?.querySelector('.lead-card-dropdown');
                const isOpen = dropdown && !dropdown.classList.contains('hidden');
                closeAllLeadDropdowns();
                if (!isOpen && dropdown) {
                    dropdown.classList.remove('hidden');
                    menuBtn.setAttribute('aria-expanded', 'true');
                    card?.classList.add('is-menu-open', 'z-30');
                }
                return;
            }

            if (!e.target.closest('.lead-card-menu-wrap')) {
                closeAllLeadDropdowns();
            }
        });
    </script>
    {{-- Pusher Beams (background push) + Pusher Channels (in-tab realtime) --}}
    <script src="https://js.pusher.com/beams/2.1.0/push-notifications-cdn.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const btn = document.getElementById('push-notify-btn');
            const iconOff = document.getElementById('push-icon-off');
            const iconOn = document.getElementById('push-icon-on');
            const label = document.getElementById('push-label');
            const beamsInstanceId = @json($pushConfig['beams_instance_id'] ?? '');
            const beamsInterest = @json($pushConfig['beams_interest'] ?? 'hello');
            const beamsServerReady = @json($pushConfig['beams_server_ready'] ?? false);
            const beamsStates = () => window.PusherPushNotifications?.RegistrationState;
            const pushBlockedBanner = document.getElementById('push-blocked-banner');
            const i18nPush = {
                blocked: @json(__('messages.dashboard.notifications_blocked')),
                blockedHint: @json(__('messages.dashboard.notifications_blocked_hint')),
            };
            let beamsClient = null;
            let beamsReady = false;

            function setNotificationsBlocked() {
                if (pushBlockedBanner) pushBlockedBanner.classList.remove('hidden');
                if (!btn) return;
                btn.classList.add('text-apple-red', 'border-red-200');
                btn.classList.remove('text-criazo-primary', 'border-criazo-primary/20');
                if (label) label.textContent = @json(__('messages.dashboard.notifications_blocked'));
                btn.title = i18nPush.blockedHint;
            }

            function clearNotificationsBlocked() {
                if (pushBlockedBanner) pushBlockedBanner.classList.add('hidden');
                if (!btn) return;
                btn.classList.remove('text-apple-red', 'border-red-200');
            }

            function setNotificationsOn() {
                clearNotificationsBlocked();
                if (!btn) return;
                btn.classList.add('text-criazo-primary', 'border-criazo-primary/20');
                if (iconOff) iconOff.classList.add('hidden');
                if (iconOn) iconOn.classList.remove('hidden');
                if (label) label.textContent = '{{ __("messages.dashboard.notifications_on") }}';
                btn.title = 'Click to turn off background notifications';
            }

            function setNotificationsOff() {
                if (Notification.permission === 'denied') {
                    setNotificationsBlocked();
                    return;
                }
                clearNotificationsBlocked();
                if (!btn) return;
                btn.classList.remove('text-criazo-primary', 'border-criazo-primary/20');
                if (iconOff) iconOff.classList.remove('hidden');
                if (iconOn) iconOn.classList.add('hidden');
                if (label) label.textContent = '{{ __("messages.dashboard.notifications") }}';
                btn.title = '{{ __("messages.dashboard.enable_notifications") }}';
            }

            async function cleanupConflictingServiceWorkers() {
                const registrations = await navigator.serviceWorker.getRegistrations();
                for (const registration of registrations) {
                    const scriptUrl = registration.active?.scriptURL || registration.installing?.scriptURL || '';
                    if (scriptUrl.includes('dashboard-sw.js')) {
                        await registration.unregister();
                    }
                }
            }

            async function getBeamsServiceWorkerRegistration() {
                await cleanupConflictingServiceWorkers();
                await navigator.serviceWorker.register('/service-worker.js?v=6');
                return navigator.serviceWorker.ready;
            }

            async function initBeamsClient() {
                if (!beamsInstanceId || !window.PusherPushNotifications) return null;
                if (beamsClient) return beamsClient;

                const serviceWorkerRegistration = await getBeamsServiceWorkerRegistration();
                beamsClient = new PusherPushNotifications.Client({
                    instanceId: beamsInstanceId,
                    serviceWorkerRegistration,
                });

                return beamsClient;
            }

            async function syncBeamsReadyState() {
                const States = beamsStates();
                if (!beamsClient || !States) {
                    beamsReady = false;
                    setNotificationsOff();
                    return;
                }

                const state = await beamsClient.getRegistrationState();
                beamsReady = state === States.PERMISSION_GRANTED_REGISTERED_WITH_BEAMS;
                if (beamsReady) {
                    setNotificationsOn();
                    return;
                }
                setNotificationsOff();
            }

            async function updateBeamsState() {
                if (!beamsInstanceId || !window.PusherPushNotifications) {
                    setNotificationsOff();
                    return;
                }

                try {
                    await initBeamsClient();
                    await syncBeamsReadyState();
                } catch (e) {
                    console.error(e);
                    setNotificationsOff();
                }
            }

            async function enableBeams() {
                if (!('serviceWorker' in navigator) || !('PushManager' in window) || !('Notification' in window)) {
                    alert('This browser does not support push notifications.');
                    return;
                }
                if (!beamsInstanceId) {
                    alert('PUSHER_BEAMS_INSTANCE_ID is not configured.');
                    return;
                }
                if (Notification.permission === 'denied') {
                    setNotificationsBlocked();
                    alert(i18nPush.blocked + '.\n\n' + i18nPush.blockedHint);
                    return;
                }

                const client = await initBeamsClient();
                if (!client) return;

                const States = beamsStates();
                if (!States) return;

                if (beamsReady) {
                    try {
                        await client.removeDeviceInterest(beamsInterest);
                        await client.stop();
                        beamsReady = false;
                        setNotificationsOff();
                    } catch (e) {
                        console.error(e);
                        alert('Could not disable notifications.');
                    }
                    return;
                }

                try {
                    await client.start();
                    const state = await client.getRegistrationState();
                    if (state !== States.PERMISSION_GRANTED_REGISTERED_WITH_BEAMS) {
                        throw new Error('Beams registration incomplete (state: ' + state + ')');
                    }
                    await client.addDeviceInterest(beamsInterest);
                    beamsReady = true;
                    setNotificationsOn();

                    if (!beamsServerReady) {
                        console.warn('PUSHER_BEAMS_SECRET_KEY is missing — in-tab alerts work, but server cannot send background push until it is set.');
                    }
                } catch (e) {
                    console.error(e);
                    beamsReady = false;
                    setNotificationsOff();
                    if (Notification.permission === 'denied') {
                        setNotificationsBlocked();
                        alert(i18nPush.blocked + '.\n\n' + i18nPush.blockedHint);
                    } else {
                        alert('Could not enable push notifications. Try a hard refresh, then click Notifications again. If it persists, verify PUSHER_BEAMS_INSTANCE_ID and PUSHER_BEAMS_SECRET_KEY on the server.');
                    }
                }
            }

            if ('Notification' in window && Notification.permission === 'denied') {
                setNotificationsBlocked();
            }

            if ('serviceWorker' in navigator && 'Notification' in window && beamsInstanceId) {
                updateBeamsState().catch(() => setNotificationsOff());
            } else if (btn) {
                btn.disabled = true;
                btn.classList.add('opacity-50', 'cursor-not-allowed');
            }

            if (btn) {
                btn.addEventListener('click', function() {
                    enableBeams().catch(console.error);
                });
            }
        });
    </script>
    <script src="https://js.pusher.com/8.2.0/pusher.min.js"></script>
    <script>
        var pusherKey = @json($pushConfig['pusher_key'] ?? '');
        var pusherCluster = @json($pushConfig['pusher_cluster'] ?? '');
        var dashboardI18n = {
            unknownVisitor: @json(__('messages.dashboard.unknown_visitor')),
            viewLead: @json(__('messages.dashboard.view_lead')),
            newLead: @json(__('messages.dashboard.new_lead_received')),
            leadUpdateDefault: @json(__('messages.dashboard.lead_update_default')),
        };

        function escapeHtml(value) {
            return String(value || '').replace(/[&<>"']/g, function(character) {
                return {
                    '&': '&amp;',
                    '<': '&lt;',
                    '>': '&gt;',
                    '"': '&quot;',
                    "'": '&#039;'
                }[character];
            });
        }

        function showLeadNotification(eventName, data) {
            console.log('Pusher received ' + eventName, data);
            const title = data.title || dashboardI18n.newLead;
            const body = data.body || dashboardI18n.leadUpdateDefault.replace(':name', data.name || dashboardI18n.unknownVisitor);
            const leadUrl = data.url || (data.id ? '/dashboard/leads/' + data.id : '/dashboard/leads');
            const toast = document.createElement('div');
            toast.className = 'fixed bottom-4 right-4 bg-white rounded-criazo-lg p-5 shadow-criazo-hover z-50 animate-slide-up flex flex-col gap-1 border border-criazo-primary/20 max-w-sm w-[calc(100%-2rem)] sm:w-full';
            toast.innerHTML = `
                <div class="flex items-center justify-between gap-4 mb-2">
                    <div class="flex items-center gap-2">
                        <span class="text-[12px] font-semibold uppercase tracking-wider text-criazo-primary">${escapeHtml(title)}</span>
                    </div>
                    <button onclick="this.parentElement.parentElement.remove()" class="text-black/40 hover:text-black/70 transition-colors">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                    </button>
                </div>
                <div class="font-semibold text-[16px] text-black leading-tight">${escapeHtml(data.name || dashboardI18n.unknownVisitor)}</div>
                <div class="text-[14px] text-black/60">${escapeHtml(body)}</div>
                <div class="flex gap-3 mt-4">
                    <button type="button" class="lead-toast-view-btn w-full py-2.5 text-[14px] font-semibold bg-black text-white rounded-criazo hover:bg-black/80 transition-colors shadow-sm">${escapeHtml(dashboardI18n.viewLead)}</button>
                </div>
            `;
            toast.querySelector('.lead-toast-view-btn')?.addEventListener('click', function() {
                window.location.href = leadUrl;
            });
            document.body.appendChild(toast);
            setTimeout(() => { if (document.body.contains(toast)) toast.remove(); }, 15000);
        }

        if (pusherKey && pusherCluster) {
            var pusher = new Pusher(pusherKey, {
                cluster: pusherCluster
            });

            var channel = pusher.subscribe('leads');
            ['lead.submitted', 'lead.abandoned', 'lead.cold'].forEach(function(eventName) {
                channel.bind(eventName, function(data) {
                    showLeadNotification(eventName, data);
                });
            });
        }
    </script>
    @include('dashboard.partials.mobile-nav')
</body>
</html>