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

const PrivacyPolicyPage = async () => {
    const t = await getTranslations("privacy-policy-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 mx-auto px-6">
                <h1>{t("title")}</h1>

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

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

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

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

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

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

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

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

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

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

                <h2>{t("section-12.heading")}</h2>
                <p>{t.rich("section-12.content", richTextFormat)}</p>

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

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

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

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

export default PrivacyPolicyPage;