import TechnologyCategoryIcon from "../../../icons/TechnologyCategoryIcon";
import { AdvantageType } from "../../../types";
import TechnologyAdvantages from "../TechnologyAdvantages";

const ADVANTAGES: AdvantageType[] = [
  {
    title: "01",
    description:
      "Помогает реализовать бесконтактный метод взаимодействия с контентом",
  },
  {
    title: "02",
    description:
      "Дает возможность работать на малых расстояниях порядка метра и только внутри помещений",
  },
  {
    title: "03",
    description: "Возможность сканирования предметов",
  },
  {
    title: "04",
    description: "Приложения интуитивно понятны",
  },
  {
    title: "05",
    description:
      "Позволяет манипулировать фото изображениями с использованием данных о глубине",
  },
];

const KinnectRealSense = () => {
  return (
    <div>
      <div className="flex justify-between pb-10">
        <p className="text-2xl w-[65%]">
          <b>KINECT REAL SENSE Technology</b> - это продукт с технологиями
          глубины и слежения, предназначенных для того, чтобы дать машинам и
          устройствам возможности восприятия глубины. Технологии, используются в
          автономных беспилотных летательных аппаратах, роботах, AR/VR,
          устройствах умного дома и многих других продуктах широкого рынка.
        </p>
        <div className="flex items-center gap-10 ">
          <div className="w-[173px] h-[173px] rounded-full border-[3px] border-[#f1c7e7] flex justify-center items-center relative">
            <div className="w-0 h-0 border border-t-0 border-r-[14px] border-b-[22px] border-l-[14px] border-transparent border-b-[#67568a] rotate-90"></div>
            <div className="w-full h-full rounded-full border-[5px] border-[#f1c7e78c] flex justify-center items-center cursor-pointer animate-ping-3s absolute"></div>
          </div>
          <div className="text-3xl">
            Как это
            <br /> работает
          </div>
        </div>
      </div>
      <TechnologyAdvantages
        advantages={ADVANTAGES}
        title="Что позволяет Touch screen"
      />
      <div className="flex gap-8">
        <div className="w-1/3 relative">
          <img
            src="images/accordions/accordion-kinnectRealSense-1.png"
            alt=""
            className="w-full"
          />
          <TechnologyCategoryIcon
            title="KINNECT REAL SENSE"
            className="absolute right-5 top-3"
          />
        </div>
        <div className="w-1/3 relative">
          <img
            src="images/accordions/accordion-kinnectRealSense-2.png"
            alt=""
            className="w-full"
          />
          <TechnologyCategoryIcon
            title="KINNECT REAL SENSE"
            className="absolute right-5 top-3"
          />
        </div>
        <div className="w-1/3 relative">
          <img
            src="images/accordions/accordion-kinnectRealSense-3.png"
            alt=""
            className="w-full rel"
          />
          <TechnologyCategoryIcon
            title="KINNECT REAL SENSE"
            className="absolute right-5 top-3"
          />
        </div>
      </div>
    </div>
  );
};

export default KinnectRealSense;
