"use client";
import { usePathname } from "next/navigation";
import { FaFacebookF, FaInstagram, FaLinkedinIn, FaWhatsapp,  } from "react-icons/fa";
import { FaXTwitter, FaYoutube } from 'react-icons/fa6';
import { useGlobalContext } from "@/context/GlobalContext";
import { useLanguage } from "@/context/LanguageContext";
import { CiLocationOn } from "react-icons/ci";
import Link from "next/link";
import { BiPhoneCall } from "react-icons/bi";
const Footer = () => {
	const {darkMode} = useGlobalContext();
	const {language, t} = useLanguage();
	const NavBarLink = ({ title, isActive, href }) => {
		const activeClass = isActive
			? "font-medium dark:text-white text-[#1B2430]"
			: "font-normal dark:text-[#ABABAB] text-[#666666]";
		return (
			<a
				href={href}
				className={`block text-[1rem] ${activeClass} hover:opacity-80`}
			>
				{title}
			</a>
		);
	};
	const pathname = usePathname();
	return (
		<footer className="border-t-[1px] dark:border-[#333333]  border-[#E7E7E7]  bg-[#00000005]   sm:px-[1rem] min-[320px]:px-4  mx-auto">
			<div className="max-w-screen-2xl  md:px-[8rem] mx-auto">
		
			<div className=" max-w-screen-2xl mx-auto flex flex-col py-8 gap-7 dark:border-[#242424]">
				{darkMode ? 	<img src="/logo2.png" className="w-[130px]" /> : 	<img src="/logo.png" className="w-[130px]" />}
				{/* <p className="text-[14px] md:w-[80%] text-[#444444] dark:text-[#F8F8F8] sm:w-[80%] leading-[34px]">{t("Dedecite1")}</p> */}
			</div>
		
			<section className="flex max-w-screen-2xl justify-between items-end md:items-center mx-auto pb-7">
			<ul className="flex md:flex-row sm:flex-col min-[320px]:flex-col font-medium  gap-8">
						<li>
							<NavBarLink title="Home" isActive={pathname === "/"} href="/" />
						</li>
						<li>
							<NavBarLink
								title="About Us"
								isActive={pathname.endsWith("/About")}
								href="/About"
							/>
						</li>
						<li>
							<NavBarLink
								title="Services"
								isActive={pathname.endsWith("/Services")}
								href="/Services"
							/>
						</li>
						<li>
							<NavBarLink
								title="Our App"
								isActive={pathname.endsWith("/App")}
								href="/App"
							/>
						</li>
						<li>
							<NavBarLink
								title="Career"
								isActive={pathname.endsWith("/Careers")}
								href="/Careers"
							/>
						</li>
						<li>
							<NavBarLink
								title="Contact Us"
								isActive={pathname.endsWith("/ContactUs")}
								href="/ContactUs"
							/>
						</li>
			</ul>
		
			<div className="flex gap-4 ">
				<a href="https://www.facebook.com/AfghanPAY511" target="_blank" rel="noopener noreferrer" className="cursor-pointer" >
			<FaFacebookF className="h-[16px] w-auto dark:text-[#ababab] hover:text-[#1F998E] text-[#444444]" /></a>
			<a href="https://youtube.com/@afghanpay511?si=mg6b5y-1A-ns_K1-" className="cursor-pointer"  target="_blank" rel="noopener noreferrer">
			<FaYoutube className="h-[16px] w-auto dark:text-[#ababab] hover:text-[#1F998E] text-[#444444]"  /></a>
			<a href="" className="cursor-pointer"  target="_blank" rel="noopener noreferrer">
			<FaLinkedinIn className="h-[16px] w-auto dark:text-[#ababab] hover:text-[#1F998E] text-[#444444]"  /></a>
			<a href="" className="cursor-pointer"  target="_blank" rel="noopener noreferrer">
			<FaWhatsapp className="h-[16px] w-auto dark:text-[#ababab] hover:text-[#1F998E] text-[#444444]"  /></a>
			<a href="https://www.instagram.com/afghanpay511?igsh=cmlyaDFrdHE4MWkz" className="cursor-pointer"  target="_blank" rel="noopener noreferrer">
			<FaInstagram className="h-[16px] w-auto dark:text-[#ababab] hover:text-[#1F998E] text-[#444444]"  /></a>
			</div>
					</section>
					<section className="max-w-screen-2xl mx-auto">	<div className=" flex md:flex-row flex-col mb-5 justify-between md:items-center ">
			
				<div className="flex mb-3 md:mb-0 gap-2">
					<div>
				<CiLocationOn size={22} /></div>
				<p className="text-[14px] text-[#444444] dark:text-[#ababab] leading-6">{t("add")}</p>
				</div>
				<div className="flex gap-2 text-[#444444] text-[14px] ">
				<BiPhoneCall className="dark:text-[#ababab]" size={20} />
				<p className="dark:text-[#ababab]">+93730302030
+93703555511
+93729555511</p>
				</div>
			</div></section>
					<section className="flex justify-between md:items-center md:flex-row flex-col-reverse max-w-screen-2xl mx-auto pt-3 border-t-[1px] dark:border-[#333333] border-[#E7E7E7] pb-10">
						<div className="text-[12px] lg:gap-[32rem] md:gap-10 flex justify-between md:mt-0 mt-5 flex-row-reverse text-[#ABABAB]">
						© 2024 AfghanPay Services Company
						{/* <p>Coming soon to mobile</p> */}
						</div>
						<div className="flex  justify-between md:px-0 px-8 gap-5 text-[12px] text-[#ABABAB]">
							<p className="hidden md:flex">|</p>
							<p>{t("Terms")}</p>
					
						
							<Link href="/PrivacyPolicy">
  <span>{t("Privacy")}</span>
</Link>

					
							<p>{t("Cookie")}</p>
						</div>
					</section>
					</div>
		</footer>
	);
};

export default Footer;