import LongArrowIcon from "../../icons/LongArrowIcon";
import ShadowIcon from "../../icons/ShadowIcon";

const images = [
  { id: "services-2", url: "/images/services-2.png" },
  { id: "services-3", url: "/images/services-3.png" },
  { id: "services-4", url: "/images/services-4.png" },
  { id: "services-5", url: "/images/services-5.png" },
  { id: "services-6", url: "/images/services-6.png" },
  { id: "services-7", url: "/images/services-7.png" },
  { id: "services-8", url: "/images/services-8.png" },
  { id: "services-9", url: "/images/services-9.png" },
  { id: "services-10", url: "/images/services-10.png" },
  { id: "services-11", url: "/images/services-11.png" },
  { id: "services-1", url: "/images/services-1.png" },
];

const Services = () => {
  const handleOnMouseEnter = (id: string) => {
    return () => {
      const image = document.getElementById(`services-${id}`);
      if (image) {
        image.style.opacity = "100%";
      }
    };
  };

  const handleOnMouseLeave = (id: string) => {
    return () => {
      const image = document.getElementById(`services-${id}`);
      if (image) {
        image.style.opacity = "0%";
      }
    };
  };

  return (
    <section className="flex py-16">
      <div className="grid grid-cols-3 border-white text-white justify-center mx-auto text-2xl uppercase gap-28">
        <div>
          <div className="font-bold flex gap-16">
            Что мы делаем
            <LongArrowIcon />
          </div>
          <div className="h-full relative px-12">
            {images.map((img) => (
              <img
                id={img.id}
                src={img.url}
                key={img.id}
                alt="картинка"
                className="absolute opacity-0 transition-opacity duration-300"
              />
            ))}
          </div>
        </div>
        <div className="flex flex-col gap-5">
          <div>По технологиям</div>
          <button
            className="text-left relative"
            onMouseEnter={handleOnMouseEnter("2")}
            onMouseLeave={handleOnMouseLeave("2")}
          >
            <div className="font-bold hover:text-[#E498FF] transition-all duration-300 w-fit">
              <ShadowIcon />
              VR
            </div>
            <div className="text-[#bca6ea] text-xl">Виртуальная реальность</div>
          </button>
          <button
            className="text-left relative"
            onMouseEnter={handleOnMouseEnter("3")}
            onMouseLeave={handleOnMouseLeave("3")}
          >
            <div className="font-bold hover:text-[#E498FF] transition-all duration-300">
              <ShadowIcon />
              AR
            </div>
            <div className="text-[#bca6ea] text-xl">Дополненная реальность</div>
          </button>
          <button
            className="text-left relative"
            onMouseEnter={handleOnMouseEnter("4")}
            onMouseLeave={handleOnMouseLeave("4")}
          >
            <div className="font-bold hover:text-[#E498FF] transition-all duration-300">
              <ShadowIcon />
              TOUCH-SCREEN
            </div>
            <div className="text-[#bca6ea] text-xl">
              3D графика для презентаций
            </div>
          </button>
          <button
            className="text-left relative"
            onMouseEnter={handleOnMouseEnter("5")}
            onMouseLeave={handleOnMouseLeave("5")}
          >
            <div className="font-bold hover:text-[#E498FF] transition-all duration-300">
              <ShadowIcon />
              WEB GL
            </div>
            <div className="text-[#bca6ea] text-xl">
              3D для сайта и мобильных приложений
            </div>
          </button>
          <button
            className="text-left relative"
            onMouseEnter={handleOnMouseEnter("6")}
            onMouseLeave={handleOnMouseLeave("6")}
          >
            <div className="font-bold hover:text-[#E498FF] transition-all duration-300">
              <ShadowIcon />
              KINECT REAL SENSE
            </div>
            <div className="text-[#bca6ea] text-xl">
              Презентации с бесконтактным управлением
            </div>
          </button>
          <button
            className="text-left relative"
            onMouseEnter={handleOnMouseEnter("7")}
            onMouseLeave={handleOnMouseLeave("7")}
          >
            <div className="font-bold hover:text-[#E498FF] transition-all duration-300">
              <ShadowIcon />
              Mobile Apps
            </div>
            <div className="text-[#bca6ea] text-xl">
              Мобильные приложения для бизнеса
            </div>
          </button>
        </div>
        <div className="flex flex-col gap-5">
          <div>По направлениям</div>
          <button
            className="text-left relative"
            onMouseEnter={handleOnMouseEnter("8")}
            onMouseLeave={handleOnMouseLeave("8")}
          >
            <div className="font-bold hover:text-[#E498FF] transition-all duration-300">
              <ShadowIcon />
              НЕДВИЖИМОСТЬ
            </div>
            <div className="text-[#bca6ea] text-xl">
              Покажет квартиры на этапе строительства
            </div>
          </button>
          <button
            className="text-left relative"
            onMouseEnter={handleOnMouseEnter("9")}
            onMouseLeave={handleOnMouseLeave("9")}
          >
            <div className="font-bold hover:text-[#E498FF] transition-all duration-300">
              <ShadowIcon />
              ТРЕНАЖЕРЫ
            </div>
            <div className="text-[#bca6ea] text-xl">
              Обучит работе с оборудованием
            </div>
          </button>
          <button
            className="text-left relative"
            onMouseEnter={handleOnMouseEnter("10")}
            onMouseLeave={handleOnMouseLeave("10")}
          >
            <div className="font-bold hover:text-[#E498FF] transition-all duration-300">
              <ShadowIcon />
              ТЕХНИКА
            </div>
            <div className="text-[#bca6ea] text-xl">
              Презентует техники в 3D
            </div>
          </button>
          <button
            className="text-left relative"
            onMouseEnter={handleOnMouseEnter("11")}
            onMouseLeave={handleOnMouseLeave("11")}
          >
            <div className="font-bold hover:text-[#E498FF] transition-all duration-300">
              <ShadowIcon />
              ВЫСТАВКИ
            </div>
            <div className="text-[#bca6ea] text-xl">
              Вовлечет посетителей стенда
            </div>
          </button>
          <button
            className="text-left relative"
            onMouseEnter={handleOnMouseEnter("1")}
            onMouseLeave={handleOnMouseLeave("1")}
          >
            <div className="font-bold hover:text-[#E498FF] transition-all duration-300">
              <ShadowIcon />
              ОНЛАЙН МЕРОПРИЯТИЯ
            </div>
            <div className="text-[#bca6ea] text-xl">
              Презентации с бесконтактным управлением
            </div>
          </button>
        </div>
      </div>
    </section>
  );
};

export default Services;
