import { useRouter } from "next/router";
import { useMediaQuery } from "react-responsive";
import AccountCreation from "../../../components/becomeSeller/accountCreation/AccountCreation";
import MobileAccountCreation from "../../../components/becomeSeller/mobile/accountCreation/MobileAccountCreation";
import Login from "../../../components/becomeSeller/login/Login";
import MobileLogin from "../../../components/becomeSeller/mobile/login/MobileLogin";
import SellerHeader from "../../../components/header/sellerHeader/SellerHeader";
import MobileFooter from "../../../components/home/mobile/mobileFooter/MobileFooter";
import MobileHeader from "../../../components/home/mobile/mobileHeader/MobileHeader";
import Footer from "../../../components/home/footer/Footer";
import SEOHead from "../../../components/SEOHead";
import { seoDataMap } from "../../../mockData/seoData";
import Script from "next/script";
const seoData = seoDataMap['sellerLogin'];


export default function SellerLogin(props: any) {
  const router = useRouter();
  const { id } = router.query;

  const isMobile = useMediaQuery({ maxWidth: 767.68 });
  
  
  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");
              }
            }}
          />
      <div className="pt-4">
        {isMobile ?<MobileHeader />: <SellerHeader id={id}/>}
        { id && id == 'login' ? <><Login/></>  : null} 
        { id && id == 'signup' ? <>{isMobile ?<MobileAccountCreation/>:<AccountCreation/>}</> : null}
        <Footer/> 
        {isMobile && <MobileFooter/>}
      </div>
      </>
    );
  }