import { Main } from "@/app/ui/Main";
import { getTranslations } from "next-intl/server";

const TermsPage = async () => {
    const t = await getTranslations("terms-of-service-page");

    const richTextFormat = {
        strong: (chunks: React.ReactNode) => <strong>{chunks}</strong>,
        a: (chunks: React.ReactNode) => <a href="mailto:support@rezije.app">{chunks}</a>
    };

    return (
        <Main>
            <article className="prose container">
                <h1>{t("title")}</h1>

                <h2>{t("section-1.heading")}</h2>
                <p>{t("section-1.content")}</p>

                <h2>{t("section-2.heading")}</h2>
                <ol>
                    <li>{t.rich("section-2.item-1", richTextFormat)}</li>
                    <li>{t.rich("section-2.item-2", richTextFormat)}</li>
                    <li>{t.rich("section-2.item-3", richTextFormat)}</li>
                </ol>

                <h2>{t("section-3.heading")}</h2>
                <ol>
                    <li>{t.rich("section-3.item-1", richTextFormat)}</li>
                    <li>{t.rich("section-3.item-2", richTextFormat)}</li>
                </ol>

                <h2>{t("section-4.heading")}</h2>
                <p>{t("section-4.intro")}</p>
                <ol>
                    <li>{t("section-4.item-1")}</li>
                    <li>{t("section-4.item-2")}</li>
                    <li>{t("section-4.item-3")}</li>
                </ol>

                <h2>{t("section-5.heading")}</h2>
                <p>{t("section-5.content")}</p>

                <h2>{t("section-6.heading")}</h2>
                <p>{t("section-6.content")}</p>

                <h2>{t("section-7.heading")}</h2>
                <p>{t("section-7.paragraph-1")}</p>
                <p>{t.rich("section-7.paragraph-2", richTextFormat)}</p>

                <h2>{t("section-8.heading")}</h2>
                <p>{t("section-8.intro")}</p>
                <ol>
                    <li>{t("section-8.item-1")}</li>
                    <li>{t("section-8.item-2")}</li>
                    <li>{t("section-8.item-3")}</li>
                </ol>

                <h2>{t("section-9.heading")}</h2>
                <p>{t("section-9.content")}</p>

                <h2>{t("section-10.heading")}</h2>
                <p>{t("section-10.content")}</p>

                <h2>{t("section-11.heading")}</h2>
                <p>{t.rich("section-11.content", richTextFormat)}</p>
            </article>
        </Main>
    );
};

export default TermsPage;