import type { Metadata } from "next";
import { getTranslations, setRequestLocale } from "next-intl/server";
import { PageMessagesProvider } from "@/components/page-messages-provider";
import { getPathname } from "@/i18n/navigation";

interface PageProps {
  params: Promise<{ locale: string }>;
}

export async function generateMetadata({
  params,
}: PageProps): Promise<Metadata> {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: "metadata" });
  const pathname = getPathname({ locale, href: "/privacy-policy" });
  return {
    title: t("privacyPolicyTitle"),
    description: t("privacyPolicyDescription"),
    alternates: {
      canonical: pathname,
      languages: {
        fr: getPathname({ locale: "fr", href: "/privacy-policy" }),
        en: getPathname({ locale: "en", href: "/privacy-policy" }),
        "x-default": getPathname({ locale: "fr", href: "/privacy-policy" }),
      },
    },
  };
}

export default async function PrivacyPolicyPage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  setRequestLocale(locale);
  const t = await getTranslations({ locale, namespace: "privacyPolicy" });

  return (
    <PageMessagesProvider namespaces={["privacyPolicy"]}>
      <div className="min-h-screen py-16 md:py-32">
        <div className="container mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
          <h1 className="mb-8 font-bold text-3xl text-white sm:text-4xl md:mb-12 md:text-5xl">
            {t("title")}
          </h1>
          <p className="mb-8 text-neutral-400 text-sm md:mb-12">
            {t("lastUpdated")}
          </p>

          <div className="space-y-10 text-neutral-200 leading-relaxed">
            <section>
              <h2 className="mb-4 font-bold text-white text-xl md:text-2xl">
                {t("introTitle")}
              </h2>
              <p className="text-sm md:text-base">{t("introContent")}</p>
            </section>

            <section>
              <h2 className="mb-4 font-bold text-white text-xl md:text-2xl">
                {t("collectTitle")}
              </h2>
              <h3 className="mb-3 font-semibold text-lg text-white">
                {t("collectProvidedTitle")}
              </h3>
              <ul className="mb-4 list-inside list-disc space-y-2 text-sm md:text-base">
                <li>{t("collectProvidedItem1")}</li>
                <li>{t("collectProvidedItem2")}</li>
                <li>{t("collectProvidedItem3")}</li>
                <li>{t("collectProvidedItem4")}</li>
              </ul>
              <h3 className="mb-3 font-semibold text-lg text-white">
                {t("collectAutoTitle")}
              </h3>
              <ul className="list-inside list-disc space-y-2 text-sm md:text-base">
                <li>{t("collectAutoItem1")}</li>
                <li>{t("collectAutoItem2")}</li>
                <li>{t("collectAutoItem3")}</li>
                <li>{t("collectAutoItem4")}</li>
              </ul>
            </section>

            <section>
              <h2 className="mb-4 font-bold text-white text-xl md:text-2xl">
                {t("useTitle")}
              </h2>
              <ul className="list-inside list-disc space-y-2 text-sm md:text-base">
                <li>{t("useItem1")}</li>
                <li>{t("useItem2")}</li>
                <li>{t("useItem3")}</li>
                <li>{t("useItem4")}</li>
                <li>{t("useItem5")}</li>
                <li>{t("useItem6")}</li>
              </ul>
            </section>

            <section>
              <h2 className="mb-4 font-bold text-white text-xl md:text-2xl">
                {t("sharingTitle")}
              </h2>
              <p className="mb-4 text-sm md:text-base">{t("sharingIntro")}</p>
              <ul className="list-inside list-disc space-y-2 text-sm md:text-base">
                <li>
                  <strong className="text-white">
                    {t("sharingItem1Label")}
                  </strong>{" "}
                  {t("sharingItem1Content")}
                </li>
                <li>
                  <strong className="text-white">
                    {t("sharingItem2Label")}
                  </strong>{" "}
                  {t("sharingItem2Content")}
                </li>
                <li>
                  <strong className="text-white">
                    {t("sharingItem3Label")}
                  </strong>{" "}
                  {t("sharingItem3Content")}
                </li>
              </ul>
            </section>

            <section>
              <h2 className="mb-4 font-bold text-white text-xl md:text-2xl">
                {t("cookiesTitle")}
              </h2>
              <p className="mb-4 text-sm md:text-base">{t("cookiesIntro")}</p>
              <ul className="list-inside list-disc space-y-2 text-sm md:text-base">
                <li>{t("cookiesItem1")}</li>
                <li>{t("cookiesItem2")}</li>
                <li>{t("cookiesItem3")}</li>
              </ul>
              <p className="mt-4 text-sm md:text-base">{t("cookiesNote")}</p>
            </section>

            <section>
              <h2 className="mb-4 font-bold text-white text-xl md:text-2xl">
                {t("rightsTitle")}
              </h2>
              <p className="mb-4 text-sm md:text-base">{t("rightsIntro")}</p>
              <ul className="list-inside list-disc space-y-2 text-sm md:text-base">
                <li>
                  <strong className="text-white">
                    {t("rightsAccessLabel")}
                  </strong>{" "}
                  {t("rightsAccessContent")}
                </li>
                <li>
                  <strong className="text-white">
                    {t("rightsRectificationLabel")}
                  </strong>{" "}
                  {t("rightsRectificationContent")}
                </li>
                <li>
                  <strong className="text-white">
                    {t("rightsErasureLabel")}
                  </strong>{" "}
                  {t("rightsErasureContent")}
                </li>
                <li>
                  <strong className="text-white">
                    {t("rightsPortabilityLabel")}
                  </strong>{" "}
                  {t("rightsPortabilityContent")}
                </li>
                <li>
                  <strong className="text-white">
                    {t("rightsObjectionLabel")}
                  </strong>{" "}
                  {t("rightsObjectionContent")}
                </li>
                <li>
                  <strong className="text-white">
                    {t("rightsWithdrawLabel")}
                  </strong>{" "}
                  {t("rightsWithdrawContent")}
                </li>
              </ul>
              <p className="mt-4 text-sm md:text-base">
                {t("rightsContact")}{" "}
                <a
                  className="text-[#FD105E] hover:underline"
                  href="mailto:privacy@elevaseo.com"
                >
                  privacy@elevaseo.com
                </a>
                .
              </p>
            </section>

            <section>
              <h2 className="mb-4 font-bold text-white text-xl md:text-2xl">
                {t("retentionTitle")}
              </h2>
              <p className="text-sm md:text-base">{t("retentionContent")}</p>
            </section>

            <section>
              <h2 className="mb-4 font-bold text-white text-xl md:text-2xl">
                {t("securityTitle")}
              </h2>
              <p className="text-sm md:text-base">{t("securityContent")}</p>
            </section>

            <section>
              <h2 className="mb-4 font-bold text-white text-xl md:text-2xl">
                {t("childrenTitle")}
              </h2>
              <p className="text-sm md:text-base">{t("childrenContent")}</p>
            </section>

            <section>
              <h2 className="mb-4 font-bold text-white text-xl md:text-2xl">
                {t("changesTitle")}
              </h2>
              <p className="text-sm md:text-base">{t("changesContent")}</p>
            </section>

            <section>
              <h2 className="mb-4 font-bold text-white text-xl md:text-2xl">
                {t("contactTitle")}
              </h2>
              <p className="text-sm md:text-base">
                {t("contactContent")}{" "}
                <a
                  className="text-[#FD105E] hover:underline"
                  href="mailto:privacy@elevaseo.com"
                >
                  privacy@elevaseo.com
                </a>
              </p>
            </section>
          </div>
        </div>
      </div>
    </PageMessagesProvider>
  );
}