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

export function Effeciency() {
  return (
    <div className="desktop:py-[70px] mobile:py-14 2xl:pr-24 min-[1200px]:pl-10 tablet:py-14 tablet:px-6 mobile:px-4">
      <div className="flex min-[1400px]:flex-row mobile:flex-col tablet:border-t border-[#3D425C] pt-5 gap-x-4">
        <MiniTitle text={'экономическая эффективность'} />
        <div className="tablet:max-desktop-figma:mt-4 mobile:max-tablet:mt-2">
          <div className="flex mobile:max-tablet:flex-col mobile:items-stretch gap-x-4 gap-y-2 mobile:max-tablet:py-5 tablet:pb-5 border-b border-[#3D425C] mb-9 tablet:border-t-0 mobile:border-t">
            <Figure
              variance={'left'}
              percents={50}
              title={'сокращение бюджета на обучение сотрудников'}
            />
            <Figure
              variance={'left'}
              percents={30}
              title={'сокращение времени обучения сотрудников'}
            />
            <Figure
              variance={'right'}
              percents={90}
              title={'готовность к опасным ситуациямние выше на'}
            />
          </div>
          <p className="text-[#ffffff] font-medium desktop:text-[32px] tablet:text-2xl mobile:text-xl tablet:leading-8 mobile:leading-5 max-w-[752px]">
            В тренажере человек принимает решения так же, как в реальном мире,{' '}
            <span className="opacity-60">
              активируя те же нейронные цепочки в мозгу. Это позволяет добиться
              реальной производительность в работе.
            </span>
          </p>
        </div>
      </div>
    </div>
  );
}

function Figure({
  variance,
  title,
  percents,
}: {
  variance: 'left' | 'right';
  percents: number;
  title: string;
}) {
  return (
    <div
      className={
        'flex px-6 bg-[#3D425C4D] bg-opacity-30 rounded-2xl pt-6 tablet:max-laptop:min-w-[140px] bg-no-repeat bg-auto xl:bg-[bottom_right_24px] tablet:max-xl:bg-[bottom_right_12px] mobile:bg-[bottom_right_24px] h-[262px] xl:w-[386px] desktop:min-w-[232px]'
      }
      style={{
        backgroundImage: `url(src/assets/${variance}_variance_figure.svg)`,
      }}
    >
      <div className="text-[#ffffff] flex flex-col justify-between py-6">
        <h6 className="xl:text-sm tablet:text-xs xl:font-medium">{title}</h6>
        <h1 className="font-medium xl:text-8xl mobile:text-[64px] flex items-center">
          {percents}
          <span className="xl:text-[64px] tablet:text-[32px]">%</span>
        </h1>
      </div>
    </div>
  );
}
