import { MdChevronRight } from "react-icons/md";
import { FaMapMarkerAlt, FaWhatsapp } from "react-icons/fa";
import { IoCallOutline, IoMailSharp } from "react-icons/io5";
import { FaPhoneAlt } from "react-icons/fa";
import { getSiteInfo, getProducts } from "@/app/lib/api";
import Link from "next/link";
import { Parser } from "html-to-react";
import SocialIcons from "./SocialIcons";

export default async function Footer() {
  const products = await getProducts();
  const siteInfo = await getSiteInfo();

  return (
    <>
      <footer className="relative bg-black text-white overflow-hidden">

        {/* GRADIENT GLOW */}
        {/* <div className="absolute top-0 left-0 w-72 h-72 bg-[#6112a0]/80 blur-[120px] rounded-full"></div>
        <div className="absolute bottom-0 right-0 w-72 h-72 bg-amber-400/60 blur-[120px] rounded-full"></div> */}

        <div className="relative container py-16">

          <div className="grid lg:grid-cols-12 gap-10">

            {/* BRAND */}
            <div className="lg:col-span-4">
              <Link className="text-2xl lg:text-4xl uppercase block mb-2.5" href="/">
                {/* <img
                  src={siteInfo?.logo}
                  alt={siteInfo?.name}
                  className="mb-4 max-h-[50px]"
                /> */}
                {siteInfo?.name}
              </Link>

              <p className="text-gray-400 text-sm leading-6 mb-6">
                {siteInfo?.footerText}
              </p>

              <SocialIcons siteInfo={siteInfo} />
            </div>

            {/* LINKS */}
            <div className="lg:col-span-8 grid md:grid-cols-3 gap-8">

              {/* QUICK LINKS */}
              <div>
                <p className="text-lg font-semibold mb-5 border-b border-amber-500 pb-2 inline-block">
                  Quick Links
                </p>

                <ul className="space-y-3">
                  {["Home", "About Us", "Marketplace", "Sitemap", "Contact"].map((item, i) => (
                    <li key={i}>
                      <Link
                        href="/"
                        className="group flex items-center gap-2 text-gray-400 hover:text-amber-500 transition"
                      >
                        <MdChevronRight className="group-hover:translate-x-1 transition" />
                        {item}
                      </Link>
                    </li>
                  ))}
                </ul>
              </div>

              {/* PRODUCTS */}
              <div>
                <p className="text-lg font-semibold mb-5 border-b border-amber-500 pb-2 inline-block">
                  Products
                </p>

                <ul className="space-y-3 max-h-52 overflow-y-auto pr-2">
                  {products?.map((item, index) => (
                    <li key={index}>
                      <Link
                        href="/"
                        className="group flex items-center gap-2 text-gray-400 hover:text-amber-500 transition"
                      >
                        <MdChevronRight className="group-hover:translate-x-1 transition" />
                        {item.name}
                      </Link>
                    </li>
                  ))}
                </ul>
              </div>

              {/* CONTACT */}
              <div>
                <p className="text-lg font-semibold mb-5 border-b border-amber-500 pb-2 inline-block">
                  Contact
                </p>

                <ul className="space-y-5 text-gray-400 text-sm">

                  <li className="flex gap-3">
                    <FaMapMarkerAlt className="text-amber-500 mt-1 text-[16px]" />
                    <Link href={'https://share.google/0HiiFQAe3WlRtJfJm'} target="_blank" className="max-w-[calc(100%-85px)] block hover:text-white text-[14px]">{siteInfo?.primaryAddress}</Link>
                  </li>

                  <li className="flex gap-3">
                    <FaPhoneAlt className="text-amber-500 mt-1 text-[14px]" />
                    <div className="max-w-[calc(100%-85px)]">
                      {siteInfo?.primaryPhone && (
                        <a href={`tel:${siteInfo.primaryPhone}`} className="block hover:text-white text-[14px]">
                          {siteInfo.primaryPhone}
                        </a>
                      )}
                    </div>
                  </li>

                  <li className="flex gap-3">
                    <IoMailSharp className="text-amber-500 mt-1  text-[16px]" />
                    <div className="max-w-[calc(100%-85px)]">
                      {siteInfo?.primaryEmail && (
                        <a href={`mailto:${siteInfo.primaryEmail}`} className="block hover:text-white text-[16px]">
                          {siteInfo.primaryEmail}
                        </a>
                      )}
                    </div>
                  </li>

                </ul>
              </div>

            </div>

          </div>

        </div>
      </footer>

      {/* BOTTOM BAR */}
      <div className="bg-[#111] border-t border-gray-800 text-gray-400 text-sm text-center py-4">
        <div className="container">
          {Parser().parse(siteInfo?.copyrightText || "Copyright © 2026")}
        </div>
      </div>

      {/* FLOATING WHATSAPP */}
      <a
        href={`https://wa.me/${siteInfo?.whatsapp}`}
        className="fixed bottom-6 left-6 z-50 group"
      >
        <div className="relative w-14 h-14 flex items-center justify-center rounded-full bg-gradient-to-r from-green-500 to-emerald-600 shadow-lg">

          {/* Pulse */}
          <span className="absolute inset-0 rounded-full bg-green-400 animate-ping opacity-20"></span>

          <FaWhatsapp className="text-white text-2xl relative z-10" />
        </div>
      </a>
    </>
  );
}