/* 
  This is the footer component.
  It contains the following components:
  - Footer
*/
'use client';
import React from "react";
// import styles from "./Footer.module.scss";
import { AppDispatch, RootState } from "@/redux/slices";
import { commonActions } from "@/redux/slices/Common/commonSlice";
import { HeaderFooterContent } from "@/src/types/StaticContent/headerfooter.content.type";
import ImagesConstants from "@/src/utils/ImagesConstants";
import Routes from "@/src/utils/RouteConstants";
import Image from "next/image";
import Link from "next/link";
import { useDispatch, useSelector } from "react-redux";
import FooterLogo from "../../../../public/images/logo.svg";

const Footer: React.FC<{ HeaderFooterContent: HeaderFooterContent }> = ({ HeaderFooterContent }) => {

  const dispatch = useDispatch<AppDispatch>();
  const { isBookingFlow } = useSelector((state: RootState) => state.common);

  const handleClick = (e: React.MouseEvent, url: string) => {
    if (isBookingFlow) {
      e.preventDefault();
      dispatch(commonActions.afterDraftedNavigation(url))
      dispatch(commonActions.draftedModal(true));
    }
  }

  return (
    <>
      <footer
        className={`border-t border-[#D0D0D0] w-full bg-whiteColor relative`}
      >
        <div className={`container`}>
          {/* Top Footer */}
          <div className={`flex lg:items-center lg:justify-between flex-col lg:flex-row gap-5 md:gap-8 lg:gap-10 py-[30px] md:py-[45px]`}>
            <div className={`lg:max-w-[450px] xl:max-w-[500px]`}>
              <h2 className={`!mb-3 sm:!mb-4`}>{HeaderFooterContent.HAVE_QUESTIONS}</h2>
              <Link
                onClick={(e) => {
                  handleClick(e, Routes.CONTACT)
                }}
                className={`PrimaryBtn w-max`}
                href={isBookingFlow ? "#" : Routes.CONTACT}>
                {HeaderFooterContent.CONTACT_US}
              </Link>
            </div>

            <div className={`lg:max-w-[350px] xl:max-w-[430px] lg:mr-[60px] xl:mr-[94px]`}>
              <p className={`text-grey475Color !mb-4 lg:!mb-6 fs-18`}>{HeaderFooterContent.NEED_HELP_FINDING_ANSWER}</p>
              <h6 className={`!mb-0 !font-fw400`}>
                <Link
                  onClick={(e) => {
                    handleClick(e, "mailto:hello@blankbase.io")
                  }}
                  className={`group gap-[14px] !underline inline-flex items-center !text-grey475Color hover:!text-primaryColor`}
                  href={isBookingFlow ? "#" : "mailto:hello@blankbase.io"}>
                  {HeaderFooterContent.MAIL_HELLO_BLANKBASE}
                  <span className={`w-[42px] h-[42px] rounded-full bg-primaryColor inline-flex justify-center items-center rotate-[-45deg] transition-all duration-300 group-hover:rotate-0`}><i className={`Icon IconRightArrow w-[20px] h-[20px] !bg-whiteColor`}></i></span>
                </Link>
              </h6>
            </div>
          </div>

          {/* Bottom Footer */}
          <div className={`flex flex-col lg:flex-row lg:items-center justify-between gap-[30px] md:gap-[40px] xl:gap-[40px] xxxl:gap-[50px] pt-[30px] md:pt-[45px] border-t border-[#D0D0D0]`}>
            <div>
              <Link
                onClick={(e) => {
                  handleClick(e, Routes.HOME)
                }}
                href={isBookingFlow ? "#" : Routes.HOME} className={`inline-block max-w-[135px] sm:max-w-[150px] md:max-w-[160px] w-full`}>
                <Image className={`w-full`} src={FooterLogo} alt="Logo" />
              </Link>
              <div className={`flex items-center gap-3 mt-4`}>
                <Link
                  onClick={(e) => {
                    handleClick(e, '#')
                  }}
                  className={`w-[120px] md:w-[130px] lg:w-[110px] xl:w-[130px] xxxl:w-[140px]`}
                  href={isBookingFlow ? "#" : "#"}
                  target="_blank">
                  <Image className={`!w-full`} width={150} height={50} src={ImagesConstants.PLAY_STORE_IMG} alt="play-store" />
                </Link>
                <Link
                  onClick={(e) => {
                    handleClick(e, '#')
                  }}
                  className={`w-[120px] md:w-[130px] lg:w-[110px] xl:w-[130px] xxxl:w-[140px]`}
                  href={isBookingFlow ? "#" : "#"} target="_blank">
                  <Image className={`!w-full`} width={150} height={50} src={ImagesConstants.APP_STORE_IMG} alt="app-store" />
                </Link>
              </div>
            </div>
            {/* Links Wrapper */}
            <div className={`lg:max-w-[700px] xl:max-w-[900px] xxxl:max-w-[1000px] w-full lg:border-l lg:border-r border-[#D0D0D0] grid xsm:grid-cols-3 lg:flex-row gap-5 md:gap-8 lg:gap-6 xxl:gap-12 lg:px-[30px] xxl:px-[40px] xxxl:px-[50px]`}>
              <div>
                <p className={`text-black !mb-[14px] fs-20 !font-fw600`}>{HeaderFooterContent.PRODUCT}</p>
                <ul className={`flex flex-col gap-3 list-none !p-0 !m-0`}>
                  <li className={`inline-flex`}>
                    <Link
                      onClick={(e) => {
                        handleClick(e, '#')
                      }}
                      className={`!text-grey62Color hover:!text-primaryColor fs-16`}
                      href={isBookingFlow ? "#" : Routes.ABOUT}>
                      {HeaderFooterContent.ABOUT_US}
                    </Link>
                  </li>
                  <li className={`inline-flex`}>
                    <Link
                      onClick={(e) => {
                        handleClick(e, '#')
                      }}
                      className={`!text-grey62Color hover:!text-primaryColor fs-16`}
                      href={isBookingFlow ? "#" : Routes.CONTACT}>
                      {HeaderFooterContent.CONTACT_US}
                    </Link>
                  </li>
                </ul>
              </div>
              <div>
                <p className={`text-black !mb-[14px] fs-20 !font-fw600`}>{HeaderFooterContent.FOR_HOMEOWNERS}</p>
                <ul className={`flex flex-col gap-3 list-none !p-0 !m-0`}>
                  <li className={`inline-flex`}>
                    <Link className={`!text-grey62Color hover:!text-primaryColor fs-16`}
                      onClick={(e) => {
                        handleClick(e, '#')
                      }}
                      href={isBookingFlow ? "#" : Routes.LIST_A_HOME}>{HeaderFooterContent.LIST_A_HOME}</Link></li>
                  <li className={`inline-flex`}>
                    <Link className={`!text-grey62Color hover:!text-primaryColor fs-16`}
                      onClick={(e) => {
                        handleClick(e, '#')
                      }}
                      href={isBookingFlow ? "#" : Routes.FAQS}>{HeaderFooterContent.FAQS}</Link></li>
                </ul>
              </div>
              <div>
                <p className={`text-black !mb-[14px] fs-20 !font-fw600`}>{HeaderFooterContent.LEGAL}</p>
                <ul className={`flex flex-col gap-3 list-none !p-0 !m-0`}>
                  <li className={`inline-flex`}>
                    <Link className={`!text-grey62Color hover:!text-primaryColor fs-16`}
                      onClick={(e) => {
                        handleClick(e, '#')
                      }}
                      href={isBookingFlow ? "#" : Routes.PRIVACY_POLICY}>{HeaderFooterContent.PRIVACY_POLICY}</Link></li>
                  <li className={`inline-flex`}>
                    <Link className={`!text-grey62Color hover:!text-primaryColor fs-16`}
                      onClick={(e) => {
                        handleClick(e, '#')
                      }}
                      href={isBookingFlow ? "#" : Routes.TERMS_OF_SERVICES}>{HeaderFooterContent.TERMS_OF_SERVICES}</Link></li>
                </ul>
              </div>
            </div>
            {/* Social Media */}
            <ul className={`flex items-center gap-5 xl:gap-6 list-none !p-0 !m-0`}>
              <li><Link
                onClick={(e) => {
                  handleClick(e, '#')
                }}
                href={isBookingFlow ? "#" : "#"} target="_blank"><i className={`Icon TwitterIcon w-[24px] h-[24px] !bg-secondaryColor hover:!bg-primaryColor`}></i></Link></li>
              <li><Link onClick={(e) => {
                handleClick(e, '#')
              }} href={isBookingFlow ? "#" : "#"} target="_blank"><i className={`Icon FacebookIcon w-[24px] h-[24px] !bg-secondaryColor hover:!bg-primaryColor`}></i></Link></li>
              <li><Link onClick={(e) => {
                handleClick(e, '#')
              }} href={isBookingFlow ? "#" : "#"} target="_blank"><i className={`Icon InstagramIcon w-[24px] h-[24px] !bg-secondaryColor hover:!bg-primaryColor`}></i></Link></li>
              <li><Link onClick={(e) => {
                handleClick(e, '#')
              }} href={isBookingFlow ? "#" : "#"} target="_blank"><i className={`Icon PinterestIcon w-[24px] h-[24px] !bg-secondaryColor hover:!bg-primaryColor`}></i></Link></li>
            </ul>
          </div>

          {/* Copyright */}
          <div className={`flex gap-4 items-center justify-between py-[20px] sm:py-[30px] md:py-[35px]`}>
            <p className={`w-full fs-16 lg:!text-center text-grey62Color`}>© 2025 {HeaderFooterContent.ALL_RIGHTS_RESERVED}</p>
          </div>

          {/* Blankbase Text */}
          <div className={`w-full overflow-hidden`}>
            <Image width={100} height={100} className={`!w-full mb-[-5px] xsm:mb-[-10px] md:mb-[-15px] lg:mb-[-20px] xxl:mb-[-25px] xxxl:mb-[-30px]`} src={ImagesConstants.BLANKBASE_FOOTER_IMG} alt="blankbase" />
          </div>
        </div>
      </footer>
    </>
  );
};

export default Footer;