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

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

function Figure({
  title,
  percents,
  type = 'left',
}: {
  percents: number;
  title: string;
  type?: 'left' | 'right';
}) {
  return (
    <motion.div
      whileHover={{
        backgroundImage: `url(src/assets/${type}_variance_figure.svg),url(src/assets/efficiency_backlight.svg)`,
        backgroundSize: 'auto,100% 100%',
      }}
      initial={{
        backgroundImage: `url(src/assets/${type}_variance_figure.svg)`,
        WebkitBorderRadius: 16,
        MozBorderRadius: 16,
        borderRadius: 16,
      }}
      animate={{
        backgroundImage: `url(src/assets/${type}_variance_figure.svg),url(src/assets/efficiency_backlight.svg)`,
        backgroundSize: 'auto,100% 0%',
        backgroundBlendMode: 'darken',
      }}
      transition={{ duration: 0.075 }}
      className="bg-[url(src/assets/left_variance_figure.svg)] hover:bg-[url(src/assets/left_variance_figure.svg),url(src/assets/efficiency_backlight.svg)] last:hover:bg-[url(src/assets/right_variance_figure.svg),url(src/assets/efficiency_backlight.svg)] last:bg-[url(src/assets/right_variance_figure.svg)] flex px-6 bg-[#3D425C4D] desktop-figma:max-w-[22vw] w-full rounded-2xl pt-6 bg-no-repeat bg-[position:bottom_right_24px,bottom_right] h-[262px]"
    >
      <div className="text-[#ffffff] flex flex-col justify-between py-6 mobile:max-sm:max-w-[50vw]">
        <h6 className="lg: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>
    </motion.div>
  );
}
