export function Teaching() {
  return (
    <div className="desktop:py-[70px] desktop:px-10 tablet:max-desktop:px-6 mobile:max-tablet:px-4 mobile:max-desktop:py-14 desktop-figma:flex gap-x-4">
      <h1 className="font-medium text-[64px] leading-[57.6px] text-[#ffffff] desktop:block mobile:max-desktop:hidden mb-8 desktop-figma:sticky top-0 h-fit">
        <span
          className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
          style={{
            backgroundClip: 'text',
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
          }}
        >
          Тренинг модуль{' '}
        </span>
        помогает осуществлять координацию между всеми участниками процесса
      </h1>
      <h1 className="desktop:hidden font-medium text-[40px] leading-10 text-[#ffffff] mobile:mb-6">
        <span
          className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
          style={{
            backgroundClip: 'text',
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
          }}
        >
          Дистанционное обучение
        </span>{' '}
        на базе платформы GRAFF TRANING
      </h1>
      <TeachingFeaturesForDesktop />
      <TeachingFeaturesForOtherScreens />
    </div>
  );
}

function TeachingFeaturesForDesktop() {
  return (
    <div className="mobile:max-desktop-figma:hidden desktop:flex-col gap-y-4 flex-wrap desktop:flex">
      <div className="max-w-[880px] desktop:p-10 tablet:p-6 bg-[#3D425C4D] bg-opacity-30 rounded-2xl desktop:flex desktop:min-w-[880px] desktop:min-h-[400px] bg-auto bg-[url(src/assets/schedule_big.svg)] bg-no-repeat bg-right-bottom">
        <div className="text-[#ffffff]">
          <h1 className="font-medium text-[32px] leading-8 mb-2">
            Управление процессом
          </h1>
          <p className="text-lg max-w-[361px]">
            Назначение сценария обучения
            <br />
            Выбор режима: обучение, тренировка, тестирование
          </p>
        </div>
        <img
          src="src/assets/master_card.svg"
          className="rounded-lg w-fit mt-[197px] -ml-[75px]"
          alt=""
        />
      </div>

      <div className="max-w-[880px] p-10 bg-[#3D425C4D] bg-opacity-30 rounded-2xl desktop:flex min-w-[880px] min-h-[400px]">
        <div className="text-[#ffffff]">
          <h1 className="font-medium text-[32px] leading-8 mb-2">
            Управление пользователями
          </h1>
          <p className="text-lg max-w-[200px]">
            Добавление, удаление
            <br />и назначение ролей
          </p>
        </div>
        <img src="src/assets/modal.svg" className="rounded-lg" alt="" />
      </div>

      <div className="max-w-[880px] p-10 pb-[18px] bg-[#3D425C4D] bg-opacity-30 rounded-2xl desktop:flex min-w-[880px] min-h-[400px] bg-[url(src/assets/pinned_windows.svg)] bg-no-repeat bg-right-bottom">
        <div className="text-[#ffffff]">
          <h1 className="font-medium text-[32px] leading-8 mb-2">
            Видеозапись обучения
          </h1>
          <p className="text-lg max-w-[361px]">
            Фиксация и хранение сессий обучения, тренировки и тестирования.
            Ретроспектива по пройденной сессии вместе с инструктором
          </p>
        </div>
        <img
          src="src/assets/manage_video.svg"
          className="rounded-lg mt-[216px]"
          alt=""
        />
      </div>

      <div className="max-w-[880px] p-10 bg-[#3D425C4D] bg-opacity-30 rounded-2xl desktop:flex min-w-[880px] min-h-[400px] flex justify-between">
        <div className="text-[#ffffff]">
          <h1 className="font-medium text-[32px] leading-8 mb-2">
            Статистика обучения
          </h1>
          <p className="text-lg max-w-[280px]">
            Фиксация правильных и неправильных действий.
            <br />
            Отчет об ошибках
          </p>
        </div>
        <div className="flex">
          <img
            src="src/assets/schedule.svg"
            className="rounded-lg self-end relative"
            alt=""
          />
          <img
            src="src/assets/stats.svg"
            className="rounded-lg mb-[27px] relative z-10 right-9"
            alt=""
          />
        </div>
      </div>
    </div>
  );
}

