import { forwardRef } from 'react';

function SimulatorsItem({ text }: { text: string }) {
  return (
    <div className="text-sm bg-[#3D425C4D] rounded-[44px] w-fit sm:px-5 sm:py-2 px-4 py-1.5">
      {text}
    </div>
  );
}

export const SimulatorsTab = forwardRef<HTMLDivElement, { sticked: boolean }>(
  ({ sticked }, ref) => (
    <div
      itemScope
      itemProp="simulators"
      itemType="http://schema.org/Simulators"
      ref={ref}
      className="lg:ml-[65px] lg:h-[85dvh] lg:min-w-[calc(100vw-65px)] sm:h-[90vh] min-w-[100vw] sm:sticky -z-20 lg:top-[15vh] sm:top-[10vh] top-0 bg-[#14161F] lg:px-10 lg:pt-10 sm:px-6 sm:pt-6 px-4 pt-4 lg:space-y-12 sm:space-y-10 space-y-6 lg:border-l border-t border-[#3D425C]"
    >
      <div
        className={
          'flex justify-between gap-x-2' +
          (sticked ? ' text-[#3D425C] transition-colors' : '')
        }
      >
        <h2 className="font-medium h2">Симуляторы управления техникой</h2>
        <p className="text-[#3D425C] h3 font-medium">02</p>
      </div>
      <div
        itemProp="simulatorsTypes"
        itemScope
        itemType="http://schema.org/SimulatorsTypes"
        className={
          'flex flex-wrap gap-2 lg:max-w-[1000px]' +
          (sticked ? ' transition-opacity opacity-0' : ' opacity-100')
        }
      >
        <SimulatorsItem text="авиационные симуляторы" />
        <SimulatorsItem text="погрузчики – ричстракеры" />
        <SimulatorsItem text="тяговые составы железной дороги" />
        <SimulatorsItem text="грузовые краны" />
        <SimulatorsItem text="вертолетная техника" />
        <SimulatorsItem text="горные самосвалы и экскаваторы" />
      </div>
      <div
        itemProp="simulatorsModel"
        itemScope
        itemType="http://schema.org/SimulatorsModel"
        className={
          'sm:flex max-sm:space-y-6 gap-x-2 lg:max-w-[calc(1417/1600*100vw)]' +
          (sticked ? ' transition-opacity opacity-0' : ' opacity-100')
        }
      >
        <div className="space-y-[10px] lg:w-[calc(498.5/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>
        </div>
        <div className="space-y-[10px] lg:w-[calc(498.5/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>
        </div>
      </div>
    </div>
  ),
);
