import { useHover } from 'usehooks-ts';
import { Title } from '../../ui/Title';
import { useRef } from 'react';
import { AppearanceHr } from '../../ui/AppearanceHr';
import { motion } from 'framer-motion';
import { VrBacklightIcon } from '../icons/VrBacklightIcon';

export function Trainings() {
  return (
    <div
      itemScope
      itemType="http://schema.org/TrainingsEquipments"
      id="trainings"
      className="lg:py-[70px] py-16"
    >
      <Title className="2xl:mb-[77px] lg:mb-14 mb-6 lg:w-4/5 min-[2500px]:w-[70%]">
        Предлагаем различные
        <span className="text-gradient">
          {' '}
          варианты комплектации тренажеров,{' '}
        </span>
        основываясь на специфике вашего тренировочного процесса
      </Title>
      <div
        itemType="http://schema.org/TrainingsEquipmentsFeatures"
        itemScope
        itemProp="features"
        className="sm:grid lg:grid-cols-12 grid-cols-8 gap-x-4"
      >
        <TrainingsFeature
          order={1}
          src="/images/trainings/vr.png"
          title="VR - тренажеры"
          text="Обучение навыкам работы с инструментами и оборудованием. Пешее хождение по территории или между оборудованием."
        />
        <TrainingsFeature
          order={2}
          src="/images/trainings/stand.png"
          title="Cтенды"
          text="Отработки навыков вождения и управления техникой. Работа с панелями управления."
        />
        <TrainingsFeature
          order={3}
          src="/images/trainings/classroom.png"
          title="Учебные классы"
          text="Оснащение учебных классов и центров всем необходимым для современного обучения и профессиональной подготовки кадров."
        />
        <TrainingsFeature
          order={4}
          src="/images/trainings/custom.png"
          title="Полная кастомизация"
          text="Разработка и производство тренажёров под ваш индивидуальный запрос и формат."
        />
      </div>
    </div>
  );
}

function TrainingsFeature({
  src,
  title,
  text,
  order,
}: {
  title: string;
  text: string;
  src: string;
  order: number;
}) {
  const ref = useRef<HTMLDivElement>(null);
  const hovered = useHover(ref);

  return (
    <div
      itemProp={title}
      itemScope
      itemType={`http://schema.org/${title}`}
      className="lg:col-start-1 group col-span-full"
    >
      <AppearanceHr delay={0.5 * order} />
      <div
        ref={ref}
        className="lg:first:h-[200px] lg:last:h-[200px] lg:h-[176px] sm:flex max-sm:space-y-[42px] items-stretch justify-between sm:py-10 max-sm:pt-5"
      >
        <div className="sm:space-y-4 lg:w-1/3 sm:w-1/2 col-span-1">
          <h3 className="max-sm:mb-2 h3 font-medium">{title}</h3>
          <p className="l-text opacity-60">{text}</p>
        </div>
        <div className="sm:hidden flex justify-between items-end">
          <p className="text-[#52587A] m-text mb-5">[0{order}]</p>
          <div className="flex flex-col items-center">
            <img src={src} alt={title} className="relative z-30 w-[50vw]" />
            <VrBacklightIcon className="absolute w-[36vw] h-fit" />
          </div>
        </div>
        <div className="md:flex hidden">
          <motion.div
            initial={{ opacity: 0, scale: 0.8 }}
            animate={{ opacity: +hovered, scale: 1 }}
            transition={{
              duration: 0.4,
            }}
            className="lg:flex hidden justify-center items-center -my-10"
          >
            <img
              src={src}
              className="relative z-20 h-[calc(27vw*0.6)]"
              alt={title}
            />
            <VrBacklightIcon className="absolute w-[24vw]" />
          </motion.div>
          <div className="lg:hidden flex justify-center items-center">
            <img
              src={src}
              className="w-[27vw] relative z-20 h-[calc(27vw*0.6)]"
              alt={title}
            />
            <VrBacklightIcon className="absolute w-[24vw]" />
          </div>
          <p className="text-[#52587A] lg:font-medium m-text">[0{order}]</p>
        </div>
        <div className="w-[calc(280/768*100%)] max-sm:hidden md:hidden flex justify-center items-center">
          <img src={src} className="relative z-20" alt={title} />
          <VrBacklightIcon className="absolute w-[24vw]" />
        </div>
        <p className="text-[#52587A] lg:font-medium m-text max-sm:hidden md:hidden">
          [0{order}]
        </p>
      </div>
      <AppearanceHr
        className="group-last:block hidden"
        delay={0.5 * (order + 1)}
      />
    </div>
  );
}
