import { Title } from './ui/Title';
import { FeedbackForm } from './Layout/FeedbackForm';

export function Form() {
  return (
    <div className="pt-12 space-y-8 lg:space-y-20 sm:space-y-10 lg:pt-16">
      <Title className="lg:max-w-[58vw]">
        Хотите интерактивное решение для выставки?
        <br className="max-lg:hidden" />
        <span className="text-gradient"> Давайте обсудим детали.</span>
      </Title>
      <div className="relative max-lg:flex items-center gap-x-[35px]">
        <FeedbackForm />
        <div className="max-sm:hidden absolute lg:bottom-0 lg:-right-[min(136px,calc(136/1600*100vw))] sm:-right-[min(196px,calc(196/768*100vw))] animate-[spin_15s_linear_infinite]">
          <div className="relative lg:w-[min(calc(512/1600*100vw),768px)] sm:w-[calc(512/768*100vw)] aspect-square flex justify-center transition-all duration-500 origin-center">
            <div className="lg:w-[min(360px,calc(116/1600*100vw))] sm:w-[calc(116/768*100vw)] flex flex-col justify-between h-full absolute">
              <img
                src="/images/form/1_1.jpg"
                alt="Виртуальные выставки и метавселенные"
                className="animate-[spin_15s_linear_infinite] [animation-direction:reverse] rounded-full"
              />
              <img
                src="/images/form/1_2.jpg"
                alt="Тренажер РЖД: ЭП2Д, Иволга, ЭП20, ТЭ33А, ТЭМ2"
                className="animate-[spin_15s_linear_infinite] [animation-direction:reverse] rounded-full"
              />
            </div>
            <div className="lg:w-[min(360px,calc(116/1600*100vw))] sm:w-[calc(116/768*100vw)] flex flex-col justify-between h-full absolute rotate-45">
              <img
                src="/images/form/2_1.jpg"
                className="animate-[spin_15s_linear_infinite] [animation-direction:reverse] rounded-full"
                alt="L 410 NG Aircraft"
              />
              <img
                src="/images/form/2_2.jpg"
                className="animate-[spin_15s_linear_infinite] [animation-direction:reverse] rounded-full"
                alt="ЖК «Upside Towers»"
              />
            </div>
            <div className="lg:w-[min(360px,calc(116/1600*100vw))] sm:w-[calc(116/768*100vw)] flex flex-col justify-between h-full absolute rotate-90">
              <div className="-rotate-90">
                <img
                  src="/images/form/3_1.jpg"
                  className="animate-[spin_15s_linear_infinite] [animation-direction:reverse] rounded-full"
                  alt="Стенд GRAFF.estate на Всероссийском Жилищном конгрессе в Сочи"
                />
              </div>
              <div className="-rotate-90">
                <img
                  src="/images/form/3_2.jpg"
                  className="animate-[spin_15s_linear_infinite] [animation-direction:reverse] rounded-full"
                  alt="Интерактивная презентация военного корабля"
                />
              </div>
            </div>
            <div className="lg:w-[min(360px,calc(116/1600*100vw))] sm:w-[calc(116/768*100vw)] flex flex-col justify-between h-full absolute rotate-[135deg]">
              <div className="-rotate-90">
                <img
                  src="/images/form/4_1.jpg"
                  className="animate-[spin_15s_linear_infinite] [animation-direction:reverse] rounded-full"
                  alt="Симулятор погрузчика"
                />
              </div>
              <div className="-rotate-[135deg]">
                <img
                  src="/images/form/4_2.jpg"
                  className="animate-[spin_15s_linear_infinite] [animation-direction:reverse] rounded-full"
                  alt="Макет кабины машиниста «Иволга» на выставке ВДНХ"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
