import { cn } from "@/lib/utils";
import { getLocale, getTranslations } from "next-intl/server";
import {
  localeBodyClass,
  localeBodyWeightClass,
  localeHeadingClass,
} from "@/lib/locale-fonts";

export default async function TermsPage() {
  const t = await getTranslations("Terms");
  const locale = await getLocale();
  const items = t.raw("items");

  const bodyFont = localeBodyClass(locale);
  const bodyWeight = localeBodyWeightClass(locale);

  return (
    <div className="bg-primary-foreground flex flex-col items-center px-5 py-10 md:py-20 lg:px-20 xl:px-45">
      <div className="w-full max-w-6xl">
        <h1
          className={cn(
            "mt-6 text-center text-3xl tracking-[0.04em] text-neutral-700 uppercase",
            localeHeadingClass(locale),
          )}
        >
          {t("title")}
        </h1>

        <div className={cn("mt-8", bodyFont)}>
          <p className="text-sm font-bold text-neutral-700 md:text-base">
            {t("effectiveDate")}
          </p>
          <p
            className={cn(
              "mt-4 text-sm leading-7 text-neutral-600 md:text-base",
              bodyWeight,
            )}
          >
            {t("description")}
          </p>

          <ul className="mt-8 flex flex-col gap-6">
            {items.map((item, index) => (
              <li key={index}>
                <h2 className="text-sm font-bold text-neutral-700 md:text-base">
                  {index + 1}. {item.title}
                </h2>

                <p
                  className={cn(
                    "mt-2 text-sm leading-7 text-neutral-600 md:text-base",
                    bodyWeight,
                  )}
                >
                  {item.description}
                </p>

                {item.subs?.length > 0 && (
                  <ul className="mt-2 list-disc pl-5">
                    {item.subs.map((sub, subIndex) => (
                      <li
                        key={subIndex}
                        className={cn(
                          "text-sm leading-7 text-neutral-600 md:text-base",
                          bodyWeight,
                        )}
                      >
                        {sub}
                      </li>
                    ))}
                  </ul>
                )}

                {item.description2 && (
                  <p
                    className={cn(
                      "mt-2 text-sm leading-7 text-neutral-600 md:text-base",
                      bodyWeight,
                    )}
                  >
                    {item.description2}
                  </p>
                )}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
}