"use client";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Navigation, Pagination } from "swiper/modules";
import Link from "next/link";

const swiperOptions = {
    modules: [Autoplay, Pagination, Navigation],
    slidesPerView: 1,
    spaceBetween: 30,
    autoplay: {
        delay: 2500,
        disableOnInteraction: false,
    },
    loop: true,

    // Navigation
    navigation: {
        nextEl: ".testimonial-two-button-next",
        prevEl: ".testimonial-two-button-prev",
    },

    // Pagination
    pagination: {
        el: ".swiper-pagination-testimonials",
        clickable: true,
    },
};
export default function Testimonials() {
    return (
        <>
            <section className="testimonials_area-seven">
                <div className="container">
                    <div className="row justify-content-center">
                        <div className="col-xl-6 col-lg-8">
                            <div className="section-title text-center mb-40 tg-heading-subheading animation-style3">
                                <h2 className="title tg-element-title">Check out what our clients are saying...</h2>
                            </div>
                        </div>
                    </div>
                    <div className="slider_testimonial_home7">
                        <span className="quote-review">
                            <img src="/assets/img/home7/quote.svg" />
                        </span>
                        <div className="swiper-container slider_baner__active">
                            <Swiper {...swiperOptions} className="swiper-wrapper">
                                <SwiperSlide className="swiper-slide slide__home7">
                                    <div className="item-testimonial">
                                        <div className="item-testimonial-left">
                                            <div className="author-testimonial">
                                                <img src="/assets/img/custom/review-1.png" />
                                                <div className="info-author-review">
                                                    <strong className="name-review">Social Celebrity</strong>
                                                    <p className="review-dept">
                                                        <Link href="https://social-celebrity.com/" target="_blank">
                                                            https://social-celebrity.com/
                                                        </Link>
                                                    </p>
                                                    <div className="testimonial__rating">
                                                        <i className="fas fa-star" />
                                                        <i className="fas fa-star" />
                                                        <i className="fas fa-star" />
                                                        <i className="fas fa-star" />
                                                        <i className="fas fa-star" />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="item-testimonial-right">
                                            <p>
                                                <Link href="https://maps.app.goo.gl/7Y48i2Yj5XEWPCAg6" target="_blank">
                                                    RankRunners helped our brand reach the top of the search results for
                                                    relevant search terms within just a few month's time. They truly
                                                    take a comprehensive approach to SEO and clearly outline the entire
                                                    process from start to finish so that we're never in the dark and
                                                    know exactly how our budget is being allocated.
                                                </Link>
                                            </p>
                                        </div>
                                    </div>
                                </SwiperSlide>
                                <SwiperSlide className="swiper-slide slide__home7">
                                    <div className="item-testimonial">
                                        <div className="item-testimonial-left">
                                            <div className="author-testimonial">
                                                <img src="/assets/img/custom/review-2.png" />
                                                <div className="info-author-review">
                                                    <strong className="name-review">The Gurvey Law Group, PC</strong>
                                                    <p className="review-dept">
                                                        <Link href="https://gurveylaw.com/" target="_blank">
                                                            https://gurveylaw.com/
                                                        </Link>
                                                    </p>
                                                    <div className="testimonial__rating">
                                                        <i className="fas fa-star" />
                                                        <i className="fas fa-star" />
                                                        <i className="fas fa-star" />
                                                        <i className="fas fa-star" />
                                                        <i className="fas fa-star" />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="item-testimonial-right">
                                            <p>
                                                <Link href="https://maps.app.goo.gl/Phwd6nT1PDTMPDVV6" target="_blank">
                                                    Extremely happy with choosing to use Rankrunners to increase the
                                                    amount of clients we work with. The entire process was easy and we
                                                    saw an increase right away. Would recommend every company to use
                                                    them to increase sales through their online tools!
                                                </Link>
                                            </p>
                                        </div>
                                    </div>
                                </SwiperSlide>
                                <SwiperSlide className="swiper-slide slide__home7">
                                    <div className="item-testimonial">
                                        <div className="item-testimonial-left">
                                            <div className="author-testimonial">
                                                <img src="/assets/img/images/testi_avatar04.png" />
                                                <div className="info-author-review">
                                                    <strong className="name-review">Andres Gonzalez</strong>
                                                    <p className="review-dept">
                                                        <Link href="#" target="_blank"></Link>
                                                    </p>
                                                    <div className="testimonial__rating">
                                                        <i className="fas fa-star" />
                                                        <i className="fas fa-star" />
                                                        <i className="fas fa-star" />
                                                        <i className="fas fa-star" />
                                                        <i className="fas fa-star" />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="item-testimonial-right">
                                            <p>
                                                <Link href="https://maps.app.goo.gl/sv736kkuF13bqdzZ6" target="_blank">
                                                    Awesome firm. They are helping us to develop and start out business
                                                    the way we envisioned. Highly recommended professionals.
                                                </Link>
                                            </p>
                                        </div>
                                    </div>
                                </SwiperSlide>
                            </Swiper>
                        </div>
                        <div className="testimonial__nav-four">
                            <div className="testimonial-two-button-prev button-swiper-prev">
                                <i className="flaticon-right-arrow" />
                            </div>
                            <div className="testimonial-two-button-next button-swiper-next">
                                <i className="flaticon-right-arrow" />
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </>
    );
}