import { MiniTitle } from '../../ui/MiniTitle';

export function Pluses() {
  return (
    <div className="desktop:py-[70px] mobile:py-14 desktop:px-10 tablet:px-6 mobile:px-4">
      <h1 className="desktop:text-[64px] tablet:text-[40px] font-medium desktop:leading-[57px] tablet:leading-10 text-[#ffffff] tablet:block mobile:max-tablet:hidden">
        <span
          className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
          style={{
            backgroundClip: 'text',
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
          }}
        >
          Достигайте положительный эффект
        </span>{' '}
        за счет снижения издержек
      </h1>
      <h1 className="text-[#ffffff] text-[28px] leading-[28px] tablet:hidden">
        <span
          className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
          style={{
            backgroundClip: 'text',
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
          }}
        >
          Помогаем
        </span>{' '}
        сократить затраты на обучение, повысить безопасность и
        производительность
      </h1>
      <div className="flex tablet:flex-row mobile:flex-col justify-between gap-x-3 tablet:items-end desktop:pl-64 desktop:mt-14 mobile:mt-6">
        <div className="tablet:hidden mb-2">
          <MiniTitle text="снижение" />
        </div>
        <ul className="text-[#ffffff] xl:min-w-[752px] desktop:text-lg tablet:min-w-[318px] mobile:text-base mobile:mb-6">
          <li className="flex justify-between py-5 border-t border-[#3D425C] gap-x-4">
            <p>снижение количества несчастных случаев</p>
            <p className="text-[#52587A]">[01]</p>
          </li>
          <li className="flex justify-between py-5 border-t border-[#3D425C] gap-x-4">
            <p>уменьшение количества ошибок при ТО и ППР</p>
            <p className="text-[#52587A]">[02]</p>
          </li>
          <li className="flex justify-between py-5 border-t border-[#3D425C] gap-x-4">
            <p>меньше случаев внеплановой остановки оборудования</p>
            <p className="text-[#52587A]">[03]</p>
          </li>
          <li className="flex justify-between py-5 border-t border-[#3D425C] gap-x-4">
            <p>
              снижение расходов на закупку реальной техники и оборудования для
              обучения
            </p>
            <p className="text-[#52587A]">[04]</p>
          </li>
          <li className="flex justify-between py-5 border-t border-[#3D425C] gap-x-4">
            <p>сокращение сроков обучения</p>
            <p className="text-[#52587A]">[05]</p>
          </li>
        </ul>
        <img
          className="desktop:w-[352px] desktop:h-[280px] tablet:w-[262px] tablet:h-[168px]"
          src="src/assets/effect.png"
          alt=""
        />
      </div>
    </div>
  );
}
