"use client";
import { useTranslation } from "react-i18next";
import { useLanguage } from "@/store/language-context";

import Swiper from "@/ui/swiper";
import { SwiperSlide } from "swiper/react";
import "swiper/css/pagination";

import Image from "@/ui/image";
import logo from "@/assets/used-icons/IvoryGold.svg";
import img1 from "@/assets/used-icons/image-1.png";
import img2 from "@/assets/used-icons/image-2.png";
import img3 from "@/assets/used-icons/image-3.png";
import img4 from "@/assets/used-icons/image-4.png";
import img5 from "@/assets/used-icons/image-5.png";
import img6 from "@/assets/used-icons/image-6.png";
import img7 from "@/assets/used-icons/image-7.png";
import img8 from "@/assets/used-icons/image-8.png";
import img9 from "@/assets/used-icons/image-9.png";
import img10 from "@/assets/used-icons/image-10.png";
import img11 from "@/assets/used-icons/image-11.jpeg";
import img12 from "@/assets/used-icons/image-12.png";
import img13 from "@/assets/used-icons/image-13.png";
import img14 from "@/assets/used-icons/image-14.png";
import img15 from "@/assets/used-icons/image-15.png";
import img16 from "@/assets/used-icons/image-16.png";
import img17 from "@/assets/used-icons/image-17.png";
import img18 from "@/assets/used-icons/image-18.png";
import img19 from "@/assets/used-icons/image-19.png";
import img20 from "@/assets/used-icons/image-20.png";
import img21 from "@/assets/used-icons/image-21.png";
import img22 from "@/assets/used-icons/image-22.png";
import img23 from "@/assets/used-icons/image-23.png";

