import { MdChevronRight } from "react-icons/md";
import { FaMapMarkerAlt, FaWhatsapp } from "react-icons/fa";
import { IoCallOutline, IoMailSharp } from "react-icons/io5";
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();


  const menuItems = [
    { name: "Home", slug: "/" },
    { name: "About Us", slug: "/about" },
    { name: "Marketplace", slug: "/location" },
    { name: "Sitemap", slug: "/sitemap" },
    { name: "Contact", slug: "/contact" },
  ];

  return (
    <>
      <footer className="relative bg-[#0b1220] text-white pt-32 pb-10 mt-20 overflow-visible">

        {/* BACKGROUND GLOW */}
        <div className="absolute top-0 left-0 w-72 h-72 bg-blue-500/20 blur-3xl rounded-full"></div>
        <div className="absolute bottom-0 right-0 w-72 h-72 bg-blue-500/20 blur-3xl rounded-full"></div>

        {/* CTA STRIP */}
        <div className="absolute top-0 left-0 w-full -translate-y-1/2 z-10">
          <div className="container">
            <div className="rounded-lg overflow-hidden">

              {Parser().parse(siteInfo?.googleMap)}

            </div>
          </div>
        </div>

        <div className="container relative z-10">

          {/* GRID */}
          <div className="grid lg:grid-cols-12 gap-10 pb-12">

            {/* BRAND */}
            <div className="lg:col-span-4 sm:col-span-6">
              <p className="text-2xl font-semibold mb-4">
                {siteInfo?.name}
              </p>

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

              <div className="mt-12 text-black">
                <SocialIcons siteInfo={siteInfo} />
              </div>
            </div>

            {/* LINKS */}
            <div className="lg:col-span-2 sm:col-span-6">
              <p className="font-semibold mb-5 text-white">
                Quick Links
              </p>

              <ul className="space-y-3 text-sm text-gray-400">
                {menuItems.map((item, i) => (
                  <li key={i}>
                    <Link
                      href={item.slug}
                      className="flex items-center gap-2 hover:text-blue-400 transition"
                    >
                      <MdChevronRight />
                      {item.name}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>

            {/* PRODUCTS */}
            <div className="lg:col-span-3 sm:col-span-6">
              <p className="font-semibold mb-5 text-white">
                Our Products
              </p>

              <ul className="space-y-3 text-sm text-gray-400 max-h-48 overflow-y-auto pr-2">
                {products?.slice(0, 6).map((value, index) => (
                  <li key={index}>
                    <Link
                      href={`/products/${value.slug}`}
                      className="flex items-center gap-2 hover:text-blue-400 transition"
                    >
                      <MdChevronRight />
                      {value.name}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>

            {/* CONTACT GLASS CARD */}
            <div className="lg:col-span-3 sm:col-span-6">
              <div className="">

                <p className="font-semibold mb-5 text-white">
                  Contact Info
                </p>

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

                  <li className="flex gap-3">
                    <FaMapMarkerAlt className="mt-1 text-blue-400" />
                    <p className="max-w-[calc(100%-80px)]">{siteInfo?.primaryAddress}</p>
                  </li>

                  <li className="flex gap-3">
                    <IoCallOutline className="mt-1 text-blue-400" />
                    <div>
                      {siteInfo?.primaryPhone && (
                        <a href={`tel:${siteInfo.primaryPhone}`} className="block hover:text-blue-400">
                          {siteInfo.primaryPhone}
                        </a>
                      )}
                      {siteInfo?.secondaryPhone && (
                        <a href={`tel:${siteInfo.secondaryPhone}`} className="block hover:text-blue-400">
                          {siteInfo.secondaryPhone}
                        </a>
                      )}
                    </div>
                  </li>

                  <li className="flex gap-3">
                    <IoMailSharp className="mt-1 text-blue-400" />
                    <div>
                      {siteInfo?.primaryEmail && (
                        <a href={`mailto:${siteInfo.primaryEmail}`} className="block hover:text-blue-400">
                          {siteInfo.primaryEmail}
                        </a>
                      )}
                    </div>
                  </li>

                </ul>

              </div>
            </div>

          </div>

          {/* BOTTOM */}
          <div className="border-t border-white/10 pt-6 text-sm text-gray-400 flex justify-between flex-col md:flex-row gap-3">

            <div>
              {Parser().parse(siteInfo?.copyrightText || "© 2026")}
            </div>

          </div>

        </div>
      </footer>

      {/* FLOATING WHATSAPP */}
      <a
        href={`https://wa.me/${siteInfo?.whatsapp}`}
        className="fixed z-50 bottom-6 right-6 w-14 h-14 rounded-full text-white flex items-center justify-center text-2xl shadow-xl bg-green-600 animate-bounce hover:scale-110 transition"
      >
        <FaWhatsapp />
      </a>
    </>
  );
}