import Image from "next/image";

const advantages = [
  {
    title: "一体化智造技术",
    icon: "/icon-integration.svg",
  },
  {
    title: "量产交付能力",
    icon: "/icon-mass-production.svg",
  },
  {
    title: "全套方案定制",
    icon: "/icon-custom-solution.svg",
  },
];

export function CompetitiveAdvantage() {
  return (
    <section className="bg-[#eaebf0] py-20 lg:h-[593px] lg:py-0">
      <div className="mx-auto flex h-full max-w-[1440px] flex-col items-center justify-center px-6">
        <h2 className="text-[26px] font-bold text-[#04388b]">竞争优势</h2>

        <div className="mt-12 flex w-full flex-wrap justify-center gap-6 lg:gap-[50px]">
          {advantages.map((item) => (
            <div
              key={item.title}
              className="relative flex h-[246px] w-full flex-col items-center justify-center bg-[#04388b] lg:w-[280px]"
            >
              <div className="absolute bottom-0 left-0 h-[10px] w-full bg-[#00d6f9]" />
              <Image
                src={item.icon}
                alt=""
                width={48}
                height={40}
                className="h-10 w-12 object-contain"
                aria-hidden
              />
              <p className="mt-4 text-[16px] font-bold text-white">
                {item.title}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
