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

export function Products() {
  const [curTab, setCurTab] = useState(0);

  return (
    <div className="desktop:py-[70px] tablet:max-desktop:pt-14 tablet:max-desktop:pb-8 mobile:max-tablet:py-14 desktop:px-10 tablet:max-desktop:px-6 mobile:max-tablet:px-4 text-[#ffffff]">
      <h1 className="text-[64px] font-medium leading-[58px] mb-14 -tracking-[.02em] desktop:block mobile:hidden">
        Процесс обучения сотрудников станет безопасней и эффективней с
        <span
          className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
          style={{
            backgroundClip: 'text',
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
          }}
        >
          {' '}
          продуктами GRAFF.training
        </span>
      </h1>
      <div className="desktop:hidden">
        <MiniTitle text="Продукты" />
      </div>
      <div className="flex gax-y-4 bg-[#3D425C4D] bg-opacity-3 rounded-xl p-1 mb-2 w-fit max-w-full overflow-auto [-webkit-scroll-bar:_background-color:_red] tablet:max-desktop:mt-[13px] mobile:mt-6 mobile:max-[912px]:[-webkit-mask-image:_linear-gradient(to_left,rgba(32,35,50,0)_0%,rgba(32,35,50,1)_20%)]">
        <TabButton
          className={curTab === 0 ? ' bg-[#798FFF]' : ''}
          onClick={() => setCurTab(0)}
          text="Промышленные тренажеры"
        />
        <TabButton
          className={curTab === 1 ? ' bg-[#798FFF]' : ''}
          onClick={() => setCurTab(1)}
          text="Симуляторы управления техникой"
        />
        <TabButton
          className={curTab === 2 ? ' bg-[#798FFF]' : ''}
          onClick={() => setCurTab(2)}
          text="Тренажеры для учебных заведений"
        />
      </div>
      <TeachingItems />
    </div>
  );
}

function TabButton({
  text,
  className,
  onClick,
}: { text: string } & React.HTMLProps<HTMLButtonElement>) {
  return (
    <button
      onClick={onClick}
      className={
        'active:bg-[#798FFF] rounded-lg px-5 py-[13.5px] desktop:text-lg font-semibold desktop:leading-[18px] mobile:text-base tablet:leading-4 text-nowrap text-clip bg-text-gradient' +
        className
      }
    >
      {text}
    </button>
  );
}

function TeachingItem({
  title,
  text,
  iconType,
}: {
  title: string;
  text: string;
  iconType: 'danger' | 'service' | 'safety';
}) {
  return (
    <div className="desktop:border-l-0 tablet:border-l mobile:max-tablet:first:border-t-0 mobile:max-tablet:border-t border-[#3D425C] desktop:flex desktop:items-start desktop:gap-x-7 tablet:max-desktop:pl-3 mobile:max-tablet:pt-4">
      <img
        src={`src/assets/${iconType}_icon.svg`}
        alt=""
        className="mobile:max-tablet:hidden tablet:max-desktop:mb-[14px]"
      />
      <div className="desktop:border-l border-[#3D425C] desktop:pl-4 font-medium">
        <p className="text-[#ffffff] flex items-center gap-x-2 desktop:text-lg tablet:text-base mobile:text-sm mb-2 desktop:leading-[21px] tablet:leading-[19px] mobile:leading-[17px]">
          <img
            src={`src/assets/${iconType}_icon.svg`}
            alt=""
            className="tablet:hidden"
          />
          {title}
        </p>
        <p className="desktop:text-sm mobile:text-xs">{text}</p>
      </div>
    </div>
  );
}

function TeachingItems() {
  return (
    <div className="bg-[#3D425C4D] rounded-xl desktop:bg-[url('src/assets/mask_group.png')] 2xl:bg-contain bg-right-bottom desktop:max-2xl:bg-[length:60%] desktop:p-10 tablet:max-desktop:p-7 mobile:max-tablet:p-5 bg-no-repeat">
      <div className="desktop:max-w-[455px]">
        <div className="tablet:max-desktop:border-b border-[#3D425C] pb-5 tablet:max-desktop:bg-[url('src/assets/mask_group.png')] bg-no-repeat bg-contain bg-right-bottom tablet:max-tablet-figma:bg-[length:40%]">
          <div className="tablet:max-desktop:max-w-[326px] mobile:max-tablet:border-b border-[#3D425C]">
            <h1 className="text-[#ffffff] desktop:text-[32px] tablet:text-2xl mobile:text-xl font-medium desktop:leading-[29px] tablet:leading-6 mobile:leading-6 tablet:mb-8">
              Промышленные тренажеры виртуальной реальности
            </h1>
            <p className="desktop:hidden tablet:max-desktop:mt-11 mobile:max-tablet:mt-2 text-xs">
              Может быть еще какой-нибудь небольшой текст, а то мне не хватает
              для балланса. Ну если не будет, то как-нибудь переживем
            </p>
            <img
              src="src/assets/mask_group.png"
              className="tablet:hidden mt-4"
              alt=""
            />
          </div>
        </div>
        <div className="flex desktop:flex-col tablet:max-desktop:mt-8 desktop:gap-y-6 mobile:max-tablet:flex-col mobile:max-tablet:gap-y-4 tablet:max-desktop:gap-x-3">
          <TeachingItem
            iconType="danger"
            text="Отработка проведения технологических операций: оказание первой помощи, работы на высоте,  работа с доменной печью и т.п."
            title="обучение навыкам работы на опасных производствах"
          />
          <TeachingItem
            iconType="service"
            text="отработка определения неисправностей оборудования и выполнения ремонтных работ на цифровом двойнике"
            title="обучение обслуживанию и ремонту оборудования, систем, техники"
          />
          <TeachingItem
            iconType="safety"
            text="отработка плана мероприятий по локализации и ликвидации последствий аварий. "
            title="обучение правилам промышленной безопасности и охраны труда"
          />
        </div>
      </div>
    </div>
  );
}
