import { PropsWithChildren } from 'react';
import { Title } from '../../ui/Title';

export function Teaching() {
  return (
    <div
      itemScope
      itemType="http://schema.org/Teaching"
      className="lg:py-[100px] lg:mb-[60px] py-14 md:grid lg:grid-cols-12 gap-x-4"
    >
      <Title className="max-lg:hidden 2xl:mb-[38px] mb-8 top-20 h-fit col-span-5 row-span-full lg:sticky">
        <span className="text-gradient">Тренинг-модуль</span>
        <br className="max-lg:hidden" />
        <span className="lg:hidden">&nbsp;</span>помогает осуществлять
        координацию между всеми участниками процесса
      </Title>
      <Title className="2xl:mb-[29px] lg:hidden mb-6 col-span-full">
        <span className="text-gradient">Дистанционное обучение</span> на базе
        платформы GRAFF.training
      </Title>
      <TeachingFeaturesForDesktop />
      <TeachingFeaturesForOtherScreens />
    </div>
  );
}

function TeachingFeaturesForDesktop() {
  return (
    <div className="max-lg:hidden col-span-7 space-y-4">
      <div
        itemProp="processManagment"
        itemType="https://schema.org/ProcessManagment"
        className="p-10 relative aspect-[752/400] border border-[#3D425C] bg-[url(/images/teaching/highlight.png)] bg-[length:0%] hover:bg-[length:100%] bg-no-repeat bg-right-top transition-all overflow-hidden flex justify-between"
      >
        <div className="space-y-2 max-w-[calc(380/1600*100vw)]">
          <TeachingFeatureTitle>Управление процессом</TeachingFeatureTitle>
          <TeachingFeatureDescription>
            Назначение сценария обучения
            <br />
            Выбор режима: обучение, тренировка, тестирование.
          </TeachingFeatureDescription>
        </div>
        <img
          src="/images/teaching/master_card.jpg"
          className="rounded-lg absolute max-w-[calc(198/1600*100vw)] left-[calc(321/1600*100vw)] bottom-10 z-10"
          alt="Управление процессом"
        />
        <img
          src="/images/teaching/schedule_mini.jpg"
          className="rounded-tl-2xl max-w-[calc(406/1600*100vw)] absolute top-[calc(69/400*100%)] left-[calc(475/1600*100vw)]"
          alt="Управление процессом"
        />
      </div>

      <div
        itemProp="usersManagment"
        itemType="https://schema.org/UsersManagment"
        className="p-10 relative aspect-[752/400] border border-[#3D425C] bg-[url(/images/teaching/highlight.png)] bg-[length:0%] hover:bg-[length:100%] bg-no-repeat bg-right-top transition-all flex justify-between gap-x-3 overflow-hidden"
      >
        <div className="space-y-2 max-w-[calc(380/752*100%)]">
          <TeachingFeatureTitle>Управление пользователями</TeachingFeatureTitle>
          <TeachingFeatureDescription>
            Добавление, удаление
            <br />и назначение ролей.
          </TeachingFeatureDescription>
        </div>
        <img
          src="/images/teaching/modal.png"
          className="-mr-10 rounded-lg"
          alt="Управление пользователями"
        />
      </div>

      <div
        itemProp="teachingVideoRecording"
        itemType="https://schema.org/TeachingVideoRecording"
        className="p-10 relative border border-[#3D425C] aspect-[752/400] bg-[url(/images/teaching/highlight.png)] bg-[length:0%] hover:bg-[length:100%] bg-no-repeat bg-right-top transition-all flex justify-between overflow-hidden"
      >
        <div className="space-y-2 max-w-[calc(410/752*100%)]">
          <TeachingFeatureTitle>Видеозапись обучения</TeachingFeatureTitle>
          <TeachingFeatureDescription>
            Фиксация и хранение сессий обучения, тренировки и тестирования.
            Ретроспектива по пройденной сессии вместе с инструктором.
          </TeachingFeatureDescription>
        </div>
        <img
          src="/images/teaching/manage_video.jpg"
          className="rounded-lg absolute z-30 max-w-[calc(174.75/1600*100vw)] right-[calc(183/752*100%)] top-[calc(256/400*100%)]"
          alt="Видеозапись обучения"
        />
        <img
          src="/images/teaching/pinned_windows.jpg"
          className="rounded-tl-xl absolute max-w-[calc(281/752*100%)] right-0 bottom-0 z-10 object-[top_-1px_left_0px]"
          alt="Видеозапись обучения"
        />
      </div>

      <div
        itemProp="teachingStats"
        itemType="https://schema.org/TeachingStats"
        className="p-10 relative aspect-[752/400] border border-[#3D425C] bg-[url(/images/teaching/highlight.png)] bg-[length:0%] hover:bg-[length:100%] bg-no-repeat bg-right-top transition-all flex justify-between overflow-hidden"
      >
        <div className="space-y-2 max-w-[calc(350/752*100%)]">
          <TeachingFeatureTitle>Статистика обучения</TeachingFeatureTitle>
          <TeachingFeatureDescription>
            Фиксация правильных и неправильных действий.
            <br />
            Отчет об ошибках.
          </TeachingFeatureDescription>
        </div>
        <img
          src="/images/teaching/current_schedule.jpg"
          className="rounded-lg absolute max-w-[calc(222/1600*100vw)] right-[calc(225/1600*100vw)] top-[calc(198/400*100%)]"
          alt="Расписание"
        />
        <img
          src="/images/teaching/stats.jpg"
          className="rounded-lg absolute max-w-[calc(222/1600*100vw)] right-[calc(34/1600*100vw)] top-[calc(88/400*100%)]"
          alt="Статистика"
        />
      </div>
    </div>
  );
}

