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

import { Footer } from "@components/Common/Footer/Footer";
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/landingBackgroundCode.svg";
import cat from "assets/images/landingCat.png";
import ITguild from "assets/images/logo/ITguild.svg";

import "./landing.scss";

export const Landing = () => {
  const [active, setActive] = useState(false);
  const [modalReg, setModalReg] = useState(false);

  const toggleBar = () => {
    if (active) {
      setActive(false);
      document.body.style.overflow = "auto";
    } else {
      setActive(true);
      document.body.style.overflow = "hidden";
    }
  };

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

  return (
    <section className="landing">
      <ModalRegistration active={modalReg} setActive={setModalReg} />
      <div className="landing__container">
        <div className="landing__head">
          <h2 className="head__logo">ITGUILD</h2>
          <Link className="head__signIn" to="/auth">
            войти в систему
          </Link>

          <div
            className="head__signUp"
            onClick={(e) => {
              e.preventDefault();
              setModalReg(true);
            }}
          >
            <SVG src={authIcon} />
            регистрация
          </div>
          <div className="burger-menu" onClick={() => toggleBar()}>
            <div className="burger">
              <div
                className={active ? "burger__line  l1 change" : "burger__line"}
              ></div>
              <div
                className={active ? "burger__line  l2 change" : "burger__line"}
              ></div>
              <div
                className={active ? "burger__line  l3 change" : "burger__line"}
              ></div>
            </div>
            <h3 className="burger-menu__logo">меню</h3>
          </div>
          <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} />
            <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 (
              <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>
      <div className={active ? "auth-body active" : "auth-body"}>
        <div className="auth-body__title">
          <img src={ITguild}></img>
        </div>
        <ul className="auth-body__navigation">
          <li>
            <Link to={"/auth"}>Вход</Link>
          </li>
          <li>
            <Link to={"/profile"}>Личный кабинет</Link>
          </li>
          <li>
            <Link to={"/tracker-intro"}>Трекер</Link>
          </li>
          <li>
            <Link to={"/quiz"}>Тесты</Link>
          </li>
          <li>
            <Link to={"/forms"}>Формы</Link>
          </li>
          <li>
            <a href="#">Школа</a>
          </li>
          <li>
            <a href="#">Контакты</a>
          </li>
          <li>
            <Link to={"/blog"}>Блог</Link>
          </li>
          <li>
            <Link to={"/frequently-asked-questions"}>FAQ</Link>
          </li>
        </ul>
        <p className="auth-body__politic">Политика конфиденциальности</p>
      </div>
    </section>
  );
};