function TeachingFeaturesForOtherScreens() {
  return (
    <div className="mobile:max-tablet:flex mobile:max-tablet:flex-col mobile:max-tablet:gap-y-2 tablet-figma:max-desktop:grid grid-rows-[272px_113px_249px] gap-3 grid-cols-2 desktop:hidden tablet:max-tablet-figma:flex tablet:max-tablet-figma:flex-col">
      <div className="bg-[#3D425C4D] bg-opacity-30 rounded-2xl tablet:max-desktop:pt-6 tablet:max-desktop:px-6 mobile:max-tablet:pt-5 mobile:max-tablet:px-5 overflow-hidden row-start-1 col-start-1 mobile:max-tablet:flex mobile:max-tablet:flex-col">
        <h1 className="text-[#ffffff] font-medium tablet:max-desktop:text-2xl mobile:max-tablet:text-xl tablet:max-desktop:leading-6 mobile:max-tablet:leading-5 mb-1">
          Управление
          <br /> пользователями
        </h1>
        <p className="text-[#ffffff] text-xs tablet:max-desktop:-mb-[18px] leading-[17px]">
          Добавление, удаление и назначение ролей
        </p>
        <img
          src="src/assets/modal.svg"
          className="relative mobile:max-tablet:w-[351px] tablet-figma:max-desktop:top-7 tablet:max-tablet-figma:top-11 mobile:max-tablet:top-5 mobile:max-tablet:left-[92px] self-end tablet:max-tablet-figma:m-auto"
          alt=""
        />
      </div>

      <div className="bg-[#3D425C4D] bg-opacity-30 rounded-2xl tablet:max-desktop:pt-6 tablet:max-desktop:px-6 mobile:max-tablet:pt-5 mobile:max-tablet:px-5 bg-[url(src/assets/schedule_big.svg)] tablet-figma:max-desktop:bg-contain mobile:max-tablet:bg-contain mobile:max-tablet:bg-[140px_130px] tablet:max-tablet-figma:bg-[length:50%] bg-no-repeat tablet-figma:max-desktop:bg-[73px_102px] tablet:max-tablet-figma:bg-right-bottom row-start-1 row-span-2 col-start-2">
        <h1 className="text-[#ffffff] font-medium tablet:max-desktop:text-2xl mobile:max-tablet:text-xl tablet:max-desktop:leading-6 mobile:max-tablet:leading-5 mb-1">
          Управление процессом
        </h1>
        <p className="text-[#ffffff] text-xs leading-[17px]">
          Назначение сценария обучения
          <br />
          Выбор режима: обучение, тренировка, тестирование
        </p>
        <img
          src="src/assets/master_card.svg"
          className="rounded-lg mb-11 h-[92px] mt-[166px] tablet:max-tablet-figma:mx-auto"
          alt=""
        />
      </div>

      <div className="bg-[#3D425C4D] bg-opacity-30 rounded-2xl tablet:max-desktop:pt-6 tablet:max-desktop:px-6 mobile:max-tablet:pt-5 mobile:max-tablet:px-5 bg-[url(src/assets/pinned_windows_mini.svg)] tablet:max-tablet-figma:bg-[100%_100%] tablet-figma:max-desktop:bg-contain bg-no-repeat tablet-figma:max-desktop:bg-[67px_119px] mobile:max-tablet:bg-[100%_119px] mobile:max-tablet:flex mobile:max-tablet:flex-col row-start-2 row-span-2 col-start-1">
        <h1 className="text-[#ffffff] font-medium tablet:max-desktop:text-2xl mobile:max-tablet:text-xl tablet:max-desktop:leading-6 mobile:max-tablet:leading-5 mb-1">
          Видеозапись обучения
        </h1>
        <p className="text-[#ffffff] text-xs leading-[17px]">
          Фиксация и хранение сессий обучения, тренировки и тестирования.
          Ретроспектива по пройденной сессии вместе с инструктором
        </p>
        <img
          src="src/assets/manage_video.svg"
          className="rounded-lg h-[94px] mt-[147px] mb-6 tablet:max-tablet-figma:mx-auto tablet:max-tablet-figma:mr-[200px] self-end mr-[168px]"
          alt=""
        />
      </div>

      <div className="bg-[#3D425C4D] bg-opacity-30 rounded-2xl tablet:max-desktop:pt-6 tablet:max-desktop:px-6 mobile:max-tablet:pt-5 mobile:max-tablet:px-5 tablet:max-tablet-figma:pb-6 mobile:max-tablet:pb-5 overflow-hidden row-start-3 col-start-2">
        <h1 className="text-[#ffffff] font-medium tablet:max-desktop:text-2xl mobile:max-tablet:text-xl tablet:max-desktop:leading-6 mobile:max-tablet:leading-5 mb-1">
          Статистика обучения
        </h1>
        <p className="text-[#ffffff] text-xs leading-[17px] mobile:max-tablet-figma:mb-5">
          Фиксация правильных и неправильных действий.
          <br />
          Отчет об ошибках
        </p>
        <div className="flex flex-col">
          <div className="flex items-end mobile:max-tablet-figma:justify-center tablet-figma:max-desktop:overflow-hidden mt-0.5 mobile:max-tablet:pl-11 mx-auto">
            <img
              src="src/assets/schedule.svg"
              className="rounded-lg mobile:max-desktop:w-[166px] tablet:max-desktop:relative z-10"
              alt=""
            />
            <img
              src="src/assets/stats.svg"
              className="rounded-lg relative tablet-figma:max-desktop:right-[27px] tablet:max-tablet-figma:right-[31px] mobile:max-desktop:w-[166px] tablet:max-tablet-figma:bottom-[27px] mobile:max-tablet:bottom-[14px] mobile:max-tablet:right-11"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
  );
}
