import { MdChevronRight } from "react-icons/md";
import { FaMapMarkerAlt } from "react-icons/fa";
import { IoCallOutline, IoMailSharp } from "react-icons/io5";
import { getSiteInfo } from "@/app/lib/api";
import { getProducts } from "@/app/lib/api";
import Link from "next/link";
import { Parser } from "html-to-react";
import FloatIcons from "./FloatIcons";
import SocialIcons from "./SocialIcons";

export default async function Footer() {
    const products = await getProducts();
    const siteInfo = await getSiteInfo();
    return (
        <>
            <footer className="py-15 md:py-20 btn">
                <div className="container">
                    <div>
                        <div className="grid grid-cols-1 md:grid-col-2 lg:grid-cols-4 gap-4">
                            <div>
                                <Link href="/"><img src={siteInfo?.logo} title={siteInfo?.name} alt={siteInfo?.name} className="w-[170px] mb-4" /></Link>
                                <p className="text-[#e6e6e6] text-[14px] text-justify">{siteInfo?.footerText}</p>
                            </div>
                            <div className="md:pl-10">
                                <span className="text-white text-[18px] mb-4 border-b border-[#fdf5ee] leading-10 block font">Quick Links</span>
                                <ul>
                                    <li className="mb-3.5"><Link href="/" className="flex text-[#e6e6e6] hover:text-[#00acef]"><MdChevronRight className="mt-1" /> Home</Link></li>
                                    <li className="mb-3.5"><Link href="/about" className="flex text-[#e6e6e6] text-[14px] hover:text-[#00acef]"><MdChevronRight className="mt-1" /> About Us</Link></li>
                                    <li className="mb-3.5"><Link href="/faq" className="flex text-[#e6e6e6] text-[14px] hover:text-[#00acef]"><MdChevronRight className="mt-1" /> FAQ's</Link></li>
                                    <li className="mb-3.5"><Link href="/location" className="flex text-[#e6e6e6] text-[14px] hover:text-[#00acef]"><MdChevronRight className="mt-1" /> Marketplace</Link></li>
                                    <li className="mb-3.5"><Link href="/sitemap" className="flex text-[#e6e6e6] text-[14px] hover:text-[#v]"><MdChevronRight className="mt-1" /> Sitemap</Link></li>
                                    <li className="mb-3.5"><Link href="/contact" className="flex text-[#e6e6e6] text-[14px] hover:text-[#v]"><MdChevronRight className="mt-1" /> Contact Us</Link></li>
                                </ul>
                            </div>

                            <div className="">
                                <span className="text-white text-[18px] mb-4 border-b border-[#fdf5ee] leading-10 block font">Our Products</span>
                                <ul className="max-h-48 overflow-y-auto">
                                    {
                                        products?.map((value, index) => (
                                            // <li key={index} className="mb-2"><Link href="/" className="flex text-[#e6e6e6] hover:text-[#000]"><MdChevronRight className="mt-1" /> {value.name}</Link></li>
                                            <li key={index} className="mb-3.5"><Link 
                                            // href={`/`}
                                            href={`/products/${value.slug}`}
                                             className="flex text-[#e6e6e6] hover:text-[#00acef]"><MdChevronRight className="mt-1" /> {value.name}</Link></li>
                                        ))
                                    }
                                </ul>
                            </div>

                            <div className="foot_contact">
                                <span className="text-white text-[18px] mb-4 border-b border-[#fdf5ee] leading-10 block font">Reach Us</span>
                                <ul>
                                    <li className="flex ">
                                        <div className="icon-side">
                                            <IoCallOutline className="text-[#e6e6e6] mt-1 mr-3" />
                                        </div>

                                        <div className="icon-side-content">
                                            {
                                                siteInfo?.primaryPhone ?
                                                    <a href={`tel:${siteInfo?.primaryPhone}`} className="text-[#e6e6e6] block text-[14px] text-justify">{siteInfo?.primaryPhone}</a>
                                                    :
                                                    null
                                            }
                                            {
                                                siteInfo?.secondaryPhone ?
                                                    <a href={`tel:${siteInfo?.secondaryPhone}`} className="text-[#e6e6e6] block text-[14px] text-justify">{siteInfo?.secondaryPhone}</a>
                                                    :
                                                    null
                                            }
                                            {
                                                siteInfo?.thirdPhone ?
                                                    <a href={`tel:${siteInfo?.thirdPhone}`} className="text-[#e6e6e6] block text-[14px] text-justify">{siteInfo?.thirdPhone},</a>
                                                    :
                                                    null
                                            }
                                        </div>
                                    </li>

                                    <li className="flex mt-5">
                                        <div className="icon-side">
                                            <IoMailSharp className="text-[#e6e6e6] mt-1 mr-3" />
                                        </div>

                                        <div className="icon-side-content">
                                            {
                                                siteInfo?.primaryEmail ?
                                                    <a href={`mailto:${siteInfo?.primaryEmail}`} className="text-[#e6e6e6] block text-[14px] text-justify">{siteInfo?.primaryEmail}</a>
                                                    :
                                                    null
                                            }
                                            {
                                                siteInfo?.secondaryEmail ?
                                                    <a href={`mailto:${siteInfo?.secondaryEmail}`} className="text-[#e6e6e6] block text-[14px] text-justify">{siteInfo?.secondaryEmail}</a>
                                                    :
                                                    null
                                            }
                                            {
                                                siteInfo?.thirdEmail ?
                                                    <a href={`mailto:${siteInfo?.thirdEmail}`} className="text-[#e6e6e6] block text-[14px] text-justify">{siteInfo?.thirdEmail},</a>
                                                    :
                                                    null
                                            }
                                        </div>
                                    </li>

                                     <li className="flex mt-5">
                                        <div className="icon-side">
                                            <FaMapMarkerAlt className="text-[#e6e6e6] mt-1 mr-3" />
                                        </div>

                                        <div className="icon-side-content">
                                            <p className="text-[#e6e6e6] text-[14px]">{siteInfo?.primaryAddress}</p>
                                        </div>
                                    </li>

                                </ul>
                                <div className="mt-5">
                                    <SocialIcons siteInfo={siteInfo} />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </footer>
            {/* copyright */}
            <div className="copy-right bg text-white border-t-[.5px] border-[#858585] text-center py-2">
                <div className="container">
                    <div className="row">
                        {Parser().parse(siteInfo?.copyrightText || "Copyright © 2026")}
                    </div>
                </div>
            </div>
            <FloatIcons />
        </>
    )
}