import React from "react";
import { Col, Container, Row } from "react-bootstrap";
import Ibutton from "../Button/Button";
import Heading from "../Heading/Heading";
import footerbg from "./Img/footerbg.png";
import { AiFillApple } from "react-icons/ai";
import { FaGooglePlay } from "react-icons/fa";
import { AiOutlineTwitter } from "react-icons/ai";
import { FaFacebookF } from "react-icons/fa";
import { RiLinkedinFill } from "react-icons/ri";
import { Link } from "react-router-dom";
import logo from "../../Components/Logo/logo.png";
import MediaQuery from "react-responsive";
import "./Footer.css";
import { useTranslation } from "react-i18next";
import { useLocation } from "react-router-dom";
export default function Footer() {
  const location = useLocation();
  const { t } = useTranslation();
  let footerList = [
    {
      title: <>{t("footer.industries.heading")}</>,
      list: [
        <>{t("footer.industries.list.1")}</>,
        <>{t("footer.industries.list.2")}</>,
        <>{t("footer.industries.list.3")}</>,
        <>{t("footer.industries.list.4")}</>,
        <>{t("footer.industries.list.5")}</>,
        <>{t("footer.industries.list.6")}</>,
        <>{t("footer.industries.list.7")}</>,
        <>{t("footer.industries.list.8")}</>,
        <>{t("footer.industries.list.9")}</>,
        <>{t("footer.industries.list.10")}</>,
      ],
    },

    {
      title: <>{t("footer.catering.heading")}</>,
      list: [
        <>{t("footer.catering.list.1")}</>,
        <>{t("footer.catering.list.2")}</>,
        <>{t("footer.catering.list.3")}</>,
        <>{t("footer.catering.list.4")}</>,
        <>{t("footer.catering.list.5")}</>,
        <>{t("footer.catering.list.6")}</>,
        <>{t("footer.catering.list.7")}</>,
        <>{t("footer.catering.list.8")}</>,
        <>{t("footer.catering.list.9")}</>,
        <>{t("footer.catering.list.10")}</>,
        <>{t("footer.catering.list.11")}</>,
      ],
    },
    {
      title: <>{t("footer.features.heading")}</>,
      list: [
        <>{t("footer.features.list.0")}</>,
        <>{t("footer.features.list.1")}</>,
        <>{t("footer.features.list.2")}</>,
        <>{t("footer.features.list.3")}</>,
        <>{t("footer.features.list.4")}</>,
        <>{t("footer.features.list.5")}</>,
        <>{t("footer.features.list.6")}</>,
        <>{t("footer.features.list.7")}</>,
        <>{t("footer.features.list.8")}</>,
        <>{t("footer.features.list.9")}</>,
        <>{t("footer.features.list.10")}</>,
      ],
    },
    {
      title: <>{t("footer.contact.heading")}</>,
      list: [
        <a
          className={
            location.pathname === "/naptoken"
              ? "nap-token-footerLink"
              : "footerLink"
          }
          href="#getstarted"
          onClick={() => {
            window.location.replace("/#getstarted");
          }}
        >
          <>{t("footer.contact.list.0")}</>
        </a>,
        <a
          className={
            location.pathname === "/naptoken"
              ? "nap-token-footerLink"
              : "footerLink"
          }
          href="/#contactus"
          onClick={() => {
            window.location.replace("/#contactus");
          }}
        >
          <>{t("footer.contact.list.1")}</>
        </a>,
        <a
          className={
            location.pathname === "/naptoken"
              ? "nap-token-footerLink"
              : "footerLink"
          }
          href="/#contactus"
          onClick={() => {
            window.location.replace("/#contactus");
          }}
        >
          <>{t("footer.contact.list.2")}</>
        </a>,
        <Link
          className={
            location.pathname === "/naptoken"
              ? "nap-token-footerLink"
              : "footerLink"
          }
          to="/TermsAndConditions"
        >
          <>{t("footer.contact.list.3")}</>
        </Link>,
      ],
    },
  ];
  return (
    <>
      <section
        className="  "
        // style={{
        //   paddingTop: "80px",
        //   backgroundImage: `url(${footerbg}) `,
        //   backgroundPosition: "bottom",
        //   backgroundSize: "cover",
        //   backgroundRepeat: "no-repeat",
        // }}
      >
        <Container className="pt-5 ">
          <MediaQuery minWidth={1000}>
            <Row className=" pt-5">
              {footerList.map(({ title, list }) => {
                return (
                  <>
                    <Col xl={3} lg={3} md={3} sm={3}>
                      <Heading
                        className="pb-3"
                        title={title}
                        color={
                          location.pathname === "/naptoken" ? "white" : "black"
                        }
                        fontFamily="semibold"
                        fontSize="20px"
                      />

                      {list?.map((value) => {
                        return (
                          <p
                            style={{
                              color:
                                location.pathname === "/naptoken"
                                  ? "white"
                                  : "black",
                              opacity:
                                location.pathname === "/naptoken" && "0.5",
                            }}
                            id="/#getstarted"
                          >
                            {value}
                          </p>
                        );
                      })}
                    </Col>
                  </>
                );
              })}
            </Row>
            <Row className="align-items-center pt-5 ">
              <Col xl={4} lg={4} md={2} sm={3} xs={3}>
                {/* <Heading
                title="Naplozz"
                color="#1B0B5E"
                fontFamily="semibold"
                fontSize="20px"
              /> */}
                <a href="/">
                  <AiOutlineTwitter
                    className="socialIcon"
                    style={{
                      fontSize: "23px",
                      marginRight: "15px",
                      color:
                        location.pathname === "/naptoken"
                          ? "white"
                          : "rgb(165, 165, 165)",
                    }}
                  />
                </a>
                <a href="/">
                  <FaFacebookF
                    className="socialIcon"
                    style={{
                      fontSize: "17px",
                      marginRight: "15px",
                      color:
                        location.pathname === "/naptoken"
                          ? "white"
                          : "rgb(165, 165, 165)",
                    }}
                  />
                </a>
                <a href="/">
                  <RiLinkedinFill
                    className="socialIcon"
                    style={{
                      fontSize: "23px",
                      color:
                        location.pathname === "/naptoken"
                          ? "white"
                          : "rgb(165, 165, 165)",
                    }}
                  />
                </a>
              </Col>

              <Col xl={4} lg={4} md={4} sm={9} xs={9}>
                <p
                  className="text-center"
                  style={{
                    color:
                      location.pathname === "/naptoken"
                        ? "white"
                        : "rgb(165, 165, 165)",
                  }}
                >
                  © copyright 2021
                </p>
              </Col>
              <Col xl={4} lg={4} md={6}>
                <MediaQuery minWidth={768}>
                  <div className="text-end pb-2">
                    <Ibutton
                      href="/commingsoon"
                      className={
                        location.pathname === "/naptoken"
                          ? "nap-token-applebtnFooter"
                          : "applebtnFooter"
                      }
                      title="App Store"
                      borderRadius="50px"
                      fontFamily="semibold"
                      fontSize="13px"
                      icon={
                        <AiFillApple
                          style={{
                            fontSize: "20px",
                            marginRight: "10px",
                            // paddingTop: "0px",
                          }}
                        />
                      }
                    />
                    <Ibutton
                      href="/commingsoon"
                      fontSize="13px"
                      color="#0262F7"
                      className={
                        location.pathname === "/naptoken"
                          ? "nap-token-googlebtnFooter"
                          : "googlebtnFooter"
                      }
                      title="Google Play"
                      borderRadius="50px"
                      fontFamily="semibold"
                      icon={
                        <FaGooglePlay
                          style={{
                            fontSize: "15px",
                            marginRight: "10px",
                            // paddingTop: "0px",
                          }}
                        />
                      }
                    />
                  </div>
                </MediaQuery>
              </Col>
            </Row>
          </MediaQuery>
          <MediaQuery maxWidth={999}>
            <Row className="justify-content-center text-center">
              <Col lg={12} md={8} sm={10} xs={12}>
                <div className="  justify-content-center text-center">
                  {/* {footerList.map(({ title, list }) => {
                  return (
                    <>
                      <div>
                        <a className="footerLink mobileFooter">
                          <>{title}</>
                        </a>
                      </div>
                    </>
                  );
                })} */}
                  <a
                    className="footerLink mobileFooter"
                    href="/#getstarted"
                    onClick={() => {
                      window.location.replace("/#getstarted");
                    }}
                  >
                    <>{t("footer.industries.heading")}</>
                  </a>{" "}
                  <a
                    className="footerLink mobileFooter"
                    href="/#getstarted"
                    onClick={() => {
                      window.location.replace("/#getstarted");
                    }}
                  >
                    <>{t("footer.catering.heading")}</>
                  </a>{" "}
                  <a
                    className="footerLink mobileFooter"
                    href="/#getstarted"
                    onClick={() => {
                      window.location.replace("/#getstarted");
                    }}
                  >
                    <>{t("footer.features.heading")}</>
                  </a>
                  <a
                    className="footerLink mobileFooter"
                    href="/#getstarted"
                    onClick={() => {
                      window.location.replace("/#getstarted");
                    }}
                  >
                    <>{t("footer.contact.list.0")}</>
                  </a>
                  <a
                    className="footerLink mobileFooter"
                    href="/#contactus"
                    onClick={() => {
                      window.location.replace("/#contactus");
                    }}
                  >
                    <>{t("footer.contact.list.2")}</>
                  </a>
                  <a
                    className="footerLink mobileFooter"
                    href="/#contactus"
                    onClick={() => {
                      window.location.replace("/#contactus");
                    }}
                  >
                    <>{t("footer.contact.list.1")}</>
                  </a>
                  <Link
                    className="footerLink mobileFooter"
                    to="/TermsAndConditions"
                  >
                    <>{t("footer.contact.list.3")}</>
                  </Link>
                </div>
              </Col>
              <Col lg={12} md={8} className="text-center mt-3">
                <img style={{ maxWidth: "25%" }} src={logo} alt="" />
                <p
                  className="text-center"
                  style={{ color: "rgb(165, 165, 165)" }}
                >
                  All Rights Reserved © copyright 2021
                </p>
                <a href="/commingsoon">
                  <AiOutlineTwitter
                    className="socialIcon"
                    style={{
                      fontSize: "23px",
                      marginRight: "15px",
                      color: "rgb(165, 165, 165)",
                    }}
                  />
                </a>
                <a href="/">
                  <FaFacebookF
                    className="socialIcon"
                    style={{
                      fontSize: "17px",
                      marginRight: "15px",
                      color: "rgb(165, 165, 165)",
                    }}
                  />
                </a>
                <a href="/">
                  <RiLinkedinFill
                    className="socialIcon"
                    style={{ fontSize: "23px", color: "rgb(165, 165, 165)" }}
                  />
                </a>
              </Col>
            </Row>
          </MediaQuery>
        </Container>
      </section>
    </>
  );
}
