import { card1, card2, card3, card4, chek } from "../../assets"

function Solusi() {
  const cards = [
    {
      image: card1,
      description:
        "Rekan HR menghadirkan solusi automasi untuk proses HR, mulai dari rekrutmen hingga manajemen kinerja. Platform ini membantu perusahaan meningkatkan efisiensi administrasi dan kepuasan karyawan melalui integrasi AI.",
      features: ["Automasi Proses HR", "Manajemen Karyawan"],
    },
    {
      image: card2,
      description:
        "Rekan Doku adalah platform digital untuk autentikasi dan pengelolaan dokumen yang aman dan efisien. Dengan fitur e-Meterai dan e-Signature, Rekan Doku memastikan dokumen sah secara hukum dan terorganisir dengan baik.",
      features: ["Autentikasi dokumen", "Meterai dan Tanda Tangan Digital"],
    },
    {
      image: card3,
      description:
        "Rekan LLM memanfaatkan kecerdasan buatan berbasis model bahasa besar (Large Language Model) untuk menganalisis data. Solusi ini mempercepat pengambilan keputusan strategis.",
      features: ["(Large Language Model) System", "Virtual Assistant"],
    },
    {
      image: card4,
      description:
        "Rekan Veri menyediakan layanan verifikasi data secara instan dan akurat untuk berbagai kebutuhan bisnis. Rekan Veri membantu memastikan keaslian informasi pelanggan dan memperkuat keamanan transaksi digital.",
      features: ["Verifikasi Data dan Dokumen", "Keaslian Informasi Pelanggan"],
    },
  ]

  return (
    <section className="min-h-screen flex flex-col items-center justify-center py-8 bg-customWhite mt-24" id="solusi">
      <div className="text-center mb-12 md:-mt-48 px-4">
        <div className="flex flex-col md:flex-row items-center justify-center gap-4">
          <h1 className="text-2xl md:text-[32px] font-semibold">Ragam Solusi Terbaik Dari</h1>
          <span className="flex items-center justify-center text-lg md:text-2xl text-customWhite bg-customRed rounded-[19px] font-bold w-[194px] h-[48px] text-center">
            #Rekan AI
          </span>
        </div>
        <p className="text-customBlack md:text-[20px] mt-4 md:max-w-[85%] mx-auto text-center">
          Kami menyediakan berbagai produk berbasis AI yang dirancang khusus untuk mendukung bisnis Anda dari berbagai
          aspek.
        </p>
      </div>

      <div className="mt-24 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 lg:gap-8 px-4 md:px-6 lg:px-8">
        {cards.map((card, index) => (
          <div
          key={index}
          className="bg-customWhite rounded-xl border p-4 md:p-6 flex flex-col items-center w-full max-w-[350px] mx-auto min-h-[500px]"
        >
          <img
            src={card.image || "/placeholder.svg"}
            alt={`Card ${index + 1}`}
            className="w-24 h-32 md:w-32 md:h-40 lg:w-40 lg:h-48 object-contain mb-4 md:mb-6"
          />
          <p className="text-customBlack text-left mt-2 md:mt-4 flex-grow text-sm md:text-base">
            {card.description}
          </p>
          <ul className="text-left space-y-2 md:space-y-4 my-4 md:my-6 w-full min-h-[80px]">
            {card.features.map((feature, i) => (
              <li key={i} className="flex items-center gap-2 text-sm md:text-base">
                <img src={chek || "/placeholder.svg"} alt="Check" className="w-4 h-4 md:w-5 md:h-5" /> {feature}
              </li>
            ))}
          </ul>
          <button className="w-full h-12 md:h-14 bg-white border border-blue-600 text-customBlue font-medium py-2 px-4 rounded-[18px] hover:bg-blue-600 hover:text-white transition duration-300 text-sm md:text-base">
            Selengkapnya <span>&rarr;</span>
          </button>
        </div>
        
        ))}
      </div>
    </section>
  )
}

export default Solusi