@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>
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
            background-color: rgb(255 255 255) !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-16 h-16 mb-2"  />
                    <div class="text-center leading-none">
                        <div class="text-[#1868B3] text-[22px] sm:text-4xl font-semibold tracking-[0.35em]">REPLY</div>
                        <div class="text-[#1868B3] text-[22px] sm:text-4xl font-semibold tracking-[0.35em]">REVIEWS
                        </div>
                    </div>
                </a>

                <img src="{{ asset('img/top3maps.png') }}" class="w-full h-auto  ">
                <!--x-audio-player src="{{ asset('audio/top3/lander.mp3') }}" / -->


                @livewire('business-insight-manager')






            </div>

            @livewire('success-stats')



            @livewire('google-connect-popup', key('google-connect-popup'))




        </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>










</x-plain-layout>
<script>
    (function() {
        function openIfTrial() {
            const params = new URLSearchParams(window.location.search);
            if (params.get('gtrial') === '1') {
                // Defer to ensure ALL Livewire children are mounted
                queueMicrotask(() => Livewire.dispatch('google-connect:open'));
            }
        }

        // First page load
        document.addEventListener('livewire:load', openIfTrial);

        // If you use Livewire Navigate / Turbo-like navigation,
        // fire again after DOM morphs:
        document.addEventListener('livewire:navigated', openIfTrial);
    })();
</script>