<div x-data="{
    placeId: @entangle('placeId').live,
    progress: @entangle('progress').live,
    animatedProgress: @entangle('progress').live,
    confettiShown: false,
    showProgress: false,
    showDropdown: false,
    showVideoModal: false,
    showPositionModal: false,
    positionModalProgress: 0,
    positionModalStage: 0,
    positionModalFinal: false,
    positionModalTimers: [],
    positionRollTimer: null,
    searchesRollTimer: null,
    valueRollTimer: null,
    exactPositionLabel: '#20+',
    exactSearchesLabel: '3,300',
    exactClicksLabel: '2,300',
    exactValueLabel: '990',
    modalPositionLabel: '#--',
    modalSearchesLabel: '0',
    modalClicksLabel: '0',
    modalValueLabel: '£0/month',
    selectedDescription: @entangle('selectedDescription').live,
    focusSearchInput: @entangle('focusSearchInput').live,
    pendingPlaceId: null,
    loading: false,
    autoClicked: false,
    scrollCarousel(direction) {
        const carousel = document.getElementById('examplesCarousel');
        if (!carousel) return;
        const amount = Math.max(320, Math.floor(carousel.clientWidth * 0.92));
        carousel.scrollBy({ left: direction * amount, behavior: 'smooth' });
    },
    clearPositionModalTimers() {
        this.positionModalTimers.forEach(t => clearTimeout(t));
        this.positionModalTimers = [];
    },
    clearPositionRollers() {
        if (this.positionRollTimer) clearInterval(this.positionRollTimer);
        if (this.searchesRollTimer) clearInterval(this.searchesRollTimer);
        if (this.valueRollTimer) clearInterval(this.valueRollTimer);
        this.positionRollTimer = null;
        this.searchesRollTimer = null;
        this.valueRollTimer = null;
    },
    resetPositionModal() {
        this.positionModalProgress = 0;
        this.positionModalStage = 0;
        this.positionModalFinal = false;
        this.modalPositionLabel = '#--';
        this.modalSearchesLabel = '0';
        this.modalClicksLabel = '0';
        this.modalValueLabel = '£0/month';
    },
    startPositionRoll() {
        this.positionRollTimer = setInterval(() => {
            const n = Math.floor(Math.random() * 18) + 3;
            this.modalPositionLabel = `#${n}`;
        }, 90);
    },
    startSearchesRoll() {
        this.searchesRollTimer = setInterval(() => {
            const searches = Math.floor(Math.random() * 5000) + 1500;
            const clicks = Math.floor(searches * (0.62 + Math.random() * 0.16));
            this.modalSearchesLabel = searches.toLocaleString();
            this.modalClicksLabel = clicks.toLocaleString();
        }, 110);
    },
    startValueRoll() {
        this.valueRollTimer = setInterval(() => {
            const value = Math.floor(Math.random() * 1600) + 350;
            this.modalValueLabel = `£${value.toLocaleString()}/month`;
        }, 120);
    },
    lockPositionRoll() {
        if (this.positionRollTimer) clearInterval(this.positionRollTimer);
        this.positionRollTimer = null;
        this.modalPositionLabel = this.exactPositionLabel;
    },
    lockSearchesRoll() {
        if (this.searchesRollTimer) clearInterval(this.searchesRollTimer);
        this.searchesRollTimer = null;
        this.modalSearchesLabel = this.exactSearchesLabel;
        this.modalClicksLabel = this.exactClicksLabel;
    },
    lockValueRoll() {
        if (this.valueRollTimer) clearInterval(this.valueRollTimer);
        this.valueRollTimer = null;
        this.modalValueLabel = `£${this.exactValueLabel}/month`;
    },
    openPositionModal(exactValues = {}) {
        this.clearPositionModalTimers();
        this.clearPositionRollers();
        this.resetPositionModal();
        this.exactPositionLabel = exactValues.position || this.exactPositionLabel;
        this.exactSearchesLabel = exactValues.searches || this.exactSearchesLabel;
        this.exactClicksLabel = exactValues.clicks || this.exactClicksLabel;
        this.exactValueLabel = exactValues.value || this.exactValueLabel;
        this.showPositionModal = true;
        this.startPositionRoll();
        this.startSearchesRoll();
        this.startValueRoll();

        this.positionModalTimers.push(setTimeout(() => {
            this.positionModalProgress = 28;
            this.positionModalStage = 1;
            this.lockPositionRoll();
        }, 450));

        this.positionModalTimers.push(setTimeout(() => {
            this.positionModalProgress = 62;
            this.positionModalStage = 2;
            this.lockSearchesRoll();
        }, 1700));

        this.positionModalTimers.push(setTimeout(() => {
            this.positionModalProgress = 100;
            this.positionModalStage = 3;
            this.lockValueRoll();
        }, 3000));

        this.positionModalTimers.push(setTimeout(() => {
            this.positionModalFinal = true;
        }, 4300));
    },
    closePositionModal() {
        this.showPositionModal = false;
        this.clearPositionModalTimers();
        this.clearPositionRollers();
        this.resetPositionModal();
    },
    runConfetti() {
        if (typeof confetti === 'function') {
            confetti({ particleCount: 150, spread: 100, origin: { y: 0.6 } });
        } else {
            console.error('Confetti function is not defined globally.');
        }
    },
    init() {
        if (this.placeId) {
            this.pendingPlaceId = this.placeId;
            if (!this.autoClicked) {
                this.autoClicked = true;
                this.$nextTick(() => {
                    if (this.$refs.checkButton && !this.loading) {
                        this.$refs.checkButton.click();
                    }
                });
            }
        }
        // In some cases Livewire's entangled `placeId` can arrive after Alpine init.
        // Watch for that so we still auto-run `selectBusiness(pid)` for email campaigns.
        this.$watch('placeId', value => {
            if (!value || this.autoClicked || this.loading) return;
            this.pendingPlaceId = value;
            this.autoClicked = true;
            this.$nextTick(() => {
                if (this.$refs.checkButton && !this.loading) {
                    this.$refs.checkButton.click();
                }
            });
        });
        this.$watch('focusSearchInput', value => {
            if (value) {
                this.$nextTick(() => {
                    if (this.$refs.searchInput) {
                        this.$refs.searchInput.focus();
                        this.showDropdown = true;
                    }
                    this.$wire.set('focusSearchInput', false);
                });
            }
        });
        if (this.focusSearchInput) {
            this.$nextTick(() => {
                if (this.$refs.searchInput) {
                    this.$refs.searchInput.focus();
                    this.showDropdown = true;
                }
                this.$wire.set('focusSearchInput', false);
            });
        }
        @if(isset($prefillDescription))
        this.selectedDescription = '{{ $prefillDescription }}';
        @endif
        @if(isset($prefillPlaceId))
        this.placeId = '{{ $prefillPlaceId }}';
        this.pendingPlaceId = '{{ $prefillPlaceId }}';
        @endif
    }
}" x-init="$watch('progress', value => {
    if (value === 100 && placeId && !confettiShown) {
        confettiShown = true;
        loading = false;
        runConfetti();
        setTimeout(() => {
            showProgress = false;
            animatedProgress = 0;
            confettiShown = false;
        }, 1500);
    }
});"
    @trigger-check-button.window="setTimeout(() => {
    if (pendingPlaceId !== $event.detail.placeId) {
        pendingPlaceId = $event.detail.placeId;
        $refs.checkButton.click();
    }
}, 2000);"
    @auto-click-check="if ($event.detail && $event.detail.placeId) {
        pendingPlaceId = $event.detail.placeId;
        $nextTick(() => { if ($refs.checkButton && !loading) $refs.checkButton.click(); });
    }"
    class="max-w-5xl mx-auto w-full">
