import React, { useState } from 'react';
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import ts1 from '/public/images/testimonial/1.png'
import ts2 from '/public/images/testimonial/2.png'
import ts3 from '/public/images/testimonial/3.png'

import thumb1 from '/public/images/testimonial/thumb1.png'
import thumb2 from '/public/images/testimonial/thumb2.png'
import thumb3 from '/public/images/testimonial/thumb3.png'
import Image from 'next/image';
import testiImage from '/public/images/home/quotes.webp'



const testimonial = [
    {
        id: '01',
        tImg: ts1,
        thumbImg: thumb1,
        Des: "Janahan Law turned my dream of living in the United States into reality. They handled every step of my green card process with precision and care, making a complex journey feel simple and stress-free. Today, my family and I are proud to call America our home.",
        Title: 'Robert Willum',
        Sub: "President of BPT",
    },
    {
        id: '01',
        tImg: ts2,
        thumbImg: thumb2,
        Des: "I had almost lost hope of bringing my spouse to the United States. Janahan Law not only explained every option clearly but also worked tirelessly to reunite us. Their dedication and expertise made the impossible possible, and now we’re building our life together in America.",
        Title: 'Leslie Alexander',
        Sub: "President of TBP",
    },
    {
        id: '01',
        tImg: ts3,
        thumbImg: thumb3,
        Des: "When I was facing the risk of deportation, I felt my whole world collapsing. Janahan Law stood by me like a lifeline — fighting for my case with unmatched dedication and compassion. Thanks to their expertise, I now have the security to build a future in the U.S. without fear.",
        Title: 'David Joy',
        Sub: "President of AML",
    }
]

const Testimonial = (props) => {

    const [nav1, setNav1] = useState();
    const [nav2, setNav2] = useState();


    return (
        <section className={`wpo-testimonial-section section-padding  ${props.tmClass}`}>
            <div className="container">
                <div className="wpo-testimonial-wrap">
                    <div className="row align-items-center">
                        <div className="col-lg-6 col-12 order-lg-1 order-2">
                            <div className="testimonial-left">
                                <div className="testimonial-left-inner">
                                    <div className="left-slide">

                                        <div className="testimonial-img">
                                            <Image src={testiImage} alt="" />
                                        </div>

                                    </div>
                                    {/* <div className="shape-1"></div>
                                    <div className="border-s1"></div>
                                    <div className="border-s2"></div>
                                    <div className="border-s3"></div> */}
                                </div>
                            </div>
                        </div>
                        <div className="col-lg-6 col-12 order-lg-1 order-1">
                            <div className="wpo-testimonial-items">
                                <div className="right-slide">
                                    <Slider asNavFor={nav2} ref={(slider1) => setNav1(slider1)} dots={true} arrows={false}>
                                        {
                                            testimonial.map((tesmnl, tsm) => (
                                                <div className="wpo-testimonial-item" key={tsm}>
                                                    <div className="wpo-testimonial-text">
                                                        <i className="fi flaticon-right-quote-sign"></i>
                                                        <p>“{tesmnl.Des}”</p>
                                                        {/* <div className="wpo-testimonial-text-btm">
                                                            <div className="wpo-testimonial-text-btm-img">
                                                                <Image src={tesmnl.thumbImg} alt="" />
                                                            </div>
                                                            <div className="wpo-testimonial-text-btm-info">
                                                                <h3>{tesmnl.Title}</h3>
                                                                <span>{tesmnl.Sub}</span>
                                                            </div>
                                                        </div> */}
                                                    </div>
                                                </div>
                                            ))
                                        }
                                    </Slider>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}

export default Testimonial;