import { FC, useEffect, useState } from "react";
import Footer from "../components/home/footer/Footer";
import InternalPageHeader from "../components/internalPageHeader/InternalPageHeader";
import * as CategoryAPI from "./api/category";
import *as CommonApi from "./api/common";
import styles from "./fotterPage.module.scss";
import cx from "classnames";
import { Image } from "antd";

import MediaQuery from "react-responsive";
import MobileHeader from "../components/home/mobile/mobileHeader/MobileHeader";
import MobileFooter from "../components/home/mobile/mobileFooter/MobileFooter";
import { baseUrl } from "../constants/urls";
import { seoDataMap } from '../mockData/seoData';
import SEOHead from "../components/SEOHead";
const seoData = seoDataMap['aboutUs'];


const AboutUs: FC<any> = () => {
  const [category, setCategory] = useState([]);
  const [categoryTree, setCategoryTree] = useState([]);
  const [stateArray, setStateArray] = useState([]);
  useEffect(() => {
    CategoryAPI.fetchCategory().then((res) => {
      setCategory(res);
    });
    CategoryAPI.fetchCategoryTree().then((res) => {
      setCategoryTree(res.categories);
    });
    CommonApi.getRequest(`${baseUrl}/api/indian-states`).then((res) => {
      setStateArray(res?.data)
    })
  }, []);

  return (
    <>
            <SEOHead {...seoData} />

      <MediaQuery maxWidth={768}>
        <MobileHeader />
      </MediaQuery>
      <MediaQuery minWidth={769}>
        <InternalPageHeader catagories={category} categoryTree={categoryTree} stateArray={stateArray} />
      </MediaQuery>
      <div className={cx("container", styles.mobileView)}>
        <h1 className={styles.aboutUsTitle}>About Us</h1>
        <>
          <meta httpEquiv="Content-Type" content="text/html; charset=utf-8" />
          <title>About us </title>
          <style
            type="text/css"
            dangerouslySetInnerHTML={{
              __html:
                ' * {margin:0; padding:0; text-indent:0; }\n h1 { color: black;  font-style: normal; font-weight: bold; text-decoration: none; font-size: 12pt; }\n p { color: black; font-style: normal; font-weight: normal; text-decoration: none; font-size: 12pt; margin:0pt; }\n .s1 { color: black;  font-style: normal; font-weight: normal; text-decoration: underline; font-size: 12pt; }\n .s2 { color: black;  font-style: italic; font-weight: normal; text-decoration: underline; font-size: 16pt; }\n .s3 { color: black;  font-style: normal; font-weight: normal; text-decoration: none; font-size: 20pt; }\n .s4 { color: black;  font-style: normal; font-weight: normal; text-decoration: none; font-size: 12pt;padding-bottom:8pt }\n li {display: block; }\n #l1 {padding-left: 0pt;counter-reset: c1 1; }\n #l1> li>*:first-child:before {counter-increment: c1; content: counter(c1, decimal)". "; color: black;  font-style: normal; font-weight: normal; text-decoration: none; font-size: 12pt; }\n #l1> li:first-child>*:first-child:before {counter-increment: c1 0;  }\n',
            }}
          />

          <p style={{ textIndent: "0pt", textAlign: "left" }}>
            <br />
          </p>
          <p
            style={{ paddingLeft: "6pt", textIndent: "0pt", textAlign: "left" }}
          >
            We are an e-commerce aggregator platform for pan India sellers,
            suppliers, distributors, manufacturers, &amp; consumers who are
            involved in the online buying &amp; selling of industrial
            consumables, machinery, equipment, &amp; spares.
          </p>
          <p style={{ textIndent: "0pt", textAlign: "left" }}>
            <br />
          </p>
          <p
            style={{ paddingLeft: "6pt", textIndent: "0pt", textAlign: "left" }}
          >
            We help to digitalise the industrial supply chain thereby tackling
            the major issue of industrial downtime due to scarcity of industrial
            spare parts through:
          </p>
          <p style={{ textIndent: "0pt", textAlign: "left" }}>
            <br />
          </p>
          <ol id="l1">
            <li data-list-text={1}>
              <p
                style={{
                  paddingLeft: "17pt",
                  textIndent: "-11pt",
                  textAlign: "left",
                }}
              >
                Seamless one-click buy/sell transactions of industrial spares,
                equipment, etc.
              </p>
            </li>
            <li data-list-text={2}>
              <p
                style={{
                  paddingLeft: "6pt",
                  textIndent: "0pt",
                  textAlign: "left",
                }}
              >
                Wide selection for these spares with multiple-way price
                comparison &amp; instant specification comparison.
              </p>
            </li>
            <li data-list-text={3}>
              <p
                style={{
                  paddingLeft: "6pt",
                  textIndent: "0pt",
                  textAlign: "left",
                }}
              >
                Easy to find product options equipped with financial support and
                different modes of delivery, including last-mile delivery +
                real-time tracking.
              </p>
            </li>
            <li data-list-text={4}>
              <p
                style={{
                  paddingLeft: "17pt",
                  textIndent: "-11pt",
                  textAlign: "left",
                }}
              >
                Assurance on the quality &amp; warranty with checks from our
                end.
              </p>
            </li>
          </ol>
          <p style={{ textIndent: "0pt", textAlign: "left" }}>
            <br />
          </p>
          <p
            className="s1"
            style={{ paddingLeft: "6pt", textIndent: "0pt", textAlign: "left" }}
          >
            Mission:
          </p>
          <p
            style={{
              paddingLeft: "6pt",
              textIndent: "0pt",
              textAlign: "justify",
            }}
          >
            To provide an AI-powered one-stop online portal for buyers &amp;
            sellers of industrial consumables &amp; spares with the best
            varieties &amp; prices, online warranty &amp; quality assurance,
            &amp; most diverse delivery options!
          </p>
          <p style={{ textIndent: "0pt", textAlign: "left" }}>
            <br />
          </p>
          <p
            className="s1"
            style={{ paddingLeft: "6pt", textIndent: "0pt", textAlign: "left" }}
          >
            Vision:
          </p>
          <p
            style={{ paddingLeft: "6pt", textIndent: "0pt", textAlign: "left" }}
          >
            To empower the MSMEs in the B2B space by digitally revolutionising
            the industrial spare parts supply chain pan India by seamlessly
            connecting the manufacturers, distributors, OEMs, &amp; suppliers
            with the target consumers - through a seamless one-stop portal for
            quick procurement &amp; sale!
          </p>
          <p style={{ textIndent: "0pt", textAlign: "left" }}>
            <br />
          </p>
          <p
            className="s2"
            style={{
              paddingLeft: "6pt",
              textIndent: "0pt",
              textAlign: "justify",
            }}
          >
            What services make us TICK?
          </p>
          <p
            style={{
              paddingTop: "1pt",
              paddingLeft: "6pt",
              textIndent: "0pt",
              lineHeight: "14pt",
              textAlign: "left",
            }}
          >
            Our 4 major services include:
          </p>
          <p
            className="s3"
            style={{
              paddingLeft: "6pt",
              textIndent: "0pt",
              lineHeight: "23pt",
              textAlign: "left",
              marginTop: "3pt",
            }}
          >
            T
            <span className="s4" >
              otal commitment towards seamless on-time delivery of a wide
              variety of industrial spares &amp; consumables.
            </span>
          </p>
          <p
            style={{
              paddingTop: "1pt",
              paddingLeft: "6pt",
              textIndent: "0pt",
              lineHeight: "14pt",
              textAlign: "left",
            }}
          >

          </p>
          <p
            className="s3"
            style={{
              paddingLeft: "6pt",
              textIndent: "0pt",
              lineHeight: "23pt",
              textAlign: "left",
              marginTop: "3pt",
            }}
          >
            I
            <span className="s4" >
              nformation to compare technical specifications, prices, &amp;
              online warranties of industrial spares &amp; consumables.
            </span>
          </p>
          <p
            style={{
              paddingTop: "2pt",
              paddingLeft: "6pt",
              textIndent: "0pt",
              lineHeight: "14pt",
              textAlign: "left",
            }}
          >

          </p>
          <p
            className="s3"
            style={{
              paddingLeft: "6pt",
              textIndent: "0pt",
              lineHeight: "23pt",
              textAlign: "left",
              marginTop: "3pt",
            }}
          >
            C
            <span className="s4" >
              arefully curated solutions to meet dynamic on-demand requirements
              on the delivery &amp; quality front.
            </span>
          </p>
          <p
            style={{
              paddingTop: "1pt",
              paddingLeft: "6pt",
              textIndent: "0pt",
              lineHeight: "14pt",
              textAlign: "left",
            }}
          >

          </p>
          <p
            className="s3"
            style={{
              paddingLeft: "6pt",
              textIndent: "0pt",
              lineHeight: "23pt",
              textAlign: "left",
              marginTop: "3pt",
            }}
          >
            K
            <span className="s4">
              eeping vendor &amp; customer satisfaction as well as relationship
              management as our top priority for seamless repeat procurement &amp; sales.
            </span>
          </p>

        </>
      </div>
      {/* <div className={styles.aboutContainer}>
        <h1 className={cx(styles.aboutUsTitle, "py-2")}>About us</h1>
        <div className={"ant-row"}>
          <div className={"ant-col ant-col-xs-0 ant-col-md-0 ant-col-xl-3"} />
          <div className={"ant-col ant-col-xs-24 ant-col-md-24 ant-col-xl-18"}>
            <div className={styles.aboutUsText}>
              Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit
              aut fugit, sed quia consequuntur magni dolores eos qui ratione
            </div>
          </div>
          <div className={"ant-col ant-col-xs-0 ant-col-md-0 ant-col-xl-3"} />
        </div>
        <div className={"ant-row"}>
          <div className={"ant-col ant-col-xs-0 ant-col-md-0 ant-col-xl-3"} />
          <div className={"ant-col ant-col-xs-24 ant-col-md-24 ant-col-xl-18"}>
            <div className={styles.aboutUsSubText}>
              Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit
              aut fugit, sed quia consequuntur magni dolores eos qui ratione
              voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem
              ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia
              non numquam eius modi tempora incidunt ut labore et dolore magnam
              aliquam quaerat voluptatem.{" "}
            </div>
          </div>
          <div className={"ant-col ant-col-xs-0 ant-col-md-0 ant-col-xl-3"} />
        </div>

        <div className={styles.colorContainer}>
          <div className={"ant-row"}>
            <div
              className={"ant-col ant-col-sm-24 ant-col-md-24 ant-col-xl-12"}
            >
              <Image
                src={"/images/aboutUsOurStory.svg"}
                preview={false}
                className={styles.ourStoryImage}
              />
            </div>
            <div
              className={
                "ant-col ant-col-sm-24 ant-col-md-24 ant-col-xl-12 items-center justify-center"
              }
            >
              <div className={styles.ourStoryTitle}>Our Story</div>

              <div className={styles.ourStoryText}>
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
                quae ab illoctetur, adipisc. Ut enim ad mii in ea Woluptate
                velit esse quam nihil molestiae consequatur, vel illum qui
                dolorem eum fugiat quo voluptas nulla pariatur. voluptate velit
                esse quam nihil molestiae consequatur, vel illum qui dolorem eum
                fugiat quo voluptas nulla pariatur. Molestiae consequatur, vel
                illum qui dolorem eum fugiat quo voluptas nulla pariatur.
              </div>
            </div>
          </div>
        </div>
        <div className={"ant-row py-8"}>
          <div className={"ant-col ant-col-sm-24 ant-col-md-24 ant-col-xl-12"}>
            <Image src={"/images/ourMission.svg"} preview={false}  className={styles.imagesMain}/>
            <div className={styles.missionBox}>
              <div className={styles.ourMissionTitle}>Our Mission</div>
              <div className={styles.ourMissionText}>
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
                quae ab illo inventore veritatis et quasi architecto beatae
                vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
                voluptas sit aspernatur aut odit aut fugit, sed quia
                consequuntur magni dolores eos qui ratione voluptatem sequi
                nesciunt.
              </div>
            </div>
          </div>
          <div className={"ant-col ant-col-sm-24 ant-col-md-24 ant-col-xl-12"}>
            <Image src={"/images/ourvision.svg"} preview={false} className={styles.imagesMain}/>
            <div className={styles.missionBox}>
              <div className={styles.ourMissionTitle}>Our Vision</div>
              <div className={styles.ourMissionText}>
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
                quae ab illo inventore veritatis et quasi architecto beatae
                vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
                voluptas sit aspernatur aut odit aut fugit, sed quia
                consequuntur magni dolores eos qui ratione voluptatem sequi
                nesciunt.
              </div>
            </div>
          </div>
        </div>
        <h1 className={cx(styles.foundationTitle, "pt-2")}>Founders</h1>
        <div className={styles.foundationText}>
          Sed ut perspiciatis unde omnis iste natus error sit voluptatem
          accusantium
        </div>
        <div className={"ant-row pt-4"}>
          <div className={"ant-col ant-col-xs-0 ant-col-xl-4"} />
          <div className={"ant-col ant-col-xs-24 ant-col-xl-16"}>
            <div className={"ant-row"}>
              <div className={"ant-col ant-col-xs-24 ant-col-xl-8"}>
                <Image src={"/images/person1.svg"} preview={false} />
                <div className={styles.imgContainer}>
                  <div className={styles.personName}>Louis Rowley</div>
                  <div>Founder</div>
                </div>
              </div>

              <div className={"ant-col ant-col-xs-24 ant-col-xl-8"}>
                <Image src={"/images/person2.svg"} preview={false} />
                <div className={styles.imgContainer}>
                  <div className={styles.personName}>Mike Hirey</div>
                  <div>Co-Founder</div>
                </div>
              </div>

              <div className={"ant-col ant-col-xs-24 ant-col-xl-8"}>
                <Image src={"/images/person3.svg"} preview={false} />
                <div className={styles.imgContainer}>
                  <div className={styles.personName}>Jamie Coal</div>
                  <div>Founder</div>
                </div>
              </div>
            </div>
          </div>
          <div className={"ant-col ant-col-xs-0 ant-col-xl-4"} />
        </div>
      </div> */}
      <Footer stateArray={stateArray} />
      <MediaQuery maxWidth={768}>
        <MobileFooter stateArray={stateArray} />
      </MediaQuery>
    </>
  );
};

export default AboutUs;