"use client";
import logo from "@/public/assets/footer/footerlogo.svg";
import call from "@/public/assets/icons/call.svg";
import sms from "@/public/assets/icons/sms.svg";
import Image from "next/image";
import defaultimg from "@/public/defaultimg.png";

import { useTranslations } from "next-intl";
import Link from "next/link";
import { usePathname } from "next/navigation";
import NextLink from "./NextLink";
 import facebook from "@/public/assets/icons/facebook2.svg";
import youtube from "@/public/assets/icons/youtube2.svg";
import instagram from "@/public/assets/icons/instagram2.svg";
import linkedin from "@/public/assets/icons/linkedin2.svg";

const Footer = ({ locale, data }: any) => {
  const t = useTranslations("Footer");
  const pathnames = usePathname();
  const currentPage = "/" + pathnames.split("/").slice(2).join("/");
  const legal = [
    { id: 1, title: "Terms & Conditions", path: "/terms" },
    { id: 2, title: "Privacy Policy", path: "/privacy" },
  ];
  const contact = [
    { id: 1, title: "+971 555 549 114", icon: call, path: "tel:+971555549114" },
    {
      id: 2,
      title: "info@rhcapital.ae",
      icon: sms,
      path: "mailto:info@rhcapital.ae",
    },
  ];
  const socialicons = [
    { id: 1, icon: facebook, path: "https://www.facebook.com/" },
    { id: 2, icon: youtube, path: "https://www.youtube.com/" },
    { id: 3, icon: instagram, path: "https://www.instagram.com/" },
    { id: 4, icon: linkedin, path: "https://www.linkedin.com/" },
  ];

  return (
    <>
      <div
        className={`relative  bg-white/10 flex flex-col justify-center items-center shadow-[0px_8px_18px_0px_rgba(156,156,156,0.10)]`}
        data-aos="fade-up"
        data-aos-duration="1500"
        data-aos-delay="100"
      >
        <div
          className="absolute top-0 left-0 w-full h-5
         bg-gradient-to-t from-[rgba(156,156,156,0.10)] to-transparent"
        >
          <div className="container mx-auto grid  grid-cols-2 lg:grid-cols-5 xl:grid-cols-5 gap-4 2xl:gap-x-30 px-4 sm:px-6 lg:px-[30px] py-[60px]">
            {/* Logo */}
            <Link
              href={`/${locale}`}
              className="col-span-2 lg:col-span-1 w-full flex justify-center lg:justify-start"
            >
              <Image
                src={logo}
                alt="logo"
                width={132}
                height={94}
                className="h-[80px] w-auto lg:h-[94px]"
                priority
                fetchPriority="high"
                loading="eager"
              />
            </Link>

            {/* Quick Links */}
            <div className="flex flex-col items-center lg:items-start gap-3 lg:gap-6">
              <span className="text-dark text-[22px] lg:text-[20px] font-normal">
                {t("Quick Links")}
              </span>

              <div className="flex flex-col items-center lg:items-start gap-1 lg:gap-6">
                <NextLink title={t("Blogs")} ref={`${locale}/blogs`} />
                <NextLink
                  title={t("Contact Us")}
                  ref={`${locale}/contact-us`}
                />

                <Link
                  className="text-dark text-[15px] lg:text-[20px] font-light cursor-pointer"
                  href={`/${locale}/#popularareas`}
                >
                  {t("Popular Areas")}
                </Link>

                <Link
                  className="text-dark text-[15px] lg:text-[20px] font-light cursor-pointer"
                  href={`/${locale}/#featuredproparties`}
                >
                  {t("Featured Properties")}
                </Link>
              </div>
            </div>

            {/* Legal */}
            <div className="flex flex-col items-center lg:items-start gap-3 lg:gap-6 order-2 lg:order-none">
              <span className="text-dark text-[22px] lg:text-[20px] font-normal">
                {t("Legal")}
              </span>

              <div className="flex flex-col items-center lg:items-start gap-1 lg:gap-6">
                {legal.map((item) => {
                  const isActive = currentPage === item.path;

                  return (
                    <Link
                      href={`/${locale}${item.path}`}
                      key={item.id}
                      className={`text-dark text-[15px] lg:text-[18px] xl:text-[20px] font-light ${
                        isActive ? "text-primary" : ""
                      }`}
                    >
                      {t(item.title)}
                    </Link>
                  );
                })}
              </div>
            </div>

            {/* Contact Us */}
            <div className="flex flex-col items-center lg:items-start gap-3 lg:gap-6">
              <span className="text-dark text-[22px] lg:text-[20px] font-normal">
                {t("Contact Us")}
              </span>

              <div className="flex flex-col items-center lg:items-start gap-1 lg:gap-6">
                {contact.map((item) => (
                  <Link
                    href={item.path}
                    key={item.id}
                    className="flex items-center gap-2"
                  >
                    <Image
                      src={item.icon || defaultimg}
                      alt="icon"
                      width={24}
                      height={24}
                      className="w-[18px] h-[18px] lg:w-[24px] lg:h-[24px]"
                    />

                    <span
                      className="text-dark text-[14px] lg:text-[18px] xl:text-[20px] font-light"
                      dir="ltr"
                    >
                      {item.title}
                    </span>
                  </Link>
                ))}
              </div>
            </div>

            {/* Social */}
            <div className="flex flex-col items-center lg:items-start gap-3 lg:gap-6">
              <span className="text-dark text-[22px] lg:text-[20px] font-normal">
                {t("Social")}
              </span>

              <div className="flex gap-[24px]">
                {socialicons.map((item) => (
                  <Link href={item.path} key={item.id}>
                    <Image
                      src={item.icon}
                      alt="icon"
                      width={24}
                      height={24}
                      className="w-[20px] h-[20px] lg:w-[24px] lg:h-[24px]"
                    />
                  </Link>
                ))}
              </div>
            </div>
          </div>

          <div className=" w-full h-[44px] flex justify-center items-center bg-primary gap-2">
            <span className="text-[12px] sm:text-[16px] text-white font-light ">
              {/* &copy; 2025 R&H CAPITAL Powered by Dubisign. */}
              {t("Copyright")}
            </span>
            <Link
              href="https://dubisign.ae/"
              target="_blank"
              rel="noopener noreferrer"
              className="text-[#C6A747] text-[12px] sm:text-[16px] font-light cursor-pointer"
            >
              {t("Dubisign")}
            </Link>
          </div>
        </div>
      </div>
    </>
  );
};

export default Footer;