import { motion, useInView } from 'framer-motion';
import { useRef } from 'react';

function SimulatorsItem({ text, index }: { text: string; index: number }) {
  const ref = useRef<HTMLDivElement>(null);

  const isInView = useInView(ref, { once: true, amount: 'all' });

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={isInView ? { opacity: 1 } : {}}
      transition={{ duration: 1, delay: 0.8 + index / 4 }}
      ref={ref}
      className="l-text bg-[#3D425C4D] rounded-[44px] w-fit sm:px-5 sm:py-2 px-4 py-1.5"
    >
      {text}
    </motion.div>
  );
}

export function SimulatorsTab() {
  const titleRef = useRef<HTMLDivElement>(null);

  const titleInView = useInView(titleRef, { once: true });

  const imgRef = useRef<HTMLDivElement>(null);

  const imgInView = useInView(imgRef, { once: true });

  return (
    <div
      itemScope
      itemProp="simulators"
      itemType="http://schema.org/Simulators"
      className="bg-[#14161F] lg:px-10 lg:py-10 sm:px-6 sm:py-6 px-4 py-4 sm:space-y-10 space-y-6 border-t border-[#3D425C]"
    >
      <motion.div
        ref={titleRef}
        initial={{ opacity: 0 }}
        animate={titleInView ? { opacity: 1 } : {}}
        transition={{ duration: 1, delay: 0.5 }}
        className="flex gap-x-2 justify-between"
      >
        <h2 className="h2 font-medium">Симуляторы управления техникой</h2>
        <p className="text-[#3D425C] h3 font-medium">02</p>
      </motion.div>
      <div
        itemProp="simulatorsTypes"
        itemScope
        itemType="http://schema.org/SimulatorsTypes"
        className="flex flex-wrap gap-2 lg:max-w-[1000px]"
      >
        <SimulatorsItem text="авиационные симуляторы" index={0} />
        <SimulatorsItem text="погрузчики – ричстакеры" index={1} />
        <SimulatorsItem text="тяговые составы железной дороги" index={2} />
        <SimulatorsItem text="грузовые краны" index={3} />
        <SimulatorsItem text="вертолетная техника" index={4} />
        <SimulatorsItem text="горные самосвалы и экскаваторы" index={5} />
      </div>
      <div
        itemProp="simulatorsModel"
        itemScope
        itemType="http://schema.org/SimulatorsModel"
        className="sm:flex max-sm:space-y-6 gap-x-2"
        ref={imgRef}
      >
        <motion.div
          initial={{ opacity: 0 }}
          animate={imgInView ? { opacity: 1 } : {}}
          transition={{ duration: 1, delay: 1 }}
          className="space-y-[10px] lg:w-[calc(400/1600*100vw)] sm:w-[calc(331/768*100vw)]"
        >
          <img
            src="/images/products/simulators/rzhd2.jpg"
            className="object-cover sm:max-lg:aspect-[331/292] max-sm:aspect-[328/172]"
            alt="ржд"
          />
          <p className="l-text opacity-60">
            В основу симуляторов заложена математическая модель, полностью
            соответствующая работе настоящего оборудования
          </p>
        </motion.div>
        <motion.div
          initial={{ opacity: 0 }}
          animate={imgInView ? { opacity: 1 } : {}}
          transition={{ duration: 1, delay: 1.5 }}
          className="space-y-[10px] lg:w-[calc(400/1600*100vw)] sm:w-[calc(331/768*100vw)]"
        >
          <img
            src="/images/products/simulators/rzhd.jpg"
            className="object-cover sm:max-lg:aspect-[331/292] max-sm:aspect-[328/172] object-[bottom_-1px_left_-1px]"
            alt="ржд"
          />
          <p className="l-text opacity-60">
            Модель позволяет производить расчеты характеристик работы,
            отслеживать безопасность работы устройств и симулировать внештатные
            ситуации
          </p>
        </motion.div>
      </div>
    </div>
  );
}
