import React from "react";

import { AuthHeader } from "@components/Common/AuthHeader/AuthHeader";
import { Footer } from "@components/Common/Footer/Footer";
import SideBar from "@components/SideBar/SideBar";

import arrow from "assets/icons/arrows/arrowRight.svg";
import countingImg from "assets/icons/companyCountingBlockImg.svg";
import braceImg from "assets/images/countingBlockBrace.png";
import calcImg from "assets/images/countingBlockCalcImg.png";

import "./companyInfo.scss";

export const CompanyInfo = () => {
  return (
    <div className="company-info">
      <AuthHeader />
      <SideBar />
      <div className="company-info__content">
        <div className="container">
          <h1 className="company-info__title">
            <span>Арендуйте IT специалистов:</span>
            <br />
            быстро, выгодно, на любой срок.
          </h1>
          <div className="arrow-element arrow-down">
            <img src={arrow} alt="arrow" />
          </div>
          <p className="company-info__subTitle">
            Мы предоставляем вам «в аренду» IT-специалистов. При этом они
            находятся в нашем штате. Оплата происходит за отработанные часы
          </p>
          <div className="company-info__info">
            <div className="company-info__counting-block">
              <div className="company-info__counting-block__head">
                <img src={countingImg} alt="countingImg" />
                <div className="counting-block__info">
                  <h3 className="counting-block__title">
                    Экономия бюджета компании - главное преимущество
                    аутстаффинга
                  </h3>
                  <p className="counting-block__subTitle">
                    Приблизительный просчет дал результаты в экономии до 50%
                    бюджета
                  </p>
                </div>
                <div className="arrow-element">
                  <img src={arrow} alt="arrow" />
                </div>
              </div>
              <div className="company-info__counting-block__bottom">
                <span className="title-bottom">Давайте просчитаем:</span>
                <p className="subtitle-bottom">
                  Оплата работы <span>разработчика</span> в штат 1500 руб/ч (250
                  000 руб/мес).
                </p>
              </div>
              <img className="counting-block-img" src={calcImg} alt="calc" />
            </div>
            <div className="company-info__info__img">
              <img src={braceImg} alt="brace" />
            </div>
            <div className="company-info__info__items">
              <div className="info__item">
                <ul>
                  <li>НДФЛ (13% от зарплаты)</li>
                  <li>взносы в ПФР (22% от заработка)</li>
                  <li>взносы в ФСС (3%)</li>
                  <li>взносы в ОМС (5%)</li>
                </ul>
              </div>
              <div className="info__item">
                <ul>
                  <li>Закупка рабочего оборудования.</li>
                  <li>
                    Расходы на рекрутмент (10% от гросс либо 1−2 оклада для
                    штатного HR), затраты на размещение вакансий
                  </li>
                  <li>Затраты на обучения, аренду, амортизацию оборудования</li>
                </ul>
              </div>
            </div>
            <div className="company-info__info__total">
              <span className="company-info__info__total__title">
                В итоге у нас получается:
              </span>
              <div className="company-info__info__total__text">
                <p>
                  Специалист с изначальной расценкой в 1 500 руб/ч с учетом всех
                  остальных расходов
                  <span>
                    {" "}
                    будет стоить для <br />
                    компании около 3 000 руб/ч.
                  </span>
                </p>
                <p>
                  Услуги IT-аутстаффинга персонала позволяют сократить эти
                  расходы. Мы разбираемся с налогами, обучением, техникой — вы
                  оплачиваете только почасовую работу сотрудника.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <Footer />
    </div>
  );
};
