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

export function Effeciency() {
  return (
    <div className="desktop:py-[70px] mobile:py-14 desktop:px-10 tablet:px-6 mobile:px-4">
      <AppearanceHr className="mobile:max-tablet:hidden" />
      <div className="flex mobile:max-desktop:flex-col pt-5 tablet:max-desktop:gap-4">
        <MiniTitle text={'экономическая эффективность'} />
        <div className="mobile:max-tablet:mt-4">
          <div className="flex mobile:max-tablet:flex-col desktop:max-desktop-figma:w-[clamp(728px,728px+(100vw-1024px)/576*405,1133px)] justify-stretch gap-x-4 gap-y-2 mobile:max-tablet:py-5 tablet:pb-5">
            <Figure
              variance={'left'}
              percents={50}
              title={'сокращение бюджета на обучение сотрудников'}
            />
            <Figure
              variance={'left'}
              percents={30}
              title={'сокращение времени обучения сотрудников'}
            />
            <Figure
              variance={'right'}
              percents={90}
              title={'готовность к опасным ситуациямние выше на'}
            />
          </div>
          <AppearanceHr className="mb-9" />
          <AppearanceText
            className="max-w-[752px] desktop-figma:max-w-[47vw]"
            splits={[
              'В тренажере человек ',
              'принимает решения ',
              'так же, ',
              'как в реальном мире, ',
              'активируя ',
              'те же нейронные ',
              'цепочки в мозгу. ',
              'Это позволяет ',
              'добиться ',
              'реальной ',
              'производительности ',
              'в работе. ',
            ]}
          />
        </div>
      </div>
    </div>
  );
}

function Figure({
  variance,
  title,
  percents,
}: {
  variance: 'left' | 'right';
  percents: number;
  title: string;
}) {
  return (
    <div
      className={
        'flex px-6 bg-[#3D425C4D] desktop-figma:max-w-[22vw] w-full rounded-2xl pt-6 bg-no-repeat bg-auto xl:bg-[bottom_right_24px] tablet:max-xl:bg-[bottom_right_12px] mobile:bg-[bottom_right_24px] h-[262px]'
      }
      style={{
        backgroundImage: `url(src/assets/${variance}_variance_figure.svg)`,
      }}
    >
      <div className="text-[#ffffff] flex flex-col justify-between py-6 mobile:max-tablet:max-w-[50vw]">
        <h6 className="desktop:font-medium l-text desktop-figma:max-w-[70%]">
          {title}
        </h6>
        <h1 className="font-medium flex items-center tablet-figma:text-[clamp(64px,64px+(100vw-768px)/832*32,96px)] tablet-figma:leading-[clamp(57.6px,57.6px+(100vw-768px)/832*28.8,86.4px)] mobile:text-[64px] mobile:leading-[57.6px]">
          {percents}
          <span className="tablet-figma:text-[clamp(32px,32px+(100vw-768px)/832*32,64px)] tablet-figma:leading-[clamp(32px,32px+(100vw-768px)/832*25.6,57.6px)] mobile:text-[32px] mobile:leading-8">
            %
          </span>
        </h1>
      </div>
    </div>
  );
}
