@section('title') {{'Top 3 Maps - Reply.Reviews'}} @endsection

<x-plain-layout>
    <script src="https://unpkg.com/framer-motion/dist/framer-motion.umd.js"></script>
    <style>
        html, body { height: 100%; margin: 0; scroll-snap-type: y mandatory; overflow-y: scroll; }
        section.scrollBox { scroll-snap-align: start; height: 100vh; display: flex; align-items: center; justify-content: center; border-left: 25px solid #FABC09; border-right: 25px solid #357DEE; overflow-y: scroll;}
       
        .bg-google-maps {
            position: relative;
            overflow: hidden;
        }
        .bg-google-maps::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background-image: url('{{ asset('img/maps.png') }}');
            background-size: 50%;
            background-repeat: no-repeat;
            background-position: 150% 50%;
            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%;
            background-image: url('{{ asset('img/maps.png') }}');
            background-size: 50%;
            background-repeat: no-repeat;
            background-position: 150% 50%;
            rotate: 180deg;
            opacity: 0.2;
            z-index: 0;
            pointer-events: none;
        }
    </style>

    <!-- Section 1 -->
    <section class="scrollBox bg-google-maps relative">
        <div class="text-center px-4 sm:px-8">
            <!-- Header Section -->
            <div class="flex flex-col items-center">
                <img src="{{ asset('img/logo.png') }}" alt="Reply Reviews Logo" class="w-14 sm:w-18 md:w-24 lg:w-32 md:mb-4">
                <h1 class="text-xl sm:text-5xl lg:text-6xl font-bold text-black mb-2">REPLY REVIEWS</h1>
                <h2 class="text-xl sm:text-5xl lg:text-6xl md:mt-3 text-blue-600 font-semibold mb-2">
                    Guaranteed Top 3 
                    <span class="text-blue-500">G</span><span class="text-red-500">o</span><span class="text-[#fbbc05;]">o</span><span class="text-blue-500">g</span><span class="text-green-500">l</span><span class="text-red-500">e</span>
                    Maps - In Just 7 Days!
                </h2>
                <p class="text-base sm:text-3xl lg:text-4xl mt-1 md-mt-3 font-extrabold text-gray-700 md:mb-6 mb-1">
                    MORE VISIBILITY, MORE LEADS, MORE SALES
                </p>
            </div>
           
            <!-- Feature List -->
            <ul class="text-left text-sm sm:text-xl lg:text-2xl font-semibold space-y-2 mb-4 mt-2 md:mb-8 md:mt-8 ml-4 sm:ml-24">
                <li class="flex items-center">✅ AUTOMATE YOUR GOOGLE REVIEW REQUESTS WITH 7000 APPS THROUGH ZAPIER</li>
                <li class="flex items-center">✅ TRY IT FREE FOR 7 DAYS - NO RISK, NO CONTRACTS!</li>
                <li class="flex items-center">✅ ONLY $99.90/MONTH AFTER TRIAL</li>
                <li class="flex items-center">✅ LIMITED OFFER: ONLY ONE BUSINESS PER LOCATION - CLAIM YOUR SPOT NOW!</li>
            </ul>
            
            <!-- Call to Action Button -->
            <a href="#" id="testDemoFrmBtn" class="bg-blue-600 text-xs sm:text-2xl lg:text-3xl text-white font-bold py-3 px-6 sm:px-8 rounded-md shadow-lg hover:bg-blue-700 transition">
                WATCH VIDEO & TEST FOR YOURSELF
            </a>
        </div>
        <button onclick="scrollToSection(2)" class="absolute bottom-10  transform -translate-x-1/2 text-blue-600 animate-bounce">
            <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M19 9l-7 7-7-7"></path></svg>
        </button>
    </section>

    <!-- Section 2 -->
    <section class="scrollBox relative">
        <div class="text-center px-4 sm:px-8">
            <!-- HOW IT WORKS Section -->
            <div>
                <h2 class="text-blue-600 text-sm sm:text-2xl font-bold mb-2 md-mb-4">HOW IT WORKS</h2>
                <ul class="md-space-y-4">
                    <li class="flex items-start my-1"><span class="text-green-500 text-[10px] sm:text-xl mr-2">✅</span><p class="text-gray-700 text-[10px] sm:text-xl p-0"><span class="font-semibold">GUARANTEED GOOGLE MAPS RANKING </span>– APPEAR IN THE TOP 3 FOR UP TO 15 LOCAL KEYWORDS WITHIN 7 DAYS WITH MONTHLY REPORT.</p></li>
                    <li class="flex items-start my-1"><span class="text-green-500 text-[10px] sm:text-xl mr-2">✅</span><p class="text-gray-700 text-[10px] sm:text-xl"><span class="font-semibold">AUTOMATED REVIEW REQUESTS</span> – CONNECT WITH OVER 7000 APPS TO SEND BRANDED REVIEW INVITATIONS WITH AI GUIDE.</p></li>
                    <li class="flex items-start my-1"><span class="text-green-500 text-[10px] sm:text-xl mr-2">✅</span><p class="text-gray-700 text-[10px] sm:text-xl"><span class="font-semibold">AI-POWERED REPLIES </span>– AUTO-GENERATE TIMELY, PROFESSIONAL RESPONSES WITH FULL EDITING CONTROL.</p></li>
                </ul>
            </div>

            <hr class="border-gray-300 my-6 hidden sm:block">

            <!-- AI-DRIVEN REVIEWS & REPUTATION BOOST Section -->
            <div>
                <h2 class="text-blue-600 text-sm sm:text-2xl font-bold mb-2 md-mb-4">AI-DRIVEN REVIEWS & REPUTATION BOOST</h2>
                <ul class="md-space-y-4">
                    <li class="flex items-start my-1"><span class="text-green-500 text-[10px] sm:text-xl mr-2">✅</span><p class="text-gray-700 text-[10px] sm:text-xl"><span class="font-semibold">BRANDED & PERSONALIZED REVIEW REQUESTS </span>– FULLY CUSTOMIZED WITH YOUR LOGO, COLORS, AND TONE.</p></li>
                    <li class="flex items-start my-1"><span class="text-green-500 text-[10px] sm:text-xl mr-2">✅</span><p class="text-gray-700 text-[10px] sm:text-xl"><span class="font-semibold">AI SMART REVIEW ASSISTANCE </span>– GUIDES CUSTOMERS THROUGH THE EASIEST WAY TO LEAVE A REVIEW ON ANY DEVICE.</p></li>
                    <li class="flex items-start my-1"><span class="text-green-500 text-[10px] sm:text-xl mr-2">✅</span><p class="text-gray-700 text-[10px] sm:text-xl"><span class="font-semibold">AUTOMATED & EDITABLE REVIEW REPLIES </span>– AI RESPONSE WITH A HUMAN TOUCH FOR YOUR APPROVAL BEFORE SENDING.</p></li>
                </ul>
            </div>

            <hr class="border-gray-300 my-6 hidden sm:block">

            <!-- PLAN DETAILS & TERMS Section -->
            <div>
                <h2 class="text-blue-600 text-sm sm:text-2xl font-bold mb-2 md-mb-4">PLAN DETAILS & TERMS</h2>
                <ul class="md-space-y-4">
                    <li class="flex items-start my-1"><span class="text-green-500 text-[10px] sm:text-xl mr-2">✅</span><p class="text-gray-700 text-[10px] sm:text-xl"><span class="font-semibold">300 REVIEW INVITES/MONTH </span>– CUSTOMIZE BRANDING, MESSAGING, AND VOICE.</p></li>
                    <li class="flex items-start my-1"><span class="text-green-500 text-[10px] sm:text-xl mr-2">✅</span><p class="text-gray-700 text-[10px] sm:text-xl"><span class="font-semibold">CANCEL ANYTIME </span>– NO CONTRACTS! – AFTER YOUR 7-DAY FREE TRIAL, IT’S JUST $99.90/MONTH OR $79.90 MULTI ACCOUNTS.</p></li>
                    <li class="flex items-start my-1"><span class="text-green-500 text-[10px] sm:text-xl mr-2">✅</span><p class="text-gray-700 text-[10px] sm:text-xl"><span class="font-semibold">WE CONSULT WITH YOU FIRST</span> ON KEYWORDS BEFORE ASKING PERMISSION TO MANAGE YOUR GOOGLE LISTING.</p></li>
                </ul>
            </div>
        </div>
        <button onclick="scrollToSection(3)" class="absolute bottom-10  transform -translate-x-1/2 text-blue-600 animate-bounce">
            <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M19 9l-7 7-7-7"></path></svg>
        </button>
    </section>

    <!-- Section 3 -->
    <section class="scrollBox relative bg-google-maps-left">
        <div class="text-center px-4 sm:px-8">
            <!-- Apps and Testimonial Section -->
            <div class="text-center">
                <h2 class="text-gray-700 text-3xl sm:text-4xl lg:text-5xl font-semibold mb-6">Over 7000 apps</h2>
                <div class="flex flex-wrap justify-center gap-4 sm:gap-8 mb-8">
                    <img src="{{ asset('img/calendar.png') }}" alt="Google Calendar" class="md:h-12 h-7">
                    <img src="{{ asset('img/calendly.png') }}" alt="Calendly" class="md:h-12 h-7">
                    <img src="{{ asset('img/zapier.png') }}" alt="Zapier" class="md:h-12 h-7">
                    <img src="{{ asset('img/google-maps.png') }}" alt="Google Maps" class="md:h-12 h-7">
                </div>
                <div class="bg-gray-100 p-2 md:p-6 rounded-lg">
                    <p class="text-base lg:text-3xl text-gray-800">“Thanks again for the set up our customer interaction has increased from 150 a month to over 3000 due to the reviews.”</p>
                    <p class="text-gray-500 mt-2 text-base">Auesthtics Clinics.</p>
                </div>
            </div>

            <!-- Call to Action Section -->
            <div class="text-center md:py-8 bg-gray-50 rounded-lg mt-8">
                <p class="text-gray-700 text-sm lg:text-2xl sm:text-xl">GET YOUR BUSINESS IN GOOGLE’S TOP 3 – 100% RISK-FREE!</p>
                <p class=" font-semibold text-sm mb-6  lg:text-2xl sm:text-xl"><span class="text-red-500">SPOTS ARE LIMITED</span> – ONLY ONE BUSINESS PER LOCATION!</p>
                <a href="#" x-data @click="$dispatch('open-popup')" class="inline-block bg-blue-600 text-white py-3 px-6 sm:px-8 rounded-lg shadow-md text-base sm:text-2xl font-semibold">START 7 DAY FREE TRIAL</a>
               
            </div>

            <!-- Footer -->
            <footer class="text-center text-xs text-gray-500 mt-8">
                <p>REPLY REVIEWS LTD. 14944440 128 CITY ROAD, LONDON, UNITED KINGDOM, EC1V 2NX SUPPORT@REPLY.REVIEWS© 2025 ALL RIGHTS RESERVED.</p>
                <p><a href="{{ url('/privacypolicy') }}" class="text-blue-600">TERMS</a> <span class="px-1">|</span> <a href="{{ url('/privacypolicy') }}" class="text-blue-600">PRIVACY POLICY</a></p>
            </footer>
        </div>
    </section>

    @livewire('setup-popup')

    <div id="demoFormModal" data-bid="" tabindex="-1"
    class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
    <div class="relative w-full max-w-3xl max-h-full">
        <!-- Modal content -->
        <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
           
            <!-- Modal body -->
            <div class="p-4 md:p-5 space-y-4">
                <button type="button" id="demoFormModalHideBtn"
                    class="absolute right-0 top-0 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
                    >
                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                        viewBox="0 0 14 14">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                            stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
                    </svg>
                    <span class="sr-only">Close modal</span>
                </button>

                
                <div class="w-full sm:w-1/2 md:w-2/3 lg:w-3/4 xl:w-full">
                    <div class="relative w-full aspect-video">
                        <iframe
                            class="absolute top-0 left-0 w-full h-full"
                            src="https://www.youtube.com/embed/8IXEVGue4RU"
                            title="YouTube video player"
                            frameborder="0"
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                            allowfullscreen
                        ></iframe>
                    </div>
                </div>
                <p class="font-bold text-base sm-text-xl text-center">Try it FREE for 7 days - No Risk, No Contracts!<br>Only $99.90/Month after Trial</p>
                <div class="  text-center">
                    <a href="#"  x-data @click="$dispatch('open-popup')" id="" class="startTrialBtn inline-block bg-blue-600 text-sm sm:text-xl lg:text-xl text-white font-bold py-3 px-6 sm:px-8 rounded-md shadow-lg hover:bg-blue-700 transition">
                    Start your 7 days FREE Trial
                    </a>
                </div>
                <hr>
                <p class="text-base font-bold text-center  ">Test Invite Reviews</p>
                <div class="max-w-md mx-auto  ">
                    <form class="" id="demoInviteForm" method="POST" action="{{ route('invite.demo') }}">
                    <div class="flex w-full">
                       
                            @csrf
                        <input type="email" id="demoEmailInput" name="email" required
                               class="flex-grow  border-r-0 border-green-300 rounded-l-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 p-3 text-gray-700 placeholder-gray-400"
                               placeholder="your@email.com">
                        <button type="submit" class="bg-green-500 hover:bg-green-600 active:bg-green-700 text-white font-semibold rounded-r-md  border-green-300 px-4 py-3 shadow-md transition duration-300 ease-in-out cursor-pointer h-full">
                            Send Invite Test
                            
                        </button>
                        <span id="spinner" class=" animate-spin border-4 border-white border-t-transparent rounded-full w-6 h-6"></span>
                    </div>
                </form>
                    <p class="text-left text-sm text-red-500 hidden" id="demoEmailError">Email is required</p>
                    <p class="text-left text-sm text-green-500 hidden" id="demoEmailSuccess">Test Email invite Sent!</p>
                </div>
               <hr>
                <p class=" text-base font-bold text-center mt-6">Test Reply Reviews </p>
                <x-demo-reply-form businessName='500 rooftop bar' customerName='Mary' review='What a beautiful rooftop bar very friendly' rating=5/>
            </div>
            
        </div>
    </div>
</div>


    <script src="{{ asset('js/jquery.js') }}"></script>
    @include('plain.top3JS', [
    ])

@livewireScripts 
</x-plain-layout>