import Image from "next/image";
import { solutions } from "@/data/home";

export function Solutions() {
  return (
    <section id="solutions" className="section section-gray">
      <div className="container-page">
        <div className="mx-auto flex max-w-5xl flex-wrap justify-center gap-x-10 gap-y-10">
          {solutions.map((item) => (
            <a
              key={item.title}
              href={item.href}
              className="flex w-[160px] flex-col items-center text-center sm:w-[170px]"
            >
              <div className="mb-4 flex h-[70px] items-center justify-center overflow-visible">
                <Image
                  src={item.image}
                  alt={item.title}
                  width={70}
                  height={70}
                  className="object-contain"
                  style={{ width: 70, height: 70, transform: "scale(1.5)" }}
                />
              </div>
              <h3 className="mb-1 text-[15px] font-bold text-[#232323]">
                {item.title}
              </h3>
              <p className="text-xs text-[#999]">{item.titleEn}</p>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}
