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 ServiceDescription = ({ serviceID }) => {
    console.log("serviceID : ", serviceID);
    const { locale } = useRouter();
    // console.log("locale : ", locale);
    const t = useTranslations("the_mission");
    const firstService = () => {
        return (
            <>
                <h1 style={{ color: "#fff", textAlign: "start", fontSize: "2.8rem" }}>{t("fourth_mission_title")}</h1>
                <div>
                    <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("fourth_mission_desc_p_1")}</p>
                    <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("fourth_mission_desc_p_2")}</p>
                    <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("fourth_mission_desc_p_2_1")}</p>
                    <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("fourth_mission_desc_p_2_2")}</p>
                    <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("fourth_mission_desc_p_2_3")}</p>
                    <p style={{ color: "#fff", fontSize: "1.2rem" }}>{t("fourth_mission_desc_p_3")}</p>
                    <p style={{ color: "#fff", fontSize: "1.2rem" }}>{t("fourth_mission_desc_p_4")}</p>
                    <p style={{ color: "#fff", fontSize: "1.2rem" }}>{t("fourth_mission_desc_p_5")}</p>
                    <p style={{ color: "#fff", fontSize: "1.2rem" }}>{t("fourth_mission_desc_p_6")}</p>
                    <p style={{ color: "#fff", fontSize: "1.2rem" }}>{t("fourth_mission_desc_p_7")}</p>
                    <p style={{ color: "#fff", fontSize: "1.2rem" }}>{t("fourth_mission_desc_p_8")}</p>
                    <p style={{ color: "#fff", fontSize: "1.2rem" }}>{t("fourth_mission_desc_p_9")}</p>
                    <p style={{ color: "#fff", fontSize: "1.2rem" }}>{t("fourth_mission_desc_p_10")}</p>
                    <p style={{ color: "#fff", fontSize: "1.2rem" }}>{t("fourth_mission_desc_p_11")}</p>
                    <p style={{ color: "#fff", fontSize: "1.2rem" }}>{t("fourth_mission_desc_p_12")}</p>
                    <p style={{ color: "#fff", fontSize: "1.2rem" }}>{t("fourth_mission_desc_p_13")}</p>
                </div>
            </>
        )
    }
    const secondService = () => {
        return (
            <>
                <div>
                    <h1 style={{ color: "#fff", textAlign: "start", fontSize: "2.8rem" }}>{t("Secondly_mission_financial_services_title")}</h1>
                    <h2 style={{ color: "#fff", textAlign: "start" }}>{t("a_tax_on_legal_personstitle_title")}</h2>
                    <div>
                        <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("a_tax_on_legal_personstitle_desc_point_1")}</p>
                        <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("a_tax_on_legal_personstitle_desc_point_2")}</p>
                        <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("a_tax_on_legal_personstitle_desc_point_3")}</p>
                        <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("a_tax_on_legal_personstitle_desc_point_4")}</p>
                    </div>
                </div>
                <div>
                    <h2 style={{ color: "#fff", textAlign: "start" }}>{t("b_tax_on_legal_personstitle_title")}</h2>
                    <div>
                        <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("b_tax_on_legal_personstitle_desc_point_1")}</p>
                        <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("b_tax_on_legal_personstitle_desc_point_2")}</p>
                        <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("b_tax_on_legal_personstitle_desc_point_3")}</p>
                        <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("b_tax_on_legal_personstitle_desc_point_4")}</p>
                        <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("b_tax_on_legal_personstitle_desc_point_5")}</p>
                    </div>
                </div>
                <div>
                    <h2 style={{ color: "#fff", textAlign: "start" }}>{t("c_tax_on_legal_personstitle_title")}</h2>
                    <div>
                        <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("c_tax_on_legal_personstitle_desc_point_1")}</p>
                        <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("c_tax_on_legal_personstitle_desc_point_2")}</p>

                    </div>
                </div>
                <div>
                    <h2 style={{ color: "#fff", textAlign: "start" }}>{t("d_tax_on_legal_personstitle_title")}</h2>
                    <div>
                        <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("d_tax_on_legal_personstitle_desc_point_1")}</p>

                    </div>
                </div>
                <div>
                    <h2 style={{ color: "#fff", textAlign: "start" }}>{t("e_tax_on_legal_personstitle_title")}</h2>
                    <div>
                        <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("e_tax_on_legal_personstitle_desc_point_1")}</p>
                        <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("e_tax_on_legal_personstitle_desc_point_2")}</p>
                        <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("e_tax_on_legal_personstitle_desc_point_3")}</p>
                        <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("e_tax_on_legal_personstitle_desc_point_4")}</p>

                    </div>
                </div>
                <div>
                    <h2 style={{ color: "#fff", textAlign: "start" }}>{t("f_tax_on_legal_personstitle_title")}</h2>
                    <div>
                        <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("f_tax_on_legal_personstitle_desc_point_1")}</p>

                    </div>
                </div>
            </>
        )
    }
    const thirdService = () => {
        return (
            <>
                <h1 style={{ color: "#fff", textAlign: "start", fontSize: "2.8rem" }}>{t("first_mission_financial_services_title")}</h1>
                <div>
                    <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("first_mission_financial_services_desc_p_1")}</p>
                    <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("first_mission_financial_services_desc_p_2")}</p>
                    <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("first_mission_financial_services_desc_p_3")}</p>
                    <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("first_mission_financial_services_desc_p_4")}</p>
                    <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("first_mission_financial_services_desc_p_5")}</p>
                </div>
            </>
        )
    }
    const fourthService = () => {
        return (
            <>
                <h1 style={{ color: "#fff", textAlign: "start", fontSize: "2.8rem" }}>{t("fifth_mission_title")}</h1>
                <div>
                    <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("fifth_mission_desc_p_1")}</p>
                    <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("fifth_mission_desc_p_2")}</p>
                    <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("fifth_mission_desc_p_3")}</p>
                    <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("fifth_mission_desc_p_4")}</p>
                    <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("fifth_mission_desc_p_5")}</p>
                    <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("fifth_mission_desc_p_6")}</p>
                    <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("fifth_mission_desc_p_7")}</p>
                    <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("fifth_mission_desc_p_8")}</p>
                </div>
            </>
        )
    }
    const fifthService = () => {
        return (
            <>
                <div>
                    <h1 style={{ color: "#fff", textAlign: "start", fontSize: "2.8rem" }}>{t("third_mission_P_1_title")}</h1>
                    <h2 style={{ color: "#fff", textAlign: "start" }}>{t("third_mission_P_1_desc")}</h2>
                    <div>
                        <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("f_tax_on_legal_personstitle_desc_point_1")}</p>
                        <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("a_establishment_and_Corporate_Affairs_Department_P_1_title")}</p>
                        <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("a_establishment_and_Corporate_Affairs_Department_P_1__desc")}</p>
                        <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("a_establishment_and_Corporate_Affairs_Department_P_1_desc_p_1")}</p>
                        <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("a_establishment_and_Corporate_Affairs_Department_P_1_desc_p_2")}</p>
                        <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("b_establishment_and_Corporate_Affairs_Department_P_1_desc")}</p>
                        <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("c_establishment_and_Corporate_Affairs_Department_P_1_desc")}</p>
                    </div>
                </div>
                <div>
                    <h2 style={{ color: "#fff", textAlign: "start" }}>{t("licensing_management_P_2_title")}</h2>
                    <h3 style={{ color: "#fff", textAlign: "start" }}>{t("licensing_management_P_2_desc")}</h3>
                    <div>
                        <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("licensing_management_P_2_desc_p_1")}</p>
                        <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("licensing_management_P_2_desc_p_2")}</p>
                        <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("licensing_management_P_2_desc_p_3")}</p>
                        <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("licensing_management_P_2_desc_p_4")}</p>
                        <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("licensing_management_P_2_desc_p_5")}</p>
                        <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("licensing_management_P_2_desc_p_6")}</p>
                    </div>
                </div>
                <div>
                    <h2 style={{ color: "#fff", textAlign: "start" }}>{t("trademark_and_patent_management_P_3_title")}</h2>
                    <h3 style={{ color: "#fff", textAlign: "start" }}>{t("trademark_and_patent_management_P_3_desc")}</h3>
                    <div>
                        <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("trademark_and_patent_management_P_3_desc_p_1")}</p>
                        <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("trademark_and_patent_management_P_3_desc_p_2")}</p>
                        <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("trademark_and_patent_management_P_3_desc_p_3")}</p>
                    </div>
                </div>
                <div>
                    <h2 style={{ color: "#fff", textAlign: "start" }}>{t("foreigners_transactions_management_P_4_title")}</h2>
                    <h3 style={{ color: "#fff", textAlign: "start" }}>{t("foreigners_transactions_management_P_4_desc")}</h3>
                    <div>
                        <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("foreigners_transactions_management_P_4_desc_p_1")}</p>
                        <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("foreigners_transactions_management_P_4_desc_p_2")}</p>
                        <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("foreigners_transactions_management_P_4_desc_p_3")}</p>
                        <p style={{ color: "#fff", fontSize: "1.2rem" }}> {t("foreigners_transactions_management_P_4_desc_p_4")}</p>
                    </div>
                </div>
            </>
        )
    }
    return (

        <section>
            {
                serviceID === "1" && firstService()
            }
            {
                serviceID === "2" && secondService()
            }
            {
                serviceID === "3" && thirdService()
            }
            {
                serviceID === "4" && fourthService()
            }
            {
                serviceID === "5" && fifthService()
            }
        </section>

    );
}

export default ServiceDescription;