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

import { BurgerButton } from "@components/BurgerMenu/burgerButton";
import { BurgerMenu } from "@components/BurgerMenu/burgerMenu";
import { Footer } from "@components/Common/Footer/Footer";
import ModalAuth from "@components/Modal/ModalAuth/ModalAuth";
import ModalRegistration from "@components/Modal/ModalRegistration/ModalRegistration";

import arrow from "assets/icons/arrows/arrowLanding.svg";
import authIcon from "assets/icons/authIcon.svg";
import clue from "assets/icons/landingClue.svg";
import tracker from "assets/icons/landingTracker.svg";
import codeBg from "assets/images/landing/backgroundCode.webp";
import cat from "assets/images/landing/landingCat.webp";
import reportingSystem from "assets/images/landing/reportingSystem.webp";
import searchIT from "assets/images/landing/searchIT.webp";
import systemControlGit from "assets/images/landing/systemControlGit.webp";
import taskManagement from "assets/images/landing/taskManagement.webp";

import "./landing.scss";

export const Landing = () => {
  const [modalReg, setModalReg] = useState(false);
  const [modalAuth, setModalAuth] = useState(false);
  const [menuActive, setMenuActive] = useState(false);

  const opportunities = [
    {
      name: "<span>Аутстаффинг</span> сотрудников",
      path: "/stack",
      img: cat
    },
    {
      name: "<span>Найти</span> работу <br/> в IT",
      path: "/stack",
      img: searchIT
    },
    {
      name: "<span>Система</span> контроля версий GIT",
      path: "/stack",
      img: systemControlGit
    },
    {
      name: "<span>Управление</span> задачами",
      path: "/landing-tracker",
      img: taskManagement
    },
    {
      name: "<span>Система</span> для отчётности",
      path: "/stack",
      img: reportingSystem
    },
    {
      name: "Все наши предложения",
      path: "/stack",
      class: "outstaffing__offers",
      img: arrow
    }
  ];

  return (
    <section className="landing">
      <ModalRegistration active={modalReg} setActive={setModalReg} />
      <ModalAuth active={modalAuth} setActive={setModalAuth} />
      <BurgerMenu active={menuActive} />
      <div className="landing__container">
        <div className="landing__head">
          <h2 className="head__logo">ITGUILD</h2>
          <div
            className="head__signIn"
            onClick={(e) => {
              e.preventDefault();
              setModalAuth(true);
            }}
          >
            войти в систему
          </div>
          <div
            className="head__signUp"
            onClick={(e) => {
              e.preventDefault();
              setModalReg(true);
            }}
          >
            <SVG src={authIcon} />
            регистрация
          </div>
          <BurgerButton active={menuActive} setActive={setMenuActive} />
          <div className="head__tracker">
            <div>
              <img src={tracker} alt="tracker" />
            </div>
            <span>трекер</span>
          </div>
          <SVG className="head__auth" src={authIcon} />
        </div>
        <div className="landing__info">
          <p className="info__title">
            <SVG className="code" src={codeBg} />
            <span>Экосистема</span> для диджитализации бизнеса
          </p>
          <Link className="info__signIn" to="/auth">
            войти в систему
          </Link>
          <div className="landing__background">
            <h3>ITGuild</h3>
            <SVG className="clue" src={clue} />
            <img className="code" src={codeBg} alt="" />
          </div>
          <div className="info__block">
            <p>
              Подберем и документально оформим IT-специалистов, после чего
              передадим исполнителей под ваше руководство.
              <br />
              <br />
              <span>Вы получаете полное управление над сотрудниками,</span> имея
              возможность контролировать и заменять IT штат.
            </p>
          </div>
        </div>
        <div className="landing__opportunities">
          {opportunities.map((opportunity, index) => {
            return (
              <NavLink
                className={
                  opportunity.class ? opportunity.class : "landing__opportunity"
                }
                key={index}
                to={`${opportunity.path}`}
              >
                <div>
                  <p dangerouslySetInnerHTML={{ __html: opportunity.name }} />
                  {opportunity.img ? (
                    <img src={opportunity.img} alt="img" />
                  ) : (
                    ""
                  )}
                </div>
              </NavLink>
            );
          })}
        </div>
        <Footer />
      </div>
    </section>
  );
};