import { CardStart1, CardStart2, CardStart3 } from "../asset";

export default function FeatureCards() {
  const features = [
    {
      icon: CardStart1,
      title: "Solusi Bisnis yang Praktis",
      description:
        "Rekan AI menghadirkan teknologi yang intuitif dan mudah digunakan, memungkinkan pelaku Startup mengelola bisnis lebih efisien tanpa perlu keahlian teknis. Setiap fitur dirancang untuk mempercepat dan menyederhanakan operasional bisnis sehari-hari."
    },
    {
      icon: CardStart2,
      title: "Hemat Biaya, Maksimal Hasil",
      description:
        "Optimalkan efisiensi bisnis dengan solusi berbasis AI yang terjangkau. Dengan mengurangi pekerjaan manual dan meningkatkan produktivitas. Menekan biaya operasional tanpa mengorbankan kualitas layanan maupun kepuasan pelanggan."
    },
    {
      icon: CardStart3,
      title: "Skalabilitas Bisnis",
      description:
        " Rekan AI dirancang untuk beradaptasi dengan kebutuhan Anda. Dengan sistem yang dapat diperluas, Startup dapat mengembangkan bisnisnya secara bertahap tanpa perlu khawatir akan keterbatasan teknologi."
    },
  ];

  return (
    <div className="container mx-auto px-4 py-16 text-center">
      <h2 className="text-[#212121] text-[32px] font-semibold mb-[91px] mt-[81px]">
        Bersama <span className="text-[#CA2B68]">#Rekan AI</span>, Startup lebih produktif, <br /> efisien, dan siap bersaing di era digital.
      </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>
  );
}