import { cn } from "@/lib/utils";
import Image from "next/image";
import { getLocale, getTranslations } from "next-intl/server";
import ScheduleIcon from "../../../assets/icons/schedule.svg";
import BoostIcon from "../../../assets/icons/boost.svg";
import PromotionIcon from "../../../assets/icons/promotion.svg";
import HeartIcon from "../../../assets/icons/heart.svg";
import CardIcon from "../../../assets/icons/card.svg";
import AnalyticsIcon from "../../../assets/icons/analytics.svg";
import {
  localeBodyClass,
  localeBodyWeightClass,
  localeHeadingClass,
} from "@/lib/locale-fonts";

const iconMap = {
  schedule: ScheduleIcon,
  visibility: BoostIcon,
  promotion: PromotionIcon,
  retention: HeartIcon,
  payment: CardIcon,
  analytics: AnalyticsIcon,
};

export default async function HeroSection() {
  const t = await getTranslations("Solutions.hero");
  const locale = await getLocale();
  const items = t.raw("items");

  return (
    <div className="flex w-full flex-col items-center justify-center gap-6 px-5 py-10 md:py-20 lg:px-20">
      <h2
        className={cn(
          "text-center text-3xl leading-14 tracking-[0.04em] text-neutral-700 uppercase",
          localeHeadingClass(locale),
        )}
      >
        {t("title")}
      </h2>
      <p className="max-w-2xl text-center text-sm font-medium text-neutral-700 lg:text-lg">
        {t("description")}
      </p>

      <div className="mt-16 grid w-full grid-cols-1 gap-6 md:grid-cols-2">
        {items.map((item, index) => {
          const currentIcon = iconMap[item.type] || ScheduleIcon;

          return (
            <div
              key={index}
              className="flex flex-col items-start gap-5 rounded-2xl bg-white p-6 shadow-md transition-all hover:cursor-default hover:shadow-xl md:flex-row lg:p-8"
            >
              <div className="flex h-16 w-16 shrink-0 items-center justify-center self-center rounded-full bg-slate-50">
                <Image
                  src={currentIcon}
                  alt={item.title}
                  width={32}
                  height={32}
                  className="block h-8 w-8"
                />
              </div>

              <div className="flex flex-col gap-2 pt-1">
                <h3
                  className={cn(
                    "text-chaosBlack text-lg font-semibold",
                    localeBodyClass(locale),
                  )}
                >
                  {item.title}
                </h3>
                <p
                  className={cn(
                    "text-sm leading-7 text-black md:text-lg",
                    localeBodyClass(locale),
                    localeBodyWeightClass(locale),
                  )}
                >
                  {item.description}
                </p>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}