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

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

import arrow from "assets/icons/arrows/arrowLanding.svg";
import arrowReviewsLeft from "assets/icons/arrows/arrowReviewsLeft.png";
import arrowReviewsRight from "assets/icons/arrows/arrowReviewsRight.png";
import Ellipse from "assets/images/landingTracker/EllipseIntro.svg";
import code from "assets/images/landingTracker/backgroundCode.webp";
import ellipseGreen from "assets/images/landingTracker/ellipseGreen.svg";
import cat from "assets/images/landingTracker/landingCat.webp";
import flag from "assets/images/landingTracker/projectsFlag.webp";
import questionMark from "assets/images/landingTracker/questionMark.svg";
import trackerCup from "assets/images/landingTracker/trackerCup.webp";
import trackerPreview from "assets/images/landingTracker/trackerPreview.webp";
import trackerSign from "assets/images/landingTracker/trackerSign.webp";

import "./LandingTracker.scss";

export const LandingTracker = () => {
  const goals = [
    {
      miniInfo: "Окунитесь в экосистему ITGUIL",
      info: "<span>уточнение</span> деталей и <span>обсуждение</span> условий с менеджером ITGUILD"
    },
    {
      miniInfo: "Окунитесь в экосистему ITGUIL",
      info: "<span>подписание договора</span> без обязательств оплаты на данном этапе"
    },
    {
      miniInfo: "Окунитесь в экосистему ITGUIL",
      info: "<span>формирование</span> команды или подбор отдельных специалистов под требования клиентов"
    },
    {
      miniInfo: "Окунитесь в экосистему ITGUIL",
      info: "<span>интеграция специалистов</span> в команду клиента, ежедневная отчетность под контролем менеджера ITGUILD"
    }
  ];

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

  return (
    <section className="tracker">
      <section className="tracker__intro">
        <img className="intro__question-mark" src={questionMark} alt="" />
        <img className="intro__code" src={code} alt="" />
        <img className="intro__code--top" src={code} alt="" />

        <div className="tracker__container intro__container">
          <div className="intro-logo">
            <h3>
              ITGu <br /> ild
            </h3>
            <img className="intro-logo__cup" src={trackerCup} alt="" />
          </div>
          <div className="intro-content">
            <div className="intro-content__sublogo">
              <h5>IT GUILD</h5>
            </div>
            <span>
              Устали от хаоса в <br />
              управлении проектами?
            </span>
            <p>
              Хотите сделать командную работу более эффективной и продуктивной?
            </p>
          </div>
        </div>
      </section>

      <section className="tracker__presentation">
        <img className="presentation__code" src={code} alt="" />
        <img className="presentation__code--top" src={code} alt="" />
        <img className="presentation__ellipse" src={Ellipse} alt="" />
        <div className="tracker__container presentation__container">
          <h5>Мы здесь, чтобы помочь вам в этом!</h5>
          <h4>Трекер itguild</h4>
          <p>
            это ваш лучший <span>инструмент для эффективного управления</span>{" "}
            проектами и командной работы, созданный с учетом потребностей
            российских компаний и команд.
          </p>
          <div className="presentation-auth__buttons">
            <button className="signIn">
              <Link to="/auth">войти</Link>
            </button>
            <button className="signUp">
              <Link to="/auth">регистрация</Link>
            </button>
          </div>
          <div className="presentation__tracker-preview">
            <img src={trackerPreview} alt="" />
            <div className="tracker-preview__buttons">
              <button>
                <img src={arrowReviewsLeft} alt="" />
              </button>
              <button>
                <img src={arrowReviewsRight} alt="" />
              </button>
            </div>
          </div>
        </div>
        <div className="presentation__addition">
          <span>понятный интерфейс</span>
          <p>интуитивно понятный интерфейс</p>
        </div>
      </section>

      <section className="tracker__goals">
        <img className="goals__code" src={code} alt="" />
        <div className="tracker__container goals__container">
          <div className="goals-head">
            <h4 className="goals-head__logo">НАША ЦЕЛЬ</h4>
            <p className="goals-head__info">
              <span>
                Мы стремимся помочь российским компаниям и командам достичь
                своих целей,
              </span>{" "}
              предоставляя инструменты, которые улучшают процесс планирования,
              совместной работы и управления проектами.
            </p>
          </div>
          <div className="goals__items">
            {goals.map((step, index) => {
              return (
                <div key={index} className="item__wrapper">
                  <div className="item__head">
                    <h4>{`${index + 1}.`}</h4>
                    <p>{step.miniInfo}</p>
                  </div>
                  <div className="goals__item" key={index}>
                    <p
                      className="item__info"
                      dangerouslySetInnerHTML={{ __html: step.info }}
                    />
                  </div>
                </div>
              );
            })}
          </div>
          {/* <div className="steps__portfolio">
            <img src={portfolio} alt="portfolio" />
          </div> */}
        </div>
      </section>

      <section className="tracker__invite">
        <img className="invite__code" src={code} alt="" />
        <div className="tracker__container invite__container">
          <div className="invite__info">
            <h5>Присоединяйтесь к нам сегодня, уже завтра будет результат!</h5>
            <p>
              Готовы упростить свою жизнь и повысить эффективность работы вашей
              команды с помощью российской платформы? <br /> Присоединяйтесь к{" "}
              <span>Трекер it guild</span> уже сегодня и начните достигать
              больших результатов вместе с нами!
            </p>
            <div className="invite-auth__buttons">
              <button className="signIn">
                <Link to="/auth">войти</Link>
              </button>
              <button className="signUp">
                <Link to="/auth">регистрация</Link>
              </button>
            </div>
          </div>
          <div className="invite__logo">
            <h3>
              ITGu <br /> ild
            </h3>
            <img className="invite__logo__sign" src={trackerSign} alt="" />
            <img className="invite__logo__ellipse" src={ellipseGreen} alt="" />
          </div>
        </div>
      </section>

      <section className="tracker__nav">
        <div className="tracker__container nav__container">
          <div className="nav__project">
            <span className="project__img">
              <img className="flag" src={flag} alt="img" />
            </span>
            <p>
              <span>Мы гордимся</span> тем, что предлагаем инновационные решения
              прямо здесь, в <br /> России, и{" "}
              <span>способствуем развитию импортозамещения</span> в сфере
              IT-продуктов.
            </p>
          </div>
          <h5 className="nav__title">другие наши продукты</h5>
          <div className="nav__opportunities">
            {opportunities.map((opportunity, index) => {
              return (
                <NavLink
                  className={
                    opportunity.class ? opportunity.class : "nav__opportunity"
                  }
                  key={index}
                  to={`${opportunity.path}`}
                >
                  <div>
                    <p dangerouslySetInnerHTML={{ __html: opportunity.name }} />
                    {opportunity.img ? (
                      <img src={opportunity.img} alt="img" />
                    ) : (
                      ""
                    )}
                  </div>
                </NavLink>
              );
            })}
          </div>
        </div>
        <Footer />
      </section>
    </section>
  );
};