import React from 'react';
import { useTranslations } from 'next-intl';
import { useRouter } from 'next/router';


const LettersComponent = (props) => {
    const { locale } = useRouter();
    const t = useTranslations("approval_of_the_letter");
    const t1 = useTranslations("engagement_and_appointment_letter");
    return (

        <section className={`wpo-practice-section-s3 ${props.pClass}`}>
            <div className="container">
                <div className="wpo-practice-wrap">
                    <div className="row">
                        <div className="col-lg-6 col-md-12 col-12">
                            <div style={{ height: "775px" }} className="wpo-practice-item">
                                <div className="wpo-section-title-s2">
                                    <h2>{t1("engagement_and_appointment_letter_name")}</h2>
                                    {/* <span>{t("the_fees_desc")}</span> */}
                                </div>
                                <div style={{ textAlign: `${locale === "ar" ? "right" : "left"}` }} className="wpo-practice-content">
                                    <div className="wpo-testimonial-info-text">
                                        <h2 style={{ color: "#fff" }}>{t1("engagement_and_appointment_letter_p_1")}</h2>
                                        <h4 style={{ color: "#fff" }}>{t1("engagement_and_appointment_letter_p_2")}</h4>
                                        <div style={{ textAlign: "center" }}>
                                            <h4 style={{ color: "#fff", }}>{t1("engagement_and_appointment_letter_p_3")}</h4>
                                            <p style={{ color: "#fff", marginBottom: "1rem", textAlign: "start" }}>{t1("engagement_and_appointment_letter_p_4")}</p>
                                            <p style={{ color: "#fff", marginBottom: "1rem" }}>{t1("engagement_and_appointment_letter_p_5")}</p>
                                        </div>
                                        <div style={{ color: "#fff", }}>
                                            {t1("engagement_and_appointment_letter_p_6")}
                                        </div>
                                        <div className='my-3'>
                                            <h4 style={{ color: "#fff", textAlign: "center", textDecoration: "underline" }}>{t1("engagement_and_appointment_letter_p_7")}</h4>
                                            <p style={{ color: "#fff", marginBottom: "1rem" }}>{t1("engagement_and_appointment_letter_p_8")}</p>
                                        </div>
                                        <div>
                                            <h3 style={{ color: "#fff", textAlign: "center" }}> {t1("engagement_and_appointment_letter_p_9")}</h3>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="col-lg-6 col-md-12 col-12">
                            <div style={{ height: "775px" }} className="wpo-practice-item">
                                <div className="wpo-section-title-s2">
                                    <h2>{t("approval_of_the_letter_name")}</h2>
                                </div>
                                <div style={{ textAlign: `${locale === "ar" ? "right" : "left"}` }} className="wpo-practice-content">
                                    <div className="wpo-testimonial-info-text">
                                        <h4 style={{ color: "#fff", marginBottom: "1.5rem" }}>{t("approval_of_the_letter_p_desc")}</h4>
                                        <h4 style={{ color: "#fff", textAlign: "center" }}>
                                            {t("approval_of_the_letter_p_1")}
                                        </h4>
                                        <div className='my-3'>
                                            <h4 style={{ color: "#fff" }}>
                                                {t("approval_of_the_letter_p_2")}
                                            </h4>
                                            <h4 style={{ color: "#fff" }}>
                                                {t("approval_of_the_letter_p_3")}
                                            </h4>
                                            <h4 style={{ color: "#fff" }}>
                                                {t("approval_of_the_letter_p_4")}
                                            </h4>
                                            <h4 style={{ color: "#fff" }}>
                                                {t("approval_of_the_letter_p_5")}
                                            </h4>
                                            <h4 style={{ color: "#fff" }}>
                                                {t("approval_of_the_letter_p_6")}
                                            </h4>
                                        </div>
                                        <div className='my-3'>
                                            <h4 style={{ color: "#fff" }}>
                                                {t("approval_of_the_letter_p_7")}
                                            </h4>
                                            <h4 style={{ color: "#fff" }}>
                                                {t("approval_of_the_letter_p_8")}
                                            </h4>
                                            <h4 style={{ color: "#fff" }}>
                                                {t("approval_of_the_letter_p_9")}
                                            </h4>
                                            <h4 style={{ color: "#fff" }}>
                                                {t("approval_of_the_letter_p_10")}
                                            </h4>
                                            <h4 style={{ color: "#fff" }}>
                                                {t("approval_of_the_letter_p_6")}
                                            </h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    )
}


export default LettersComponent;