export default function Activities() {
  const { URL } = useLanguage();
  const { t } = useTranslation();
  const activities = [
    {
      id: 1,
      title: t("teamactivities.title1"),
      image: img1,
      desc: [
        t("teamactivities.desc1.desc1"),
        t("teamactivities.desc1.desc2"),
        t("teamactivities.desc1.desc3"),
        t("teamactivities.desc1.desc4"),
      ],
      outcomes: [
        t("teamactivities.outcomes1.desc1"),
        t("teamactivities.outcomes1.desc2"),
        t("teamactivities.outcomes1.desc3"),
        t("teamactivities.outcomes1.desc4"),
      ],
      benfites: [
        t("teamactivities.benfites1.desc1"),
        t("teamactivities.benfites1.desc2"),
        t("teamactivities.benfites1.desc3"),
        t("teamactivities.benfites1.desc4"),
      ],
    },
    {
      id: 2,
      title: t("teamactivities.title2"),
      image: img2,
      desc: [
        t("teamactivities.desc2.desc1"),
        t("teamactivities.desc2.desc2"),
        t("teamactivities.desc2.desc3"),
        t("teamactivities.desc2.desc4"),
      ],
      outcomes: [
        t("teamactivities.outcomes2.desc1"),
        t("teamactivities.outcomes2.desc2"),
        t("teamactivities.outcomes2.desc3"),
        t("teamactivities.outcomes2.desc4"),
        t("teamactivities.outcomes2.desc5"),
      ],
      benfites: [
        t("teamactivities.benfites2.desc1"),
        t("teamactivities.benfites2.desc2"),
        t("teamactivities.benfites2.desc3"),
      ],
    },
    {
      id: 3,
      title: t("teamactivities.title3"),
      image: img3,
      desc: [t("teamactivities.desc3.desc1"), t("teamactivities.desc3.desc2")],
      outcomes: [
        t("teamactivities.outcomes3.desc1"),
        t("teamactivities.outcomes3.desc2"),
        t("teamactivities.outcomes3.desc3"),
        t("teamactivities.outcomes3.desc4"),
      ],
      benfites: [
        t("teamactivities.benfites3.desc1"),
        t("teamactivities.benfites3.desc2"),
        t("teamactivities.benfites3.desc3"),
      ],
    },
    {
      id: 4,
      title: t("teamactivities.title4"),
      image: img4,
      desc: [
        t("teamactivities.desc4.desc1"),
        t("teamactivities.desc4.desc2"),
        t("teamactivities.desc4.desc3"),
        t("teamactivities.desc4.desc4"),
      ],
      outcomes: [
        t("teamactivities.outcomes4.desc1"),
        t("teamactivities.outcomes4.desc2"),
        t("teamactivities.outcomes4.desc3"),
        t("teamactivities.outcomes4.desc4"),
      ],
      benfites: [
        t("teamactivities.benfites4.desc1"),
        t("teamactivities.benfites4.desc2"),
        t("teamactivities.benfites4.desc3"),
      ],
    },
    {
      id: 5,
      title: t("teamactivities.title5"),
      image: img5,
      desc: [
        t("teamactivities.desc5.desc1"),
        t("teamactivities.desc5.desc2"),
        t("teamactivities.desc5.desc3"),
        t("teamactivities.desc5.desc4"),
      ],
      outcomes: [
        t("teamactivities.outcomes5.desc1"),
        t("teamactivities.outcomes5.desc2"),
        t("teamactivities.outcomes5.desc3"),
        t("teamactivities.outcomes5.desc4"),
      ],
      benfites: [
        t("teamactivities.benfites5.desc1"),
        t("teamactivities.benfites5.desc2"),
        t("teamactivities.benfites5.desc3"),
      ],
    },
    {
      id: 6,
      title: t("teamactivities.title6"),
      image: img6,
      desc: [t("teamactivities.desc6.desc1"), t("teamactivities.desc6.desc2")],
      outcomes: [
        t("teamactivities.outcomes6.desc1"),
        t("teamactivities.outcomes6.desc2"),
        t("teamactivities.outcomes6.desc3"),
        t("teamactivities.outcomes6.desc4"),
      ],
      benfites: [
        t("teamactivities.benfites6.desc1"),
        t("teamactivities.benfites6.desc2"),
        t("teamactivities.benfites6.desc3"),
      ],
    },
    {
      id: 7,
      title: t("teamactivities.title7"),
      image: img7,
      desc: [t("teamactivities.desc7.desc1"), t("teamactivities.desc7.desc2")],
      outcomes: [
        t("teamactivities.outcomes7.desc1"),
        t("teamactivities.outcomes7.desc2"),
        t("teamactivities.outcomes7.desc3"),

      ],
      benfites: [
        t("teamactivities.benfites7.desc1"),
        t("teamactivities.benfites7.desc2"),
        t("teamactivities.benfites7.desc3"),
      ],
    },
    {
      id: 8,
      title: t("teamactivities.title8"),
      image: img8,
      desc: [t("teamactivities.desc8.desc1"), t("teamactivities.desc8.desc2")],
      outcomes: [
        t("teamactivities.outcomes8.desc1"),
        t("teamactivities.outcomes8.desc2"),
        t("teamactivities.outcomes8.desc3"),
        t("teamactivities.outcomes8.desc4"),
      ],
      benfites: [
        t("teamactivities.benfites8.desc1"),
        t("teamactivities.benfites8.desc2"),
        t("teamactivities.benfites8.desc3"),
      ],
    },
    {
      id: 9,
      title: t("teamactivities.title9"),
      image: img9,
      desc: [t("teamactivities.desc9.desc1"), t("teamactivities.desc9.desc2")],
      outcomes: [t("teamactivities.outcomes9.desc1")],
      benfites: [
        t("teamactivities.benfites8.desc1"),
        t("teamactivities.benfites8.desc2"),
        t("teamactivities.benfites8.desc3"),
      ],
    },
    {
      id: 10,
      title: t("teamactivities.title10"),
      image: img10,
      desc: [
        t("teamactivities.desc10.desc1"),
        t("teamactivities.desc10.desc2"),
      ],
      outcomes: [
        t("teamactivities.outcomes10.desc1"),
        t("teamactivities.outcomes10.desc2"),
        t("teamactivities.outcomes10.desc3"),
      ],
      benfites: [
        t("teamactivities.benfites8.desc1"),
        t("teamactivities.benfites8.desc2"),
        t("teamactivities.benfites8.desc3"),
      ],
    },
    {
      id: 11,
      title: t("teamactivities.title11"),
      image: img11,
      desc: [
        t("teamactivities.desc11.desc1"),
        t("teamactivities.desc11.desc2"),
      ],
      outcomes: [t("teamactivities.outcomes11.desc1")],
      benfites: [
        t("teamactivities.benfites8.desc1"),
        t("teamactivities.benfites8.desc2"),
        t("teamactivities.benfites8.desc3"),
      ],
    },
    {
      id: 12,
      title: t("teamactivities.title12"),
      image: img12,
      desc: [
        t("teamactivities.desc12.desc1"),
        t("teamactivities.desc12.desc2"),
      ],
      outcomes: [
        t("teamactivities.outcomes12.desc1"),
        t("teamactivities.outcomes12.desc1")
      ],
      benfites: [
        t("teamactivities.benfites8.desc1"),
        t("teamactivities.benfites8.desc2"),
        t("teamactivities.benfites8.desc3"),
      ],
    },
    {
      id: 13,
      title: t("teamactivities.title13"),
      image: img13,
      desc: [
        t("teamactivities.desc13.desc1"),
        t("teamactivities.desc13.desc2"),
      ],
      outcomes: [
        t("teamactivities.outcomes13.desc1"),
        t("teamactivities.outcomes13.desc2"),
        t("teamactivities.outcomes13.desc3")
      ],
      benfites: [
        t("teamactivities.benfites8.desc1"),
        t("teamactivities.benfites8.desc2"),
        t("teamactivities.benfites8.desc3"),
      ],
    },
    {
      id: 14,
      title: t("teamactivities.title14"),
      image: img14,
      desc: [
        t("teamactivities.desc14.desc1"),
        t("teamactivities.desc14.desc2"),
      ],
      outcomes: [
        t("teamactivities.outcomes14.desc1"),
        t("teamactivities.outcomes14.desc2"),
        t("teamactivities.outcomes14.desc3")
      ],
      benfites: [
        t("teamactivities.benfites8.desc1"),
        t("teamactivities.benfites8.desc2"),
        t("teamactivities.benfites8.desc3"),
      ],
    },
    {
      id: 15,
      title: t("teamactivities.title15"),
      image: img15,
      desc: [
        t("teamactivities.desc15.desc1"),
        t("teamactivities.desc15.desc2"),
      ],
      outcomes: [
        t("teamactivities.outcomes15.desc1"),
        t("teamactivities.outcomes15.desc2"),
        t("teamactivities.outcomes15.desc3")
      ],
      benfites: [
        t("teamactivities.benfites8.desc1"),
        t("teamactivities.benfites8.desc2"),
        t("teamactivities.benfites8.desc3"),
      ],
    },
    {
      id: 16,
      title: t("teamactivities.title16"),
      image: img16,
      desc: [
        t("teamactivities.desc16.desc1"),
        t("teamactivities.desc16.desc2"),
        t("teamactivities.desc16.desc3"),
      ],
      outcomes: [
        t("teamactivities.outcomes16.desc1"),
        t("teamactivities.outcomes16.desc2"),
        t("teamactivities.outcomes16.desc3")
      ],
      benfites: [
        t("teamactivities.benfites8.desc1"),
        t("teamactivities.benfites8.desc2"),
        t("teamactivities.benfites8.desc3"),
      ],
    },
    {
      id: 17,
      title: t("teamactivities.title17"),
      image: img17,
      desc: [
        t("teamactivities.desc17.desc1"),
        t("teamactivities.desc17.desc2"),

      ],
      outcomes: [
        t("teamactivities.outcomes17.desc1"),
        t("teamactivities.outcomes17.desc2"),
        t("teamactivities.outcomes17.desc3")
      ],
      benfites: [
        t("teamactivities.benfites8.desc1"),
        t("teamactivities.benfites8.desc2"),
        t("teamactivities.benfites8.desc3"),
      ],
    },
    {
      id: 18,
      title: t("teamactivities.title18"),
      image: img18,
      desc: [
        t("teamactivities.desc18.desc1"),
        t("teamactivities.desc18.desc2"),

      ],
      outcomes: [
        t("teamactivities.outcomes18.desc1"),
        t("teamactivities.outcomes18.desc2"),
        t("teamactivities.outcomes18.desc3")
      ],
      benfites: [
        t("teamactivities.benfites8.desc1"),
        t("teamactivities.benfites8.desc2"),
        t("teamactivities.benfites8.desc3"),
      ],
    },
    {
      id: 19,
      title: t("teamactivities.title19"),
      image: img19,
      desc: [
        t("teamactivities.desc19.desc1"),
        t("teamactivities.desc19.desc2"),

      ],
      outcomes: [
        t("teamactivities.outcomes19.desc1"),
        t("teamactivities.outcomes19.desc2"),
        t("teamactivities.outcomes19.desc3"),
        t("teamactivities.outcomes19.desc4")
      ],
      benfites: [
        t("teamactivities.benfites8.desc1"),
        t("teamactivities.benfites8.desc2"),
        t("teamactivities.benfites8.desc3"),
      ],
    },
    {
      id: 20,
      title: t("teamactivities.title20"),
      image: img20,
      desc: [
        t("teamactivities.desc20.desc1"),
        t("teamactivities.desc20.desc2"),

      ],
      outcomes: [
        t("teamactivities.outcomes20.desc1"),
        t("teamactivities.outcomes20.desc2"),
        t("teamactivities.outcomes20.desc3"),
        t("teamactivities.outcomes20.desc4")
      ],
      benfites: [
        t("teamactivities.benfites8.desc1"),
        t("teamactivities.benfites8.desc2"),
        t("teamactivities.benfites8.desc3"),
      ],
    },
    {
      id: 21,
      title: t("teamactivities.title21"),
      image: img21,
      desc: [
        t("teamactivities.desc21.desc1"),
        t("teamactivities.desc21.desc2"),

      ],
      outcomes: [
        t("teamactivities.outcomes21.desc1"),
        t("teamactivities.outcomes21.desc2"),
        t("teamactivities.outcomes21.desc3"),
        t("teamactivities.outcomes21.desc4")
      ],
      benfites: [
        t("teamactivities.benfites8.desc1"),
        t("teamactivities.benfites8.desc2"),
        t("teamactivities.benfites8.desc3"),
      ],
    },
    {
      id: 22,
      title: t("teamactivities.title22"),
      image: img22,
      desc: [
        t("teamactivities.desc22.desc1"),
        t("teamactivities.desc22.desc2"),

      ],
      outcomes: [
        t("teamactivities.outcomes22.desc1"),
        t("teamactivities.outcomes22.desc2"),
        t("teamactivities.outcomes22.desc3"),
        t("teamactivities.outcomes22.desc4")
      ],
      benfites: [
        t("teamactivities.benfites8.desc1"),
        t("teamactivities.benfites8.desc2"),
        t("teamactivities.benfites8.desc3"),
      ],
    },
    {
      id: 23,
      title: t("teamactivities.title22"),
      image: img23,
      desc: [
        t("teamactivities.desc23.desc1"),
        t("teamactivities.desc23.desc2"),

      ],
      outcomes: [
        t("teamactivities.outcomes23.desc1"),
        t("teamactivities.outcomes23.desc2"),
        t("teamactivities.outcomes23.desc3"),
        t("teamactivities.outcomes23.desc4")
      ],
      benfites: [
        t("teamactivities.benfites8.desc1"),
        t("teamactivities.benfites8.desc2"),
        t("teamactivities.benfites8.desc3"),
      ],
    },
  ];

  const swiperProps = {
    loop: true,
    slidesPerView: 1,
    pagination: {
      el: ".custom-pagination",
      clickable: true
    }
  };

  return (
    <section>
      <div className="flex justify-center">
        <h2 className="services-header after:-bottom-2 after:w-20 flex justify-center">
          {t("teamactivities.activities")}
        </h2>
      </div>
      <section className="relative">
        <Swiper
          id={'building-teams'}
          key={URL}
          props={swiperProps}
        >
          {activities?.map((achieve, i: number) => (
            <SwiperSlide key={achieve?.id || i}>
              <div className="grid lg:grid-cols-[54%_35%] gap-5 overflow-hidden md:grid-cols-1 w-full px-4 py-2 items-center">
                <div className="  border rounded-lg p-3 lg:min-h-[43rem]">
                  <div className="flex justify-start">
                    <h2 className="services-header  !text-md after:-bottom-2 after:w-20 flex !m-1 ">
                      {achieve?.title}{" "}
                    </h2>
                  </div>
                  <span className="bg-secondary-tw block w-max mb-2 mt-2 text-white p-3 border rounded ">
                    {t("teamactivities.activity-description1")}:
                  </span>
                  <div className="">
                    <ul className="text-common-text sm:text-xs md:text-lg text-sm mt-2">
                      {achieve.desc.map((item, index) => (
                        <li key={index} className="block text-md mb-1">
                          {item}
                        </li>
                      ))}
                    </ul>
                    <span className="bg-secondary-tw block w-max mb-2 mt-2 text-white p-3 border rounded ">
                      {t("teamactivities.activity-description2")}:
                    </span>
                    <ul className="text-common-text sm:text-xs md:text-lg text-sm mt-2">
                      {achieve.outcomes.map((item, index) => (
                        <li key={index} className="flex gap-2">
                          <img src={logo} alt="" />
                          {item}
                        </li>
                      ))}
                    </ul>
                    <span className="bg-secondary-tw block w-max mb-2 mt-2 text-white p-3 border rounded ">
                      {t("teamactivities.activity-description3")}:
                    </span>
                    <ul className="text-common-text sm:text-xs md:text-lg text-sm mt-2">
                      {achieve.benfites.map((item, index) => (
                        <li key={index} className="flex gap-2">
                          <img src={logo} alt="" />
                          {item}
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>

                <div className="h-full w-full lg:h-[43rem] flex justify-center items-center">
                  <Image
                    src={achieve?.image}
                    alt={achieve?.title}
                    className={"h-auto object-cover w-full rounded-md"}
                  />
                </div>
              </div>
            </SwiperSlide>
          ))}
        </Swiper>

        <div className="custom-pagination my-4 text-center lg:text-center lg:me-52 2xl:me-60 *:mx-1" />

      </section>
    </section>
  );
}