import { useTranslations } from "next-intl"

export default function MermsEngageBox() {
    const t = useTranslations("EngageBox")
    return <>
        <section className="pt-100 ws-wrapper content-section">
            <div className="container">
                <div className="bc-1-wrapper bg--white-400 bg--fixed r-16">
                    <div className="section-overlay">
                        <div className="row d-flex align-items-center">
                            <div className="col-md-6 order-last order-md-2">
                                <div className="txt-block left-column wow fadeInRight">
                                    <span className="section-id">{t("sectionId")}</span>
                                    <h2 className="s-46 w-700">{t("title")}</h2>
                                    <p>{t("description")}</p>
                                    <h5 className="s-24 w-700">{t("subtitle")}</h5>
                                    <p className="mb-0">{t("subtitleDesc")}</p>
                                </div>
                            </div>
                            <div className="col-md-6 order-first order-md-2">
                                <div className="img-block right-column wow fadeInLeft">
                                    <img className="img-fluid" src="/images/engage-box.png" alt="content-image"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </>
}