@section('title')
    {{ 'Top 3 Maps - Reply.Reviews' }}
@endsection
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>

<x-plain-layout>
    <div class="bg-[#f3f5f7] min-h-screen">
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
            background-color: #f3f5f7 !important;
            color: #10213a !important;
        }

        section.scrollBox {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .bg-google-maps {
            position: relative;
        }

        .bg-google-maps::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;

            pointer-events: none;
            opacity: 0.2;
            z-index: 0;
        }

        .bg-google-maps-left {
            position: relative;
            overflow: hidden;
        }

        .bg-google-maps-left::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

            opacity: 0.2;
            z-index: 0;
            pointer-events: none;
        }

        @keyframes wave {

            0%,
            100% {
                transform: scaleY(1);
            }

            50% {
                transform: scaleY(2);
            }
        }

        .bar {
            width: 4px;
            height: 15px;
            background-color: #3B82F6;
            animation: wave 1s infinite ease-in-out;
            display: inline-block;
            margin: 0 1px;
            border-radius: 10px;
        }

        .bar:nth-child(1) {
            animation-delay: 0s;
        }

        .bar:nth-child(2) {
            animation-delay: 0.1s;
        }

        .bar:nth-child(3) {
            animation-delay: 0.2s;
        }

        .bar:nth-child(4) {
            animation-delay: 0.3s;
        }

        .bar:nth-child(5) {
            animation-delay: 0.4s;
        }

        elevenlabs-convai {
            position: fixed !important;
            bottom: 20px !important;
            right: 20px !important;
            z-index: 9999 !important;
            display: block !important;
        }
    </style>

    <!-- Section 1 -->
    <section class="scrollBox bg-google-maps relative  w-full flex flex-col  ">
        <div class="text-center    w-full    max-w-5xl  ">
            <!-- Header Section -->
            <div class="flex flex-col items-center   w-full  max-w-5xl ">
               <a href="{{ url('/') }}" class="inline-flex flex-col items-center justify-center select-none mt-9"
                    aria-label="Reply Reviews home">
                    <img src="{{ asset('img/logo.png') }}" alt="Reply Reviews icon" class="w-12 h-12 mb-0"  />
                    <div class="text-center leading-none">
                        <div class="text-[#1868B3] text-[22px] sm:text-2xl font-semibold tracking-[0.35em]">REPLY</div>
                        <div class="text-[#1868B3] text-[22px] sm:text-2xl font-semibold tracking-[0.35em]">REVIEWS
                        </div>
                    </div>
                </a>
              <div class="w-full max-w-4xl mx-auto mt-6 mb-4 text-center">
                    <h1 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-0">Top 3 Google Maps Report</h1>
                    <p class="text-base sm:text-lg text-gray-500 font-normal leading-relaxed">Find out if you — or your competitors — are in the Top 3 with search volume and traffic value data.</p>
                </div>

                <!--x-audio-player src="{{ asset('audio/top3/lander.mp3') }}" / -->
               

                @livewire('business-insight-manager')




                

            </div>

       

          





        </div>




    </section>

    <div class=" mx-auto text-center text-gray-600 p-4">
        reply.reviews @ 2025 All Rights Reserved. <a target="_blank"
            class="underline text-sm text-gray-500 sm:text-center dark:text-gray-400"
            href="{{ url('/privacypolicy') }}">Terms</a>
        <a target="_blank" class="underline text-sm text-gray-500 sm:text-center dark:text-gray-400"
            href="{{ url('/privacypolicy') }}">Privacy Policy</a>
    </div>





   




    </div>
</x-plain-layout>