export function Trainings() {
  return (
    <div className="desktop:py-[70px] desktop:px-10 mobile:py-14 tablet:px-7 mobile:px-4">
      <h1 className="text-[#ffffff] desktop:text-[64px] desktop:leading-[58px] desktop:mb-14 tablet:text-[40px] tablet:leading-10 mobile:text-[28px] mobile:mb-6 mobile:leading-7 font-medium">
        Предлагаем различные{' '}
        <span
          className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
          style={{
            backgroundClip: 'text',
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
          }}
        >
          варианты комплектации тренажеров
        </span>
        , основываясь на специфике вашего тренировочного процесса
      </h1>
      <div className="desktop:pl-[257px]">
        <TrainingsFeature
          order="[01]"
          src="src/assets/vr_1.png"
          title="VR - тренажеры"
          text="Обучение навыкам работы с инструментами и оборудованием. Пешее хождение по территории или между оборудованием"
        />
        <TrainingsFeature
          order="[02]"
          src="src/assets/vr_2.png"
          title="Cтенды"
          text="Отработки навыков вождение и управления техникой. Работа с панелями управления"
        />
        <TrainingsFeature
          order="[03]"
          src="src/assets/vr_3.png"
          title="Учебные классы"
          text="Оснащение учебных классов и центров всем необходимым для современного обучения и профессиональной подготовки кадров"
        />
      </div>
    </div>
  );
}

function TrainingsFeature({
  src,
  title,
  text,
  order,
}: {
  title: string;
  text: string;
  src: string;
  order: string;
}) {
  return (
    <div className="tablet:flex items-stretch justify-between tablet:py-10 desktop-figma:min-w-[1133px] border-b border-[#3D425C] first:border-t mobile:max-tablet:pt-5">
      <div className="tablet:flex flex-col justify-between mobile:max-tablet:mb-[42px]">
        <h1 className="desktop:text-[32px] font-medium desktop:leading-8 mobile:text-xl mobile:leading-5 text-[#ffffff] mobile:max-tablet:mb-2">
          {title}
        </h1>
        <p className="desktop:text-lg desktop:leading-6 tablet:text-sm tablet:leading-[19px] tablet:max-w-[346px] text-[#ffffff] desktop:max-w-[495px]">
          {text}
        </p>
      </div>
      <div className="mobile:max-tablet:flex tablet:hidden justify-between items-end">
        <p className="text-[#52587A] text-sm mb-5">{order}</p>
        <img src={src} alt="" />
      </div>
      <div className="tablet-figma:flex tablet:max-tablet-figma:hidden mobile:max-tablet-figma:hidden">
        <img src={src} alt="" />
        <p className="text-[#52587A] desktop:font-medium desktop:text-sm desktop:leading-5 tablet:text-sm">
          {order}
        </p>
      </div>
      <img
        src={src}
        className="mobile:max-tablet:hidden tablet-figma:hidden"
        alt=""
      />
      <p className="text-[#52587A] desktop:font-medium desktop:text-sm desktop:leading-5 tablet:text-sm mobile:max-tablet:hidden tablet-figma:hidden">
        {order}
      </p>
    </div>
  );
}
