import { FC, useEffect, useRef, useState } from "react";
import CustomerCategory from "../category/CustomerCategory";
import styles from "./custonerHomePage.module.scss";
import {
    Button,
    Form,
    Image,
    Input,
    message,
    Modal,
    notification,
    Radio,
    Select,
    Space,
    Spin,
} from "antd";
import { googleClientId } from "../../../constants/socialLogin";
import * as commonAPI from "../../../pages/api/common";
import { GoogleLogin, GoogleLogout } from "react-google-login";
import { useRouter } from "next/router";
import cx from "classnames";
import { MailOutlined } from "@ant-design/icons";
import OtpInput from "react-otp-input";
import Future from "../../home/future/Future";
import * as GallariesApi from "../../../pages/api/gallaries";
import { baseUrl } from "../../../constants/urls";
import * as LoginAPI from "../../../pages/api/login";
import ResetPassword from "../../modal/resetPassword/ResetPassword";
import SignUpModal from "../../modal/latestSignUpModal/SignUpModal";
const md5 = require("md5");

const CustomerHomePage: FC<any> = (props) => {
    const [form] = Form.useForm();
    const loginRef = useRef<null | HTMLDivElement>(null);

    const [modeData, setMode] = useState("sms");
    const [phoneNo, setPhone] = useState("");
    const [emailOtp, setEmailOtp] = useState("");
    const [loginEmail, setLoginEmail] = useState("");
    const [otp, setOtp] = useState("");
    const [password, setPassword] = useState("");
    const [submitFormStatus, setSubmitStatus] = useState(false);
    const [isSignupModal, setIsSignupModal] = useState(false);
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [isSubmitEmail, setIsSubmitEmail] = useState(false);
    const [loading, setLoading] = useState(false);
    const [whatsOTPAppNumber, setWhatsOTPAppNumber] = useState("");
    const [otpRes, setOtpRes] = useState<any>({});
    const [isDisable, setIsDisable] = useState(false);
    const [isPasswordReset, setIsPasswordReset] = useState(false);
    const [isLoading, setIsLoading] = useState(false);
    const [isSuccessModal, setIsSuccessModal] = useState(false);
    const router = useRouter();
    const [futureData, setFutureData] = useState([]);

    const handleModeChange = (e: any) => {
        setMode(e.target.value);
        setEmailOtp("");
        setWhatsOTPAppNumber("");
        setPhone("");
    };
    const resetBack = () => {
        setIsModalVisible(false);
    };

    const responseGoogleError = (response: any) => {
        if (!response) {
            return;
        }
        console.log("Error", response);
    };

    /*google login  success message and login api function */
    const responseGoogle = (response: any) => {
        if (!response) {
            return;
        }
        const authRes = response.getAuthResponse();
        const params = {
            authResponse: authRes,
        };
        LoginAPI.socialLoginFetch(params).then((res) => {
            console.log(
                res.status,
                "res.statusres.statusres.statusres.statusres.statusres.statusres.status"
            );
            if (res.status && res?.data) {
                localStorage.setItem("loginDetails", JSON.stringify(res.data));
                router.replace("/home");
            } else {
                notification.error({ message: "error" });
            }
        });
    };


    /* login with phone and otp  api function*/
    const login = () => {
        const finalValue =
            whatsOTPAppNumber !== ""
                ? whatsOTPAppNumber
                : phoneNo !== ""
                    ? phoneNo
                    : emailOtp;
        const params = {
            finalValue,
            otp,
        };

        const encriptOtp = md5(otp);
        if (`${otpRes.otp}` !== encriptOtp) {
            notification.error({ message: "Please  enter Valid OTP" });
        } else {
            LoginAPI.loginWithOTP(params).then((res) => {
                if (res?.error) {
                    if (props?.page === "checkOut") {
                        localStorage.setItem("phoneData", finalValue);
                        router.push(
                            {
                                pathname: `/signIn`,
                                query: { phone: finalValue },
                            },
                            "/signIn"
                        );
                    } else {
                        setIsSignupModal(true);
                    }

                    setSubmitStatus(false);
                    setOtp("");
                } else if (res?.status) {
                    notification.error({ message: res?.data?.error });
                } else {
                    redirection(res);
                }
            });
        }
    };

    const loginOTPWithEmail = () => {
        const finalValue = phoneNo === "" ? emailOtp : phoneNo;
        const params = {
            email: emailOtp,
            otp: otp,
        };
        const encriptOtp = md5(otp);
        if (`${otpRes.otp}` !== encriptOtp) {
            notification.error({ message: "Please  enter Valid OTP" });
        } else {
            LoginAPI.LoginEmailWithOTP(params).then((res) => {
                if (res?.message === "User not exists.") {
                    if (props?.page === "checkOut") {
                        localStorage.setItem("Email", emailOtp);
                        router.push(
                            {
                                pathname: `/signIn`,
                                query: { email: emailOtp },
                            },
                            "/signIn"
                        );
                    } else {
                        setIsSignupModal(true);
                        form.setFieldsValue({
                            emailOtp: emailOtp,
                        });
                        setEmailOtp(emailOtp);
                        // setSubmitStatus(true);
                    }
                } else if (res?.status === false) {
                    notification.error({ message: res?.message });
                    setOtp("");
                    // setIsSignUp(false);
                } else {
                    redirection(res);
                }
            });
        }
    };

    /* success login redirect pages */
    const redirection = (res: any) => {
        localStorage.setItem("loginDetails", JSON.stringify(res));
        setSubmitStatus(false);

        setSubmitStatus(false);

        if (props?.page === "checkOut") {
            router.push({
                pathname: `/checkout`,
            });
        } else if (props?.page === "customer") {
            router.push("/customerSupport/customerOrder");
        } else if (props?.page === "home" || props?.page === "orderDetails") {
            router.reload();
        } else {
            router.push({
                pathname: `/home`,
            });
        }
    };



    /* phone otp api function */
    const onPhoneSubmit = (values: any) => {
        setSubmitStatus(true);
        setIsDisable(true);
        const params = {
            finalValue: values.phone,
        };
        LoginAPI.OtpVarify(params).then((res) => {
            setIsDisable(false);
            setOtpRes(res);
        });
    };

    const resetPassword = () => {
        setIsLoading(true);
        commonAPI.getRequest(`${baseUrl}/api/forget-password?email=${emailOtp}`).then((res) => {
            setEmptyData();
            setSubmitStatus(false);
            setIsSuccessModal(false);
            setTimeout(() => {
                setIsPasswordReset(true);
                setIsLoading(false);
            }, 10);
        })
    }
    const setEmptyData = () => {
        setSubmitStatus(false);
        setOtp("");
        setPhone("");
        setLoginEmail("");
        setPassword("");
        setIsModalVisible(false);
        setIsSubmitEmail(false);
    };
    useEffect(() => {
        GallariesApi.GalleriesApi().then((res: any) => {
            let { addsVal, blogVal, peopleVal, offerVal, iconVal }: any = [];
            GallariesApi.ImagesApi().then((resImg) => {
                res.map((data: any, i: number) => {
                    if (data.gallery_code === "ads-homepage") {
                        addsVal = data.image_ids.split(",");
                    } else if (data.gallery_code === "Blog thumb Images") {
                        blogVal = data.image_ids.split(",");
                    } else if (data.gallery_code === "Offers-homepage") {
                        offerVal = data.image_ids.split(",");
                    } else if (data.gallery_code === "Home images - Trusted by section") {
                        peopleVal = data.image_ids.split(",");
                    } else if (data.gallery_code === "Core-values-icons-home") {
                        iconVal = data.image_ids.split(",");
                    }
                });



                const iconData = resImg.filter((e: any) => iconVal.includes(`${e.id}`));

                setFutureData(iconData);

            });
        });


    }, [])


    const whatsAppSubmit = () => {
        const params = {
            phone: whatsOTPAppNumber,
        };

        commonAPI.postRequest(baseUrl + "/api/get-wp-otp", params).then((res) => {
            setSubmitStatus(true);
        });
    };


    /* change email or phone function*/
    const changeOtp = (e: any) => {
        setOtp(e);
    };


    /*sign in with mail function */
    const signInWithMail = () => {
        setEmptyData();
        setIsModalVisible(true);
        // handleOTPClose()
    };

    const onEmailSubmit = (values: any) => {
        setSubmitStatus(true);
        setIsDisable(true);
        const params = {
            email: emailOtp,
        };
        LoginAPI.EmailSentOTP(params).then((res) => {
            setOtpRes(res);
            setIsDisable(false);
        });
    };



    /* resend otp email or phone api function */
    const resend = () => {
        setLoading(true);
        if (phoneNo !== "") {
            const params = {
                finalValue: phoneNo,
            };
            LoginAPI.OtpVarify(params).then((res) => {
                setOtpRes(res);
                setLoading(false);
            });
        } else {
            const params = {
                email: emailOtp,
            };
            LoginAPI.EmailSentOTP(params).then((res) => {
                setOtpRes(res);
                setLoading(false);
            });
        }
    };


    const passWordMailSubmit = () => {
        // setIsSubmitEmail(true);

        commonAPI
            .getRequest(`${baseUrl}/api/customer/check-mail?email=${emailOtp}`)
            .then((res: any) => {
                if (res?.data?.status === false) {
                    setIsModalVisible(false);
                    if (props?.page === "checkOut") {
                        localStorage.setItem("Email", emailOtp);
                        router.push(
                            {
                                pathname: `/signIn`,
                                query: { email: emailOtp },
                            },
                            "/signIn"
                        );
                    } else {
                        form.setFieldsValue({
                            emailOtp: emailOtp,
                        });

                        setEmailOtp(emailOtp);

                        setSubmitStatus(true);
                    }
                } else {
                    setIsSubmitEmail(true);
                }
            });
    };

    const loginWithPassword = () => {
        const params = {
            email: emailOtp,
            password: password,
        };
        if (password == "") {
            notification.error({ message: "Please Enter Password" });
        } else {
            LoginAPI.loginFetch(params).then((res) => {
                if (res?.status) {
                    notification.error({ message: res?.data?.error });
                } else {
                    setIsSubmitEmail(false);
                    setEmptyData();
                    resetBack();
                    localStorage.setItem("loginDetails", JSON.stringify(res));
                    router.reload();
                }
            });
        }
    };


    return (
        <>
            <div>
                <div className={styles.homepageSubContainer}>
                    <div className="container">
                        <div className={"ant-row"}>
                            <div className="ant-col ant-col-xl-8 ant-col-xs-24 ant-col-md-12" ref={loginRef}>
                                <div className={styles.loginContainer}>
                                    {isModalVisible ? (
                                        <div>
                                            <h2 className={styles.headerTitle}>Sign In or Sign Up with Email</h2>
                                            <div className={styles.alignDataMain}>
                                                <div className={styles.formContainer}>
                                                    {!isSubmitEmail ? (
                                                        <Form
                                                            onFinish={passWordMailSubmit}
                                                            name="email_login"
                                                            initialValues={{ remember: true }}
                                                            autoComplete="on"
                                                            form={form}
                                                        >
                                                            <Form.Item
                                                                name="login_email"
                                                                rules={[
                                                                    {
                                                                        required: true,
                                                                        message: "Please Enter your Email Address!",
                                                                    },
                                                                ]}
                                                            >
                                                                <Input
                                                                    style={{ height: "45px" }}
                                                                    placeholder="Please Enter your Email Address"
                                                                    value={emailOtp}
                                                                    onChange={(e) => {
                                                                        setEmailOtp(e.target.value);
                                                                    }}
                                                                />
                                                            </Form.Item>
                                                            <Form.Item>
                                                                <Button
                                                                    block
                                                                    htmlType="submit"
                                                                    type="primary"
                                                                    style={{ height: "45px" }}
                                                                >
                                                                    Continue
                                                                </Button>
                                                            </Form.Item>
                                                        </Form>
                                                    ) : (
                                                        <div>
                                                            {/* <h2 className={styles.headerTitle}>Enter Password</h2> */}
                                                            <Spin size="large" spinning={isLoading}>
                                                                <div className="flex items-center justify-evenly">
                                                                    <h5 className={styles.headerSubTitle}>{emailOtp}</h5>
                                                                    <div
                                                                        className={styles.editIcon}
                                                                        onClick={() => {
                                                                            setIsSubmitEmail(false);
                                                                        }}
                                                                    >
                                                                        Edit
                                                                    </div>
                                                                </div>
                                                                <Form
                                                                    name="email_login"
                                                                    initialValues={{ remember: true }}
                                                                    autoComplete="on"
                                                                    form={form}
                                                                >
                                                                    <Form.Item
                                                                        name="password"
                                                                        rules={[
                                                                            {
                                                                                required: true,
                                                                                message: "Please Enter Your Password!",
                                                                            },
                                                                        ]}
                                                                    >
                                                                        <Input.Password
                                                                            type="password"
                                                                            placeholder="Password"
                                                                            value={password}
                                                                            onChange={(event) => setPassword(event.target.value)}
                                                                            className={styles.userName}
                                                                        />
                                                                    </Form.Item>
                                                                    <div className={styles.forgotPassword}
                                                                        onClick={resetPassword}
                                                                    >Forgot Password</div>
                                                                    <Form.Item>
                                                                        <Button
                                                                            block
                                                                            onClick={loginWithPassword}
                                                                            htmlType="submit"
                                                                            type="primary"
                                                                        >
                                                                            Continue
                                                                        </Button>
                                                                    </Form.Item>
                                                                </Form>
                                                            </Spin>
                                                        </div>
                                                    )}

                                                    <div className={cx("pt-4", styles.colorDisplay)}>Or</div>
                                                    <div>
                                                        <Button
                                                            style={{ height: "45px" }}
                                                            type="primary"
                                                            ghost
                                                            className={cx("my-2")}
                                                            block
                                                            onClick={resetBack}
                                                        >
                                                            Sign In/Sign Up with OTP
                                                        </Button>
                                                    </div>
                                                </div>
                                                <div className={cx(styles.iconContainer)}>

                                                    <GoogleLogin
                                                        clientId={googleClientId}
                                                        onSuccess={responseGoogle}
                                                        onFailure={responseGoogleError}
                                                        cookiePolicy={"single_host_origin"}
                                                        className={"google_login"}
                                                        buttonText="Sign In with Google"
                                                        style={{ backgroundColor: "red" }}
                                                    ></GoogleLogin>

                                                </div>
                                            </div>
                                        </div>
                                    ) : null}
                                    {!submitFormStatus && !isModalVisible ? (
                                        <div>
                                            <h2 className={styles.headerTitle}>Sign In or Sign Up</h2>
                                            <h5 className={styles.headerSubTitle}>
                                                Receiving an OTP by selecting one of the options <br />below to Sign In
                                            </h5>
                                            <div className={styles.alignDataMain}>
                                                <Radio.Group
                                                    onChange={handleModeChange}
                                                    value={modeData}
                                                    className={styles.tabsData}
                                                >
                                                    <Radio.Button
                                                        value="sms"
                                                        className={cx(
                                                            modeData === "sms"
                                                                ? styles.radioButton
                                                                : styles.radioButtonActive
                                                        )}
                                                    >
                                                        Phone
                                                    </Radio.Button>

                                                    <Radio.Button
                                                        value="email"
                                                        className={cx(
                                                            modeData === "email"
                                                                ? styles.radioButton
                                                                : styles.radioButtonActive
                                                        )}
                                                    >
                                                        Email
                                                    </Radio.Button>
                                                </Radio.Group>
                                                {modeData === "email" ? (
                                                    <div className={styles.formContainer}>
                                                        <Form
                                                            layout="vertical"
                                                            name="normal_login"
                                                            initialValues={{ remember: true }}
                                                            onFinish={onEmailSubmit}
                                                            autoComplete="on"
                                                            form={form}
                                                        >
                                                            <Form.Item
                                                                name="emailOtp"
                                                                rules={[
                                                                    {
                                                                        required: true,
                                                                        message: "Please Enter your Email Address!",
                                                                    },
                                                                    {
                                                                        pattern:
                                                                            /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
                                                                        message: `Enter Valid Email Address`,
                                                                    },
                                                                ]}
                                                            >
                                                                <Input
                                                                    style={{ height: "45px" }}
                                                                    placeholder="Please Enter your Email Address"
                                                                    value={emailOtp}
                                                                    onChange={(e) => {
                                                                        setEmailOtp(e.target.value);
                                                                    }}
                                                                />
                                                            </Form.Item>
                                                            <Form.Item>
                                                                <Button
                                                                    block
                                                                    htmlType="submit"
                                                                    type="primary"
                                                                    disabled={isDisable}
                                                                    style={{ height: "45px" }}
                                                                >
                                                                    Send OTP
                                                                </Button>
                                                            </Form.Item>
                                                        </Form>
                                                    </div>
                                                ) : modeData === "sms" ? (
                                                    <div className={styles.formContainer}>
                                                        <Form
                                                            name="normal_login"
                                                            className="login-form"
                                                            initialValues={{ remember: true }}
                                                            onFinish={onPhoneSubmit}
                                                            autoComplete="on"
                                                            form={form}
                                                        >
                                                            <Form.Item
                                                                name="phone"
                                                                rules={[
                                                                    {
                                                                        required: true,
                                                                        message: "Please Enter your Phone Number!",
                                                                    },
                                                                    {
                                                                        pattern: /^[5-9][0-9]{9}$/,
                                                                        message: `Enter Valid Phone Number`,
                                                                    },
                                                                ]}
                                                            >
                                                                <Input
                                                                    placeholder="Please Enter Your Ten Digits Mobile Number"
                                                                    maxLength={10}
                                                                    style={{ height: "45px" }}
                                                                    value={phoneNo}
                                                                    onChange={(e) => {
                                                                        setPhone(e.target.value);
                                                                    }}
                                                                />
                                                            </Form.Item>
                                                            <Form.Item>
                                                                <Button
                                                                    block
                                                                    htmlType="submit"
                                                                    type="primary"
                                                                    disabled={isDisable}
                                                                    style={{ height: "45px" }}
                                                                >
                                                                    Send OTP
                                                                </Button>
                                                            </Form.Item>
                                                        </Form>
                                                    </div>
                                                ) : (
                                                    <div className={styles.formContainer}>
                                                        <Form
                                                            name="normal_login"
                                                            className="login-form"
                                                            initialValues={{ remember: true }}
                                                            onFinish={whatsAppSubmit}
                                                            autoComplete="on"
                                                            form={form}
                                                        >
                                                            <Form.Item
                                                                name="whatsAppPhone"
                                                                rules={[
                                                                    {
                                                                        required: true,
                                                                        message: "Please Enter your WhatsApp Phone Number!",
                                                                    },
                                                                    {
                                                                        pattern: /^[5-9][0-9]{9}$/,
                                                                        message: `Please Enter your WhatsApp Phone Number`,
                                                                    },
                                                                ]}
                                                            >
                                                                <Input
                                                                    placeholder="Please Enter WhatsApp Mobile Number"
                                                                    maxLength={10}
                                                                    value={whatsOTPAppNumber}
                                                                    onChange={(e) => {
                                                                        setWhatsOTPAppNumber(e.target.value);
                                                                    }}
                                                                />
                                                            </Form.Item>
                                                            <Form.Item>
                                                                <Button block htmlType="submit" type="primary">
                                                                    Send OTP
                                                                </Button>
                                                            </Form.Item>
                                                        </Form>
                                                    </div>
                                                )}
                                                <div className={cx("py-4", styles.colorDisplay)}>Or</div>
                                                <div className={cx(styles.iconContainer)}>
                                                    <Button
                                                        block
                                                        style={{
                                                            height: "45px",
                                                            background: "#EAE8EF",
                                                            color: "#291C61",
                                                            marginBottom: "0.5rem",
                                                            border: "1px solid rgba(41, 28, 97, 0.3)",
                                                            fontWeight: "500",
                                                            paddingLeft: "3.5rem",
                                                            textAlign: "left"
                                                        }}
                                                        onClick={() => {
                                                            signInWithMail();
                                                        }}
                                                        icon={<MailOutlined className={cx(styles.iconDisplay)} />}
                                                    >
                                                        Sign In or Sign Up with Email
                                                    </Button>
                                                    <GoogleLogin
                                                        clientId={googleClientId}
                                                        onSuccess={responseGoogle}
                                                        onFailure={responseGoogleError}
                                                        cookiePolicy={"single_host_origin"}
                                                        className={"google_login"}
                                                        buttonText="Sign In with Google"
                                                        style={{ backgroundColor: "red", justifyContent: "center !important", display: "flex", paddingLeft: "auto !important" }}
                                                    ></GoogleLogin>

                                                </div>
                                            </div>
                                        </div>
                                    ) : submitFormStatus && !isModalVisible ? <div className={styles.otpEnterMain}>
                                        <div>
                                            <h2 className={styles.headerTitle}>OTP Verification</h2>
                                        </div>
                                        <div className="flex justify-between">
                                            <h5 className={styles.headerMainSubTitle}>
                                                {whatsOTPAppNumber !== ""
                                                    ? `OTP is Sent to  ${whatsOTPAppNumber}`
                                                    : phoneNo !== ""
                                                        ? `OTP is Sent to  ${phoneNo}`
                                                        : `OTP is Sent to  ${emailOtp}`}
                                            </h5>
                                            <div
                                                className={styles.editIcon}
                                                onClick={() => {
                                                    setSubmitStatus(false);
                                                }}
                                            >
                                                Edit
                                            </div>
                                        </div>
                                        <OtpInput
                                            value={otp}
                                            onChange={changeOtp}
                                            numInputs={6}
                                            isInputNum={true}
                                            shouldAutoFocus={true}
                                            separator={<span>&nbsp;&nbsp;</span>}
                                        />
                                        <Button
                                            type="primary"
                                            block
                                            className={cx("my-8", styles.buttonLogin)}
                                            onClick={() => {
                                                phoneNo === "" && whatsOTPAppNumber === ""
                                                    ? loginOTPWithEmail()
                                                    : login();
                                            }}
                                        >
                                            Login
                                        </Button>
                                        <Button type="link" style={{ textAlign: "left" }}
                                            onClick={resend}
                                        >
                                            Resend OTP
                                        </Button>
                                        <Spin spinning={loading} size="large" tip="Loading..." />
                                    </div> : null}
                                </div>
                            </div>
                            <div className={cx("ant-col ant-col-xl-16 ant-col-xs-24 ant-col-md-12", styles.plPage)}>
                                <div className={styles.titlePl}>
                                    <div className={styles.title}>Over 10 Lakh+ <br />Products</div>
                                    <div className={cx(styles.subTitle, "pt-4")}>Most reliable spare parts  delivered at the right time  at the right price</div>
                                    <Image src={"/images/landingpage-signin-imgs/signin-banner-bg.png"} alt="images" preview={false} className={styles.heroImage} />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className={styles.sliderContainer}>
                    <div className="container">

                        <CustomerCategory />
                    </div>
                </div>

                <Future icons={futureData} page={"customer"} />
                <div className="container pt-10">
                    <div className="ant-row items-center">
                        <div className="ant-col ant-col-xl-12 ant-col-md-12 ant-col-xs-24">
                            <Image src={"/images/landingpage-signin-imgs/screen-responsive-signin.png"} alt="images" preview={false} />
                        </div>
                        <div className="ant-col ant-col-xl-12 ant-col-md-12 ant-col-xs-24">
                            <div className={cx(styles.titleOffer, "pb-10")}>What services Indispare offers?</div>
                            <div className="pb-8">At Indispare, we are devoted to helping industries with their day-to-day downtown problems. Contact us today to learn more about how we can help you!
                            </div>
                            <ul className={styles.listing}>
                                <li>Total commitment towards seamless on-time delivery of a wide variety of industrial spares & consumables.</li>
                                <li>Information to compare technical specifications, prices, & online warranties of industrial spares & consumables.</li>
                                <li>Carefully curated solutions to meet dynamic on-demand requirements on the delivery & quality front.</li>
                                <li>Keeping vendor & customer satisfaction as well as relationship management as our top priority for seamless repeat procurement & sales.</li>
                            </ul>
                        </div>
                    </div>

                </div>
                <div className="container py-10">
                    <div className="ant-row" style={{ backgroundColor: "#F5F5F5", textAlign: "center", padding: "1rem 0", borderRadius: "6px" }}>
                        <div className="ant-col ant-col-xl-6 ant-col-xs-12">
                            <div className={styles.numberText}>
                                39494
                            </div>
                            <div className={styles.typeText}>
                                Orders
                            </div>
                        </div>
                        <div className="ant-col ant-col-xl-6 ant-col-xs-12">
                            <div className={styles.numberText}>
                                37800
                            </div>
                            <div className={styles.typeText}>
                                Customers
                            </div>
                        </div>
                        <div className="ant-col ant-col-xl-6 ant-col-xs-12">
                            <div className={styles.numberText}>
                                5000+
                            </div>
                            <div className={styles.typeText}>
                                Products
                            </div>
                        </div>
                        <div className="ant-col ant-col-xl-6 ant-col-xs-12">
                            <div className={styles.numberText}>
                                2560
                            </div>
                            <div className={styles.typeText}>
                                Sellers
                            </div>
                        </div>
                    </div>
                </div>

                <div className="container">
                    <div className="ant-row justify-center">
                        <div className="ant-col ant-col-xl-10 ant-col-xs-24 py-12">
                            <ul className={styles.contactList}>
                            
                                <li>
                                    <div>
                                        <Image src={"/images/landingpage-signin-imgs/icon-email.png"} alt="images" preview={false} />
                                        <div><a href="mailto:contact@indispare.net">Contact@Indispare.net</a></div>
                                    </div>
                                </li>
                                <li>
                                    <div>
                                        <Image src={"/images/landingpage-signin-imgs/icon-chat.png"} alt="images" preview={false} />
                                        <div><a>Chat with us</a></div>
                                    </div>
                                </li>
                               
                                
                            </ul>
                        </div>
                    </div>
                </div>
                <div className="container py-10">
                    <div className={styles.bottomContainer}>
                        <div className={styles.bottomText}>Wide range of <span style={{ color: "#F3465F" }}>genuine</span> industrial products <br /> at unbelievable discount!</div>
                        <div className={styles.smallFotterText}>Start Buying Online and Avail Discounts!</div>
                        <Button type="primary" style={{ height: "52px", width: "190px", marginTop: "1rem" }} onClick={() => { loginRef.current?.scrollIntoView({ behavior: 'smooth' }); }}>Sign up Now</Button>
                    </div>
                </div>
            </div>
            <ResetPassword
                isResetPassword={isPasswordReset}
                handleCloseResetPassword={() => { setIsPasswordReset(false) }}
                email={emailOtp}
                
            />
            <SignUpModal
                page={props?.page}
                stateArray={props?.stateArray}
                isSignupModal={isSignupModal}
                handleSignUpClose={() => setIsSignupModal(false)}
                mobile={phoneNo}
                email={emailOtp}
                whatsOTPAppNumber={whatsOTPAppNumber}
            />
        </>
    )
}

export default CustomerHomePage;