"use client";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { usePathname } from "next/navigation";
import Link from "next/link";
import { getAllCategories, SocialLink } from "../../features/master/masterSlice";
import "./Footer.css"

const Footer = () => {
  const pathname = usePathname();
  const dispatch = useDispatch();

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

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

  return (
    <footer className="Footer">
      <div className="container">
        <div className="row">
          {/* Column 1: Brand Logo & Short Desc/Socials */}
          <div className="col-lg-3 col-md-6 mb-4 mb-lg-0">
            <div className="logo_holder">
              <img src="/assets/images/logo/Logo.png" className="logo_img" alt="Logo" />
            </div>
            <p className="info_text pe-lg-3">
              Bringing premium quality and customer service right to your doorstep.
            </p>
            <div className="icons_holder">
              {sociallink?.map((item, index) => (
                <a
                  key={index}
                  href={item?.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="icon_div"
                >
                  <img
                    src={process.env.NEXT_PUBLIC_IMG_URL + item?.image}
                    className="icon_class"
                    alt="Social Icon"
                  />
                </a>
              ))}
            </div>
          </div>

          {/* Column 2: Navigation links split naturally */}
          <div className="col-lg-3 col-md-6 col-6 mb-4 mb-lg-0">
            <h5 className="footer_section_title">Company</h5>
            <div className="nav_column">
              <Link href="/" className={`footer_link ${pathname === "/" ? "active" : ""}`}>
                Home
              </Link>
              <Link href="/about-us" className={`footer_link ${pathname === "/about-us" ? "active" : ""}`}>
                About Us
              </Link>
              <Link href="/blog" className={`footer_link ${pathname === "/blog" ? "active" : ""}`}>
                Blog
              </Link>
              <Link href="/contact-us" className={`footer_link ${pathname === "/contact-us" ? "active" : ""}`}>
                Contact Us
              </Link>
            </div>
          </div>

          {/* Column 3: Legal/Account Links */}
          <div className="col-lg-3 col-md-6 col-6 mb-4 mb-lg-0">
            <h5 className="footer_section_title">Support</h5>
            <div className="nav_column">
              <Link href="/account" className={`footer_link ${pathname === "/account" ? "active" : ""}`}>
                Your Account
              </Link>
              <Link href="/wishlist" className={`footer_link ${pathname === "/wishlist" ? "active" : ""}`}>
                Your Wishlist
              </Link>
              <Link href="/terms-conditions" className={`footer_link ${pathname === "/terms-conditions" ? "active" : ""}`}>
                Terms & Conditions
              </Link>
              <Link href="/privacy-policy" className={`footer_link ${pathname === "/privacy-policy" ? "active" : ""}`}>
                Privacy Policy
              </Link>
              <Link href="/faqs" className="footer_link">
                FAQs
              </Link>
            </div>
          </div>

          {/* Column 4: Contact/Info Details */}
          <div className="col-lg-3 col-md-6">
            <h5 className="footer_section_title">Contact Us</h5>
            <div className="contact_info_list">
              <p className="info_text">
                <span className="bold_text">Phone:</span> {app_setup?.contact_no}
              </p>
              <p className="info_text">
                <span className="bold_text">Email:</span> {app_setup?.email}
              </p>
              {app_setup?.alt_contact_no && (
                <p className="info_text">
                  <span className="bold_text">Corporate:</span> {app_setup?.alt_contact_no}
                </p>
              )}
              <p className="info_text">
                <span className="bold_text">Address:</span> {app_setup?.address}
              </p>
            </div>
          </div>
        </div>

        {/* Bottom Bar */}
        <div className="bottom_bar">
          <p className="footer_text">
            ©{new Date().getFullYear()} Shri Girraj All Rights Reserved | Developed by{" "}
            <Link href="https://profcymaglobal.com/" target="_blank">
              Profcyma Solutions Pvt Ltd
            </Link>
          </p>
        </div>
      </div>
    </footer>
  );
};

export default Footer;