import AppearanceHr from '../../ui/AppearanceHr';
import { Title } from '../../ui/Title';

export function Decreasing() {
  return (
    <div className="lg:py-[70px] mobile:py-14 lg:px-10 sm:px-6 mobile:px-4">
      <Title className="sm:block mobile:max-sm:hidden">
        <span className="text-gradient">Достигайте положительный эффект</span>
        <br /> за счет снижения издержек
      </Title>
      <Title className="sm:hidden">
        <span
          className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
          style={{
            backgroundClip: 'text',
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
          }}
        >
          Помогаем
        </span>{' '}
        сократить затраты на обучение, повысить безопасность и
        производительность
      </Title>
      <div className="flex md:flex-row mobile:max-md:flex-col justify-normal desktop-figma:gap-x-[10vw] md:max-desktop-figma:gap-x-[clamp(16px,16px+(100vw-1024px)/576*142,160px)] desktop-figma:max-w-[calc(70.8vw+256px)] desktop-figma:justify-between sm:items-end xl:pl-64 desktop-figma:mt-[77px] lg:mt-14 mobile:mt-6">
        <ul className="xl:max-w-[47vw] w-full sm:min-w-[318px] mobile:mb-6">
          <AppearanceHr />
          <li className="flex justify-between py-5 gap-x-4">
            <Plus text="снижение количества несчастных случаев" />
            <Number text="[01]" />
          </li>
          <AppearanceHr />
          <li className="flex justify-between py-5 gap-x-4">
            <Plus text="уменьшение количества ошибок при ТО и ППР" />
            <Number text="[02]" />
          </li>
          <AppearanceHr />
          <li className="flex justify-between py-5 gap-x-4">
            <Plus text="меньше случаев внеплановой остановки оборудования" />
            <Number text="[03]" />
          </li>
          <AppearanceHr />
          <li className="flex justify-between py-5 gap-x-4">
            <Plus text="снижение расходов на закупку реальной техники и оборудования для обучения" />
            <Number text="[04]" />
          </li>
          <AppearanceHr />
          <li className="flex justify-between py-5 gap-x-4">
            <Plus text="сокращение сроков обучения" />
            <Number text="[05]" />
          </li>
        </ul>
        <img
          src="src/assets/effect.png"
          className="mobile:max-md:self-center mobile:max-md:w-full object-contain"
          alt=""
        />
      </div>
    </div>
  );
}

function Plus({ text }: { text: string }) {
  return <p className="text-[#ffffff] l-text">{text}</p>;
}

function Number({ text }: { text: string }) {
  return <p className="text-[#52587A] m-text">{text}</p>;
}
