import React, { useEffect } from "react";
import { Col, Container, Row } from "react-bootstrap";
import "./Whyusenaplozz.css";
import Reasons from "../Reasons/Reasons";
import savemoney from "./Img/Savemoney.gif";
import Lessstress from "./Img/Lessstress.gif";
import Reducerisk from "./Img/Reducerisk.gif";
import Savetime from "./Img/Savetime.gif";
import AnimatedText from "../AnimatedText/AnimatedText";
import { useTranslation } from "react-i18next";
import { useInView } from "react-intersection-observer";
import { motion } from "framer-motion";
import { useAnimation } from "framer-motion";
export default function Whyusenaplozz() {
  const { ref, inView } = useInView();
  const animation = useAnimation();
  useEffect(() => {
    if (inView) {
      animation.start({
        x: 0,
        transition: {
          ease: "easeOut",

          duration: 1.5,
        },
      });
    }
    if (!inView) {
      animation.start({ x: "-5vw" });
    }
  });
  const { t } = useTranslation();
  return (
    <>
      <section className=" pt-5 " style={{}}>
        <Container className="pt-5 ">
          <div className="pt-5">
            <p
              style={{
                fontFamily: "semibold",
                color: "#0262F7",
                letterSpacing: "2px",
                fontSize: "14px",
              }}>
              {t("whychoose.heading")}
            </p>

            <AnimatedText />
            {/* <Heading
              className="pb-2"
              title="Why Use Naplozz?"
              fontFamily="semibold"
              fontSize="32px"
            /> */}
          </div>

          <Row className="align-items-center " ref={ref}>
            <Col xl={12} lg={12}>
              <Row className="pt-4">
                <Col xl={3} lg={3} md={6} sm={6} xs={12}>
                  <motion.div animate={animation}>
                    <Reasons
                      image={savemoney}
                      title={t("whychoose.Savetime.title")}
                      content={t("whychoose.Savetime.content")}
                    />
                  </motion.div>
                </Col>
                <Col xl={3} lg={3} md={6} sm={6} xs={12}>
                  <motion.div animate={animation}>
                    <Reasons
                      image={Savetime}
                      title={t("whychoose.Reducesrisk.title")}
                      content={t("whychoose.Reducesrisk.content")}
                    />
                  </motion.div>
                </Col>
                <Col xl={3} lg={3} md={6} sm={6} xs={12}>
                  <motion.div animate={animation}>
                    <Reasons
                      image={Lessstress}
                      title={t("whychoose.Lessstress.title")}
                      content={t("whychoose.Lessstress.content")}
                    />
                  </motion.div>
                </Col>
                <Col xl={3} lg={3} md={6} sm={6} xs={12}>
                  <motion.div animate={animation}>
                    <Reasons
                      image={Reducerisk}
                      title={t("whychoose.Savemoney.title")}
                      content={t("whychoose.Savemoney.content")}
                    />
                  </motion.div>
                </Col>
              </Row>
            </Col>
          </Row>
        </Container>
      </section>
    </>
  );
}
