@section('title')
    {{ 'AI Reply To Google Reviews' }}
@endsection
<style>
    #page-header {
        display: none;
    }
</style>
<x-public-layout>
    <!-- Hero Content -->
    <div
        class="flex flex-col lg:flex-col sm:space-y-4 md:space-y-16 lg:space-y-0 text-center lg:text-left container xl:max-w-xl mx-auto px-4 py-5 md:py-16 lg:px-8 lg:py-16 ">



        <div class="lg:w-full  lg:items-center  ">
            <div class="text-center">


                <p class="mb-1 text-blue-600 text-lg md:text-2xl md:leading-relaxed font-bold mb-5">AI-Reply to <b><span
                            style="color:#4285f4;">G</span><span style="color:#ea4335;">o</span><span
                            style="color:#fbbc05;">o</span><span style="color:#4285f4;">g</span><span
                            style="color:#34a853;">l</span><span style="color:#ea4335;">e</span></b> Reviews </p>

                <div class="lg:w-full  lg:flex lg:justify-center lg:items-center">
                    <div class="lg:w-11/12 relative">
                        <div
                            class="absolute pattern-dots-xl text-blue-100 top-0 left-0 w-32 h-48 md:h-96 transform -translate-y-12 -translate-x-16 -rotate-3">
                        </div>
                        <div
                            class="absolute pattern-dots-xl text-blue-100 bottom-0 right-0 w-32 h-48 md:h-96 transform translate-y-12 translate-x-16 rotate-3">
                        </div>
                        <div
                            class="absolute rounded-full top-0 right-0 w-32 h-32 bg-yellow-200 bg-opacity-50 -mt-12 -mr-12">
                        </div>
                        <div
                            class="absolute rounded-xl bottom-0 left-0 w-32 h-32 bg-blue-200 bg-opacity-50 -mb-10 -ml-10 transform rotate-3">
                        </div>
                        <div class="aspect-video relative rounded-lg mx-auto shadow-lg">
                            <iframe class="w-full h-full relative rounded-lg mx-auto shadow-lg"
                                src="https://www.youtube.com/embed/mRblIWBSIlQ" frameborder="0"
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                allowfullscreen>
                            </iframe>
                        </div>

                    </div>
                </div>

                <h2 class="text-lg md:text-xl md:leading-relaxed font-bold text-black z-100 relative mt-3">
                    Free & Premium features from $19.90
                </h2>

                <p class="text-lg text-black z-50 mt-3 mb-1">Send to your email to download to desktop</p>
                <form id="downloadForm">
                    @csrf
                    <div data-element="fields" data-stacked="false"
                        class="flex items-center w-full  mb-3 justify-center">
                        <div class="relative w-8/12 mr-2 ">
                            <label for="member_email"
                                class="hidden block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Email
                                address</label>
                            <div class="absolute inset-y-0 left-0 flex items-center pl-3.5 pointer-events-none">
                                <svg class="w-3.5 h-3.5 text-gray-500 dark:text-gray-400" aria-hidden="true"
                                    xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 16">
                                    <path
                                        d="m10.036 8.278 9.258-7.79A1.979 1.979 0 0 0 18 0H2A1.987 1.987 0 0 0 .641.541l9.395 7.737Z">
                                    </path>
                                    <path
                                        d="M11.241 9.817c-.36.275-.801.425-1.255.427-.428 0-.845-.138-1.187-.395L0 2.6V14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2.5l-8.759 7.317Z">
                                    </path>
                                </svg>
                            </div>
                            <input
                                class=" bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-green-500 dark:focus:border-blue-500"
                                aria-label="Email Address" placeholder="Your email address..." required name="email"
                                id="email">
                        </div>
                        <button type="submit"
                            class=" w-4/12 inline-block px-2 py-2.5 text-base font-medium text-center text-white bg-green-700 rounded-lg cursor-pointer hover:bg-green-800 focus:ring-4 focus:ring-blue-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800">
                            SendEmail
                        </button>
                    </div>
                    <div id="message"></div>
                </form>

                <div
                    class="flex flex-col sm:flex-col sm:items-center justify-center lg:justify-center space-y-2 sm:space-y-0 sm:space-x-2 pt-6 pb-5">
                    <p class="text-center"><a class="inline-block" href="{{ env('EXTENSION_URL') }}"> <img
                                class="max-w-[300px]" src="{{ asset('img/available_chrome_store.png') }}" /> </a></p>
                    <a href="{{ env('EXTENSION_URL') }}" target="_blank"
                        class="inline-flex justify-center items-center space-x-2 border font-semibold focus:outline-none px-6 py-2 leading-6 rounded border-blue-700 bg-blue-700 text-white hover:text-white hover:bg-blue-800 hover:border-blue-800 focus:ring focus:ring-blue-500 focus:ring-opacity-50 active:bg-blue-700 active:border-blue-700 text-2xl">
                        <span>Download for FREE Today</span>

                    </a>

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

        <div>

            <h3 class="text-slate-900 text-xl tracking-tight font-extrabold  dark:text-white text-center my-3">AI
                Replying to
                Google Reviews</h3>
            <ul class="text-base font-medium text-black z-50 text-left">
                <li>- 70% of businesses don't respond to Google reviews.</li>
                <li>- 90% of customers read reviews before making a decision.</li>
                <li>- Replying isn't for one customer; it's for all those who read them.</li>
                <li>- AI Reply saves time by crafting personalized responses with a human touch.</li>

            </ul>

            <h3 class="text-slate-900 text-xl tracking-tight font-extrabold  dark:text-white text-center my-3">AI
                Inviting to
                Google Reviews</h3>
            <ul class="text-base font-medium text-black z-50 text-left">
                <li>- 50% of customers don't have a Google account.</li>
                <li>- 70% use a device or browser other than Google.</li>
                <li>- Only 20% of invites lead to reviews if the process is easy.</li>
                <li>- AI sends invites with a human voice guide, increasing review rates.</li>


            </ul>


        </div>


    </div>


</x-public-layout>
<script src="{{ asset('js/jquery.js') }}"></script>
<script>
    $(document).ready(function() {

        $('#downloadForm').on('submit', function(e) {
            e.preventDefault(); // Prevent the default form submission

            let email = $('#email').val();
            let token = $("input[name='_token']").val(); // CSRF Token
            gtag('event', 'email_link_button_click', {
                'event_category': 'downloads',
                'event_label': 'Download extension email button',
                'value': 1
            });
            $.ajax({
                url: '/send-download-link',
                type: 'POST',
                data: {
                    email: email,
                    _token: token,
                },
                success: function(response) {
                    if (response.status === 'success') {
                        $('#message').html('<p style="color: green;">' + response.message +
                            '</p>');
                    }
                },
                error: function(xhr) {
                    if (xhr.status === 422) {
                        let errors = xhr.responseJSON.errors;
                        $('#message').html('<p style="color: red;">' + errors.email +
                            '</p>');
                    } else {
                        $('#message').html(
                            '<p style="color: red;">Something went wrong.</p>');
                    }
                }
            });
        });
    });
</script>