@section('title') {{'Top 3 Maps - analysis'}} @endsection

<style type="text/css">
    @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap");
    html,
    body {
      height: 100%;
      margin: 0;
      font-family: "Inter", sans-serif;
    }
 
  </style>
<x-plain-layout>
    <div class="snap-y snap-mandatory h-screen overflow-y-scroll">
        <!-- Section 1: Intro + Reviews -->
        <section
          class="snap-start min-h-screen flex flex-col items-center justify-center bg-white border-l-8 border-blue-500 p-6"
        >
      
        <div class="max-w-md w-full md:min-w-[550px] mx-auto p-4 bg-white rounded-xl shadow-md text-center">
            <img src="{{ asset('img/logo.png') }}" alt="Google Maps" class="w-16 h-16 mx-auto mb-4" />
            <h2 class=" text-blue-600 text-3xl font-extrabold">Top 3 Maps</h2>
            <p class="mt-1 text-gray-800 font-medium">{{ $business->name }}</p>
          
           
            <!-- Stars -->
            <div class="flex items-center justify-center mt-1 space-x-1 text-yellow-400 text-sm">
               
                @php
                $rating = $business->latestSnapshot->average_rating ?? 0;
                $firstKeywordFirstResult = $business->keywords->first()?->results->first();

               
                
            @endphp
           
            
            
             {{$rating}}  <x-rating-stars :rating="$business->latestSnapshot->average_rating" size="5" disabled="true"/><span class="text-gray-500 text-xs">({{ $business->latestSnapshot->total_reviews }} reviews)</span>
            </div>
          
            <!-- Category -->
            <div class="mt-3 px-3 py-1 rounded-full bg-green-100 text-green-800 text-sm font-semibold inline-block">
              Category: <span class="font-normal">{{ $business->category1 }}</span>
            </div>
          <div class="w-full"><div>
            <!-- Location -->
            <div class="mt-2 px-3 py-1 rounded-full bg-blue-100 text-blue-800 text-sm font-semibold inline-block">
              Location: <span class="font-normal">{{ $business->town }}</span>
            </div>
            <br>
            <br>
            <div class="flex justify-center mt-2">
                <x-audio-player src="{{ asset('audio/top3/intro.mp3') }}" />
            </div>
            
          </div>
          
         
        </section>
        
        <!-- Section 2: Keywords -->
        <section id="keywords" class="snap-start min-h-screen flex flex-col items-center justify-center bg-white border-l-8 border-yellow-400 p-6">
            <div class="bg-white shadow-md rounded-xl p-4 max-w-md w-full md:min-w-[550px] mx-auto">
                <!-- Header -->
                <div class="flex items-center justify-center mb-4">
                    <span class="text-2xl">🔥</span>
                    <h2 class="text-3xl font-bold text-yellow-800 ml-2 ">Popular Keywords</h2>
                </div>

                @php 
                    $in_top3 = false;
                @endphp

                <!-- Keyword Item -->
                <div class="space-y-4">
                    @foreach ($business->keywords as $keyword)
                        @if ($loop->iteration > 4)
                            @break
                        @endif
                        @if ($keyword->latestSnapshot)
                            @php
                                $position = $keyword->latestSnapshot->position ?? 21;
                                $snapshotDate = \Carbon\Carbon::parse($keyword->latestSnapshot->snapshot_date)->format('M d, Y');
                                if (!$in_top3 && $position <= 3) {
                                    $in_top3 = true;
                                }
                                $barColor = match(true) {
                                    $position <= 8 => 'bg-green-500',
                                    $position <= 12 => 'bg-blue-400',
                                    $position <= 15 => 'bg-yellow-400',
                                    default => 'bg-red-400',
                                };
                                $progress = 100 - min($position * 5, 100);
                                $badgeClasses = match($barColor) {
                                    'bg-green-500' => 'bg-green-100 text-green-800',
                                    'bg-blue-400' => 'bg-blue-100 text-blue-800',
                                    'bg-yellow-400' => 'bg-yellow-100 text-yellow-800',
                                    'bg-red-400' => 'bg-purple-100 text-purple-800',
                                    default => 'bg-gray-100 text-gray-800',
                                };
                            @endphp
                            <div class="bg-yellow-50 p-4 rounded-xl mb-4 w-full max-w-md mx-auto">
                                <div class="flex justify-between items-center mb-1">
                                    <p class="font-medium text-gray-800">{{ $keyword->keyword }}</p>
                                    <span class="text-xs font-semibold px-2 py-1 rounded-full {{ $badgeClasses }}">
                                        Position {{ $position > 20 ? '20+' : $position }}
                                    </span>
                                </div>
                                <div class="w-full h-2 bg-gray-200 rounded-full mb-1">
                                    <div class="h-full {{ $barColor }} rounded-full transition-all duration-300" style="width: {{ $progress }}%"></div>
                                </div>
                                <p class="text-xs text-gray-500">Updated on {{ $snapshotDate }}</p>
                            </div>
                        @else
                            <div class="bg-yellow-50 p-4 rounded-xl mb-4 w-full max-w-sm mx-auto text-center">
                                <p class="text-sm text-red-500 italic">No snapshot data available for <strong>{{ $keyword->keyword }}</strong>.</p>
                            </div>
                        @endif
                    @endforeach
                </div>

                <!-- Change Button triggers modal -->
                <div class="mt-6 text-center">
                    <button onclick="document.getElementById('keywordModal').classList.remove('hidden')" 
                    x-on:click="gtag('event', 'button_click', { event_category: 'Button', event_label: 'Change Keywords Clicked' })"
                    class="bg-yellow-600 hover:bg-yellow-700 text-white text-sm font-semibold px-6 py-2 rounded-full shadow-md transition">
                        Change Keywords
                    </button>
                </div>

                <!-- Indicator Icon -->
                <div class="flex justify-center mt-2">
                    @php
                        $audioFile = $in_top3 ? 'top3/keyword_in_top3.mp3' : 'top3/keywords_not_top3.mp3';
                    @endphp
                    <x-audio-player src="{{ asset('audio/' . $audioFile) }}" />
                </div>
            </div>
        </section>

        <!-- Keyword Modal -->
        <div id="keywordModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
            <form method="POST" action="{{ route('keywords.update', ['placeId' => $business->place_id]) }}" class="bg-white p-6 rounded-lg shadow-xl w-full max-w-md">
                @csrf
                @method('PUT')
                <h2 class="text-lg font-bold mb-4">Edit Your Keywords</h2>

                <div id="keywordInputs">
                    @foreach ($business->keywords->take(4) as $i => $keyword)
                        <input
                            type="text"
                            name="customKeywords[]"
                            value="{{ $keyword->keyword }}"
                            class="w-full border border-gray-300 p-2 rounded mb-2"
                            placeholder="Keyword #{{ $i + 1 }}"
                        />
                    @endforeach

                    @for ($i = $business->keywords->count(); $i < 4; $i++)
                        <input
                            type="text"
                            name="customKeywords[]"
                            class="w-full border border-gray-300 p-2 rounded mb-2"
                            placeholder="Keyword #{{ $i + 1 }}"
                        />
                    @endfor
                </div>

                <div class="flex justify-end space-x-2 mt-4">
                    <button type="button" onclick="document.getElementById('keywordModal').classList.add('hidden')" class="text-gray-600 px-4 py-2">Cancel</button>
                    <button type="submit" 
                    x-on:click="gtag('event', 'button_click', { event_category: 'Button', event_label: 'Save Keywords Clicked' })"
                    class="bg-yellow-600 text-white px-4 py-2 rounded">Save</button>
                </div>
            </form>
        </div>

    

        <!-- Section 3: Top 3 Maps -->
        <section
          class="snap-start min-h-screen flex flex-col items-center justify-center bg-white border-l-8 border-red-400 p-6"
        >
        <div class="bg-white shadow-md rounded-xl p-4 max-w-md w-full md:min-w-[550px] mx-auto">
          
          <div class="flex items-center justify-center mb-3">
            <span class="text-2xl">🔥</span>
            <h2 class="text-3xl font-bold text-red-500 ml-2 "> Top 3 Local Results</h2>
            </div>
    
         <div class="max-w-md mx-auto p-4">
            <!-- Search Input -->
            <div class="flex items-center space-x-2 border rounded-full pl-5 pr-2 pt-1 pb-1 shadow">
                <img src="https://www.google.com/favicon.ico" alt="Google" class="w-6 h-6" />
                @php
                    $in_top3=false;
                    $firstResult = $keyword->results->first();
                    $firstKeyWord = '';
                    if ($firstResult ) {
                        $firstKeyWord = $firstResult->keyword->keyword;
                    }
                @endphp
                <input type="text" value="{{$firstKeyWord}}" class="flex-1 outline-none border-0" />
            </div>

            <!-- Businesses -->
            <div class="mt-4">
                <!-- Business Card -->
                <div class="space-y-4 mt-2">
                
                    @if ($keyword->results->count())
                 
                        @foreach ($keyword->results as $result)
                        
                        <div class="border-b last:border-0 pb-3">
                           
                            <h3 class="text-[16px] font-bold text-gray-900 leading-tight">
                                {{ $result->name ?? '' }}
                            </h3>
                            <div class="text-sm flex items-center space-x-1 mt-0.5">
                                
                                <x-rating-stars :rating="$result->rating" size="5" disabled="true" />
                                <span class="text-yellow-600 font-medium">({{ $result->total_reviews }} reviews)</span>
                            </div>
            
                           
                            <!--div class="text-sm text-gray-700 mt-0.5">
                                {{ $result->address ?? $business->town }} · {{ $result->keyword->keyword ?? $business->category1.' in '. $business->town }}
                            </!--div>
            
                           
                            <div-- class="text-sm text-green-700 font-semibold mt-0.5">
                                Open · Closes 5:30 pm
                            </div-->
                        </div>

                           
                        @endforeach
                    
                @else
                    <p class="text-sm italic text-gray-500 mt-2">No competitors found.</p>
                @endif

                


                
                </div>
                <div class="flex justify-center mt-2">
                    <x-audio-player src="{{ asset('audio/top3/compitition.mp3') }}" />

               
                </div>
            </div>
            </div>

           
        </div>
        </section>
        <!-- Section 4: Corporate Link + Examples -->
        <section
          class="snap-start min-h-screen flex flex-col items-center justify-center bg-white border-l-8 border-indigo-500 p-6"
        >
        <div class="bg-white shadow-md rounded-xl p-4 max-w-md w-full md:min-w-[550px] mx-auto">
          
            <div class="flex items-center justify-center mb-3">
              <span class="text-3xl"></span>
              <h2 class="text-3xl font-bold text-blue-600 ml-2 "> Corporate Link & Examples</h2>
              </div>
              <p class="mb-2 text-center">
                &#128279;
                <a disabled class="text-blue-600 underline" href="#"
                  >{{url('/top3/'.formatName($business->name))}}</a
                >
              </p>
              <div class="max-w-md mx-auto p-1">
              
              <!-- Dropdown -->
              <div class="bg-white  max-w-md w-full mb-2 ">
                <label class="block mb-2 text-sm font-semibold text-gray-700">Choose a Business to Compare</label>
                <select id="businessSelect" onchange="showBusinessGroup()" class="w-full border rounded-lg px-4 py-2 text-sm focus:ring-blue-500">
                  <option value="simpson">Simpson West</option>
                  <option value="stelfort">Stelfort</option>
                  <option value="mountvernon">Mount Vernon Motors</option>
                  <option value="centralbikes">Central Bikes</option>
                </select>
              </div>
              <!-- Results Box -->
              <div id="businessContainer" class="bg-white  max-w-md w-full"></div>
            </div>
            <div class="flex justify-center mt-2">
                <x-audio-player src="{{ asset('audio/top3/corporate.mp3') }}" />
                </div>
          </div>

        </section>
        
        <section
          class="snap-start min-h-screen flex flex-col items-center justify-center bg-white border-l-8 border-green-500 p-6 text-center"
        >
        <div class="max-w-md w-full md:min-w-[550px] mx-auto p-6 bg-white rounded-2xl shadow-lg text-center space-y-4">
            <!-- Header -->
            <h2 class="text-2xl font-extrabold text-green-600">7 Days FREE Trial </h2>
        
            <!-- Feature List -->
            <ul class="space-y-2 text-sm text-gray-800 text-left">
                <li class="flex items-start">
                    <span class="text-green-500 text-lg mt-0.5">✅</span>
                    <span class="ml-2 text-lg mt-0.5"><strong>Guaranteed top 3 Maps </strong></span>
                </li>
                <li class="flex items-start">
                    <span class="text-green-500 text-lg mt-0.5">✅</span>
                    <span class="ml-2 text-lg mt-0.5">AI invite Google Reviews</span>
                </li>
                <li class="flex items-start">
                    <span class="text-green-500 text-lg mt-0.5">✅</span>
                    <span class="ml-2 text-lg mt-0.5">Keyword & traffic reports</span>
                </li>
                <li class="flex items-start">
                    <span class="text-green-500 text-lg mt-0.5">✅</span>
                    <span class="ml-2 text-lg mt-0.5">No contracts, <strong>no card</strong></span>
                </li>
                
                <li class="flex items-start">
                    <span class="text-green-500 text-lg mt-0.5">✅</span>
                    <span class="ml-2 text-lg mt-0.5">Only one business per location</span>
                </li>
                
            </ul>

        

            @php
                $keywords = $business->keywords->pluck('keyword')->take(4)->toArray();
            @endphp

            <!-- Google Sign-In Button -->
            <button  x-data @click="$dispatch('open-demo-signup')" 
             x-on:click="gtag('event', 'button_click', { event_category: 'Button', event_label: 'Check Keyword availablility Clicked' })"
            class="w-full flex items-center justify-center bg-[#4285F4] hover:bg-[#357ae8] text-white font-semibold py-2 px-4 rounded-full space-x-2 shadow">
               
                <span>Check Keyword Availability</span>
            </button>
           
        
            
            <div class="flex justify-center mt-2">
                <x-audio-player src="{{ asset('audio/top3/terms.mp3') }}" />
                </div>
        </div>
        
         
        </section>
        @livewire('demo-signup', ['selectedPlaceId' => $business->place_id, 'customKeywords' => $keywords])

      </div>
      @push('scripts')
    <script>
       document.addEventListener('DOMContentLoaded', function () {
        const shouldScroll = @json(session('scrollToKeywords', false));

        if (shouldScroll) {
            const el = document.querySelector('#keywords');
            if (el) {
                setTimeout(() => el.scrollIntoView({ behavior: 'smooth' }), 300);
                el.classList.add('animate-pulse');
                setTimeout(() => el.classList.remove('animate-pulse'), 2000);
            }
        }
    });
        const businessData = {
            simpson: {
            interaction: "4,487 customer interactions",
            businesses: [
                { name: "Simpson West", rating: "★★★★☆", reviews: 314, info: "64 Corporation St · Estate Agent", open: "Closes 6 pm", highlight: true },
                //{ name: "Connells Estate Agents Oakley Vale", rating: "★★★★☆", reviews: 310, info: "10 Charter Court · Estate Agent", open: "Closes 5:30 pm" },
               // { name: "Belvoir Corby Sales", rating: "★★★☆☆", reviews: 91, info: "68 George St · Estate Agent", open: "Closes 5:30 pm" }
            ]
            },
            stelfort: {
            interaction: "806 customer interactions",
            businesses: [
                { name: "Stelfort", rating: "★★★★☆", reviews: 222, info: "117 Junction Rd · Estate Agent", open: "Closes 6:30 pm", highlight: true },
                //{ name: "Stonehouse Estates", rating: "★★★★★", reviews: 238, info: "175 Junction Rd · Estate Agent", open: "Closes 5:30 pm" },
               // { name: "JTM Homes Ltd", rating: "★★★★☆", reviews: 122, info: "695 Holloway Rd · Estate Agent", open: "Closes 5:30 pm" }
            ]
            },
            mountvernon: {
            interaction: "10,418 customer interactions",
            businesses: [
                { name: "Mount Vernon Motors", rating: "★★★★☆", reviews: 346, info: "8 Hamilton Rd · Used Car Dealer", open: "Closes 5:30 pm", highlight: true },
                //{ name: "Bank Motors", rating: "★★★★☆", reviews: 138, info: "1177 Tollcross Rd · Used Car Dealer", open: "Closes 6 pm" },
               // { name: "Car Deal Warehouse", rating: "★★★☆☆", reviews: 47, info: "100 West St · Used Car Dealer", open: "Closes 6 pm" }
            ]
            },
            centralbikes: {
            interaction: "3,330 customer interactions",
            businesses: [
                { name: "Central Bikes", rating: "★★★★★", reviews: 584, info: "15 Shepherds Bush Rd · Motor Scooter Dealer", open: "Closes 5:30 pm", highlight: true },
               // { name: "London Motorcycles", rating: "★★★★★", reviews: 115, info: "Studland St · Motorbike Dealer", open: "Closes 5:30 pm" },
               // { name: "Greater London Motorcycles", rating: "★★★★☆", reviews: 83, info: "Edgware · Motor Scooter Dealer", open: "Closes 5 pm" }
            ]
            }
        };
        function showBusinessGroup() {
            const selected = document.getElementById('businessSelect').value;
            const container = document.getElementById('businessContainer');
            const group = businessData[selected];
            let html = `<div class="text-sm text-gray-600 mb-4 font-medium bg-blue-50 px-3 py-2 rounded">${group.interaction}</div>`;
            group.businesses.forEach(b => {
                const isHighlighted = b.highlight;

                html += `
                <div class="border-t pt-4 pb-2 ${isHighlighted ? 'bg-blue-50 border-l-4 border-blue-400 pl-3 rounded' : ''}">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-2">
                            ${isHighlighted ? `<img src="{{ asset('img/verified.png') }}" alt="Verified" class="w-5 h-5">` : ''}
                            <p class="font-semibold text-gray-800">${b.name}</p>
                        </div>
                        ${isHighlighted ? `<span class="bg-yellow-400 text-white text-xs font-bold px-2 py-1 rounded mr-1">#1 Ranked</span>` : ''}
                    </div>
                    <p class="text-yellow-500">${b.rating} <span class="text-sm text-gray-600">(${b.reviews} reviews)</span></p>
                    <p class="text-sm text-gray-600">${b.info}</p>
                    <p class="text-green-600 text-sm font-medium">Open · ${b.open}</p>
                </div>`;
            });
            container.innerHTML = html;
        }
        window.onload = showBusinessGroup;
              
    </script>
    @push('styles')
    <style>
        .animate-fade-in {
            animation: fadeIn 0.6s ease-out both;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
    @endpush
    @endpush
   
</x-plain-layout>