import Image from "next/image";
import Link from "next/link";
import { footerNav } from "@/data/navigation";
import { footerOffices } from "@/data/offices";
import { siteConfig } from "@/config/site";
import { FacebookIcon, InstagramIcon, LinkedInIcon, MailIcon, XIcon } from "@/components/ui/Icons";

const socials = [
  { label: "Facebook", icon: FacebookIcon, href: "#" },
  { label: "Instagram", icon: InstagramIcon, href: "https://www.instagram.com/sterling_protection_partners" },
  { label: "LinkedIn", icon: LinkedInIcon, href: "https://www.linkedin.com/company/sterling-protection-partners/" },
  { label: "X", icon: XIcon, href: "#" },
  { label: "Email", icon: MailIcon, href: "#" },
];

export function SiteFooter() {
  return (
    <footer
      className={[
        // Full-bleed band inside the 1440px container.
        "relative right-1/2 left-1/2 -mr-[50vw] -ml-[50vw] w-screen overflow-hidden",
        "z-10 bg-[url('/images/brand/hero-bg.jpg')] bg-center pt-[70px] pb-[35px] text-white",
        "max-[769px]:rounded-2xl max-[769px]:px-6 max-[769px]:pt-10 max-[769px]:pb-[30px] max-[769px]:shadow-[0_10px_30px_rgba(0,0,0,0.25)]",
      ].join(" ")}
    >
      <div className="relative mx-auto flex max-w-[1440px] flex-col px-[60px] max-[769px]:px-[10px]">
        {/* Social + brand */}
        <div className="mb-[100px] flex items-start justify-between pt-[82px] max-[769px]:mb-[35px] max-[769px]:flex-col max-[769px]:gap-6 max-[769px]:pt-[82px]">
          <div className="flex flex-col">
            <span className="mb-[14px] text-[0.95rem] text-mist">Connect with us</span>
            <div className="flex gap-[10px]">
              {socials.map(({ label, icon: Icon, href }) => (
                <a
                  key={label}
                  href={href}
                  aria-label={label}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex size-[42px] items-center justify-center rounded-[4px] border border-white/12 bg-accent text-white transition-all duration-300 hover:-translate-y-0.5 hover:border-white/40 hover:bg-white/20"
                >
                  <Icon />
                </a>
              ))}
            </div>
          </div>

          <div className="relative flex items-center justify-end overflow-visible pr-[50px] max-[769px]:justify-end max-[769px]:text-right">
            <div className="relative z-[2] text-right">
              <div className="text-[clamp(2.5rem,2.5vw,2.2rem)] leading-none font-semibold tracking-[4px] text-white uppercase max-[769px]:text-[1.3rem] max-[769px]:tracking-[3px]">
                STERLING
              </div>
              <div className="mt-[6px] text-[0.85rem] font-medium tracking-[3.3px] text-white/85 uppercase max-[769px]:text-[0.55rem]">
                PROTECTION PARTNERS
              </div>
            </div>
          </div>
        </div>

        {/* Offices */}
        <div className="mb-[100px] grid grid-cols-[repeat(3,220px)] gap-[30px] max-[769px]:mb-[45px] max-[769px]:grid-cols-1 max-[769px]:gap-8">
          {footerOffices.map((office) => (
            <div key={office.title} className="flex flex-col">
              <h4 className="mb-[14px] text-[1.1rem] font-bold text-white">{office.title}</h4>
              <p className="text-[0.95rem] leading-[1.6] text-mist">
                {office.addressLines?.map((line, i) => (
                  <span key={line}>
                    {i > 0 && <br />}
                    {line}
                  </span>
                ))}
                {office.whatsapp && (
                  <>
                    Operational Contact
                    <br />
                    WhatsApp:{" "}
                    <a
                      href={office.whatsapp.href}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-mist transition-colors duration-200 hover:text-white"
                    >
                      {office.whatsapp.label}
                    </a>
                  </>
                )}
              </p>
            </div>
          ))}
        </div>

        {/* Legal */}
        <div className="flex w-full flex-col">
          <p className="text-[0.95rem] text-white">{siteConfig.isoStatement}</p>
          <div className="mt-[45px] mb-[18px] w-full border-b border-[#7ba4d036]" />
          <div className="flex w-full items-center justify-between max-[769px]:flex-col max-[769px]:items-start max-[769px]:gap-4">
            <p className="text-[0.92rem] text-accent-soft">{siteConfig.copyright}</p>
            <div className="flex gap-7">
              {footerNav.map((item) => (
                <Link
                  key={item.label}
                  href={item.href}
                  className="text-[0.92rem] whitespace-nowrap text-accent-soft transition-colors duration-200 hover:text-white"
                >
                  {item.label}
                </Link>
              ))}
            </div>
          </div>
        </div>

        <Image
          src="/images/brand/footer-logo.png"
          alt=""
          aria-hidden="true"
          width={908}
          height={1005}
          className="pointer-events-none absolute top-[42%] -right-[180px] z-[1] h-[90%] max-h-[470px] w-auto -translate-y-1/2 opacity-10 [filter:invert(1)_brightness(2)] max-[769px]:top-auto max-[769px]:-right-10 max-[769px]:bottom-[30px] max-[769px]:h-auto max-[769px]:max-h-none max-[769px]:w-[200px] max-[769px]:translate-y-0 max-[769px]:opacity-[0.07]"
        />
      </div>
    </footer>
  );
}