import { useTranslations } from "next-intl";
import Image from "next/image";
import { SectionUnderline } from "../ui/section-underline";

interface GoalItem {
  key: string;
}

interface ValueCard {
  key: string;
  icon: string;
  bgColor: string;
}

const OurGoals = () => {
  const t = useTranslations("aboutUs.goals");

  const goals: GoalItem[] = [
    { key: "goal1" },
    { key: "goal2" },
    { key: "goal3" },
    { key: "goal4" },
    { key: "goal5" },
    { key: "goal6" },
  ];

  const valueCards: ValueCard[] = [
    {
      key: "values",
      icon: "/images/our-goals/user-octagon.svg",
      bgColor: "#f0fdff",
    },
    {
      key: "vision",
      icon: "/images/our-goals/lamp-on.svg",
      bgColor: "#eaffe5",
    },
    {
      key: "mission",
      icon: "/images/our-goals/sms-star.svg",
      bgColor: "#feffdd",
    },
  ];
  return (
    <section className="bg-white w-full px-4 sm:px-6 md:px-8 lg:px-12 xl:px-[120px] py-12 sm:py-16 md:py-20 lg:py-[64px]">
      <div className="flex flex-col gap-12 sm:gap-16 md:gap-20 lg:gap-[64px]">

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5 md:gap-6 w-full">
          {valueCards.map((card, index) => (
            <div
              key={index}
              className="flex flex-col items-start p-6 sm:p-7 md:p-8 rounded-3xl transition-transform hover:scale-[1.02]"
              style={{ backgroundColor: card.bgColor }}
            >
              <div className="flex flex-col gap-4 w-full">

                <div className="flex items-center gap-2 justify-center w-full">
                  <div className="relative w-6 h-6 shrink-0">
                    <Image
                      src={card.icon}
                      alt={t(`${card.key}.title`)}
                      fill
                      className="object-contain"
                    />
                  </div>
                  <h3 className="font-semibold text-[#202020] text-lg sm:text-xl leading-normal tracking-[-0.6px]">
                    {t(`${card.key}.title`)}
                  </h3>
                </div>

                <p className="font-normal text-[#202020] text-sm sm:text-base leading-normal tracking-[-0.32px] text-center w-full">
                  {t(`${card.key}.description`)}
                </p>
              </div>
            </div>
          ))}
        </div>

        <div className="flex flex-col lg:flex-row items-center gap-8 sm:gap-12 md:gap-16 lg:gap-[92px]">

          <div className="flex flex-col gap-4 sm:gap-5 md:gap-6 items-center lg:items-start w-full">

            <div className="flex flex-col gap-2 items-center justify-center">
              <h2 className="font-bold text-[#202020] text-2xl sm:text-3xl md:text-4xl lg:text-[40px] leading-[1.4] text-center lg:text-start">
                {t("title")}
              </h2>
              <div className="relative w-[180px] sm:w-[200px] md:w-[220px] h-[8px] sm:h-[10px]">
                <SectionUnderline className="w-full h-full" />
              </div>
            </div>

            <div className="flex flex-col items-center lg:items-start gap-4 w-full max-w-[497px]">

              <p className="font-normal text-[#646464] text-sm sm:text-base leading-[1.6] text-center lg:text-start">
                {t("description")}
              </p>

              <div className="flex flex-col gap-3 sm:gap-4 w-full">
                {goals.map((goal, index) => (
                  <div
                    key={index}
                    className="flex flex-row-reverse items-center gap-2 justify-start w-full"
                  >

                    <p className="font-medium text-[#202020] text-sm sm:text-base leading-[1.6] text-start flex-1">
                      {t(goal.key)}
                    </p>

                    <div className="w-1 h-4 bg-[#1c75bc] rounded-full shrink-0" />
                  </div>
                ))}
              </div>
            </div>
          </div>

          <div className="relative w-full max-w-[400px] sm:max-w-[500px] lg:max-w-[587px] h-[280px] sm:h-[340px] lg:h-[400px]">
            <Image
              src="/images/our-goals/Group.svg"
              alt="Target Goals Illustration"
              fill
              className="object-contain"
              priority
            />
          </div>
        </div>

      </div>
    </section>
  );
};

export default OurGoals;