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: "/terms" });
  return {
    title: t("termsTitle"),
    description: t("termsDescription"),
    alternates: {
      canonical: pathname,
      languages: {
        fr: getPathname({ locale: "fr", href: "/terms" }),
        en: getPathname({ locale: "en", href: "/terms" }),
        "x-default": getPathname({ locale: "fr", href: "/terms" }),
      },
    },
  };
}

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

  return (
    <PageMessagesProvider namespaces={["terms"]}>
      <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("agreementTitle")}
              </h2>
              <p className="text-sm md:text-base">{t("agreementContent")}</p>
            </section>

            <section>
              <h2 className="mb-4 font-bold text-white text-xl md:text-2xl">
                {t("servicesTitle")}
              </h2>
              <p className="mb-4 text-sm md:text-base">{t("servicesIntro")}</p>
              <ul className="list-inside list-disc space-y-2 text-sm md:text-base">
                <li>{t("servicesItem1")}</li>
                <li>{t("servicesItem2")}</li>
                <li>{t("servicesItem3")}</li>
                <li>{t("servicesItem4")}</li>
                <li>{t("servicesItem5")}</li>
              </ul>
            </section>

            <section>
              <h2 className="mb-4 font-bold text-white text-xl md:text-2xl">
                {t("engagementTitle")}
              </h2>
              <p className="mb-4 text-sm md:text-base">
                {t("engagementIntro")}
              </p>
              <ul className="list-inside list-disc space-y-2 text-sm md:text-base">
                <li>{t("engagementItem1")}</li>
                <li>{t("engagementItem2")}</li>
                <li>{t("engagementItem3")}</li>
                <li>{t("engagementItem4")}</li>
                <li>{t("engagementItem5")}</li>
              </ul>
              <p className="mt-4 text-sm md:text-base">{t("engagementNote")}</p>
            </section>

            <section>
              <h2 className="mb-4 font-bold text-white text-xl md:text-2xl">
                {t("paymentTitle")}
              </h2>
              <ul className="list-inside list-disc space-y-2 text-sm md:text-base">
                <li>{t("paymentItem1")}</li>
                <li>{t("paymentItem2")}</li>
                <li>{t("paymentItem3")}</li>
                <li>{t("paymentItem4")}</li>
                <li>{t("paymentItem5")}</li>
              </ul>
            </section>

            <section>
              <h2 className="mb-4 font-bold text-white text-xl md:text-2xl">
                {t("ipTitle")}
              </h2>
              <h3 className="mb-3 font-semibold text-lg text-white">
                {t("ipOurContentTitle")}
              </h3>
              <p className="mb-4 text-sm md:text-base">
                {t("ipOurContentContent")}
              </p>
              <h3 className="mb-3 font-semibold text-lg text-white">
                {t("ipClientTitle")}
              </h3>
              <p className="text-sm md:text-base">{t("ipClientContent")}</p>
            </section>

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

            <section>
              <h2 className="mb-4 font-bold text-white text-xl md:text-2xl">
                {t("warrantiesTitle")}
              </h2>
              <p className="mb-4 text-sm md:text-base">
                {t("warrantiesIntro")}
              </p>
              <ul className="list-inside list-disc space-y-2 text-sm md:text-base">
                <li>{t("warrantiesItem1")}</li>
                <li>{t("warrantiesItem2")}</li>
                <li>{t("warrantiesItem3")}</li>
              </ul>
              <p className="mt-4 text-sm md:text-base">{t("warrantiesNote")}</p>
            </section>

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

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

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

            <section>
              <h2 className="mb-4 font-bold text-white text-xl md:text-2xl">
                {t("changesToTermsTitle")}
              </h2>
              <p className="text-sm md:text-base">
                {t("changesToTermsContent")}
              </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:legal@elevaseo.com"
                >
                  legal@elevaseo.com
                </a>
              </p>
            </section>
          </div>
        </div>
      </div>
    </PageMessagesProvider>
  );
}