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 MediaQuery from "react-responsive";
import MobileHeader from "../components/home/mobile/mobileHeader/MobileHeader";
import MobileFooter from "../components/home/mobile/mobileFooter/MobileFooter";
import cx from "classnames";
import { baseUrl } from "../constants/urls";
import SEOHead from "../components/SEOHead";
import { seoDataMap } from "../mockData/seoData";
import Script from "next/script";
const seoData = seoDataMap['paymentOptions'];
const PaymentOptions: 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} />
      <Script
        src="https://alique.unboundai.me/widget.js"
        strategy="afterInteractive"
        onLoad={() => {
          if (typeof window.initChatbot === "function") {
            window.initChatbot({
              id: "indie-spare-bot-1",
              baseUrl: "https://alique.unboundai.me",
              position: "bottom-right",
              theme: {
                primaryColor: "#291C61",
                backgroundColor: "#ffffff",
                textColor: "#1f2937",
              },
            });
          } else {
            console.error("initChatbot not available after script load");
          }
        }}
      />
      <MediaQuery maxWidth={768}>
        <MobileHeader stateArray={stateArray} />
      </MediaQuery>
      <MediaQuery minWidth={769}>
        <InternalPageHeader catagories={category} categoryTree={categoryTree} stateArray={stateArray} />
      </MediaQuery>
      <div className={cx("container", styles.mobileView)}>
        <h2 className={styles.aboutUsTitle}>Payment options</h2>
        <p>We accept the following forms of payment:</p>
        <p className="py-2">
          {" "}
          -Visa
          <br />
          -Cash on Delivery <br />
          -Razorpay
        </p>
        <p>
          You agree to provide current, complete, and accurate purchase and
          account information for all purchases of the Marketplace Offerings
          made via the Site. You further agree to promptly update account and
          payment information, including email address, payment method, and
          payment card expiration date, so that we can complete your
          transactions and contact you as needed. Sales tax will be added to the
          price of purchases as deemed required by us. We may change prices at
          any time. All payments shall be in INR.
        </p>
        <p>
          You agree to pay all charges at the prices then in effect for your
          purchases and any applicable shipping fees, and you authorize us to
          charge your chosen payment provider for any such amounts upon placing
          your order. If your order is subject to recurring charges, then you
          consent to our charging your payment method on a recurring basis
          without requiring your prior approval for each recurring charge, until
          such time as you cancel the applicable order. We reserve the right to
          correct any errors or mistakes in pricing, even if we have already
          requested or received payment.
        </p>
        <p>
          We reserve the right to refuse any order placed through the Site. We
          may, in our sole discretion, limit or cancel quantities purchased per
          person, per household, or per order. These restrictions may include
          orders placed by or under the same customer account, the same payment
          method, and/or orders that use the same billing or shipping address.
          We reserve the right to limit or prohibit orders that, in our sole
          judgment, appear to be placed by dealers, resellers, or distributors.
        </p>
      </div>
      <Footer stateArray={stateArray} />
      <MediaQuery maxWidth={768}>
        <MobileFooter stateArray={stateArray} />
      </MediaQuery>
    </>
  );
};
export default PaymentOptions;