function TeachingFeaturesForOtherScreens() {
  return (
    <div className="lg:hidden sm:-mx-6 flex flex-col -mx-4">
      <div
        itemProp="processManagment"
        itemType="https://schema.org/ProcessManagment"
        className="sm:flex justify-between max-sm:relative sm:aspect-[768/240] aspect-[6/5] order-1 border-t border-[#3D425C] sm:pt-6 sm:px-6 pt-5 px-5 overflow-hidden"
      >
        <div className="space-y-1">
          <TeachingFeatureTitle>
            Управление
            <br /> пользователями
          </TeachingFeatureTitle>
          <TeachingFeatureDescription>
            Добавление, удаление и назначение ролей
          </TeachingFeatureDescription>
        </div>
        <img
          src="/images/teaching/modal.png"
          className="rounded-md max-sm:absolute sm:-bottom-1 max-sm:left-[calc(101/360*100vw)] top-[calc(97/300*100%)] object-cover"
          alt="Управление пользователями"
        />
      </div>

      <div
        itemProp="usersManagment"
        itemType="https://schema.org/UsersManagment"
        className="overflow-hidden relative flex sm:aspect-[768/240] aspect-[36/30] sm:order-2 order-3 border-t border-[#3D425C] sm:pt-6 sm:px-6 pt-5 px-5"
      >
        <div className="space-y-1">
          <TeachingFeatureTitle>Видеозапись обучения</TeachingFeatureTitle>
          <TeachingFeatureDescription className="sm:max-w-[calc(305/768*100vw)]">
            Фиксация и хранение сессий обучения, тренировки и тестирования.
            Ретроспектива по пройденной сессии вместе с инструктором
          </TeachingFeatureDescription>
        </div>
        <img
          src="/images/teaching/pinned_windows_mini.jpg"
          className="rounded-md absolute sm:max-w-[50vw] sm:left-[calc(417/768*100vw)] left-[calc(83/360*100vw)] max-sm:top-[calc(119/300*100%)] sm:mt-3"
          alt="Видеозапись обучения"
        />
        <img
          src="/images/teaching/manage_video.jpg"
          className="rounded-lg absolute sm:max-w-[calc(130/768*100vw)] max-w-[calc(130/360*100vw)] bottom-5 sm:bottom-[calc(1/12*100%)] sm:left-[calc(350/768*100vw)]"
          alt="Видеозапись обучения"
        />
      </div>

      <div
        itemProp="teachingVideoRecording"
        itemType="https://schema.org/TeachingVideoRecording"
        className="flex relative sm:aspect-[768/240] aspect-[6/5] border-t border-[#3D425C] order-2 sm:order-3 sm:pt-6 sm:px-6 pt-5 px-5 overflow-hidden"
      >
        <div className="space-y-1">
          <TeachingFeatureTitle>Управление процессом</TeachingFeatureTitle>
          <TeachingFeatureDescription>
            Назначение сценария обучения
            <br />
            Выбор режима: обучение, тренировка, тестирование
          </TeachingFeatureDescription>
        </div>
        <img
          src="/images/teaching/schedule.jpg"
          className="rounded-tl-xl absolute sm:max-w-[calc(351/768*100vw)] max-w-[calc(304.5/360*100vw)] max-sm:left-[calc(132/360*100vw)] sm:right-0 max-sm:top-[calc(119/300*100%)]"
          alt="Расписание"
        />
        <img
          src="/images/teaching/master_card.jpg"
          className="rounded-md absolute sm:max-w-[calc(148/768*100vw)] max-w-[calc(148/360*100vw)] sm:bottom-[calc(17/240*100%)] sm:left-[calc(306/768*100vw)] max-sm:bottom-5"
          alt="Управление процессом"
        />
      </div>

      <div
        itemProp="teachingStats"
        itemType="https://schema.org/TeachingStats"
        className="flex justify-between items-start relative sm:aspect-[768/240] aspect-[36/30] border-y order-4 border-[#3D425C] sm:py-6 sm:px-6 py-5 px-5 overflow-hidden"
      >
        <div className="space-y-1">
          <TeachingFeatureTitle>Статистика обучения</TeachingFeatureTitle>
          <TeachingFeatureDescription>
            Фиксация правильных и неправильных действий. <br />
            Отчет об ошибках
          </TeachingFeatureDescription>
        </div>
        <img
          src="/images/teaching/stats.jpg"
          className="rounded-lg absolute sm:right-6 sm:max-w-[calc(166/768*100vw)] max-w-[calc(166/360*100vw)] max-sm:left-[calc(142/360*100vw)] max-sm:bottom-[calc(34/320*100%)]"
          alt="Статистика обучения"
        />
        <img
          src="/images/teaching/current_schedule.jpg"
          className="rounded-lg absolute sm:bottom-6 sm:right-[calc(162.5/768*100vw)] sm:max-w-[calc(166.5/768*100vw)] max-w-[calc(166/360*100vw)] bottom-5"
          alt="Расписание"
        />
      </div>
    </div>
  );
}

function TeachingFeatureTitle({
  children,
  className = '',
}: PropsWithChildren<{
  className?: string;
}>) {
  return (
    <h3 className={'h3 mb-2 sm:max-lg:mb-0.5 font-medium ' + className}>
      {children}
    </h3>
  );
}

function TeachingFeatureDescription({
  className = '',
  children,
}: PropsWithChildren<{
  className?: string;
}>) {
  return (
    <p className={'lg:l-text m-text opacity-60 ' + className}>{children}</p>
  );
}
