import React from "react";
import { Col, Container, Row } from "react-bootstrap";
import "./Heroheader.css";
import Ibutton from "../Button/Button";

// import { AiFillApple } from "react-icons/ai";
// import { FaGooglePlay } from "react-icons/fa";
import homePagebg from "./Img/homepagebg.png";
import naptokenPagebg from "./Img/Final.png";
import { useTranslation } from "react-i18next";
import { useLocation } from "react-router-dom";

function Heroheader({ id, img, naptoken }) {
  const location = useLocation();
  const { t } = useTranslation();
  return (
    <>
      <section
        id={id}
        style={{
          paddingTop: "80px",
          backgroundImage: `url(${
            location.pathname === "/naptoken" ? naptokenPagebg : homePagebg
          }) `,

          backgroundPosition: "bottom",
          backgroundSize: "cover",
          backgroundRepeat: "no-repeat",
        }}
      >
        <Container className="pt-5">
          <Row
            className={naptoken ? "" : " align-items-center"}
            style={{ height: naptoken && "550px" }}
          >
            <Col
              lg={naptoken ? 8 : 7}
              md={12}
              sm={12}
              className="resHeroHeader"
            >
              <div className="respBanner">
                <h1
                  style={{
                    fontFamily: "semibold",
                    color: "#0262F7",
                    fontSize: "65px",
                  }}
                >
                  {!naptoken && (
                    <span
                      style={{
                        color: "#0262F7",
                        fontFamily: "Light",
                        fontSize: "50px",
                      }}
                    >
                      {t("heroHeader.1")}
                    </span>
                  )}
                  <br />
                  {naptoken ? "NAP Token" : `${t("heroHeader.2")}`}
                </h1>
                {/* </motion.div> */}
                <div className="pt-2 mt-4">
                  {naptoken ? (
                    <p
                      style={{
                        fontSize: "25px",
                        fontFamily: "semibold",
                        color: "#FFB34D",
                      }}
                      className=" m-0"
                    >
                      The perfect incentive
                    </p>
                  ) : (
                    <p
                      style={{
                        fontSize: "25px",
                        fontFamily: "light",
                      }}
                      className=" m-0"
                    >
                      {t("heroHeader.3")}
                    </p>
                  )}
                  {naptoken ? (
                    <p
                      style={{
                        fontSize: "18px",
                        fontFamily: "light",
                        color: "white",
                        paddingRight: "90px",
                      }}
                      className=" m-0"
                    >
                      The NAP Token is a core element of the Naplozz compliance
                      ecosystem. This powerful, multi-functional utility token
                      enables business owners to incentivise employees, purchase
                      yearly and monthly subscriptions of Naplozz, or just
                      generate revenue by actively benefiting from the platform
                      while trying to perfect their services.
                    </p>
                  ) : (
                    <p
                      style={{
                        fontSize: "22px",
                        fontFamily: "light",
                      }}
                      className=" m-0"
                    >
                      {t("heroHeader.4")}
                    </p>
                  )}
                </div>
                {naptoken ? (
                  ""
                ) : (
                  <div className="pt-2 mt-5">
                    <Ibutton
                      color="#FD885A"
                      href="/commingsoon"
                      className="applebtn"
                      title={t("heroHeader.button")}
                      backgroundColor="transparent"
                      paddingTop="13px"
                      paddingBottom="13px"
                      borderRadius="7px"
                      fontFamily="semibold"
                    />
                  </div>
                )}
              </div>
            </Col>
            <Col md={12} lg={naptoken ? 4 : 5} sm={12}>
              <div className="">
                <img
                  className="glow"
                  src={img}
                  style={{ maxWidth: naptoken ? "110%" : "100%" }}
                  alt=""
                />
              </div>
            </Col>
          </Row>
        </Container>
      </section>
    </>
  );
}
export default Heroheader;
