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">
      <div className="tablet:max-desktop:mb-20 mobile:mb-14">
        <h1 className="text-[#ffffff] desktop:text-[64px] desktop:leading-[58px] font-medium desktop:mb-[68px] desktop-figma:max-w-[899px] desktop:max-w-[720px] tablet:text-[40px] tablet:leading-10 mobile:mb-6 mobile:text-[28px] mobile:leading-7">
          Хотите использовать интерактивные тренажеры в обучении?
          <br />
          <span
            className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
            style={{
              backgroundClip: 'text',
              WebkitBackgroundClip: 'text',
              WebkitTextFillColor: 'transparent',
            }}
          >
            Давайте обсудим детали.
          </span>
        </h1>
        <button className="bg-gradient-to-r from-[#798FFF] to-[#D375FF] rounded-[104px] py-4 px-6 flex font-semibold desktop:text-lg desktop:leading-[18px] mobile:text-base mobile:leading-4 text-[#ffffff] justify-between desktop:min-w-[368px] tablet:max-desktop:min-w-[332px] mobile:max-tablet:w-full items-center">
          Оставить заявку <img src="src/assets/send.svg" alt="" />
        </button>
      </div>
      <div className="desktop-figma:min-w-[507px] tablet:max-desktop:flex items-stretch justify-between">
        <div className="tablet-figma:max-desktop:min-w-[332px] tablet:max-tablet-figma:min-w-[250px]">
          <h2 className="text-[#ffffff] desktop:text-xl desktop:leading-6 mobile:text-base mobile:leading-5 mb-4">
            Свяжитесь с нами
          </h2>
          <div className="flex flex-col gap-y-3 desktop:mb-20 mobile:max-tablet:mb-6">
            <button className="text-[#ffffff] desktop:text-lg mobile:max-desktop:text-base font-semibold py-4 px-6 flex items-center justify-between rounded-[104px] border border-[#3D425C] mobile:leading-4">
              Написать
              <img src="src/assets/mail.svg" alt="" />
            </button>
            <button className="text-[#ffffff] desktop:text-lg mobile:max-desktop:text-base font-semibold py-4 px-6 flex items-center justify-between rounded-[104px] border border-[#3D425C] mobile:leading-4">
              Позвонить
              <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]">
          <h2 className="desktop:text-xl desktop:leading-6 mobile:text-base mobile:leading-5 font-semibold text-[#ffffff]">
            Социальные сети
          </h2>
          <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>
  );
}
