import { ClassNameWrapper } from '../../hocs/ClassNameWrapper';
import { useModalStore } from '../../store/modalStore';
import { AppearanceHr } from '../../ui/AppearanceHr';
import { Button } from '../../ui/Button';
import { Title } from '../../ui/Title';
import { ArrowRightIcon } from '../icons/ArrowRightIcon';
import { ModalWithForm } from './ModalWithForm';

export function Decreasing() {
  const setModal = useModalStore(state => state.setModal);

  return (
    <div className="lg:py-[100px] sm:py-[70px] py-14">
      <Title className="lg:w-4/5 min-[2500px]:w-[70%]">
        <span className="text-gradient">
          Помогаем предприятиям снизить издержки,
        </span>{' '}
        сделать обучение сотрудников безопаснее и&nbsp;эффективнее
      </Title>
      <div className="lg:mt-14 grid grid-cols-2 gap-x-4 gap-y-6 mt-6">
        <div className="lg:col-start-1 sm:max-lg:col-start-1 xl:col-span-1 col-span-2 space-y-10">
          <div>
            {[
              'снижение количества несчастных случаев',
              'уменьшение количества ошибок при ТО и ППР',
              'сокращение случаев внеплановой остановки оборудования',
              'снижение расходов на закупку реальной техники и оборудования для обучения',
              'сокращение сроков обучения',
            ].map((text, index) => (
              <DecreasingOption key={index} text={text} number={index + 1} />
            ))}
          </div>
          <Button
            className="xl:w-1/2 lg:w-1/3 sm:w-1/2 py-4 w-full text-xl font-bold"
            icon={
              <div className="p-2 bg-white rounded-full">
                <ClassNameWrapper
                  element={<ArrowRightIcon />}
                  className="text-black"
                />
              </div>
            }
            onClick={() => setModal(<ModalWithForm />)}
          >
            Обсудить проект
          </Button>
        </div>
        <div className="xl:col-start-2 col-span-full">
          <video
            src="/video/decreasing.mp4"
            autoPlay
            playsInline
            muted
            loop
            className="object-cover w-full"
          />
        </div>
      </div>
    </div>
  );
}

function Plus({ text }: { text: string }) {
  return <p className="text-2xl leading-[28.8px]">{text}</p>;
}

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

function DecreasingOption({ text, number }: { text: string; number: number }) {
  return (
    <div className="group">
      <AppearanceHr delay={number * 0.5} />
      <div className="flex gap-x-4 justify-between items-center py-5">
        <Plus text={text} />
        <Number number={number} />
      </div>
      <AppearanceHr
        className="group-last:block hidden"
        delay={(number + 1) * 0.5}
      />
    </div>
  );
}
