import { card1, card2, card3 } from "../asset";

export default function FeatureCards() {
  const features = [
    {
      icon: card1,
      title: "Kemudahan Pengelolaan Dokumen",
      description:
        "Dengan fitur pengelolaan dokumen yang mudah dan cepat, anda dapat dengan mudah mengelola semua dokumen anda saat dan berikutnya.",
    },
    {
      icon: card3,
      title: "Efisiensi dalam Sehari-Hari",
      description:
        "Dengan fitur pencarian yang canggih, anda dapat dengan cepat menemukan pengaturan upload, penghapus, dan semua kebutuhan praktis, sehingga anda bisa fokus pada hal yang penting.",
    },
    {
      icon: card2,
      title: "Teknologi yang Mudah Diakses",
      description:
        "Seluruh fitur di dalam aplikasi kami dirancang dengan teknologi yang aman, yang dapat memberikan manfaat keseluruhan kepada semua pengguna layanan kami.",
    },
  ];

  return (
    <div className="container mx-auto px-4 py-16 md:mt-[-185px] text-center mb-[-70px]">
      <h2 className="text-[#212121] text-[32px] font-semibold mb-[91px] mt-[81px]">
        Dengan <span className="text-[#CA2B68]">#Rekan AI</span>, Anda bisa menghemat waktu, meningkatkan produktivitas, dan mendapatkan solusi yang benar-benar relevan dengan kebutuhan Anda.
      </h2>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-[50px]">
        {features.map((feature, index) => (
          <div
            key={index}
            className="px-6 py-12 bg-white rounded-[10px] border shadow-lg transition-shadow duration-300 flex flex-col items-center text-center"
          >
            <div className="mb-4 relative w-16 h-16">
              <img src={feature.icon} alt={feature.title} className="object-contain" />
            </div>
            <h3 className="text-[16px] font-semibold mb-3 text-[#212121]">{feature.title}</h3>
            <p className="text-[#212121] text-[14px] leading-relaxed">{feature.description}</p>
          </div>
        ))}
      </div>
    </div>
  );
}