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

export function Availables() {
  return (
    <div className="desktop:py-[70px] desktop:pl-10 mobile:py-14 tablet:px-6 mobile:px-4">
      <h1 className="desktop:text-[64px] desktop:leading-[58px] desktop:mb-14 tablet:text-[40px] tablet:leading-10 mobile:mb-6 mobile:text-[28px] mobile:leading-7 text-[#ffffff] font-medium">
        <span
          className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
          style={{
            backgroundClip: 'text',
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
          }}
        >
          Многопользовательский
        </span>
        <br /> режим обучения
      </h1>
      <div className="flex mobile:max-desktop-figma:flex-col items-start desktop:w-fit gap-x-4 tablet:pt-5 tablet:border-t border-[#3D425C]">
        <MiniTitle text="возможности" />
        <div className="tablet:max-desktop-figma:mt-4 mobile:max-tablet:mt-[9px]">
          <div className="grid tablet:grid-cols-3 mobile:max-tablet:gap-y-2 desktop:gap-x-4 tablet:gap-x-3 border-b border-[#3D425C] tablet:pb-5 mobile:pb-2 mb-6 justify-stretch mobile:max-tablet:border-t mobile:max-tablet:pt-2">
            <MultiUserFeature
              img="src/assets/processes.svg"
              text="отработка производственных процессов, в которых участвует группа людей"
            />
            <MultiUserFeature
              img="src/assets/plans.svg"
              text="командная отработка планов мероприятий по локализации и ликвидации последствий аварий"
            />
            <MultiUserFeature
              img="src/assets/actions.svg"
              text="координация действий между несколькими сотрудниками"
            />
          </div>
          <p className="text-[#ffffff] desktop:text-[32px] desktop:leading-8 tablet:text-[28px] tablet:leading-7 mobile:text-xl mobile:leading-5 font-medium tablet-figma:max-w-[668px] ">
            В одном цифровом пространстве{' '}
            <span className="opacity-60">
              могут работать сотрудники, находящиеся в разных помещениях,
              зданиях или городах
            </span>
          </p>
        </div>
      </div>
    </div>
  );
}

function MultiUserFeature({ text, img }: { text: string; img: string }) {
  return (
    <div className="flex flex-col justify-between items-start p-6 bg-[#3D425C4D] bg-opacity-30 rounded-2xl desktop:max-w-[367px] tablet-figma:max-desktop-figma:min-w-[232px] desktop:min-h-[214px] tablet:min-h-[240px] mobile:min-h-[220px]">
      <img src={img} alt="" className="mb-14" />
      <p className="text-base text-[#ffffff]">{text}</p>
    </div>
  );
}
