"use client";

import React from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import CallToAction from "./CallToAction";

function classNames(...classes: string[]) {
  return classes.filter(Boolean).join(' ')
}

export default function FooterContent({
  showCallToAction = true,
  data
}: {
  showCallToAction?: boolean,
  data: any
}) {
  const pathname = usePathname();

  const sections = data?.page?.sections || [];

  const ctaSection = sections.find((s: any) => s.key === "wastemanagementdiv")?.components?.[0]?.instance?.data?.items?.[0];
  const logoSection = sections.find((s: any) => s.key === "footer-logo")?.components?.[0]?.instance?.data?.items?.[0];
  const menuData = sections.find((s: any) => s.key === "footermenus")?.components?.[0]?.instance?.data;
  const addressData = sections.find((s: any) => s.key === "address")?.components?.[0]?.instance?.data;
  const copyrightSection = sections.find((s: any) => s.key === "copyright")?.components?.[0]?.instance?.data?.items?.[0];
  const legalData = sections.find((s: any) => s.key === "legalregulatons")?.components?.[0]?.instance?.data;
  const socialData = sections.find((s: any) => s.key === "socialmedia")?.components?.[0]?.instance?.data;
  const imageSection = sections.find((s: any) => s.key === "footerimage")?.components?.[0]?.instance?.data?.items?.[0];

  const footerNav = menuData?.items || [];
  const addressItems = addressData?.items || [];
  const legalLinks = legalData?.items || [];
  const socialLinks = socialData?.items || [];

  return (
    <div className="w-full">
      {showCallToAction && <CallToAction data={ctaSection} />}

      <footer className={`relative md:max-w-[1200px] xl:max-w-[1440px] 2xl:max-w-[1840px] md:mx-auto pb-8 sm:pb-10 md:pb-12 rounded-[12px] sm:rounded-[16px] md:rounded-[20px] overflow-hidden px-[20px] sm:px-6 md:px-8 xl:px-[60px] ${showCallToAction ? "pt-100 md:pt-40" : "pt-6 sm:pt-8 md:pt-[30px]"}`}>

        <div className="absolute inset-0 z-0">
          <picture>
            <source media="(max-width: 768px)" srcSet={imageSection?.image_mobile || "/footer_bg.png"} />
            <img
              src={imageSection?.image_desktop || "/footer_bg.png"}
              alt="Footer Background"
              className="w-full h-full object-cover"
            />
          </picture>
          <div className="absolute inset-0 mix-blend-multiply"></div>
        </div>

        <div className="relative z-10 xl:max-w-[1240px] 2xl:max-w-[1720px] mx-auto text-white">

          <div className="flex flex-col md:flex-row justify-between items-center mb-6 sm:mb-7 md:mb-7.5 gap-6 sm:gap-8">
            <div className="shrink-0">
              <img src={logoSection?.image || ""} alt={logoSection?.image_alt_tag || ""} className="max-h-12" />
            </div>
            
            <nav className="flex flex-col md:flex-row justify-center items-center gap-[10px] md:gap-4 text-[18px] text-[#FFFFFF] font-outfit">
              {footerNav.map((item: any) => {
                const isActive = pathname === item.link || pathname.startsWith(item.link + "/");
                return (
                  <Link
                    key={item.name}
                    href={item.link}
                    aria-current={isActive ? "page" : undefined}
                    className={classNames(
                      "text-[#FFFFFF] font-outfit text-[18px] leading-[150%] hover:underline transition-all",
                      isActive ? "font-medium!" : "font-extralight",
                    )}
                  >
                    {item.name}
                  </Link>
                );
              })}
            </nav>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 border-y border-white/10 text-gray-200 font-outfit">
            {addressItems.map((item: any, index: number) => {
              const isEmail = !!item.email;
              const borderClasses = index === 1 ? "border-y lg:border-x border-white/10" : "";

              return (
                <div key={index} className={`py-[20px] md:py-8 flex font-outfit flex-col items-center lg:flex-row gap-5 md:px-4 ${borderClasses}`}>
                  <div className="shrink-0 h-12 w-12 rounded-lg flex items-center justify-center">
                    <div dangerouslySetInnerHTML={{ __html: item.svg }} className="w-full h-full flex items-center justify-center" />
                  </div>

                  <div className="text-center lg:text-left">
                    <div className="font-extralight text-white tracking-widest mb-[10px] block uppercase text-xs">{item.name}</div>
                    {isEmail ? (
                      <a href={`mailto:${item.email}`} className="font-medium text-[#DAE6DC] cursor-pointer hover:underline">
                        {item.email}
                      </a>
                    ) : (
                      <p className="font-medium text-[#DAE6DC] whitespace-pre-line">
                        {item.address}
                      </p>
                    )}
                  </div>
                </div>
              );
            })}
          </div>

          <div className="pt-7.5 flex flex-col lg:flex-row justify-between items-center gap-6 text-xs text-white font-outfit">
            <p className="text-white text-center font-extralight font-outfit lg:text-left">
              {copyrightSection?.name || `© ${new Date().getFullYear()} Biomket.`}
            </p>

            <div className="flex text-[18px] text-center font-extralight font-outfit flex-wrap justify-center gap-x-3 gap-y-2">
              {legalLinks.map((link: any, idx: number) => (
                <React.Fragment key={link.name}>
                  <Link href={link.link} className="hover:text-white hover:underline whitespace-nowrap">{link.name}</Link>
                  {idx < legalLinks.length - 1 && <span>|</span>}
                </React.Fragment>
              ))}
            </div>

            <div className="flex gap-6 items-center">
              {socialLinks.map((social: any, idx: number) => (
                <React.Fragment key={social.name}>
                  <Link href={social.link} className="hover:opacity-80 transition" title={social.name}>
                    <div dangerouslySetInnerHTML={{ __html: social.svg }} />
                  </Link>
                  {idx < socialLinks.length - 1 && (
                    <svg width="1" height="20" viewBox="0 0 1 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path opacity="0.5" d="M0.5 0V20" stroke="white" strokeMiterlimit="3.99933" strokeDasharray="3 0" />
                    </svg>
                  )}
                </React.Fragment>
              ))}
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}