import React from "react";
import SVG from "react-inlinesvg";
import { Link } from "react-router-dom";

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

import arrow from "assets/icons/arrows/arrowLanding.svg";
import authIcon from "assets/icons/authIcon.svg";
import clue from "assets/icons/landingClue.svg";
import telegram from "assets/icons/telegramIcon.svg";
import vk from "assets/icons/vkIcon.svg";
import codeBg from "assets/images/landingBackgroundCode.svg";
import cat from "assets/images/landingCat.png";

import "./landing.scss";

export const Landing = () => {
  const opportunities = [
    {
      name: "<span>Аутстаффинг</span> сотрудников",
      class: "outstaffing__employees",
      img: cat
    },
    {
      name: "Модуль для видеоконференций"
    },
    {
      name: "Система контроля версий GIT"
    },
    {
      name: "Управление задачами"
    },
    {
      name: "Система для отчётности"
    },
    {
      name: "Все наши предложения",
      class: "outstaffing__offers",
      img: arrow
    }
  ];

  return (
    <section className="landing">
      <div className="landing__container">
        <div className="landing__head">
          <h2 className="head__logo">ITGUILD</h2>
          <Link className="head__signIn" to="/auth">
            войти в систему
          </Link>
          <Link className="head__signUp" to="/auth">
            <SVG src={authIcon} />
            авторизация
          </Link>
        </div>
        <div className="landing__info">
          <p className="info__title">
            <SVG className="code" src={codeBg} />
            <span>Экосистема</span> для диджитализации бизнеса
          </p>
          <div className="landing__background">
            <h3>ITGuild</h3>
            <SVG className="clue" src={clue} />
            <SVG className="code" src={codeBg} />
          </div>
          <div className="info__block">
            <p>
              Подберем и документально оформим IT-специалистов, после чего
              передадим исполнителей под ваше руководство.
              <br />
              <br />
              <span>Вы получаете полное управление над сотрудниками,</span> имея
              возможность контролировать и заменять IT штат.
            </p>
          </div>
        </div>
        <div className="landing__opportunities">
          {opportunities.map((opportunity, index) => {
            return (
              <div
                className={
                  opportunity.class ? opportunity.class : "landing__opportunity"
                }
                key={index}
              >
                {opportunity.class ? (
                  <div>
                    <p dangerouslySetInnerHTML={{ __html: opportunity.name }} />
                    {opportunity.img ? (
                      <img src={opportunity.img} alt="img" />
                    ) : (
                      ""
                    )}
                  </div>
                ) : (
                  <p>{opportunity.name}</p>
                )}
              </div>
            );
          })}
        </div>
        <Footer />
      </div>
    </section>
  );
};