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

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

    const richTextFormat = {
        strong: (chunks: React.ReactNode) => <strong>{chunks}</strong>,
        emailLink: (chunks: React.ReactNode) => <Link href={`mailto:${chunks}`} className="no-underline hover:underline">{chunks}</Link>
    };

    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>
                    <li>{t.rich("section-2.item-4", 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>
                    <li>{t.rich("section-3.item-3", richTextFormat)}</li>
                    <li>{t.rich("section-3.item-4", richTextFormat)}</li>
                </ol>

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

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

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

                <h2>{t("section-7.heading")}</h2>
                <p>{t("section-7.paragraph-1")}</p>
                <p>{t.rich("section-7.paragraph-2", richTextFormat)}</p>
                <p>{t("section-7.paragraph-3")}</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>
                    <li>{t("section-8.item-4")}</li>
                    <li>{t("section-8.item-5")}</li>
                    <li>{t("section-8.item-6")}</li>
                </ol>

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

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

                <h2>{t("section-11.heading")}</h2>
                <p>{t("section-11.paragraph-1")}</p>
                <p>{t("section-11.paragraph-2")}</p>
                <p>{t("section-11.paragraph-3")}</p>
                <p>{t("section-11.paragraph-4")}</p>

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

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

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

                <h2>{t("section-15.heading")}</h2>
                <p>{t("section-15.paragraph-1")}</p>
                <p>{t("section-15.paragraph-2")}</p>
                <p>{t("section-15.paragraph-3")}</p>

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

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

                <h2>{t("section-18.heading")}</h2>
                <p>{t("section-18.paragraph-1")}</p>
                <p>{t("section-18.paragraph-2")}</p>
                <p>{t("section-18.paragraph-3")}</p>

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

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

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

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

export default TermsPage;
