import Box from "@/components/Box";
import HeaderBack from "@/components/HeaderBack";
import { getTranslations } from "next-intl/server";

const PreventLaunderMoney = async () => {
    const t = await getTranslations("terms");
    const locale = "en";
    const file = (await import(`/messages/${locale}.json`)).default;
    const target = file.terms;
    console.log(`🚀🚀🚀🚀🚀-> in page.tsx on 8`, target);
    return (
        <>
            <HeaderBack />
            <main className={"main-header"}>
                <Box>
                    <header className={"mb-[0.05rem] text-[0.26rem] font-bold text-[#fcde26]"}>
                        {t("termsTitle")}
                    </header>
                    <h2 className={"mb-[0.05rem] font-bold"}>{t("termsTime")}</h2>

                    <div
                        className={"mb-[0.18rem] border-b-[0.01rem] border-[#3f3f3f] pb-[0.18rem]"}
                    >
                        <h2 className={"mb-[0.05rem] font-bold text-[#fcde26]"}>
                            {t("termsFirst.title")}
                        </h2>
                        <ul className={"pl-[0.18rem]"}>
                            <li className={"my-[0.05rem]"}>{t("termsFirst.desc1")}</li>
                            <li className={"my-[0.05rem]"}>{t.raw("termsFirst.desc2")}</li>
                            <li className={"my-[0.05rem]"}>{t.raw("termsFirst.desc3")}</li>
                        </ul>
                    </div>

                    <div
                        className={"mb-[0.18rem] border-b-[0.01rem] border-[#3f3f3f] pb-[0.18rem]"}
                    >
                        <h2 className={"mb-[0.05rem] font-bold text-[#fcde26]"}>
                            {t("termsSecond.title")}
                        </h2>
                        <ul className={"pl-[0.18rem]"}>
                            <li className={"my-[0.05rem]"}>{t("termsSecond.desc1")}</li>
                        </ul>
                    </div>

                    <div
                        className={"mb-[0.18rem] border-b-[0.01rem] border-[#3f3f3f] pb-[0.18rem]"}
                    >
                        <h2 className={"mb-[0.05rem] font-bold text-[#fcde26]"}>
                            {t("termsThird.title")}
                        </h2>
                        <p> {t("termsThird.desc1")}</p>
                        <ul className={"pl-[0.18rem]"}>
                            <li className={"my-[0.05rem]"}>{t("termsThird.desc2")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsThird.desc3")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsThird.desc4")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsThird.desc5")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsThird.desc6")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsThird.desc7")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsThird.desc8")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsThird.desc9")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsThird.desc10")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsThird.desc11")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsThird.desc12")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsThird.desc13")}</li>
                        </ul>
                    </div>

                    {/*  4*/}
                    <div
                        className={"mb-[0.18rem] border-b-[0.01rem] border-[#3f3f3f] pb-[0.18rem]"}
                    >
                        <h2 className={"mb-[0.05rem] font-bold text-[#fcde26]"}>
                            {t("termsFourth.title")}
                        </h2>
                        <ul className={"pl-[0.18rem]"}>
                            <li className={"my-[0.05rem]"}>{t("termsFourth.desc1")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsFourth.desc2")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsFourth.desc3")}</li>
                            <li className={"my-[0.05rem] whitespace-pre-line"}>
                                {t("termsFourth.desc4")}
                            </li>
                            <li className={"my-[0.05rem]"}>{t("termsFourth.desc5")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsFourth.desc6")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsFourth.desc7")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsFourth.desc8")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsFourth.desc9")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsFourth.desc10")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsFourth.desc11")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsFourth.desc12")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsFourth.desc13")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsFourth.desc14")}</li>
                        </ul>
                    </div>
                    {/*  5*/}
                    <div
                        className={"mb-[0.18rem] border-b-[0.01rem] border-[#3f3f3f] pb-[0.18rem]"}
                    >
                        <h2 className={"mb-[0.05rem] font-bold text-[#fcde26]"}>
                            {t("termsFifth.title")}
                        </h2>
                        <p> {t("termsFifth.desc1")}</p>
                        <ul className={"pl-[0.18rem]"}>
                            <li className={"my-[0.05rem]"}>{t("termsFifth.desc2")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsFifth.desc3")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsFifth.desc4")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsFifth.desc5")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsFifth.desc6")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsFifth.desc7")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsFifth.desc8")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsFifth.desc9")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsFifth.desc10")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsFifth.desc11")}</li>
                        </ul>
                    </div>
                    {/*  6 */}
                    <div
                        className={"mb-[0.18rem] border-b-[0.01rem] border-[#3f3f3f] pb-[0.18rem]"}
                    >
                        <h2 className={"mb-[0.05rem] font-bold text-[#fcde26]"}>
                            {t("termsSixth.title")}
                        </h2>
                        <ul className={"pl-[0.18rem]"}>
                            <li className={"my-[0.05rem]"}>{t("termsSixth.desc1")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsSixth.desc2")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsSixth.desc3")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsSixth.desc4")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsSixth.desc5")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsSixth.desc6")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsSixth.desc7")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsSixth.desc8")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsSixth.desc9")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsSixth.desc10")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsSixth.desc11")}</li>
                        </ul>
                    </div>
                    {/*  7 */}
                    <div
                        className={"mb-[0.18rem] border-b-[0.01rem] border-[#3f3f3f] pb-[0.18rem]"}
                    >
                        <h2 className={"mb-[0.05rem] font-bold text-[#fcde26]"}>
                            {t("termsSeventh.title")}
                        </h2>
                        <ul className={"pl-[0.18rem]"}>
                            <li className={"my-[0.05rem] whitespace-pre-line"}>
                                {t("termsSeventh.desc1")}
                            </li>
                            <li className={"my-[0.05rem]"}>{t("termsSeventh.desc2")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsSeventh.desc3")}</li>
                        </ul>
                    </div>
                    {/*  8 */}
                    <div
                        className={"mb-[0.18rem] border-b-[0.01rem] border-[#3f3f3f] pb-[0.18rem]"}
                    >
                        <h2 className={"mb-[0.05rem] font-bold text-[#fcde26]"}>
                            {t("termsEighth.title")}
                        </h2>
                        <ul className={"pl-[0.18rem]"}>
                            <li className={"my-[0.05rem]"}>{t("termsEighth.desc1")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsEighth.desc2")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsEighth.desc3")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsEighth.desc4")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsEighth.desc5")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsEighth.desc6")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsEighth.desc7")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsEighth.desc8")}</li>
                        </ul>
                    </div>

                    {/*  9 */}
                    <div
                        className={"mb-[0.18rem] border-b-[0.01rem] border-[#3f3f3f] pb-[0.18rem]"}
                    >
                        <h2 className={"mb-[0.05rem] font-bold text-[#fcde26]"}>
                            {t("termsNinth.title")}
                        </h2>
                        <ul className={"pl-[0.18rem]"}>
                            <li className={"my-[0.05rem]"}>{t("termsNinth.desc1")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsNinth.desc2")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsNinth.desc3")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsNinth.desc4")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsNinth.desc5")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsNinth.desc6")}</li>
                            <li className={"my-[0.05rem]"}>{t("termsNinth.desc7")}</li>
                        </ul>
                    </div>
                </Box>
            </main>
        </>
    );
};

export default PreventLaunderMoney;
