import React 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/img-1.jpg'
import { useRouter } from "next/router";
import { useTranslations } from "next-intl";


const Testimonial2 = () => {
    const { locale } = useRouter();
    // console.log("locale : ", locale);
    const t = useTranslations("the_mission");
    var settings = {
        dots: true,
        arrows: false,
        speed: 1000,
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
    };

    const testimonial = [
        {
            tsImg: ts1,
            Title: t("first_mission_financial_services_title"),
            Sub: [
                t("first_mission_financial_services_desc_p_1"),
                t("first_mission_financial_services_desc_p_2"),
                t("first_mission_financial_services_desc_p_3"),
                t("first_mission_financial_services_desc_p_4"),
                t("first_mission_financial_services_desc_p_5"),
            ]
        },
        {
            tsImg: ts1,
            Title: t("Secondly_mission_financial_services_title"),
            subTitle: t("a_tax_on_legal_personstitle_title"),
            Sub: [
                t("a_tax_on_legal_personstitle_desc_point_1"),
                t("a_tax_on_legal_personstitle_desc_point_2"),
                t("a_tax_on_legal_personstitle_desc_point_3"),
                t("a_tax_on_legal_personstitle_desc_point_4"),
            ]
        },
        {
            tsImg: ts1,
            Title: t("Secondly_mission_financial_services_title"),
            subTitle: t("b_tax_on_legal_personstitle_title"),
            Sub: [
                t("b_tax_on_legal_personstitle_desc_point_1"),
                t("b_tax_on_legal_personstitle_desc_point_2"),
                t("b_tax_on_legal_personstitle_desc_point_3"),
                t("b_tax_on_legal_personstitle_desc_point_4"),
                t("b_tax_on_legal_personstitle_desc_point_5"),
            ]
        },
        {
            tsImg: ts1,
            Title: t("Secondly_mission_financial_services_title"),
            subTitle: t("c_tax_on_legal_personstitle_title"),
            Sub: [
                t("c_tax_on_legal_personstitle_desc_point_1"),
                t("c_tax_on_legal_personstitle_desc_point_2"),
            ]
        },
        {
            tsImg: ts1,
            Title: t("Secondly_mission_financial_services_title"),
            subTitle: t("d_tax_on_legal_personstitle_title"),
            Sub: [
                t("d_tax_on_legal_personstitle_desc_point_1"),
            ]
        },
        {
            tsImg: ts1,
            Title: t("Secondly_mission_financial_services_title"),
            subTitle: t("e_tax_on_legal_personstitle_title"),
            Sub: [
                t("e_tax_on_legal_personstitle_desc_point_1"),
                t("e_tax_on_legal_personstitle_desc_point_2"),
                t("e_tax_on_legal_personstitle_desc_point_3"),
                t("e_tax_on_legal_personstitle_desc_point_4"),
            ]
        },
        {
            tsImg: ts1,
            Title: t("Secondly_mission_financial_services_title"),
            subTitle: t("f_tax_on_legal_personstitle_title"),
            Sub: [
                t("f_tax_on_legal_personstitle_desc_point_1"),
            ]
        },
        {
            tsImg: ts1,
            Title: t("third_mission_P_1_title"),
            subTitle: t("third_mission_P_1_desc"),
            Sub: [
                t("f_tax_on_legal_personstitle_desc_point_1"),
                t("a_establishment_and_Corporate_Affairs_Department_P_1_title"),
                t("a_establishment_and_Corporate_Affairs_Department_P_1__desc"),
                t("a_establishment_and_Corporate_Affairs_Department_P_1_desc_p_1"),
                t("a_establishment_and_Corporate_Affairs_Department_P_1_desc_p_2"),
                t("b_establishment_and_Corporate_Affairs_Department_P_1_desc"),
                t("c_establishment_and_Corporate_Affairs_Department_P_1_desc"),
            ]
        },
        {
            tsImg: ts1,
            Title: t("third_mission_P_1_title"),
            subTitle: t("licensing_management_P_2_title"),
            subTitle2: t("licensing_management_P_2_desc"),
            Sub: [
                t("licensing_management_P_2_desc_p_1"),
                t("licensing_management_P_2_desc_p_2"),
                t("licensing_management_P_2_desc_p_3"),
                t("licensing_management_P_2_desc_p_4"),
                t("licensing_management_P_2_desc_p_5"),
                t("licensing_management_P_2_desc_p_6"),
            ]
        },
        {
            tsImg: ts1,
            Title: t("third_mission_P_1_title"),
            subTitle: t("trademark_and_patent_management_P_3_title"),
            subTitle2: t("trademark_and_patent_management_P_3_desc"),
            Sub: [
                t("trademark_and_patent_management_P_3_desc_p_1"),
                t("trademark_and_patent_management_P_3_desc_p_2"),
                t("trademark_and_patent_management_P_3_desc_p_3"),
            ]
        },
        {
            tsImg: ts1,
            Title: t("third_mission_P_1_title"),
            subTitle: t("foreigners_transactions_management_P_4_title"),
            subTitle2: t("foreigners_transactions_management_P_4_desc"),
            Sub: [
                t("foreigners_transactions_management_P_4_desc_p_1"),
                t("foreigners_transactions_management_P_4_desc_p_2"),
                t("foreigners_transactions_management_P_4_desc_p_3"),
                t("foreigners_transactions_management_P_4_desc_p_4"),
            ]
        },
        {
            tsImg: ts1,
            Title: t("fourth_mission_title"),
            subTitle: t("fourth_mission_desc"),
            Sub: [
                t("fourth_mission_desc_p_1"),
                t("fourth_mission_desc_p_2"),
                t("fourth_mission_desc_p_2_1"),
                t("fourth_mission_desc_p_2_2"),
                t("fourth_mission_desc_p_2_3"),
                t("fourth_mission_desc_p_3"),
                t("fourth_mission_desc_p_4"),
                t("fourth_mission_desc_p_5"),
                t("fourth_mission_desc_p_6"),
                t("fourth_mission_desc_p_7"),
                t("fourth_mission_desc_p_8"),
                t("fourth_mission_desc_p_9"),
                t("fourth_mission_desc_p_10"),
                t("fourth_mission_desc_p_11"),
                t("fourth_mission_desc_p_12"),
                t("fourth_mission_desc_p_13"),
            ]
        },
        {
            tsImg: ts1,
            Title: t("fifth_mission_title"),
            // subTitle: t("fourth_mission_desc"),
            Sub: [
                t("fifth_mission_desc_p_1"),
                t("fifth_mission_desc_p_2"),
                t("fifth_mission_desc_p_3"),
                t("fifth_mission_desc_p_4"),
                t("fifth_mission_desc_p_5"),
                t("fifth_mission_desc_p_6"),
                t("fifth_mission_desc_p_7"),
                t("fifth_mission_desc_p_8"),
            ]
        },
    ]
    return (

        <section className="wpo-testimonials-section section-padding">
            <div className="wpo-section-title-s2">
                <h2>{t("the_mission_title")}</h2>
                <span>{t("the_mission_description")}</span>
            </div>
            <div className="container">
                <div className="wpo-testimonials-wrap">
                    <div className="row align-items-center">
                        <div className="col-lg-7 col-12">
                            <div className="wpo-testimonials-active">
                                <Slider {...settings}>
                                    {testimonial.map((tesmnl, tsm) => (
                                        <div className="wpo-testimonials-item" key={tsm}>
                                            <p style={{ marginBottom: "0.5rem", fontSize: "2.8rem", textAlign: `${locale === "ar" ? "right" : "left"}`, marginRight: `${locale === "ar" ? "2rem" : ""}` }}>{tesmnl.Title}</p>
                                            <p style={{ fontSize: "2rem", textAlign: `${locale === "ar" ? "right" : "left"}`, marginRight: `${locale === "ar" ? "2rem" : ""}` }}>{tesmnl.subTitle}</p>
                                            <p style={{ fontSize: "2rem", textAlign: `${locale === "ar" ? "right" : "left"}`, marginRight: `${locale === "ar" ? "2rem" : ""}` }}>{tesmnl.subTitle2}</p>
                                            <div className="wpo-testimonial-info">
                                                <div className="wpo-testimonial-info-text">
                                                    {/* <h5>{tesmnl.Title}</h5> */}
                                                    <ul style={{ fontSize: '1.3rem', fontWeight: 'bold', color: "#fff", textAlign: `${locale === "ar" ? "right" : "left"}`, marginRight: `${locale === "ar" ? "2rem" : ""}` }}>
                                                        {tesmnl.Sub.map((sub, index) => (
                                                            <li key={index}>- {sub}</li>
                                                        ))
                                                        }
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    ))}
                                </Slider>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    );
}

export default Testimonial2;