@extends('user.layout.index')
@section('title', 'Waiting Room')
@section('custom-style')
    <style>

    </style>
@endsection
@section('content')
    <section class="banner_section">
        <!-- hero bg -->
        <div class="hero_bg"><img src="{{ asset('user-assets/images/hero-bg.png') }}" alt="image"></div>
        <!-- container start -->
        <div class="container">
            <!-- row start -->
            <div class="row">
                <div class="col-lg-6 col-md-12" data-aos="fade-right" data-aos-duration="1500">
                    <!-- banner text -->
                    <div class="banner_text">
                        <!-- h1 -->
                        <h1>{{ __('translations.Welcome to Waiting Room: ') }}
                            <span> {{ __('translations.Redefining Appointments') }}</span>
                        </h1>
                        <!-- p -->
                        <p>
                            {{ __('translations.Tired of waiting around for your turn? Waiting Room offers a streamlined solution for
                            booking appointments, ensuring you make the most of your time. Whether you`re visiting a
                            clinic, barber, or other service providers, we bring convenience to your fingertips. No more
                            sitting around—book, manage, and stay updated with ease.') }}

                        </p>
                    </div>

                    <div class="trial_box">
                        <!-- form -->
                        <form id="inquiryForm" method="POST" data-aos="fade-in" data-aos-duration="1500"
                              data-aos-delay="100">
                            <div class="form-group">
                                <input type="email" id="inquiryEmail" name="email" class="form-control"
                                       placeholder="{{ __('translations.Enter your email') }}" required>
                            </div>
                            <div class="form-group">
                                <button type="submit"
                                        class="inquiry-submit-btn btn">{{ __('translations.SUBMIT') }}</button>
                            </div>
                        </form>
                    </div>

                    <!-- list -->
                    <div class="trial_box_list">
                        <ul>
                            <li>
                                <i class="icofont-check-circled"></i>
                                {{ __('translations.3 months free trial') }}
                            </li>
                            {{-- <li><i class="icofont-check-circled"></i> No credit card required</li> --}}
                        </ul>
                    </div>

                    <!-- users -->
                    <div class="used_app">
                        <ul>
                            <li><img src="{{ asset('user-assets/images/used01.png') }}" alt="image"></li>
                            <li><img src="{{ asset('user-assets/images/used02.png') }}" alt="image"></li>
                            <li><img src="{{ asset('user-assets/images/used03.png') }}" alt="image"></li>
                            <li><img src="{{ asset('user-assets/images/used04.png') }}" alt="image"></li>
                        </ul>
                        <p>{{ __('translations.A handful amount') }}<br>{{ __('translations.of people using the app') }}
                        </p>
                    </div>
                </div>

                <!-- banner images start -->
                <div class="col-lg-3 col-md-6" data-aos="fade-in" data-aos-duration="1500">
                    <div class="banner_images image_box1">
                        <span class="banner_image1">
                            <img class="moving_position_animatin"
                                 src="{{ asset('user-assets/images/bannerimage1.png') }}"
                                 alt="image">
                        </span>
                        <span class="banner_image2">
                            <img class="moving_animation" src="{{ asset('user-assets/images/bannerimage2.png') }}"
                                 alt="image">
                        </span>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6" data-aos="fade-in" data-aos-duration="1500">
                    <div class="banner_images image_box2">
                        <span class="banner_image3">
                            <img class="moving_animation" src="{{ asset('user-assets/images/bannerimage3.png') }}"
                                 alt="image">
                        </span>
                        <span class="banner_image4">
                            <img class="moving_position_animatin"
                                 src="{{ asset('user-assets/images/bannerimage4.png') }}"
                                 alt="image">
                        </span>
                    </div>
                </div>
                <!-- banner slides end -->

            </div>
            <!-- row end -->
        </div>
        <!-- container end -->
    </section>
    <!-- Banner-Section-end -->

    <!-- Features-Section-Start -->
    <section class="row_am features_section" id="features">
        <!-- section bg -->
        <div class="feature_section_bg"><img src="{{ asset('user-assets/images/hero-bg.png') }}" alt="image"></div>
        <!-- container start -->
        <div class="container">
            <div class="features_inner">

                <!-- feature image -->
                <div class="feature_img" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
                    <img src="{{ asset('user-assets/images/device-feature.png') }}" alt="image">
                </div>

                <div class="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
                    <!-- h2 -->
                    <h2>
                        <span>{{ __('translations.Features') }}</span> {{ __('translations.that makes app different!') }}
                    </h2>
                    <!-- p -->
                    <p>{{ __('translations.Our user-friendly app allows clients to search and filter through professionals, ensuring they find exactly who they need. ') }}
                        <br> {{ __('translations.Users can also easily manage their profiles, update information, and cancel appointments whenever needed,') }}
                        <br> {{ __ ('translations.giving them full control of their experience.')}}</p>
                </div>

                <!-- story -->
                <div class="features_block">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="feature_box" data-aos="fade-up" data-aos-duration="1500">
                                <div class="image">
                                    <img src="{{ asset('user-assets/images/secure_data.png') }}" alt="image">
                                </div>
                                <div class="text">
                                    <h4>{{ __('translations.Easy Booking') }}</h4>
                                    <p>{{ __('translations.Users can browse professionals by category, filter their options, and book appointments in just a few taps.') }}</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-3">
                            <div class="feature_box" data-aos="fade-up" data-aos-duration="1700">
                                <div class="image">
                                    <img src="{{ asset('user-assets/images/functional.png') }}" alt="image">
                                </div>
                                <div class="text">
                                    <h4>{{ __('translations.Profile Management') }}</h4>
                                    <p>{{ __('translations.Easily update personal information, view upcoming bookings, and cancel appointments if needed.') }}</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-3">
                            <div class="feature_box" data-aos="fade-up" data-aos-duration="1900">
                                <div class="image">
                                    <img src="{{ asset('user-assets/images/live-chat.png') }}" alt="image">
                                </div>
                                <div class="text">
                                    <h4>{{ __('translations.WhatsApp & Email Alerts') }}</h4>
                                    <p>{{ __('translations.Receive instant appointment confirmations, updates, and reminders via WhatsApp or email.') }}</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-3">
                            <div class="feature_box" data-aos="fade-up" data-aos-duration="1900">
                                <div class="image">
                                    <img src="{{ asset('user-assets/images/support.png') }}" alt="image">
                                </div>
                                <div class="text">
                                    <h4>{{ __('translations.Time Slot Booking') }}</h4>
                                    <p>{{ __('translations.Select an available time slot for your preferred doctor or service provider.') }}</p>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>

        </div>
        <!-- container end -->
    </section>
    <!-- Features-Section-end -->

    <!-- About-App-Section-Start -->
    <section class="row_am about_app_section">
        <!-- container start -->
        <div class="container">
            <!-- row start -->
            <div class="row">
                <div class="col-lg-6">

                    <!-- about images -->
                    <div class="about_img" data-aos="fade-in" data-aos-duration="1500">
                        <div class="frame_img">
                            <img class="moving_position_animatin"
                                 src="{{ asset('user-assets/images/about-frame.png') }}"
                                 alt="image">
                        </div>
                        <div class="screen_img">
                            <img class="moving_animation" src="{{ asset('user-assets/images/about-screen.png') }}"
                                 alt="image">
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">

                    <!-- about text -->
                    <div class="about_text">
                        <div class="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">

                            <!-- h2 -->
                            <h2>{{ __('translations.Book Appointments') }}
                                <span>{{ __('translations.Anytime, Anywhere.') }}</span></h2>

                            <!-- p -->
                            <p>
                                {{ __('translations.Our mobile app makes booking appointments a breeze. With a few taps, users can search
                                for professionals, view availability, and book appointments—whether by time slot or
                                queue. Get real-time notifications, receive confirmations via WhatsApp and email, and
                                avoid the hassle of waiting. You’re in control of your schedule.') }}
                            </p>
                        </div>

                        <!-- UL -->
                        <ul class="app_statstic" id="counter" data-aos="fade-in" data-aos-duration="1500">
                            <li>
                                <div class="icon">
                                    <img src="{{ asset('user-assets/images/download.png') }}" alt="image">
                                </div>
                                <div class="text">
                                    <p class="fs-22 fw-bold mb-1">{{ __('translations.Perfect') }}</p>
                                    <p>{{ __('translations.User Experience') }}</p>
                                </div>
                            </li>
                            <li>
                                <div class="icon">
                                    <img src="{{ asset('user-assets/images/followers.png') }}" alt="image">
                                </div>
                                <div class="text">
                                    <p class="fs-22 fw-bold mb-1">{{ __('translations.Retained') }}</p>
                                    <p>{{ __('translations.Users') }}</p>
                                </div>
                            </li>
                            <li>
                                <div class="icon">
                                    <img src="{{ asset('user-assets/images/reviews.png') }}" alt="image">
                                </div>
                                <div class="text">
                                    <p class="fs-22 fw-bold mb-1">{{ __('translations.Excellent') }}</p>
                                    <p>{{ __('translations.Feedback') }}</p>
                                </div>
                            </li>
                            <li>
                                <div class="icon">
                                    <img src="{{ asset('user-assets/images/countries.png') }}" alt="image">
                                </div>
                                <div class="text">
                                    <p class="fs-22 fw-bold mb-1">{{ __('translations.Wide Range') }}</p>
                                    <p>{{ __('translations.Access') }}</p>
                                </div>
                            </li>
                        </ul>
                        <!-- UL end -->
                        <a href="#" class="btn puprple_btn" data-aos="fade-in" data-aos-duration="1500">
                            {{ __('translations.START FREE TRIAL') }}
                        </a>
                    </div>
                </div>
            </div>
            <!-- row end -->
        </div>
        <!-- container end -->
    </section>
    <!-- About-App-Section-end -->

    <!-- ModernUI-Section-Start -->
    <section class="row_am modern_ui_section">
        <!-- section bg -->
        <div class="modernui_section_bg"><img src="{{ asset('user-assets/images/hero-bg.png') }}" alt="image"></div>
        <!-- container start -->
        <div class="container">
            <!-- row start -->
            <div class="row">
                <div class="col-lg-6">
                    <!-- UI content -->
                    <div class="ui_text">
                        <div class="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
                            <h2>{{ __('translations.Two Ways to Book:') }}
                                <span>{{ __('translations.Time Slot or Queue System') }}</span></h2>
                            <p>
                                {{ __('translations.Never miss an appointment with instant confirmations and notifications. Waiting Room
                                offers flexibility with two booking options:') }}
                            </p>
                        </div>
                        <ul class="design_block">
                            <li data-aos="fade-up" data-aos-duration="1500">
                                <h4>{{ __('translations.Time Slot Booking') }}</h4>
                                <p>{{ __('translations.Select an available time slot for your preferred doctor or service provider.') }}</p>
                            </li>
                            <li data-aos="fade-up" data-aos-duration="1500">
                                <h4>{{ __('translations.Queue System') }}</h4>
                                <p>{{ __('translations.Join the queue and get notified when it is your turn. With both options, managing your
                                    time has never been easier.') }}</p>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-6">
                    <!-- UI Image -->
                    <div class="ui_images" data-aos="fade-in" data-aos-duration="1500">
                        <div class="left_img">
                            <img class="moving_position_animatin" src="{{ asset('user-assets/images/modern01.png') }}"
                                 alt="image">
                        </div>
                        <!-- UI Image -->
                        <div class="right_img">
                            <img class="moving_position_animatin"
                                 src="{{ asset('user-assets/images/shield_icon.png') }}"
                                 alt="image">
                            <img class="moving_position_animatin" src="{{ asset('user-assets/images/modern02.png') }}"
                                 alt="image">
                            <img class="moving_position_animatin" src="{{ asset('user-assets/images/modern03.png') }}"
                                 alt="image">
                        </div>
                    </div>
                </div>
            </div>
            <!-- row end -->
        </div>
        <!-- container end -->
    </section>
    <!-- ModernUI-Section-end -->

    <!-- How-It-Workes-Section-Start -->
    <section class="row_am how_it_works" id="how_it_work">
        <!-- section bg -->
        <div class="how_section_bg"><img src="{{ asset('user-assets/images/hero-bg.png') }}" alt="image"></div>
        <!-- container start -->
        <div class="container">
            <div class="how_it_inner">
                <div class="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
                    <!-- h2 -->
                    <h2><span>{{ __('translations.How it works') }}</span> {{ __('translations.- 3 easy steps') }}</h2>
                    <!-- p -->
                    <p>{{ __('translations.Receive booking confirmations via WhatsApp and email, complete with a QR code for easy
                        check-in.') }}</p>
                </div>
                <div class="step_block">
                    <!-- UL -->
                    <ul>
                        <!-- step -->
                        <li>
                            <div class="step_text" data-aos="fade-right" data-aos-duration="1500">
                                <h4>{{ __('translations.Download app') }}</h4>
                                <div class="app_icon">
                                    <a href="#"><i class="icofont-brand-android-robot"></i></a>
                                    <a href="https://apps.apple.com/pk/app/waiting-room-pro/id6737804490"><i
                                            class="icofont-brand-apple"></i></a>
                                </div>
                                <p>{{ __('translations.Download App either for iOS & Android') }}</p>
                            </div>
                            <div class="step_number number2">
                                <h3>01</h3>
                            </div>
                            <div class="step_img" data-aos="fade-left" data-aos-duration="1500">
                                <img src="{{ asset('user-assets/images/download_app.png') }}" alt="image">
                            </div>
                        </li>

                        <!-- step -->
                        <li>
                            <div class="step_text" data-aos="fade-left" data-aos-duration="1500">
                                <h4>{{ __('translations.Create account') }}</h4>
                                <p>{{ __('translations.Sign up free for App account. One account for all devices.') }}</p>
                            </div>
                            <div class="step_number number2">
                                <h3>02</h3>
                            </div>
                            <div class="step_img" data-aos="fade-right" data-aos-duration="1500">
                                <img src="{{ asset('user-assets/images/create_account.png') }}" alt="image">
                            </div>
                        </li>

                        <!-- step -->
                        <li>
                            <div class="step_text" data-aos="fade-right" data-aos-duration="1500">
                                <h4>{{ __('translations.It’s done, enjoy the app') }}</h4>
                                <span>{{ __('translations.Have any questions check our') }} <a
                                        href="#faqs">{{ __('translations.FAQs') }}</a></span>
                                <p>{{ __('translations.Get most amazing app experience, Explore and share the app') }}</p>
                            </div>
                            <div class="step_number number2">
                                <h3>03</h3>
                            </div>
                            <div class="step_img" data-aos="fade-left" data-aos-duration="1500">
                                <img src="{{ asset('user-assets/images/enjoy_app.png') }}" alt="image">
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- video section start -->
            <div class="yt_video" data-aos="fade-in" data-aos-duration="1500">
                <div class="thumbnil">
                    <img src="{{ asset('user-assets/images/yt_thumb.png') }}" alt="image">
                    <a class="popup-youtube play-button"
                       data-url="{{asset('user-assets/videos/Waiting Room System Flow - Final.mp4')}}?autoplay=1&mute=1" data-toggle="modal"
                       data-target="#myModal" title="XJj2PbenIsU">
                        <span class="play_btn">
                            <img src="{{ asset('user-assets/images/play_icon.png') }}" alt="image">
                            <div class="waves-block">
                                <div class="waves wave-1"></div>
                                <div class="waves wave-2"></div>
                                <div class="waves wave-3"></div>
                            </div>
                        </span>
                        {{ __('translations.Let’s see virtually how it works') }}
                        <span>{{ __('translations.Watch video') }}</span>
                    </a>
                </div>
            </div>
            <!-- video section end -->
        </div>
        <!-- container end -->

    </section>
    <!-- How-It-Workes-Section-end -->

    <!-- Testimonial-Section start -->
    <section class="row_am testimonial_section" id="testimonial">
        <!-- container start -->
        <div class="container">
            <div class="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
                <!-- h2 -->
                <h2>{{ __('translations.What our') }} <span>{{ __('translations.customer say') }}</span></h2>
                <!-- p -->
                <p>{{ __('translations.Experience the difference with Waiting Room—don’t just take our word for it. Here’s what our
                    satisfied customers and service providers have to say about their journey with us.') }}</p>
            </div>
            <div class="testimonial_block" data-aos="fade-in" data-aos-duration="1500">
                <div id="testimonial_slider" class="owl-carousel owl-theme">
                    <!-- user 1 -->
                    <div class="item">
                        <div class="testimonial_slide_box">
                            <div class="rating">
                                <span><i class="icofont-star"></i></span>
                                <span><i class="icofont-star"></i></span>
                                <span><i class="icofont-star"></i></span>
                                <span><i class="icofont-star"></i></span>
                                <span><i class="icofont-star"></i></span>
                            </div>
                            <p class="review">
                                {{ __('translations."Since we started using Waiting Room, managing our clinic’s appointments has become
                                incredibly efficient. The dashboard is easy to navigate, and our patients appreciate the
                                hassle-free booking system."') }}
                            </p>
                            <div class="testimonial_img">
                                <img src="{{ asset('user-assets/images/testimonial_user1.png') }}" alt="image">
                            </div>
                            <h3>{{ __('translations.Shayna John') }}</h3>
                            <span class="designation">{{ __('translations.Creative inc') }}</span>
                        </div>
                    </div>

                    <!-- user 2 -->
                    <div class="item">
                        <div class="testimonial_slide_box">
                            <div class="rating">
                                <span><i class="icofont-star"></i></span>
                                <span><i class="icofont-star"></i></span>
                                <span><i class="icofont-star"></i></span>
                                <span><i class="icofont-star"></i></span>
                                <span><i class="icofont-star"></i></span>
                            </div>
                            <p class="review">
                                {{ __('translations.“Using this platform has been a game-changer for our clinic. Scheduling appointments is
                                now effortless, and the real-time updates keep us on track. Our patients appreciate the
                                smooth booking process and timely notifications.”') }}
                            </p>
                            <div class="testimonial_img">
                                <img src="{{ asset('user-assets/images/testimonial_user2.png') }}" alt="image">
                            </div>
                            <h3>{{ __('translations.Willium Den') }}</h3>
                            <span class="designation">{{ __('translations.Creative inc') }}</span>
                        </div>
                    </div>

                    <!-- user 3 -->
                    <div class="item">
                        <div class="testimonial_slide_box">
                            <div class="rating">
                                <span><i class="icofont-star"></i></span>
                                <span><i class="icofont-star"></i></span>
                                <span><i class="icofont-star"></i></span>
                                <span><i class="icofont-star"></i></span>
                                <span><i class="icofont-star"></i></span>
                            </div>
                            <p class="review">
                                {{ __('translations."With Waiting Room, I can easily manage appointments, set up time slots, and take breaks
                                when needed. It is made everything so much smoother, and my clients appreciate the
                                real-time updates."') }}
                            </p>
                            <div class="testimonial_img">
                                <img src="{{ asset('user-assets/images/testimonial_user3.png') }}" alt="image">
                            </div>
                            <h3>{{ __('translations.Cyrus Stephen') }}</h3>
                            <span class="designation">{{ __('translations.Creative inc') }}</span>
                        </div>

                    </div>
                </div>

                <!-- total review -->
                <div class="total_review">
                    <div class="rating">
                        <span><i class="icofont-star"></i></span>
                        <span><i class="icofont-star"></i></span>
                        <span><i class="icofont-star"></i></span>
                        <span><i class="icofont-star"></i></span>
                        <span><i class="icofont-star"></i></span>
                        <p>5.0 / 5.0</p>
                    </div>
                    <h3>{{ __('translations.Received 5 star rating from our clients') }}</h3>
                    <a href="#">{{ __('translations.TOTAL USER REVIEWS') }} <i class="icofont-arrow-right"></i></a>
                </div>

                <!-- avtar faces -->
                <div class="avtar_faces">
                    <img src="{{ asset('user-assets/images/avtar_testimonial.png') }}" alt="image">
                </div>
            </div>
        </div>
        <!-- container end -->
    </section>
    <!-- Testimonial-Section end -->


    <!-- FAQ-Section start -->
    <section class="row_am faq_section" id="faqs">
        <!-- section bg -->
        <div class="faq_bg"><img src="{{ asset('user-assets/images/hero-bg.png') }}" alt="image"></div>
        <!-- container start -->
        <div class="container">
            <div class="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
                <!-- h2 -->
                <h2><span>{{ __('translations.FAQs') }}</span> {{ __('translations.- Frequently Asked Questions') }}</h2>
                <!-- p -->
                <p>{{ __('translations.These FAQs will help clarify common questions potential customers and users may have about the
                    Waiting Room system, making it easier for them to understand how the platform works.') }}</p>
            </div>
            <!-- faq data -->
            <div class="faq_panel">
                <div class="accordion" id="accordionExample">
                    <div class="card" data-aos="fade-up" data-aos-duration="1500">
                        <div class="card-header" id="headingOne">
                            <h2 class="mb-0">
                                <button type="button" class="btn btn-link active" data-toggle="collapse"
                                        data-target="#collapseOne">
                                    <i class="icon_faq icofont-plus"></i></i> {{ __('translations.What is Waiting Room and how does it work?') }}
                                </button>
                            </h2>
                        </div>
                        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
                             data-parent="#accordionExample">
                            <div class="card-body">
                                <p>{{ __('translations.Waiting Room is a comprehensive appointment management system designed for service
                                    providers like clinics, barbers, and salons. It allows users to book appointments
                                    easily via time slots or a queue system, while providers can manage their schedules,
                                    clients, and appointments from a customized dashboard. The platform includes a Super
                                    Admin panel for centralized management, a Service Provider panel for business
                                    owners, and a mobile app for users.') }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="card" data-aos="fade-up" data-aos-duration="1500">
                        <div class="card-header" id="headingTwo">
                            <h2 class="mb-0">
                                <button type="button" class="btn btn-link collapsed" data-toggle="collapse"
                                        data-target="#collapseTwo"><i class="icon_faq icofont-plus"></i></i>
                                    {{ __('translations.How does the time slot booking work?') }}
                                </button>
                            </h2>
                        </div>
                        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"
                             data-parent="#accordionExample">
                            <div class="card-body">
                                <p>
                                    {{ __('translations.With time slot booking, service providers set up specific time blocks when they are
                                    available to see clients. Users can select from the available slots based on the
                                    provider is calendar. This ensures both the user and provider know the exact
                                    appointment time in advance.') }}
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="card" data-aos="fade-up" data-aos-duration="1500">
                        <div class="card-header" id="headingThree">
                            <h2 class="mb-0">
                                <button type="button" class="btn btn-link collapsed" data-toggle="collapse"
                                        data-target="#collapseThree"><i class="icon_faq icofont-plus"></i></i>
                                    {{ __('translations.What is the queue system, and how does it benefit me?') }}
                                </button>
                            </h2>
                        </div>
                        <div id="collapseThree" class="collapse" aria-labelledby="headingThree"
                             data-parent="#accordionExample">
                            <div class="card-body">
                                <p>
                                    {{ __('translations.The queue system allows users to join a virtual line without needing to be physically
                                    present. The system provides a sequence number, and users are notified via the app
                                    or WhatsApp when their turn is approaching. This feature is ideal for service
                                    providers who want to manage walk-ins efficiently without overbooking.') }}
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="card" data-aos="fade-up" data-aos-duration="1500">
                        <div class="card-header" id="headingFour">
                            <h2 class="mb-0">
                                <button type="button" class="btn btn-link collapsed" data-toggle="collapse"
                                        data-target="#collapseFour"><i class="icon_faq icofont-plus"></i></i>
                                    {{ __('translations.How are appointment confirmations and reminders sent?') }}
                                </button>
                            </h2>
                        </div>
                        <div id="collapseFour" class="collapse" aria-labelledby="headingFour"
                             data-parent="#accordionExample">
                            <div class="card-body">
                                <p>
                                    {{ __('translations.Once an appointment is booked, confirmations are sent via WhatsApp and email,
                                    including a QR code for easy check-in at the provider’s location. Reminders and
                                    real-time updates, such as your place in a queue, are also sent through these
                                    channels, ensuring you never miss an appointment.') }}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- container end -->
    </section>
    <!-- FAQ-Section end -->

    <!-- Beautifull-interface-Section start -->
    <section class="row_am interface_section">
        <!-- container start -->
        <div class="container-fluid">
            <div class="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
                <!-- h2 -->
                <h2>{{ __('translations.Multiple service providers') }}
                    <span>{{ __('translations.under one account') }}</span></h2>
                <!-- p -->
                <p>
                    {{ __('translations.Clinics or businesses with multiple professionals (e.g., doctors, barbers) can add and manage each') }}
                    <br>
                    {{ __('translations.provider’s profile, availability, and appointments under one business account.') }}
                </p>
            </div>

            <!-- screen slider start -->
            <div class="screen_slider">
                <div id="screen_slider" class="owl-carousel owl-theme">
                    <div class="item">
                        <div class="screen_frame_img">
                            <img src="{{ asset('user-assets/images/screen1.png') }}" alt="image">
                        </div>
                    </div>
                    <div class="item">
                        <div class="screen_frame_img">
                            <img src="{{ asset('user-assets/images/screen2.png') }}" alt="image">
                        </div>
                    </div>
                    <div class="item">
                        <div class="screen_frame_img">
                            <img src="{{ asset('user-assets/images/screen3.png') }}" alt="image">
                        </div>
                    </div>
                    <div class="item">
                        <div class="screen_frame_img">
                            <img src="{{ asset('user-assets/images/screen4.png') }}" alt="image">
                        </div>
                    </div>
                    <div class="item">
                        <div class="screen_frame_img">
                            <img src="{{ asset('user-assets/images/screen5.png') }}" alt="image">
                        </div>
                    </div>
                    <div class="item">
                        <div class="screen_frame_img">
                            <img src="{{ asset('user-assets/images/screen3.png') }}" alt="image">
                        </div>
                    </div>
                </div>
            </div>
            <!-- screen slider end -->
        </div>
        <!-- container end -->
    </section>
    <!-- Beautifull-interface-Section end -->

    <!-- Download-Free-App-section-Start  -->
    <section class="row_am free_app_section" id="getstarted">
        <!-- container start -->
        <div class="container">
            <div class="free_app_inner" data-aos="fade-in" data-aos-duration="1500" data-aos-delay="100">
                <!-- row start -->
                <div class="row">
                    <!-- content -->
                    <div class="col-md-6">
                        <div class="free_text">
                            <div class="section_title">
                                <h2>{{ __('translations.Let’s download free from apple and play store') }}</h2>
                                <p>{{ __('translations.Instant free download available on the Apple App Store and Google Play Store.
                                    Experience seamless functionality and convenience at your fingertips.') }}</p>
                            </div>
                            <ul class="app_btn">
                                <li>
                                    <a target="_blank"
                                       href="https://apps.apple.com/pk/app/waiting-room-pro/id6737804490">
                                        <img src="{{ asset('user-assets/images/appstore_white.png') }}" alt="image"
                                             width="200">
                                    </a>
                                </li>
                                <li>
                                    <a href="https://play.google.com/store/apps/details?id=com.waiting_room.app&hl=en" target="_blank">
                                        <img src="{{ asset('user-assets/images/googleplay_white.png') }}" alt="image"
                                             width="200">
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <!-- images -->
                    <div class="col-md-6">
                        <div class="free_img">
                            <img src="{{ asset('user-assets/images/download-screen01.png') }}" alt="image">
                            <img class="mobile_mockup" src="{{ asset('user-assets/images/download-screen02.png') }}"
                                 alt="image">
                        </div>
                    </div>
                </div>
                <!-- row end -->
            </div>
        </div>
        <!-- container end -->
    </section>
    <!-- Download-Free-App-section-end  -->

    <!-- Trusted Section start -->
    {{-- <section class="row_am trusted_section">
        <!-- container start -->
        <div class="container">
            <div class="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
                <!-- h2 -->
                <h2>Trusted by <span>150+</span> companies</h2>
                <!-- p -->
                <p>Trusted by 150+ companies worldwide, delivering exceptional services <br> and solutions with unmatched
                    reliability and quality.</p>
            </div>

            <!-- logos slider start -->
            <div class="company_logos">
                <div id="company_slider" class="owl-carousel owl-theme">
                    <div class="item">
                        <div class="logo">
                            <img src="{{ asset('user-assets/images/paypal.png') }}" alt="image">
                        </div>
                    </div>
                    <div class="item">
                        <div class="logo">
                            <img src="{{ asset('user-assets/images/spoty.png') }}" alt="image">
                        </div>
                    </div>
                    <div class="item">
                        <div class="logo">
                            <img src="{{ asset('user-assets/images/shopboat.png') }}" alt="image">
                        </div>
                    </div>
                    <div class="item">
                        <div class="logo">
                            <img src="{{ asset('user-assets/images/slack.png') }}" alt="image">
                        </div>
                    </div>
                    <div class="item">
                        <div class="logo">
                            <img src="{{ asset('user-assets/images/envato.png') }}" alt="image">
                        </div>
                    </div>
                    <div class="item">
                        <div class="logo">
                            <img src="{{ asset('user-assets/images/paypal.png') }}" alt="image">
                        </div>
                    </div>
                    <div class="item">
                        <div class="logo">
                            <img src="{{ asset('user-assets/images/spoty.png') }}" alt="image">
                        </div>
                    </div>
                    <div class="item">
                        <div class="logo">
                            <img src="{{ asset('user-assets/images/shopboat.png') }}" alt="image">
                        </div>
                    </div>
                </div>
            </div>
            <!-- logos slider end -->
        </div>
        <!-- container end -->
    </section> --}}
    <!-- Trusted Section ends -->

    <!-- News-Letter-Section-Start -->
    <section class="newsletter_section">
        <!-- container start -->
        <div class="container">
            <div class="newsletter_box">
                <div class="section_title" data-aos="fade-in" data-aos-duration="1500" data-aos-delay="100">
                    <!-- h2 -->
                    <h2>{{ __('translations.Subscribe newsletter') }}</h2>
                    <!-- p -->
                    <p>{{ __('translations.Be the first to receive all latest posts in your inbox') }}</p>
                </div>
                <form id="newsletterForm" data-aos="fade-in" data-aos-duration="1500" data-aos-delay="100">
                    <div class="form-group">
                        <input type="email" id="emailInput" class="form-control" placeholder="{{ __('translations.Enter your email') }}"
                               required>
                    </div>
                    <div class="form-group text-center d-flex justify-content-center align-items-center">
                        <div class="spinner-border text-light d-none submit-spinner mx-2" role="status">
                            <span class="sr-only">{{ __('translations.Loading...') }}</span>
                        </div>
                        <button type="submit" class="btn btn-submit">{{ __('translations.SUBMIT') }}</button>
                    </div>
                </form>
                <div id="responseMessage" style="margin-top: 15px; font-size: 14px;"></div>
            </div>
        </div>
        <!-- container end -->
    </section>
    <!-- News-Letter-Section-end -->

<!-- VIDEO MODAL -->
  <div class="modal fade youtube-video" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
          <button id="close-video" type="button" class="button btn btn-default text-right" data-dismiss="modal">
            <i class="icofont-close-line-circled"></i>
          </button>
            <div class="modal-body">
                <div id="video-container" class="video-container">
                    <iframe id="youtubevideo" src="" width="640" height="360" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
  </div>

@endsection
@section('custom-script')
    <script>
        var notyf = new Notyf({
            duration: 3000,
            position: {
                x: 'right',
                y: 'bottom',
            },
        });

        function alertMessage(message, error, timer = 3000) {
            notyf.dismissAll();
            if (error) {
                notyf.error({
                    message: message,
                    duration: timer
                });
            } else {
                notyf.success({
                    message: message,
                    duration: timer
                });
            }
        }

        document.getElementById('newsletterForm').addEventListener('submit', async function (e) {
            e.preventDefault();
            const btnSubmit = document.querySelector('.btn-submit');
            const submitSpinner = document.querySelector('.submit-spinner');
            const email = document.getElementById('emailInput').value;
            const responseMessage = document.getElementById('responseMessage');
            const csrfToken = document.querySelector('meta[name="csrf-token"]').content;

            btnSubmit.classList.add('d-none');
            submitSpinner.classList.remove('d-none');

            try {
                const response = await fetch(`/news-letter/${encodeURIComponent(email)}`, {
                    method: 'GET', // Using GET request
                    headers: {
                        'X-CSRF-TOKEN': csrfToken, // Include CSRF token if necessary (Laravel usually doesn't check CSRF for GET requests)
                        'Accept': 'application/json',
                    }
                });

                if (response.ok) {
                    btnSubmit.classList.remove('d-none');
                    submitSpinner.classList.add('d-none');
                    alertMessage('Thank you for subscribing to our newsletter!');
                    document.querySelector('#emailInput').value = '';
                } else {
                    btnSubmit.classList.remove('d-none');
                    submitSpinner.classList.add('d-none');
                    alertMessage(`Failed to subscribe: ${errorData.message || 'An error occurred'}`);
                    document.querySelector('#emailInput').value = '';
                    const errorData = await response.json();
                }
            } catch (error) {
                btnSubmit.classList.remove('d-none');
                submitSpinner.classList.add('d-none');
                document.querySelector('#emailInput').value = '';
                alertMessage(`An error occurred: ${error.message}`);
            }
        });

        document.getElementById('inquiryForm').addEventListener('submit', async function (e) {
            e.preventDefault();

            const btnSubmit = document.querySelector('.inquiry-submit-btn'); // The submit button
            const emailInput = document.getElementById('inquiryEmail'); // Email input field
            const email = emailInput.value; // Get email value
            const csrfToken = document.querySelector('meta[name="csrf-token"]').content; // CSRF token

            btnSubmit.disabled = true; // Disable the button to prevent multiple clicks
            btnSubmit.textContent = 'Submitting...'; // Show loading text

            try {
                const response = await fetch(`/submit-inquiry/${email}`, {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrfToken,
                        'Accept': 'application/json',
                    } // Send email as JSON
                });

                if (response.ok) {
                    alertMessage('We have received your inquiry. We will get back to you soon!',
                        false); // Success notification
                    emailInput.value = ''; // Clear the input field
                } else {
                    const errorData = await response.json();
                    alertMessage(`Failed to submit inquiry: ${errorData.message || 'An error occurred.'}`,
                        true); // Error notification
                }
            } catch (error) {
                alertMessage(`An error occurred: ${error.message}`, true); // Error notification
            } finally {
                btnSubmit.disabled = false; // Re-enable the button
                btnSubmit.textContent = 'SUBMIT'; // Reset button text
            }
        });
    </script>

    <script type="text/javascript">
        window.$crisp = [];
        window.CRISP_WEBSITE_ID = "8c4d3689-5004-4f15-a127-b6c8bcedf1d9";
        (function() {
            d = document;
            s = d.createElement("script");
            s.src = "https://client.crisp.chat/l.js";
            s.async = 1;
            d.getElementsByTagName("head")[0].appendChild(s);
        })();
    </script>

@endsection