import { useTranslations } from "next-intl"

export default function MermsHowItWorks() {
    const t = useTranslations("HowItWorks")
    return (
        <>
            <section id="merms-works" className="pt-100 ct-01 content-section division">
                <div className="container">
                    <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">
                                <h2 className="s-46 w-700">{t("title")}</h2>
                                <div className="cbox-4">
                                    <div className="box-title">
                                        <span className="flaticon-layers-1 color--theme"/>
                                        <h5 className="s-24 w-700">{t("workflowTitle")}</h5>
                                    </div>
                                    <div className="cbox-4-txt">
                                        <p>{t("workflowDesc")}</p>
                                    </div>
                                </div>
                                <div className="cbox-4">
                                    <div className="box-title">
                                        <span className="flaticon-paper-sizes color--theme"/>
                                        <h5 className="s-24 w-700">{t("aiTitle")}</h5>
                                    </div>
                                    <div className="cbox-4-txt">
                                        <p>{t("aiDesc")}</p>
                                    </div>
                                </div>
                                <div className="cbox-4">
                                    <div className="box-title">
                                        <span className="flaticon-pie-chart color--theme"/>
                                        <h5 className="s-24 w-700">{t("analyticsTitle")}</h5>
                                    </div>
                                    <div className="cbox-4-txt">
                                        <p className="mb-0">{t("analyticsDesc")}</p>
                                    </div>
                                </div>
                            </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/img-08.png" alt="content-image"/>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </>
    )
}