"use client";
import { Container, Row, Col, Nav, NavLink } from "react-bootstrap";
import "./Footer.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faFacebookF,
  faGoogle,
  faLinkedinIn,
  faTwitter,
} from "@fortawesome/free-brands-svg-icons";
import { useDispatch, useSelector } from "react-redux";
import {
  appSetup,
  getAllCategories,
  SocialLink,
} from "../../features/master/masterSlice";
import { useEffect } from "react";
import { getGroupByProduct } from "../../features/products/productsSlice";
import { usePathname, useRouter } from "next/navigation";
import Link from "next/link";
import {
  faEnvelope,
  faLocationDot,
  faPhone,
} from "@fortawesome/free-solid-svg-icons";

const Footer = () => {
  const navigate = useRouter();

  const scrollToSection = (id) => {
    // first navigate to Categories page
    dispatch(getGroupByProduct({ p_category_id: id }));
    // Wait a bit to let the Categories component mount
    setTimeout(() => {
      const element = document.getElementById(id);
      if (element) {
        element.scrollIntoView({ behavior: "smooth", block: "start" });
      }
    }, 100); // tweak delay if needed
    navigate.push(`/categories?category_id=${id}`, {
      state: { scrollToId: id },
    });
    // navigate(`/categories?category_id=${id}`);
  };

  const category = useSelector((state) => state.master.categories);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getAllCategories());
  }, [dispatch]);

  const sociallink = useSelector((state) => state?.master?.social_link);

  useEffect(() => {
    dispatch(SocialLink());
  }, [dispatch]);

  const isSignIn = useSelector((state) => state.auth.is_signin);

  const app_setup = useSelector((state) => state.master.app_setup);

  const pathname = usePathname();

  return (
    <>
      <section className="Footer">
        <div className="container">
          <div className="row custom_row ">
            <div className="col-xxl-3 col-xl-3 col-lg-3  col-12">
              {" "}
              <div className="fisrt_col">
                <div className="logo_holder">
                  <img
                    src={process.env.NEXT_PUBLIC_IMG_URL + app_setup?.logo}
                    // src={"/assets/images/logo/logo.jpg"}
                    className="logo_img"
                  />
                </div>
                <p className="footer_section_title about-text">
                  Boost farming efficiency with advanced agricultural machines
                  designed for faster, smarter, and more productive farming
                </p>
              </div>
            </div>
            <div className="col-xxl-2 col-xl-2 col-lg-2 col-md-3 col-sm-6 col-6">
              <div className="col_div">
                <p className="footer_section_title">Quick Links</p>

                <Nav>
                  <div className="first_nav_div">
                    <Nav.Item>
                      <NavLink
                        as={Link}
                        href="/"
                        className={pathname === "/" ? "active" : ""}
                      >
                        Home
                      </NavLink>
                    </Nav.Item>

                    <Nav.Item>
                      <NavLink
                        as={Link}
                        href="/shop"
                        className={pathname === "/shop" ? "active" : ""}
                      >
                        Categories
                      </NavLink>
                    </Nav.Item>

                    <Nav.Item>
                      <NavLink
                        as={Link}
                        href="/about-us"
                        className={pathname === "/about-us" ? "active" : ""}
                      >
                        About Us
                      </NavLink>
                    </Nav.Item>

                    <Nav.Item>
                      <NavLink
                        as={Link}
                        href="/blog"
                        className={pathname === "/blog" ? "active" : ""}
                      >
                        Blog
                      </NavLink>
                    </Nav.Item>

                    <Nav.Item>
                      <NavLink
                        as={Link}
                        href="/contact-us"
                        className={pathname === "/contact-us" ? "active" : ""}
                      >
                        Contact Us
                      </NavLink>
                    </Nav.Item>
                  </div>
                </Nav>
              </div>
            </div>
            <div className="col-xxl-2 col-xl-2 col-lg-2 col-md-3 col-sm-6 col-6">
              {" "}
              <div className="col_div">
                <p className="footer_section_title">Customer Service</p>

                <Nav>
                  <div className="first_nav_div">
                    <Nav.Item>
                      <NavLink
                        as={Link}
                        href="/terms-conditions"
                        className={
                          pathname === "/terms-conditions" ? "active" : ""
                        }
                      >
                        Terms & Conditions
                      </NavLink>
                    </Nav.Item>
                    <Nav.Item>
                      <NavLink
                        as={Link}
                        href="/privacy-policy"
                        className={
                          pathname === "/privacy-policy" ? "active" : ""
                        }
                      >
                        Privacy Policy
                      </NavLink>
                    </Nav.Item>

                    {isSignIn && (
                      <Nav.Item>
                        <NavLink
                          as={Link}
                          href="/account"
                          className={pathname === "/account" ? "active" : ""}
                        >
                          Your Account
                        </NavLink>
                      </Nav.Item>
                    )}

                    <Nav.Item>
                      <NavLink
                        as={Link}
                        href="/wishlist"
                        className={pathname === "/wishlist" ? "active" : ""}
                      >
                        Your Wishlist
                      </NavLink>
                    </Nav.Item>
                    <Nav.Item>
                      <NavLink as={Link} href="/faqs">
                        FAQs
                      </NavLink>
                    </Nav.Item>
                  </div>
                </Nav>
              </div>
            </div>
            <div className="col-xxl-3 col-xl-3 col-lg-3 col-md-4 col-sm-7 col-12">
              <div className="col_div">
                <div className="footer_info_div">
                  <p className="footer_section_title">Customer Support</p>
                  <p className="info_text">
                    <span className="bold_text">
                      {" "}
                      <FontAwesomeIcon icon={faPhone} /> Phone:
                    </span>{" "}
                    {app_setup?.contact_no}
                  </p>
                  <p className="info_text">
                    <span className="bold_text">
                      <FontAwesomeIcon icon={faEnvelope} />
                      {"  "}Email:
                    </span>{" "}
                    {app_setup?.email}
                  </p>
                </div>

                <div className="footer_info_div">
                  <p className="footer_section_title">
                    Phone for Corporate Queries{" "}
                  </p>
                  <p className="info_text">
                    <FontAwesomeIcon icon={faPhone} /> Phone:{" "}
                    {app_setup?.alt_contact_no}
                  </p>
                </div>

                <div className="footer_info_div">
                  <p className="footer_section_title">Address</p>
                  <p className="info_text">
                    <FontAwesomeIcon icon={faLocationDot} />
                    {"  "}
                    {app_setup?.address}
                  </p>
                </div>
              </div>
            </div>

            <div className="col-xxl-2 col-xl-2 col-lg-2 col-md-2 col-sm-5 col-12">
              <div className="col_div">
                <p className="footer_section_title">Social Links</p>

                <div className="icons_holder">
                  <div className="social-wrapper">
                    {sociallink?.map((item, index) => (
                      <div className="icon_div" key={index}>
                        <a
                          key={index}
                          href={item?.url}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="img_holder"
                        >
                          <img
                            src={process.env.NEXT_PUBLIC_IMG_URL + item?.image}
                            className="icon_class"
                          />
                        </a>
                      </div>
                    ))}{" "}
                  </div>
                  {/* <div className="col_div">
                    <p className="footer_section_title">App Link</p>

                    <div className="images_holder">
                      <img
                        src={"/assets/images/footer/img1.png"}
                        className="download_img"
                      />
                      <img
                        src={"/assets/images/footer/img2.png"}
                        className="download_img"
                      />
                    </div>
                  </div> */}
                </div>
              </div>
            </div>
          </div>

          <div className="footer_text_div">
            <p className="footer_text">
              ©{new Date().getFullYear()} Kissan Mitra All Rights Reserved |
              Developed by{" "}
              <Link href={"https://profcymaglobal.com/"} target="_blank">
                Profcyma Solutions Pvt Ltd
              </Link>
            </p>
          </div>
        </div>

        {/* <div className="right_side_logo">
          <img src={"/assets/images/footer/bglogo.png"} className="inner_img"/>
        </div> */}
      </section>
    </>
  );
};

export default Footer;
