import React from "react";
import Heroheader from "../../Components/heroheader/Heroheader";
import naptokenimg from "./Img/Group 3115.svg";
import { Col, Container, Row } from "react-bootstrap";
import NapTokenDiv from "../../Components/Naptoken-Div/Naptoken-Div";
import circulatingsupply from "./Img/12.png";
import Stakingpool from "./Img/ww.png";
import Growthpool from "./Img/growthpoolpng.png";
import Businesspool from "./Img/business.png";
import naptokenworkImg from "./Img/midimg.png";
import TextImg from "../../Components/Text-and-Img/Text-and-Img";
import Hownaptokenwork from "../../Components/How-naptoken-work/How-naptoken-work";
import RoadMap from "../../Section/RoadMap/RoadMap";
import team1 from "./Img/team1.png";
import Ellipse69 from "./Img/Ellipse 69.png";
import TeamList from "../../Components/Team-List/Team-List";
import NapTokenHeroHeader from "../../Components/heroheader/Nap-token-heroheader";
import MediaQuery from "react-responsive";
import RoadMapMobile from "../../Section/RoadMap/RoadMapMobile";
import teambg from "./Img/bg.png";
export default function NapToken() {
  const tokenlist = [
    {
      title: "Token name ",
      text: "NAP Token",
    },
    {
      title: "Token name ",
      text: "NAP Token",
    },
    {
      title: "Token name ",
      text: "NAP Token",
    },
    {
      title: "Token name ",
      text: "NAP Token",
    },
    {
      title: "Token name ",
      text: "NAP Token",
    },
    {
      title: "Token name ",
      text: "NAP Token",
    },
  ];

  const teamlist = [
    {
      img: team1,
      title: "Name Surname",
      text: "Job Position",
    },
    {
      img: team1,
      title: "Name Surname",
      text: "Job Position",
    },
    {
      img: team1,
      title: "Name Surname",
      text: "Job Position",
    },
    {
      img: team1,
      title: "Name Surname",
      text: "Job Position",
    },
    {
      img: team1,
      title: "Name Surname",
      text: "Job Position",
    },
  ];
  return (
    <div>
      {/* <Heroheader id="home" img={naptokenimg} naptoken /> */}
      <div className="pb-5">
        <NapTokenHeroHeader img={naptokenimg} />
      </div>

      <Container className="mt-5   mb-5 pb-5">
        <img
          src={Ellipse69}
          style={{
            position: "absolute",
            backgroundColor: "",
            maxWidth: "800px",
            right: "0",
          }}
        />
        <div className="mt-5 pt-5" style={{ padding: "15px 30px 15px 30px" }}>
          <NapTokenDiv title="Naplozz Tokenomics " titleSize="30px" lg={true} />
        </div>

        <Row className="mt-5 pb-5">
          {tokenlist.map(({ title, text, id }) => (
            <Col
              lg={4}
              md={6}
              className=""
              style={{ padding: "15px 40px 15px 40px" }}
              key={id}
            >
              <NapTokenDiv title={title} text={text} titleSize="22px" />
            </Col>
          ))}
        </Row>

        <Row className="align-items-center mt-5 pt-5">
          <Col md={12} lg={6} className="pt-3">
            <div
              style={{ fontSize: "30px", fontFamily: "light", color: "white" }}
            >
              The total supply of NAP Tokens
            </div>
            <div
              style={{
                fontSize: "30px",
                fontFamily: "semibold",
                color: "white",
              }}
            >
              will be divided as follows:
            </div>
          </Col>
          <Col md={12} lg={6} className="pt-3">
            <NapTokenDiv
              title="Circulating supply: "
              text="160,000,000 (160 Million) at the launch"
              titleSize="30px"
            />
          </Col>
        </Row>
        <div className="mt-5 pt-5">
          <TextImg
            title="Subscription pool:  80M"
            text="This pool is used to transfer tokens to the subscriber’s account whenever they pay for subscriptions. Over the first year of subscription, 25% of the value can be unlocked and accessed over monthly distributions. This amount increases to 50% in the second year, to 75% in the third year 75%, and to 100% in the fourth year."
            img={circulatingsupply}
            rightimg
          />

          <MediaQuery minWidth={991}>
            <TextImg
              title="Staking pool:"
              text="When Admin (subscription owner) decides not to spend it just hold it he can manually send it to the staking pool for a yearly 10% APY, but when the rewarded users got it as rewards it will automatically goes to the staking pool and staked, and so the rewarded users do not need to do it manually, of course he will be able to send it to external wallet in any time"
              img={Stakingpool}
            />
          </MediaQuery>
          <MediaQuery maxWidth={990}>
            <TextImg
              title="Staking pool:"
              text="When Admin (subscription owner) decides not to spend it just hold it he can manually send it to the staking pool for a yearly 10% APY, but when the rewarded users got it as rewards it will automatically goes to the staking pool and staked, and so the rewarded users do not need to do it manually, of course he will be able to send it to external wallet in any time"
              img={Stakingpool}
              rightimg
            />
          </MediaQuery>

          <TextImg
            title="Growth pool: 40M"
            text="This a “mint” pool which helps to slow down the token deflation without creating unlimited supply. This pool is used to add tokens to the subscription pool when necessary. For example, when 10% tokens from the subscription pool are burned, 10% of the tokens from the growth pool will be transferred to the subscription pool. After both subscription and growth pool run out, tokens will be bought back from the circulating supply, in order to assure that they can be transferred to the subscribers. "
            img={Growthpool}
            rightimg
          />
          <MediaQuery minWidth={991}>
            <TextImg
              title="Business pool: 40M"
              text="The business pool is used strictly for business reasons, and to help the Naplozz token ecosystem grow. This includes expenses such as exchange listings, marketing campaigns and so on. Funds in the Business pool are locked for a vesting period and their availability will increase by 10% per year. /ln In order to guarantee the optimal growth of the Naplozz ecosystem and to make sure that the token reimans valuable, Naplozz includes a Burn feature. Whenever the user unlocks a certain amount of tokens, an equal amount of tokens will be burned. Thanks to this, Naplozz tokens are immune to inflation."
              img={Businesspool}
            />
          </MediaQuery>
          <MediaQuery maxWidth={990}>
            <TextImg
              title="Business pool: 40M"
              text="The business pool is used strictly for business reasons, and to help the Naplozz token ecosystem grow. This includes expenses such as exchange listings, marketing campaigns and so on. Funds in the Business pool are locked for a vesting period and their availability will increase by 10% per year. /ln In order to guarantee the optimal growth of the Naplozz ecosystem and to make sure that the token reimans valuable, Naplozz includes a Burn feature. Whenever the user unlocks a certain amount of tokens, an equal amount of tokens will be burned. Thanks to this, Naplozz tokens are immune to inflation."
              img={Businesspool}
              rightimg
            />
          </MediaQuery>
        </div>

        <Row className="align-items-center justify-content-center p-3">
          <MediaQuery maxWidth={990}>
            <div className="text-center ">
              <div
                style={{
                  fontSize: "30px",
                  fontFamily: "semibold",
                  color: "white",
                }}
              >
                How Does
              </div>
              <div
                style={{
                  fontSize: "30px",
                  fontFamily: "light",
                  color: "white",
                }}
              >
                Naplozz Token Work?
              </div>
            </div>
          </MediaQuery>

          <Col lg={3} className="p-0">
            <Hownaptokenwork
              title="In practice, Naplozz Token can be used to achieve compliance based on the multi-tier system. Thanks to this system, business owners gain unparalleled levels of freedom that allows them to incentivize their employees as they see fit."
              borderColor="#97047A"
            />
            <Hownaptokenwork
              title="The locked tokens in the subscriber’s account will be eligible for being unlocked only when the entire account (including all the users, sites, tasks, logs and so on combined together) perform over a specific limit. The unlocked token distribution per month is equal for monthly and yearly subscribers."
              borderColor="#EF656E"
            />
            <Hownaptokenwork
              title="The Admin is the top tier of the Naplozz ecosystem. Admin is the original subscriber - the first user, owner of the account and usually of the business as well. The Admin invites his employees to the app, as many as he can according to his subscription category."
              borderColor="#F78250"
            />
          </Col>
          <Col xs="auto" className="p-0">
            <MediaQuery minWidth={991}>
              <div className="text-center ">
                <div
                  style={{
                    fontSize: "30px",
                    fontFamily: "semibold",
                    color: "white",
                  }}
                >
                  How Does
                </div>
                <div
                  style={{
                    fontSize: "30px",
                    fontFamily: "light",
                    color: "white",
                  }}
                >
                  Naplozz Token Work?
                </div>
              </div>
              <div className="text-center">
                <img src={naptokenworkImg} style={{ maxWidth: "500px" }} />
              </div>
            </MediaQuery>
          </Col>
          <Col lg={3} className="p-0">
            <Hownaptokenwork
              title="After the tokens are unlocked through compliant performance, the Admin will be able to reward his employees by sending tokens to them, incentivizing their quality work and efficient compliance."
              borderColor="#8A6BC6"
            />
            <Hownaptokenwork
              title="Only Admins will receive Naplozz tokens after paying for the subscription. However, the performance of other users and not just the Admin adds up to unlocking the tokens as well."
              borderColor="#4221C8"
            />
            <Hownaptokenwork
              title="When the Admin decides to send tokens as reward to the users, those tokens will automatically be added to the staking pool. The user can track their account balance easily, or withdraw the tokens to an external wallet at any time."
              borderColor="#F9B548"
            />
          </Col>
        </Row>
        <MediaQuery minWidth={991}>
          <RoadMap />
        </MediaQuery>
        <MediaQuery maxWidth={990}>
          <RoadMapMobile />
        </MediaQuery>

        <div
          className="pb-5 pt-5 mt-5"
          style={{
            color: "white",
            fontFamily: "semibold",
            fontSize: "50px",
          }}
        >
          Team Members
        </div>
        <Row className="pt-4 justify-content-center bgradial">
          <MediaQuery minWidth={991}>
            {teamlist.map((value) => {
              return (
                <Col className="m-2">
                  <TeamList
                    img={value.img}
                    title={value.title}
                    text={value.text}
                  />
                </Col>
              );
            })}
          </MediaQuery>
          <MediaQuery maxWidth={990}>
            {teamlist.map((value) => {
              return (
                <Col className="mt-4" md={4} sm={4} xs={6}>
                  <TeamList
                    img={value.img}
                    title={value.title}
                    text={value.text}
                  />
                </Col>
              );
            })}
          </MediaQuery>
        </Row>
      </Container>
    </div>
  );
}
