import React from "react";
import { testimonialSlides } from "@/utils/data";

const TestimonialsSection = () => (
    <section className="testimonials-two-section fix section-space">
        <div className="container-fluid g-0">
            <div className="row g-0">
                <div className="col-xxl-4 col-xl-4 col-lg-12">
                    <div className="testimonials-video-area p-relative">
                        <figure className="image w-img"><img src="/assets/imgs/resources/video-1.jpg" alt="" /></figure>
                        <div className="play-btn">
                            <div className="video_player_btn">
                                <a href="https://www.youtube.com/watch?v=eEzD-Y97ges" className="popup-video"><i className="fa-solid fa-play"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="col-xxl-8 col-xl-8 col-lg-12">
                    <div className="testimonials-two-area section-space-medium bg-color-1 p-relative">
                        <div className="shape-1" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-36.png)" }}></div>
                        <div className="sec-title-wrapper wow fadeInLeft mb-60" data-wow-delay=".5s">
                            <div className="sec-title">
                                <div className="sec-title__shape"></div>
                                <h6 className="sec-title__tagline">TESTIMONIALS</h6>
                                <h3 className="sec-title__title">Our Client Feedback</h3>
                            </div>
                            <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/text-shape-2.png" alt="" className="sec-title__text-shape" />
                        </div>
                        <div className="swiper testimonial-active-2">
                            <div className="swiper-wrapper">
                                {[1, 2, 1].map((num, i) => (
                                    <div key={i} className="swiper-slide">
                                        <div className="testimonials-two-box">
                                            <div className="author-image"><img src={`/assets/imgs/resources/testimonials-${num}.png`} alt="" /></div>
                                            <div className="icon-1"><i className="fa-solid fa-quote-right"></i></div>
                                            <h4>Kathryn Murphy</h4>
                                            <span>Engineering</span>
                                            <ul className="ratings">
                                                {[1, 2, 3, 4, 5].map((r) => <li key={r}><i className="fa-solid fa-star"></i></li>)}
                                            </ul>
                                            <p>“ Consectetur adipiscing elit. Integer is nunc viverra laoreet est the is porta pretium metus aliquam eget maecenas porta is nunc viverra Aenean ”</p>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                        <div className="testimonial-dot-inner text-center mt-60">
                            <div className="testimonial-swiper-dot"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
);

export default TestimonialsSection;