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

export default async function WhyChooseSirius() {
  const t = await getTranslations("Home.whyChooseSirius");
  const locale = await getLocale();

  return (
    <div className="bg-white px-5 py-10 lg:px-20 lg:py-20 xl:px-45">
      <h2
        className={cn(
          "mb-8 text-center text-3xl tracking-[0.04em] text-black uppercase",
          localeHeadingClass(locale),
        )}
      >
        {t("title")}
      </h2>

      <div className="shadow-[0px_4px_4px_0px_#222A3509,0px_24px_68px_0px_#2F30370D,0px_2 mx-auto flex max-w-2xl flex-col rounded-2xl bg-white px-8 py-6 shadow-md">
        {t.raw("items").map((item, index) => (
          <div
            key={index}
            className="group hover:bg-primaryPurple-400 flex cursor-default flex-col items-start gap-1.5 rounded-xl px-3 py-6 transition-colors duration-200"
          >
            <div className="flex items-center gap-1">
              <div className="shrink-0">
                <CheckmarkCircleIcon className="h-6 w-6 text-black transition-colors duration-200 group-hover:text-white" />
              </div>
              <h3
                className={cn(
                  "font-bold text-neutral-900 uppercase transition-colors duration-200 group-hover:text-white",
                  locale === "hy" || locale === "am" ? "text-base" : "text-lg",
                )}
              >
                {item.title}
              </h3>
            </div>
            <p className="text-sm leading-relaxed text-gray-600 transition-colors duration-200 group-hover:text-white">
              {item.description}
            </p>
          </div>
        ))}
      </div>
    </div>
  );
}