import { MapPin, Phone } from "lucide-react";
import Image from "next/image";
import Link from "next/link";

const footerLinks = [
  {
    title: "关于鼎兴",
    links: [
      { label: "公司简介", href: "/about" },
      { label: "企业文化", href: "/about" },
      { label: "公司历程", href: "/about" },
      { label: "企业实力", href: "/about" },
      { label: "企业荣誉", href: "/about" },
    ],
  },
  {
    title: "解决方案",
    links: [
      { label: "工程机械类", href: "/products" },
      { label: "港口机械类", href: "/products" },
    ],
  },
  {
    title: "品牌故事",
    links: [
      { label: "公司新闻", href: "/news" },
      { label: "行业新闻", href: "/news" },
    ],
  },
];

export function SiteFooter() {
  return (
    <footer className="bg-white">
      {/* Mountain background at top */}
      <div className="relative h-[200px] w-full overflow-hidden">
        <Image
          src="/customers-bg.png"
          alt=""
          fill
          className="object-cover object-bottom"
          sizes="100vw"
          aria-hidden
        />
      </div>

      {/* Footer content */}
      <div className="mx-auto flex max-w-[1440px] flex-col justify-between gap-10 px-6 py-12 lg:flex-row lg:px-[120px]">
        {/* Logo */}
        <div className="flex-shrink-0">
          <Image
            src="/footer-logo.png"
            alt="鼎兴电子 DINGXING ELECTRONICS"
            width={285}
            height={64}
            className="h-[64px] w-[285px] object-contain"
          />
        </div>

        {/* Links */}
        <div className="flex flex-1 flex-wrap gap-10 lg:justify-end lg:gap-16">
          {footerLinks.map((group) => (
            <div key={group.title}>
              <h3 className="text-[26px] font-medium text-[#3e3e3e]">
                {group.title}
              </h3>
              <ul className="mt-6 space-y-2">
                {group.links.map((link) => (
                  <li key={link.label}>
                    <Link
                      href={link.href}
                      className="text-[12px] leading-[25px] text-[#3e3e3e] transition-colors hover:text-[#04388b]"
                    >
                      {link.label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          ))}

          {/* Contact */}
          <div>
            <h3 className="text-[26px] font-medium text-[#3e3e3e]">联系我们</h3>
            <ul className="mt-6 space-y-2 text-[12px] leading-[25px] text-[#3e3e3e]">
              <li className="flex items-center gap-2">
                <Phone className="size-3" />
                86-0519-85155958
              </li>
              <li className="flex items-center gap-2">
                <MapPin className="size-3" />
                常州市新北区天安工业村B座6层
              </li>
            </ul>
          </div>
        </div>
      </div>
    </footer>
  );
}
