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

export function Contacts() {
  return (
    <div className="desktop:py-[70px] desktop:px-10 mobile:py-14 tablet:px-6 mobile:px-4 desktop:flex justify-between gap-x-4">
      <div className="tablet:max-desktop:mb-20 mobile:mb-14">
        <Title className="desktop:mb-[68px] desktop-figma:max-w-[899px] desktop:max-w-[720px] mobile:mb-6">
          Хотите использовать интерактивные тренажеры в обучении?
          <br />
          <span
            className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
            style={{
              backgroundClip: 'text',
              WebkitBackgroundClip: 'text',
              WebkitTextFillColor: 'transparent',
            }}
          >
            Давайте обсудим детали.
          </span>
        </Title>
        <button className="bg-gradient-to-r from-[#798FFF] to-[#D375FF] rounded-[104px] py-4 px-6 flex font-semibold text-[#ffffff] justify-between desktop-figma:min-w-[23vw] desktop:max-desktop-figma:min-w-[368px] tablet:max-desktop:min-w-[332px] mobile:max-tablet:w-full items-center btn-text">
          Оставить заявку <img src="src/assets/send.svg" alt="" />
        </button>
      </div>
      <div className="min-w-[31.69vw] tablet:max-desktop:flex items-stretch justify-between gap-x-4">
        <div className="desktop:min-w-[20.75vw] tablet:w-full">
          <p className="text-[#ffffff] mb-4 l-text">Свяжитесь с нами</p>
          <div className="flex flex-col gap-y-3 desktop:mb-20 mobile:max-tablet:mb-6">
            <button className="text-[#ffffff] font-semibold py-4 px-6 flex items-center justify-between rounded-[104px] border border-[#3D425C] btn-text">
              Написать
              <img src="src/assets/mail.svg" alt="" />
            </button>
            <button className="text-[#ffffff] font-semibold py-4 px-6 flex items-center justify-between rounded-[104px] border border-[#3D425C] btn-text">
              Позвонить
              <img src="src/assets/phone.svg" alt="" />
            </button>
          </div>
        </div>
        <div className="flex flex-col gap-y-4 tablet:max-desktop:justify-between tablet-figma:max-desktop:min-w-[332px] tablet:max-tablet-figma:min-w-[250px]">
          <p className="font-semibold text-[#ffffff] l-text">Социальные сети</p>
          <div className="flex gap-x-2">
            <button className="rounded-full p-4 border border-[#3D425C]">
              <img src="src/assets/youtube.svg" alt="" />
            </button>
            <button className="rounded-full p-4 border border-[#3D425C]">
              <img src="src/assets/vk.svg" alt="" />
            </button>
            <button className="rounded-full p-4 border border-[#3D425C]">
              <img src="src/assets/tg.svg" alt="" />
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}