import React from "react";
import SVG from "react-inlinesvg";

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

import Ellipse from "assets/images/EllipseIntro.svg";
import backgroundOpp from "assets/images/backgroundOpportunity.png";
import cat from "assets/images/cat.png";
import clue from "assets/images/clue.png";
import code from "assets/images/landingBackgroundCode.png";

import "./stack.scss";

export const Stack = () => {
  const subjects = [
    {
      name: "Backend",
      skills: [
        "php",
        "yii2",
        "laravel",
        "symfony",
        "django",
        "nodejs",
        "fastAPI",
        "flask",
        "python",
        "exspress",
        "adonis"
      ]
    },
    {
      name: "Front",
      skills: [
        "react",
        "next.js",
        "typescript",
        "redux",
        "angular",
        "vue",
        "jquery",
        "css (sass/scss, tailwind, bootstrap, БЭМ)"
      ]
    }
  ];

  const projects = [
    {
      description:
        "Импортозамещение в управлении проектами <span>таск-трекер ITGuild</span>"
    },
    {
      description:
        "<span>Работа Тудей</span> - это сервис, который специализируется на поиске работы на новых территориях Российской Федерации."
    },
    {
      description:
        "<span>Внедрение искусственного интеллекта</span> (ИИ) в IT-проекты. Интеграции любых популярных сервисов."
    },
    {
      description:
        "Новостной портал и удобный каталог компаний <span>DaInfo.pro</span> предоставляющих различные услуги и товары."
    }
  ];
  return (
    <section className="stack">
      <AuthHeader />
      <section className="stack__intro">
        <div className="stack__container intro__container">
          <div className="intro__info">
            <span className="intro__suptitle">
              Все еще пытаетесь
              <br /> пасти котов?*
            </span>
            <h1 className="intro__title">
              Аутстаф
              <br />
              финг
            </h1>
            <span className="intro__subtitle">IT-специалистов</span>
            <p className="intro__about">
              Подберем и документально оформим IT-специалистов, после чего
              передадим исполнителей под ваше руководство.{" "}
              <span>Вы получаете полное управление над сотрудниками,</span> имея
              возможность контролировать и заменять IT штат.
            </p>
            <div className="intro__links">
              <button className="stack__button">оставить заявку</button>
              <span className="intro__link">
                Окунитесь в<br /> экосистему ITGUIL
              </span>
            </div>
          </div>
          <SVG className="intro__ellipse" src={Ellipse} />
          <div className="intro__aside">
            <h3 className="aside__logo">ITGu ild</h3>
            <div className="aside__clue">
              <img src={clue} alt="clue" />
              <p>
                <span>Каждый день</span> база специалистов пополняется на{" "}
                <span>+15 резюме</span>
              </p>
            </div>
            <img className="aside__cat" src={cat} alt="cat" />
          </div>
        </div>
      </section>
      <section className="stack__opportunity">
        <img src={backgroundOpp} className="background__opportunity--left" />
        <img src={backgroundOpp} className="background__opportunity--right" />
        <div className="stack__container opportunity__container">
          <img src={code} className="opportunity__code" />
          <img src={code} className="opportunity__code--center" />
          <div className="opportunity__block">
            <h3 className="opportunity__title">Stack</h3>
            <div className="opportunity__info">
              <span className="info__subtitle">
                Окунитесь в экосистему ITGUIL
              </span>
              <p className="info__about">
                <span>Вы получаете полное управление над сотрудниками,</span>{" "}
                имея возможность контролировать и заменять IT штат.
              </p>
              <div className="info__notification">
                <img src={clue} alt="clue" />
                <p>
                  Можем подготовить специалиста конкретно под ваш проект и
                  используемый стек. Таким образом вы сможете сэкономить ресурсы
                  на поиск кандидата.
                </p>
              </div>
            </div>
          </div>
          <div className="opportunity__subjects">
            {subjects.map((subject) => {
              return (
                <div className="subject" key={subject.name}>
                  <h4>{subject.name}</h4>
                  <div className="subject__skills">
                    {subject.skills.map((skill) => {
                      return <span key={skill}>{skill}</span>;
                    })}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>
      <section className="stack__projects projects">
        <div className="stack__container projects__container">
          <img className="projects__code" src={code} alt="code" />
          <h3 className="projects__title">ITGUILD</h3>
          <div className="projects__block">
            <h4>Наши проекты</h4>
            <div className="projects__examples">
              {projects.map((project, index) => {
                return (
                  <div key={index} className="stack__project">
                    <span className="project__img"></span>
                    <p
                      dangerouslySetInnerHTML={{ __html: project.description }}
                    ></p>
                  </div>
                );
              })}
            </div>
            <div className="projects__info">
              <p>
                Мы обеспечиваем финансовые, юридические и кадровые гарантии,
                предоставляем SLA и берем на себя ответственность за работу
                команды. Вам не требуется заниматься поиском, оформлением или
                увольнением сотрудников —{" "}
                <span>мы берем на себя все хлопоты.</span>
              </p>
              <button>оставить заявку</button>
            </div>
          </div>
        </div>
      </section>
    </section>
  );
};