@if($redirectTo)
    <script>
        window.location.href = "{{ $redirectTo }}";
    </script>
@endif
    <div class="bg-white shadow-xl rounded-lg p-6 w-full">
        <p class="text-left text-gray-800 mb-4 {{ $hideDiv ? 'hidden' : '' }}">
            <strong>🔍 Enter your business name & town to find your report</strong>
        </p>

        <!-- Autocomplete Search Input -->
        <div class=" {{ $hideDiv ? 'hidden' : '' }} flex items-center space-x-2 border rounded-lg pl-5 pr-2 pt-1 pb-1 mb-2 shadow relative">
            <svg class="w-6 h-6 text-gray-400 mr-2" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" clip-rule="evenodd"
                    d="M12.9 14.32a8 8 0 111.414-1.414l4.387 4.386a1 1 0 01-1.414 1.415l-4.387-4.387zM14 8a6 6 0 11-12 0 6 6 0 0112 0z" />
            </svg>

            <input type="text" x-ref="searchInput" wire:model.live.delay.500ms="search" x-model="selectedDescription"
                placeholder="e.g. Smith Motors, London"
                class="flex-1 outline-none border-0 focus:outline-0 w-full focus:outline-none focus:ring-2 focus:ring-blue-400"
                @focus="showDropdown = true"
                @keydown.enter.prevent="
                    if ($wire.searchResults.length > 0) {
                        selectedDescription = $wire.searchResults[0].description;
                        pendingPlaceId = $wire.searchResults[0].place_id;
                        showDropdown = false;
                        if ($refs.checkButton && !loading) {
                            $refs.checkButton.click();
                        }
                    }
                "
                @blur="setTimeout(() => showDropdown = false, 150)" />

            <!-- Autocomplete Dropdown -->
            <div x-show="showDropdown" x-cloak
                class="absolute top-full left-0 w-full z-50 mt-1 bg-white rounded shadow max-h-60 overflow-y-auto">
                @if (!empty($searchResults))
                    <ul class="p-2">
                        @foreach ($searchResults as $result)
                            <li class="cursor-pointer hover:bg-gray-100 p-2 border-b"
                                @click.prevent="
                                    selectedDescription = {{ Illuminate\Support\Js::from($result['description']) }};
                                    showDropdown = false;
                                    pendingPlaceId = {{ Illuminate\Support\Js::from($result['place_id']) }};
                                    if ($refs.checkButton && !loading) { $refs.checkButton.click(); }
                                ">
                                {{ $result['description'] }}
                            </li>
                        @endforeach
                    </ul>
                @elseif(strlen($search) > 3)
                    <div class="text-gray-500 italic p-2">
                        No results found. Try a different search term.
                    </div>
                @endif
            </div>
        </div>

        <!-- Progress Bar -->
        <div class="w-full bg-gray-200 rounded-full ">
            
            <div class="relative mb-4" x-show="showProgress" x-transition>
                <div class="w-full bg-gray-300 h-5 rounded-full overflow-hidden">
                    <div class="h-full bg-gradient-to-r from-green-400 via-blue-500 to-purple-600 animate-pulse transition-all duration-500 ease-out"
                        :style="`width: ${animatedProgress}%`"></div>
                </div>
                
            </div>
            
        </div>
            

        <!-- Submit Button -->
        <div class="text-center mb-2 {{ $hideDiv ? 'hidden' : '' }}">
            <button x-ref="checkButton" 
                @click="
                    if (pendingPlaceId && !loading) {
                        animatedProgress = 20;
                        confettiShown = false;
                        loading = true;
                        showProgress = true;
                        if (window.dataLayer) {
                            window.dataLayer.push({
                                event: 'business_selected',
                                place_id: pendingPlaceId,
                                description: selectedDescription
                            });
                        }
                        $wire.selectBusiness(pendingPlaceId).catch(() => loading = false);
                    }
                "
                class="mt-2 w-full bg-blue-700 text-white font-bold py-3 rounded-lg hover:bg-blue-600 transition flex items-center justify-center relative"
                :disabled="!pendingPlaceId || loading">
                <template x-if="loading">
                    <span class="inline-flex items-center space-x-2">
                        <svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                                stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"></path>
                        </svg>
                        <span>Checking...</span>
                    </span>
                </template>
                <template x-if="!loading">
                    <span>Search My Business</span>
                </template>
            </button>
            <p class="mt-2">
                <button type="button" @click="showVideoModal = true" class="text-[#1868B3] text-sm font-medium hover:underline bg-transparent border-0 p-0 cursor-pointer underline">Watch 50-second explanation</button>
            </p>
        </div>
        <div class="mb-10 {{ $hideDiv ? 'hidden' : '' }}"></div>
        @if ($insight)
            @if (config('top3-lead-labels.show_on_public_surfaces', true) && ($this->top3FunnelStage !== '' || $this->top3EngagementLabel !== ''))
                <div class="mb-4 w-full max-w-4xl mx-auto rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 text-left text-[12px] leading-snug text-slate-600">
                    @if ($this->top3FunnelStage !== '')
                        <div><span class="font-semibold text-slate-800">Funnel</span>: {{ $this->top3FunnelStage }}</div>
                    @endif
                    @if ($this->top3EngagementLabel !== '')
                        <div class="mt-1"><span class="font-semibold text-slate-800">Engagement</span>: {{ $this->top3EngagementLabel }}</div>
                    @endif
                </div>
            @endif
            @php
                $business = $insight;
                $keywordsWithSnapshot = $business->keywords->filter(fn($kw) => $kw->latestSnapshot);
                $premiumKeywords = (clone $keywordsWithSnapshot)->filter(fn($kw) => $kw->premium)->sortByDesc(fn($kw) => (float)($kw->latestSnapshot->traffic_value ?? 0))->values();
                $topKeywords = (clone $keywordsWithSnapshot)->sortByDesc(fn($kw) => $kw->premium)->take(4)->values();

                // Example premium keywords table: load all 4 premium keywords from DB so table always shows up to 4 rows
                $premium4 = \App\Models\Keyword::where('business_insight_id', $business->id)
                    ->where('premium', true)
                    ->with('latestSnapshot')
                    ->orderBy('id')
                    ->limit(4)
                    ->get();
                $townStr = (string)($business->town ?? '');
                $regionStr = (string)($business->region ?? '');
                $localKws = collect();
                $regionalKws = collect();
                foreach ($premium4 as $kw) {
                    $tv = (float)($kw->latestSnapshot?->traffic_value ?? 0);
                    $hasTown = $townStr !== '' && stripos((string)$kw->keyword, $townStr) !== false;
                    $hasRegion = $regionStr !== '' && stripos((string)$kw->keyword, $regionStr) !== false;
                    if ($hasTown && !$hasRegion) {
                        $localKws->push((object)['kw' => $kw, 'tv' => $tv]);
                    } elseif ($hasRegion) {
                        $regionalKws->push((object)['kw' => $kw, 'tv' => $tv]);
                    } elseif ($hasTown) {
                        $localKws->push((object)['kw' => $kw, 'tv' => $tv]);
                    }
                }
                $townValueFromKeywords = (int) round($localKws->sum(fn($o) => $o->tv));
                $regionValueFromKeywords = (int) round($regionalKws->sum(fn($o) => $o->tv));
                if ($townValueFromKeywords === 0 && $regionValueFromKeywords === 0) {
                    $townValue = 690;
                    $regionValue = (int) round(690 * 1.33);
                } else {
                    $townValue = $townValueFromKeywords > 0 ? $townValueFromKeywords : 690;
                    $regionValue = $regionValueFromKeywords > 0 ? $regionValueFromKeywords : (int) round(690 * 1.33);
                }
                $totalCardValue = $townValue + $regionValue;
                // Tone down surfaced values for this landing design.
                $displayScale = 0.4;
                $displayTotalCardValue = (int) round($totalCardValue * $displayScale);
                $localScale = $townValueFromKeywords > 0 ? $townValue / $townValueFromKeywords : 1.0;
                $regionScale = $regionValueFromKeywords > 0 ? $regionValue / $regionValueFromKeywords : 1.0;
                $localKeywordValues = $localKws->map(fn($o) => ['keyword' => $o->kw->keyword, 'value' => (int) round($o->tv * $localScale)])->values();
                $regionalKeywordValues = $regionalKws->map(fn($o) => ['keyword' => $o->kw->keyword, 'value' => (int) round($o->tv * $regionScale)])->values();
                $sum4TrafficValue = $premium4->sum(fn($kw) => (float)($kw->latestSnapshot?->traffic_value ?? 0));
                $scaleFactor = $sum4TrafficValue > 0 ? $totalCardValue / $sum4TrafficValue : 1.0;
                $examplePremiumKeywords = $premium4->map(function ($keyword) use ($scaleFactor) {
                    $snap = $keyword->latestSnapshot;
                    $ms = $snap ? (int)($snap->monthly_searches ?? 0) : 0;
                    $cpc = $snap ? (float)($snap->cpc ?? 0) : 0.0;
                    $tv = $snap ? (float)($snap->traffic_value ?? 0) : 0.0;
                    return [
                        'keyword' => $keyword->keyword,
                        'searches' => (int) round($ms * $scaleFactor),
                        'cpc' => $cpc,
                        'value' => (int) round($tv * $scaleFactor),
                    ];
                })->values();

                // Build top 3 from first keyword that has results; if fewer than 3, add from next keywords
                $top3 = collect();
                $seenPlaceIds = [];
                foreach ($business->keywords as $kw) {
                    if ($top3->count() >= 3) break;
                    if (!$kw->results || $kw->results->isEmpty()) continue;
                    foreach ($kw->results->take(3) as $r) {
                        if ($top3->count() >= 3) break;
                        $pid = $r->place_id ?? null;
                        if ($pid && in_array($pid, $seenPlaceIds, true)) continue;
                        if ($pid) $seenPlaceIds[] = $pid;
                        $top3->push($r);
                    }
                }
                $firstWithResults = $business->keywords->first(fn($k) => $k->results && $k->results->isNotEmpty());
                // Position: from first premium keyword snapshot, or from competitors (top 3) if we're in the list
                $positionNumber = null;
                $firstPremiumPos = $premiumKeywords->first();
                if ($firstPremiumPos && $firstPremiumPos->latestSnapshot && is_numeric($firstPremiumPos->latestSnapshot->position)) {
                    $positionNumber = (int) $firstPremiumPos->latestSnapshot->position;
                }
                if ($positionNumber === null && $firstWithResults) {
                    $ourResult = $firstWithResults->results->first(fn($r) => ($r->place_id ?? null) === $business->place_id);
                    if ($ourResult && is_numeric($ourResult->position)) {
                        $positionNumber = (int) $ourResult->position;
                    }
                }

                $latestReview = $business->reviewSnapshots()->orderByDesc('snapshot_date')->first();
                $rating = $latestReview !== null ? (float) $latestReview->average_rating : null;

                $unsubscribeEmail = $email ?? $business->email ?? '';
                $unsubscribeUrl = url('unsubscribe?email=' . urlencode($unsubscribeEmail) . '&source=top3search');

                // --- UI stats derived values (matches your reference layout) ---
                $top3Share = 0.7;
                $top3Percent = (int) round($top3Share * 100); // 70
                $positionIsTop3 = $positionNumber !== null && $positionNumber <= 3;

                // Use the 4 premium keywords as the basis for "search volume" estimates; fall back to reference numbers.
                $sum4MonthlySearches = (int) round($premium4->sum(fn ($kw) => (int) ($kw->latestSnapshot?->monthly_searches ?? 0)));
                $totalSearches = $sum4MonthlySearches > 0 ? $sum4MonthlySearches : 3300;
                $top3Searches = (int) round($totalSearches * $top3Share);
                $restSearches = max(0, $totalSearches - $top3Searches);

                // When in Top 3, show "you are visible" share; otherwise show missed share.
                $yourSharePercent = $positionIsTop3 ? $top3Percent : (100 - $top3Percent);

                // Keep consistent with dashboard popup (static realistic Google pagination cap).
                $competitorsEstimate = 400;

                $highlightKeyword = $business->keywords->first()?->keyword ?? ($business->name ?? 'your business');

                // Popup: count keywords where this business is currently in the Top 3.
                $placeIdStr = (string) ($business->place_id ?? '');
                $keywordsInTop3 = $business->keywords
                    ->filter(function ($kw) use ($placeIdStr) {
                        if (!($kw->premium ?? false)) return false;
                        $results = collect($kw->results ?? []);
                        if ($results->isEmpty()) return false;

                        return $results->contains(function ($r) use ($placeIdStr) {
                            $pid = (string) ($r->place_id ?? '');
                            $pos = $r->position ?? null;

                            return $pid === $placeIdStr && is_numeric($pos) && (int) $pos <= 3;
                        });
                    })
                    ->count();
            @endphp

            {{-- Business name, address; right: star rating + position on Google Maps --}}
            <div class="flex flex-wrap items-start justify-between gap-4 mb-6">
                <div class="min-w-0 flex-1">
                    <h2 class="text-2xl font-bold text-gray-900 text-left">{{ $business->name }}</h2>
                    <p class="text-sm text-gray-600 mt-0.5 text-left">{{ $business->address }}</p>
                </div>
                <div class="flex items-center gap-2 flex-shrink-0 flex-wrap">
                    <span class="inline-flex items-center gap-1.5 bg-white border border-gray-300 text-gray-900 font-medium text-sm px-3 py-1.5 rounded-lg">
                        <svg class="w-5 h-5 text-gray-800" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                        {{ $rating !== null ? number_format($rating, 1) : '—' }}
                    </span>
                    <span class="bg-green-100 text-green-800 text-sm font-semibold px-3 py-1.5 rounded-lg border border-green-200">Position {{ $positionNumber !== null ? '#' . $positionNumber : '20+' }}</span>
                </div>
            </div>

            {{-- Post-search nudge (from reference lander) --}}
            <div class="bg-white border border-[#e8edf2] rounded-[14px] px-5 py-4 mb-6 flex items-center justify-between gap-4 flex-wrap">
                <div class="text-[15px] font-bold text-[#0f172a] leading-6">
                    Fewer than <span class="font-black">2%</span> of businesses reach the Top 3 — but the rewards can be significant.
                </div>
                <button
                    type="button"
                    class="bg-green-600 hover:bg-green-700 text-white font-black text-[14px] rounded-[10px] px-5 py-3 whitespace-nowrap"
                    onclick="
                        window.location.href = {{ Illuminate\Support\Js::from(
                            url('/dashboard?' . http_build_query(array_filter([
                                'bi' => $business->id ?? null,
                                'pid' => $business->place_id ?? null,
                                // Use name only; avoid duplicating name/address across back/forward navigations.
                                'c' => $business->name ?? null,
                                'source' => 'top3search',
                            ], fn ($v) => $v !== null && $v !== '')))
                        ) }};
                    "
                >
                    Check if I qualify
                </button>
            </div>

            {{-- Estimated missed free value + where customers are going --}}
            <div class="bg-[#fbfcfe] border border-[#e3e9f2] rounded-[14px] p-4 mb-6">
                <div class="text-center text-[18px] font-black text-[#1d3253] uppercase tracking-wider mb-3">
                    Where Your Customers Are Going
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-stretch mb-3">
                    <div class="bg-[#f5fbf6] border border-[#cfe8d5] rounded-[14px] shadow-[inset_0_0_0_1px_#e8f7ec] px-4 py-5">
                        <div class="text-center text-[14px] font-black uppercase tracking-wider mb-3 text-[#239347]">Top 3 (Google Map Pack)</div>

                        <div class="text-center text-[38px] sm:text-[42px] font-black leading-none mb-2 text-[#239347]">
                            ~{{ $top3Percent }}%
                        </div>

                        <div class="w-full h-[14px] rounded-full bg-[#e8edf5] overflow-hidden mb-3">
                            <div class="h-full rounded-full bg-gradient-to-r from-[#2fcb64] to-[#1fa44c]" style="width: {{ $top3Percent }}%"></div>
                        </div>

                        <div class="text-center text-[16px] font-black leading-6 mb-4 text-[#10213a]">
                            ~{{ number_format($top3Searches) }} of {{ number_format($totalSearches) }} searches go to the Top 3
                        </div>

                        <div class="flex justify-center gap-3 flex-wrap mt-1">
                            <div class="min-w-[72px] text-center bg-white rounded-[12px] px-3 py-3 text-[13px] font-black text-[#10213a] border border-[#d8eee0]">
                                Calls
                            </div>
                            <div class="min-w-[72px] text-center bg-white rounded-[12px] px-3 py-3 text-[13px] font-black text-[#10213a] border border-[#d8eee0]">
                                Visits
                            </div>
                            <div class="min-w-[72px] text-center bg-white rounded-[12px] px-3 py-3 text-[13px] font-black text-[#10213a] border border-[#d8eee0]">
                                Directions
                            </div>
                        </div>
                    </div>

                    <div class="bg-white border border-[#e3e9f2] rounded-[14px] px-4 py-5">
                        <div class="text-center text-[14px] font-black uppercase tracking-wider mb-3 text-[#64748b]">Local competitors</div>

                        <div class="text-center text-[38px] sm:text-[42px] font-black leading-none mb-2 text-[#10213a]">
                            {{ number_format($competitorsEstimate) }}
                        </div>

                        <div class="w-full h-[14px] rounded-full bg-gradient-to-r from-[#2fcb64] via-[#f0ad2c] to-[#ef4444] overflow-hidden mb-3"></div>

                        <div class="text-center text-[14px] font-black text-[#dc2626]">
                            Very high competition
                        </div>
                    </div>

                    <div class="bg-[#fff8ef] border border-[#fde0b1] rounded-[14px] px-4 py-5">
                        <div class="text-center text-[14px] font-black uppercase tracking-wider mb-3 text-[#b45309]">Your Position</div>

                        <div class="text-center text-[38px] sm:text-[42px] font-black leading-none mb-2 text-[#10213a]">
                            #{{ $positionNumber !== null ? $positionNumber : '20+' }}
                        </div>

                        <div class="w-full h-[14px] rounded-full bg-[#e8edf5] overflow-hidden mb-3">
                            <div class="h-full rounded-full bg-gradient-to-r from-[#f0ad2c] to-[#f39a1e]" style="width: {{ $yourSharePercent }}%"></div>
                        </div>

                        <div class="text-center text-[16px] font-black leading-6 mb-4 text-[#6d7d95]">
                            {{ $positionIsTop3 ? 'Visible to buyers' : 'Invisible to buyers' }}
                        </div>

                        <div class="flex justify-center">
                            <div class="min-w-[72px] text-center rounded-[12px] px-3 py-3 text-[13px] font-black text-[#b45309] border border-[#f3d4a2] bg-[#fffaf3]">
                                ~{{ number_format($top3Searches) }} {{ $positionIsTop3 ? 'see you' : 'never see you' }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-[#eef6ff] border border-[#d4e4fb] rounded-[14px] px-5 py-5 text-center mb-6 text-[18px] leading-7 font-black text-[#10213a]">
                If a customer searches
                <span class="inline-block text-[#1f67b7] font-black leading-none">
                    {{ $highlightKeyword }}
                </span>
                and chooses from the Top 3... what&rsquo;s that worth?
            </div>

            <div class="text-center text-[17px] font-black text-[#22395e] uppercase tracking-wider mb-4">
                🔥 High-Value Searches You&rsquo;re Missing
            </div>

            <div class="border border-[#dce5f0] rounded-[14px] overflow-hidden bg-white mb-6">
                <table class="w-full border-collapse">
                    <thead>
                        <tr>
                            <th class="bg-[#1f67b7] text-white text-[14px] font-black text-left py-4 px-4">Keyword</th>
                            <th class="bg-[#1f67b7] text-white text-[14px] font-black text-left py-4 px-4">Searches</th>
                            <th class="bg-[#1f67b7] text-white text-[14px] font-black text-left py-4 px-4">Est. CPC</th>
                            <th class="bg-[#1f67b7] text-white text-[14px] font-black text-left py-4 px-4">Est. Value</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($examplePremiumKeywords as $row)
                            <tr class="even:bg-[#fcfdff]">
                                <td class="py-4 px-4 border-t border-[#edf1f6] text-[#10213a]">
                                    <strong class="font-black text-[16px] block mb-1">
                                        <span class="inline-block text-[#1f67b7] font-black">
                                            {{ $row['keyword'] }}
                                        </span>
                                    </strong>
                                    <span class="block text-[13px] text-[#6b7b92] font-bold">High-value search</span>
                                </td>
                                <td class="py-4 px-4 border-t border-[#edf1f6] text-[#10213a] text-[15px] font-bold">
                                    {{ number_format($row['searches']) }}
                                </td>
                                <td class="py-4 px-4 border-t border-[#edf1f6] text-[#10213a] text-[15px] font-bold">
                                    £{{ number_format($row['cpc'], 2) }}
                                </td>
                                <td class="py-4 px-4 border-t border-[#edf1f6] text-[#0d1f39] text-[16px] font-black">
                                    £{{ number_format((float)$row['value'] * $displayScale, 0) }}
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="py-4 px-4 text-center text-gray-500 border-t border-[#edf1f6]">
                                    No premium keywords yet.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            {{-- Example Top-3 Rankings Carousel (design-only, no logic change) --}}
            <div class="examples-panel bg-[#f7f9fc] border border-[#e1e7f0] rounded-[18px] p-5 sm:p-[22px] mb-8 mt-2">
                <div class="examples-title text-center text-[24px] font-black text-[#1e3558] uppercase tracking-[0.5px] mb-2">
                    Example Google Maps Top 3 Ranking
                </div>
                <div class="examples-sub text-center text-[14px] text-[#61728a] mb-4">
                    Click any example to check the live Google search result.
                </div>

                <div class="examples-more text-center text-[13px] font-black text-[#2d65dd] mb-4">
                    200+ more examples available on request
                </div>

                <div class="carousel-wrap relative mb-4">
                    <div class="carousel-nav flex justify-center gap-3 mb-4">
                        <button
                            type="button"
                            aria-label="Previous examples"
                            class="carousel-btn w-[38px] h-[38px] rounded-full border border-[#d7e2ef] bg-white text-[#2d65dd] text-[20px] font-black cursor-pointer"
                            @click="scrollCarousel(-1)"
                        >
                            &lsaquo;
                        </button>
                        <button
                            type="button"
                            aria-label="Next examples"
                            class="carousel-btn w-[38px] h-[38px] rounded-full border border-[#d7e2ef] bg-white text-[#2d65dd] text-[20px] font-black cursor-pointer"
                            @click="scrollCarousel(1)"
                        >
                            &rsaquo;
                        </button>
                    </div>

                    <div
                        class="carousel-track flex gap-4 overflow-x-auto scroll-smooth"
                        id="examplesCarousel"
                        style="scrollbar-width: none; -ms-overflow-style: none;"
                    >
                        <style>
                            #examplesCarousel::-webkit-scrollbar { display: none; }
                        </style>

                        @php
                            $examples = [
                                [
                                    'keyword' => 'block management ruislip',
                                    'business' => 'LMS Sheridans',
                                    'position' => '#1',
                                    'stat' => '+347.6%',
                                    'label' => 'interactions',
                                    'href' => 'https://www.google.com/search?q=block+management+ruislip',
                                ],
                                [
                                    'keyword' => 'car finance glasgow',
                                    'business' => 'Mount Vernon Motors',
                                    'position' => '#2',
                                    'stat' => '+26.6%',
                                    'label' => 'interactions',
                                    'href' => 'https://www.google.com/search?q=car+finance+glasgow',
                                ],
                                [
                                    'keyword' => 'lettings agent brighton',
                                    'business' => 'Knight & Knoxley',
                                    'position' => '#1',
                                    'stat' => '+35.4%',
                                    'label' => 'customer interactions',
                                    'href' => 'https://www.google.com/search?q=lettings+agent+brighton',
                                ],
                                [
                                    'keyword' => 'Best Solar Installers Bundal',
                                    'business' => 'Australian National Solar',
                                    'position' => '#1',
                                    'stat' => '+70.9%',
                                    'label' => 'profile interactions',
                                    'href' => 'https://www.google.com/search?q=Best+Solar+Installers+Bundal',
                                ],
                                [
                                    'keyword' => 'lettings agents london n19',
                                    'business' => 'Stelfort',
                                    'position' => '#3',
                                    'stat' => '+35.9%',
                                    'label' => 'profile interactions',
                                    'href' => 'https://www.google.com/search?q=lettings+agents+london+n19',
                                ],
                                [
                                    'keyword' => 'motorbikes London',
                                    'business' => 'Central Bikes',
                                    'position' => '#2',
                                    'stat' => '+8.8%',
                                    'label' => 'interactions vs Nov 2024',
                                    'href' => 'https://www.google.com/search?q=motorbikes+London',
                                ],
                            ];
                        @endphp

                        @foreach($examples as $ex)
                            <div class="flex-shrink-0 w-[280px] sm:w-[280px] lg:w-[280px]">
                                <a
                                    href="{{ $ex['href'] }}"
                                    rel="noopener noreferrer"
                                    target="_blank"
                                    class="example-link block no-underline bg-white border border-[#e8edf2] rounded-[16px] px-5 py-6 text-[#0f172a] h-full transition-[transform,border-color,box-shadow] duration-200 hover:-translate-y-[2px] hover:shadow-[0_10px_24px_rgba(15,23,42,0.08)] hover:border-[#cfe0ff]"
                                >
                                    <div class="flex flex-col min-h-[184px]">
                                        <strong class="text-[15px] font-black text-[#0f172a] leading-[1.35] mb-1">
                                            {{ $ex['keyword'] }}
                                        </strong>
                                        <span class="text-[12px] text-[#94a3b8] mb-3">
                                            {{ $ex['business'] }}
                                        </span>

                                        <div class="inline-flex items-center gap-2 rounded-full bg-[#eef8f1] px-3 py-1.5 text-[12px] font-black text-[#15803d] mb-3 w-fit">
                                            <span class="inline-flex h-[7px] w-[7px] rounded-full bg-[#22c55e]"></span>
                                            Position {{ $ex['position'] }}
                                        </div>

                                        <div class="mb-3">
                                            <div class="text-[18px] font-black text-[#15803d] leading-none">
                                                {{ $ex['stat'] }}
                                            </div>
                                            <div class="text-[11px] font-bold text-[#64748b] mt-1">
                                                {{ $ex['label'] }}
                                            </div>
                                        </div>

                                        <span class="text-[13px] font-black text-[#3b5bdb] hover:underline underline-offset-2 w-fit mb-3">
                                            View on Google ↗
                                        </span>

                                        <div class="mt-auto flex items-center justify-center gap-2 border-t border-[#f1f5f9] pt-3 text-[12px] font-semibold text-[#475569]">
                                            <span class="inline-flex h-[18px] w-[18px] items-center justify-center rounded-full bg-[#3b5bdb]">
                                                <svg viewBox="0 0 10 10" fill="none" class="h-[10px] w-[10px]">
                                                    <path d="M2 5l2.5 2.5 4-4" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                                </svg>
                                            </span>
                                            Ranking achieved by Reply.Reviews
                                        </div>
                                    </div>
                                </a>
                            </div>
                        @endforeach
                    </div>
                </div>

                {{-- Hidden trigger kept for deep-link flows (e.g. ?openPosition=1) --}}
                <button
                    id="seeMyNewPositionBtn"
                    type="button"
                    wire:click="redirectToOnboardingFromModal"
                    class="hidden"
                    aria-hidden="true"
                    tabindex="-1"
                >
                    See My New Position
                </button>
            </div>

            {{-- CTA modal flow (matches provided HTML behavior) --}}
            <div
                x-show="showPositionModal"
                x-cloak
                x-transition.opacity
                wire:key="position-modal-{{ $business->place_id ?? 'none' }}"
                class="fixed inset-0 z-[9999] flex items-center justify-center bg-[rgba(7,16,31,0.62)] p-4"
                @click.self="closePositionModal()"
                @keydown.escape.window="closePositionModal()"
            >
                <div class="relative w-full max-w-3xl bg-white rounded-2xl shadow-2xl p-6 max-h-[calc(100vh-32px)] overflow-y-auto" @click.stop>
                    <button
                        type="button"
                        class="absolute right-4 top-4 text-sm text-gray-500 hover:text-gray-700"
                        @click="closePositionModal()"
                    >
                        Close
                    </button>

                    <template x-if="!positionModalFinal">
                        <div>
                            <h3 class="text-[28px] leading-tight font-black text-[#10213a] text-center mb-2 mt-2">
                                Checking your Maps visibility...
                            </h3>
                            <p class="text-[14px] text-[#66778f] text-center mb-4">
                                Analysing your position and local search opportunity
                            </p>

                            <div class="w-full h-[14px] bg-[#e9eef5] rounded-full overflow-hidden mb-5">
                                <div
                                    class="h-full rounded-full bg-gradient-to-r from-[#2fcb64] to-[#1ea74a] transition-all duration-500 ease-out"
                                    :style="`width: ${positionModalProgress}%`"
                                ></div>
                            </div>

                            <template x-if="positionModalStage < 1">
                                <div class="rounded-[14px] border border-gray-200 bg-gray-50 p-5 text-center mb-3 animate-pulse">
                                    <div class="h-8 w-24 mx-auto bg-gray-200 rounded mb-2"></div>
                                    <div class="h-4 w-36 mx-auto bg-gray-200 rounded"></div>
                                </div>
                            </template>
                            <template x-if="positionModalStage >= 1">
                                <div class="rounded-[14px] border border-[#fde0b1] bg-[#fff8ef] p-5 text-center mb-3">
                                    <div class="text-[32px] font-black text-[#10213a] leading-none mb-2" x-text="modalPositionLabel"></div>
                                    <div class="text-[14px] font-bold text-[#61728a]">Your current position</div>
                                </div>
                            </template>

                            <template x-if="positionModalStage < 2">
                                <div class="rounded-[14px] border border-gray-200 bg-gray-50 p-5 text-center mb-3 animate-pulse">
                                    <div class="h-8 w-56 mx-auto bg-gray-200 rounded mb-2"></div>
                                    <div class="h-4 w-48 mx-auto bg-gray-200 rounded"></div>
                                </div>
                            </template>
                            <template x-if="positionModalStage >= 2">
                                <div class="rounded-[14px] border border-[#cdebd3] bg-[#f5fbf6] p-5 text-center mb-3">
                                    <div class="text-[32px] font-black text-[#10213a] leading-none mb-2" x-text="`${modalSearchesLabel} searches/month`"></div>
                                    <div class="text-[14px] font-bold text-[#61728a]" x-text="`~${modalClicksLabel} clicks go to the Top 3`"></div>
                                </div>
                            </template>

                            <template x-if="positionModalStage < 3">
                                <div class="rounded-[14px] border border-gray-200 bg-gray-50 p-5 text-center animate-pulse">
                                    <div class="h-8 w-36 mx-auto bg-gray-200 rounded mb-2"></div>
                                    <div class="h-4 w-52 mx-auto bg-gray-200 rounded"></div>
                                </div>
                            </template>
                            <template x-if="positionModalStage >= 3">
                                <div class="rounded-[14px] border border-[#dbe6f4] bg-[#eef7ff] p-5 text-center">
                                    <div class="text-[32px] font-black text-[#10213a] leading-none mb-2">
                                        {{ $keywordsInTop3 }} KEYWORDS
                                    </div>
                                    <div class="text-[14px] font-bold text-[#61728a] flex items-center justify-center gap-3">
                                        
                                        Current keywords in the top 3
                                    </div>
                                </div>
                            </template>
                        </div>
                    </template>

                    <template x-if="positionModalFinal">
                        <div>
                            <div class="bg-[#f5fbf6] border border-[#cdebd3] rounded-xl px-4 py-2 text-center text-[13px] font-black text-[#239347] mb-4">
                                No card &bull; No contract &bull; 3-day free test
                            </div>

                            <h3 class="text-[28px] leading-tight font-black text-[#10213a] text-center mb-2">
                                See Where Your Business Could Be in 3 Days
                            </h3>
                            <p class="text-[14px] text-[#66778f] text-center mb-4">
                                Most customers choose from the first 3 results
                            </p>

                            <div class="bg-[#f7f9fc] border border-[#e1e7f0] rounded-2xl p-4 mb-4">
                                <div class="text-[13px] font-black text-[#23395e] uppercase tracking-wide mb-3">Top 3 (Google Map Pack)</div>

                                <div class="grid grid-cols-[minmax(0,1fr)_auto_auto] gap-3 items-center p-3 rounded-xl border border-[#cfe8d5] bg-[#effaf2] mb-2">
                                    <div class="text-[15px] font-bold text-[#10213a]">
                                        1. {{ $business->name }}
                                        <span class="ml-2 inline-block text-[11px] font-black text-[#239347] border border-[#bfe0c7] bg-[#eaf8ee] rounded-full px-2 py-1 align-middle">Your New Position</span>
                                    </div>
                                    <div class="text-[13px] font-bold text-[#223754] border border-[#d8dee8] bg-white rounded-lg px-2 py-1 min-w-[64px] text-center">⭐ {{ $rating !== null ? number_format($rating, 1) : '4.6' }}</div>
                                    <div class="text-[13px] font-black text-[#2f7b3d] border border-[#bfe0c7] bg-[#eaf8ee] rounded-lg px-2 py-1 min-w-[52px] text-center">#1</div>
                                </div>

                                @php
                                    $modalCompetitors = $top3
                                        ->filter(fn($c) => (string)($c->place_id ?? '') !== (string)$business->place_id)
                                        ->values()
                                        ->take(2);
                                @endphp
                                @foreach($modalCompetitors as $i => $competitor)
                                    <div class="grid grid-cols-[minmax(0,1fr)_auto_auto] gap-3 items-center py-3 border-t border-[#e8edf5]">
                                        <div class="text-[15px] font-bold text-[#10213a]">{{ $i + 2 }}. {{ $competitor->name ?? ('Competitor ' . ($i + 1)) }}</div>
                                        <div class="text-[13px] font-bold text-[#223754] border border-[#d8dee8] bg-white rounded-lg px-2 py-1 min-w-[64px] text-center">⭐ {{ isset($competitor->rating) && $competitor->rating ? number_format((float)$competitor->rating, 1) : '4.5' }}</div>
                                        <div class="text-[13px] font-black text-[#2f7b3d] border border-[#bfe0c7] bg-[#eaf8ee] rounded-lg px-2 py-1 min-w-[52px] text-center">#{{ $i + 2 }}</div>
                                    </div>
                                @endforeach
                            </div>

                            <div class="text-center text-[25px] leading-6 font-black text-[#10213a] mb-3">
                              Nothing to Loose Try it for Free
                            </div>
                            <div class="text-center text-[16px] font-black text-[#10213a] mb-4">Only one business per location</div>

                            <div class="text-center">
                                <button
                                    type="button"
                                    wire:click="redirectToOnboardingFromModal"
                                    class="inline-flex items-center justify-center w-full max-w-[420px] rounded-xl min-h-[48px] px-5 py-3 text-[15px] font-black bg-[#1eaa47] text-white hover:bg-[#18913d] transition"
                                >
                                    Try it for free
                                </button>
                                <p class="text-[12px] leading-5 text-[#74829a] font-bold mt-3">
                                    Free 3-day Top 3 test &bull; No card required<br>
                                    You approve all changes before anything goes live<br>
                                    Full report with your new positions in 3 days <br>
                                    <span class="font-bold text-[16px]">£99/month Cancel anytime</span>
                                </p>
                            </div>
                        </div>
                    </template>
                </div>
            </div>

            {{-- Bottom CTA block (copy/wording from reference lander) --}}
            <section class="mt-8 mb-6 rounded-[18px] overflow-hidden border border-[#1f2937] bg-[#111827]">
                <div class="px-6 py-10 text-center">
                    <h3 class="text-[30px] leading-tight font-black tracking-[-0.02em] text-white">
                        Exclusively one business per location
                    </h3>
                    <p class="mt-2 text-[15px] font-semibold text-slate-300">
                        {{ number_format($competitorsEstimate) }} businesses competing in your area — including national brands and corporates.
                    </p>

                    <button
                        type="button"
                        class="mt-6 inline-flex w-full max-w-[720px] items-center justify-center rounded-[18px] bg-green-500 px-8 py-6 text-[20px] font-black text-white shadow-[0_18px_40px_rgba(34,197,94,0.22)] hover:bg-green-600 transition"
                        onclick="window.location.href = {{ Illuminate\Support\Js::from(
                            url('/dashboard?' . http_build_query(array_filter([
                                'bi' => $business->id ?? null,
                                'pid' => $business->place_id ?? null,
                                'c' => $business->name ?? null,
                                'source' => 'top3search',
                            ], fn ($v) => $v !== null && $v !== '')))
                        ) }};"
                    >
                        Check if I qualify for Top 3
                    </button>

                    <div class="mt-3 text-[13px] font-semibold text-slate-400">
                        No card required &nbsp;·&nbsp; Takes 60 seconds &nbsp;·&nbsp; Cancel anytime
                    </div>
                </div>

                <div class="border-t border-white/10 px-6 py-5">
                    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-center sm:gap-10 text-slate-300 font-semibold">
                        <div class="inline-flex items-center justify-center gap-3">
                            <span class="inline-flex h-5 w-10 items-center justify-center rounded-full bg-white/10"></span>
                            <span>1,200+ businesses ranked</span>
                        </div>
                        <div class="inline-flex items-center justify-center gap-3">
                            <span class="inline-flex h-5 w-10 items-center justify-center rounded-full bg-white/10"></span>
                            <span>Results within 3 days</span>
                        </div>
                        <div class="inline-flex items-center justify-center gap-3">
                            <span class="inline-flex h-5 w-10 items-center justify-center rounded-full bg-white/10"></span>
                            <span>1 business per area only</span>
                        </div>
                    </div>

                    <div class="mt-4 text-center text-[13px] text-slate-400">
                        If you'd rather not receive the report, <a href="{{ $unsubscribeUrl }}" class="underline underline-offset-2 hover:text-white">click here</a>.
                    </div>
                </div>
            </section>

            {{-- CTA: Qualification gate + Demo signup (keep existing flow for email capture) --}}
            <div id="qualificationCta" class="flex flex-col md:flex-row items-center justify-center gap-4 mt-6 pt-6 border-t border-gray-200">
                <button id="contactSupportBtn" x-data @click="$dispatch('open-demo-signup', { askSupport: true })"
                    class="hidden relative items-center justify-center p-0.5 overflow-hidden text-lg font-bold rounded-full text-gray-900 group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800">
                    <span class="relative px-8 py-3.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-full group-hover:bg-transparent group-hover:dark:bg-transparent">Contact Support</span>
                </button>
                <livewire:qualification-gate
                    :town="$business->town ?? 'Hounslow'"
                    currency="£"
                    :yearlyPrice="1490"
                    :verifyPhoneRoute="url('/dashboard?' . http_build_query(array_filter([
                        'pid' => $business->place_id ?? null,
                        'bi' => $business->id ?? null,
                        'e' => $email ?? ($business->email ?? null),
                        'n' => $name ?? ($business->contact_name ?? null),
                        'c' => $business->name ?? null,
                        'city' => $business->town ?? null,
                    ], fn ($v) => $v !== null && $v !== '')))"
                />
                <livewire:demo-signup
                    :selectedPlaceId="$business->place_id"
                    :customKeywords="$business->keywords->pluck('keyword')->take(4)->toArray()"
                    :email="$email"
                    :name="$name"
                    :trial="$trial"
                    wire:key="demo-signup-{{ $business->place_id }}"
                    wire:ref="demoSignup"
                />
            </div>
        @else
            {{-- Skeleton: match new results layout --}}
            <div class="flex flex-wrap items-start justify-between gap-4 mb-6">
                <div class="min-w-0 flex-1">
                    <div class="h-8 w-64 bg-gray-200 rounded animate-pulse"></div>
                    <div class="h-4 w-80 bg-gray-100 rounded animate-pulse mt-2"></div>
                </div>
                <div class="flex items-center gap-2 flex-shrink-0 flex-wrap">
                    <span class="inline-flex items-center gap-1.5 bg-white border border-gray-300 text-gray-400 font-medium text-sm px-3 py-1.5 rounded-lg">⭐ —</span>
                    <span class="bg-gray-100 text-gray-400 text-sm font-semibold px-3 py-1.5 rounded-lg border border-gray-200">Position —</span>
                </div>
            </div>

            <div class="text-center text-[13px] font-black text-gray-400 uppercase tracking-wider mb-3">
                Estimated missed free value (equivalent paid ads traffic cost)
            </div>
            <div class="bg-gray-50 border border-gray-200 rounded-[14px] px-5 py-4 mb-6 flex justify-between items-center gap-4 flex-wrap">
                <div class="min-w-[220px]">
                    <div class="h-4 w-40 bg-gray-200 rounded animate-pulse mb-2"></div>
                    <div class="h-12 w-48 bg-gray-200 rounded animate-pulse"></div>
                </div>
                <div class="h-4 w-80 bg-gray-100 rounded animate-pulse"></div>
            </div>

            <div class="bg-[#fbfcfe] border border-[#e3e9f2] rounded-[14px] p-4 mb-6">
                <div class="h-5 w-64 mx-auto bg-gray-200 rounded animate-pulse mb-4"></div>
                <div class="grid grid-cols-1 md:grid-cols-[1.2fr_.8fr] gap-4">
                    <div class="bg-[#f5fbf6] border border-[#cfe8d5] rounded-[14px] p-4">
                        <div class="h-4 w-44 mx-auto bg-green-100 rounded animate-pulse mb-3"></div>
                        <div class="h-12 w-24 mx-auto bg-green-100 rounded animate-pulse mb-3"></div>
                        <div class="h-4 w-64 mx-auto bg-gray-100 rounded animate-pulse mb-4"></div>
                        <div class="h-4 w-full bg-gray-200 rounded-full animate-pulse mb-4"></div>
                    </div>
                    <div class="bg-[#fff8ef] border border-[#fde0b1] rounded-[14px] p-4">
                        <div class="h-4 w-24 mx-auto bg-amber-100 rounded animate-pulse mb-3"></div>
                        <div class="h-12 w-16 mx-auto bg-gray-200 rounded animate-pulse mb-3"></div>
                        <div class="h-4 w-36 mx-auto bg-gray-100 rounded animate-pulse mb-4"></div>
                        <div class="h-4 w-full bg-gray-200 rounded-full animate-pulse mb-4"></div>
                    </div>
                </div>
            </div>

            <div class="bg-[#eef6ff] border border-[#d4e4fb] rounded-[14px] px-5 py-5 text-center mb-6">
                <div class="h-5 w-4/5 mx-auto bg-blue-100 rounded animate-pulse"></div>
            </div>

            <div class="text-center text-[17px] font-black text-gray-400 uppercase tracking-wider mb-4">
                High-Value Searches You're Missing
            </div>
            <div class="border border-[#dce5f0] rounded-[14px] overflow-hidden bg-white mb-6">
                <table class="w-full border-collapse">
                    <thead>
                        <tr>
                            <th class="bg-[#1f67b7] py-4 px-4"><div class="h-4 w-20 bg-white/40 rounded animate-pulse"></div></th>
                            <th class="bg-[#1f67b7] py-4 px-4"><div class="h-4 w-20 bg-white/40 rounded animate-pulse"></div></th>
                            <th class="bg-[#1f67b7] py-4 px-4"><div class="h-4 w-20 bg-white/40 rounded animate-pulse"></div></th>
                            <th class="bg-[#1f67b7] py-4 px-4"><div class="h-4 w-20 bg-white/40 rounded animate-pulse"></div></th>
                        </tr>
                    </thead>
                    <tbody>
                        @for ($i = 0; $i < 4; $i++)
                            <tr class="even:bg-[#fcfdff]">
                                <td class="py-4 px-4 border-t border-[#edf1f6]"><div class="h-4 w-48 bg-gray-100 rounded animate-pulse"></div></td>
                                <td class="py-4 px-4 border-t border-[#edf1f6]"><div class="h-4 w-16 bg-gray-100 rounded animate-pulse"></div></td>
                                <td class="py-4 px-4 border-t border-[#edf1f6]"><div class="h-4 w-16 bg-gray-100 rounded animate-pulse"></div></td>
                                <td class="py-4 px-4 border-t border-[#edf1f6]"><div class="h-4 w-20 bg-gray-100 rounded animate-pulse"></div></td>
                            </tr>
                        @endfor
                    </tbody>
                </table>
            </div>

            <div class="examples-panel bg-[#f7f9fc] border border-[#e1e7f0] rounded-[18px] p-5 sm:p-[22px] mb-8 mt-2">
                <div class="h-5 w-64 mx-auto bg-gray-200 rounded animate-pulse mb-3"></div>
                <div class="h-4 w-80 mx-auto bg-gray-100 rounded animate-pulse mb-2"></div>
                <div class="h-4 w-72 mx-auto bg-gray-100 rounded animate-pulse mb-4"></div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                    @for ($i = 0; $i < 3; $i++)
                        <div class="bg-white border border-[#d8e1ec] rounded-[14px] p-5">
                            <div class="h-5 w-40 bg-gray-200 rounded animate-pulse mb-3"></div>
                            <div class="h-4 w-28 bg-gray-100 rounded animate-pulse mb-3"></div>
                            <div class="h-4 w-24 bg-gray-100 rounded animate-pulse"></div>
                        </div>
                    @endfor
                </div>
                <div class="h-12 w-64 mx-auto bg-green-200 rounded-xl animate-pulse"></div>
            </div>
        @endif
    </div>

    {{-- Same video modal as CTA (qualification-gate): Watch 50 sec --}}
    <div x-show="showVideoModal"
         x-cloak
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         class="fixed inset-0 z-[9998] grid place-items-center bg-slate-900/70 p-4"
         @click.self="showVideoModal = false"
         aria-modal="true"
         role="dialog"
         aria-label="Watch video"
         @keydown.escape.window="showVideoModal = false">
        <div class="relative w-full max-w-3xl overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-2xl" @click.stop>
            <button type="button"
                    class="absolute right-3 top-3 z-10 grid h-10 w-10 place-items-center rounded-full bg-slate-200/90 text-slate-700 hover:bg-slate-300"
                    aria-label="Close"
                    @click="showVideoModal = false">✕</button>
            <div class="p-5 pb-6">
                <h2 class="text-xl font-bold text-gray-800 mb-4 pr-10">Watch 50 seconds to see how businesses move into the Top 3</h2>
                <div class="aspect-video w-full rounded-lg overflow-hidden bg-black mb-4">
                    <iframe class="h-full w-full"
                            src=""
                            :src="showVideoModal ? 'https://www.youtube.com/embed/66T7GagZE9U?loop=1&playlist=66T7GagZE9U&autoplay=1' : ''"
                            title="YouTube video"
                            frameborder="0"
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                            allowfullscreen></iframe>
                </div>
                <p class="text-gray-500 text-sm mb-6">We'll confirm keywords + area. If available, we may offer a free validation test.</p>
                <div class="text-center">
                    <a href="https://outlook.office.com/book/ReplyReviewsCopy@ReplyReviews040202.onmicrosoft.com/?ismsaljsauthenabled"
                       target="_blank"
                       rel="noopener noreferrer"
                       class="inline-block w-full sm:w-auto px-8 py-4 text-lg font-bold rounded-full bg-green-600 text-white hover:bg-green-700 transition text-center">
                        Book 15-Min Teams Review
                    </a>
                </div>
            </div>
        </div>
    </div>

    {{-- Free 3-Day Top 3 Maps Guarantee CTA removed per request --}}

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const params = new URLSearchParams(window.location.search);
            if (params.get('showlogin') === '1') {
                setTimeout(() => {
                    const btn = document.getElementById('free-test-button');
                    if (btn) btn.click();
                }, 500); // Increase timeout if button is rendered late (e.g., via Livewire)
            }
            
            if (params.get('askSupport') === '1') {
                setTimeout(() => {
                    const btn = document.getElementById('contactSupportBtn');
                    if (btn) btn.click();
                }, 500); // Increase timeout if button is rendered late (e.g., via Livewire)
            }

            // When coming from the email CTA, auto-open the position modal.
            if (params.get('openPosition') === '1') {
                let attempts = 0;
                const maxAttempts = 40; // 40 * 400ms = 16s
                const timer = setInterval(() => {
                    const btn = document.getElementById('seeMyNewPositionBtn');
                    if (btn) {
                        btn.click();
                        clearInterval(timer);
                        return;
                    }

                    attempts++;
                    if (attempts >= maxAttempts) {
                        clearInterval(timer);
                    }
                }, 400);
            }
        });
    </script>
</div>