import { chek2, wagreen, start33 } from "../asset";

function Kenapa() {
  return (
    <div className="flex justify-center items-center bg-customWhite mt-5 min-h-screen">
      <div className="flex flex-col md:flex-row bg-customWhite rounded-lg overflow-hidden relative pt-16 md:pt-52">
        {/* Image Section */}
        <div className="relative w-full md:w-1/2 p-5 flex justify-center md:ml-14 md:justify-start">
          <img
            src={start33}
            alt="Woman with Tablet"
            className="w-full md:w-[654.5px] max-h-[609.67px] h-auto object-contain"
          />
        </div>

        {/* Text Section */}
        <div className="w-full md:w-1/2 p-6 md:p-10 flex flex-col items-center md:items-start md:mr-28 text-center md:text-left text-[#212121]">
          <h2 className="text-[32px] font-semibold">
            Mengapa Memilih Rekan AI untuk Penggunaan Pribadi?
          </h2>
          <p className="mt-4 text-sm md:max-w-[90%] md:leading-8 text-[20px]">
            Rekan AI hadir untuk memberikan kemudahan dan efisiensi bagi
            individu yang ingin memanfaatkan kecerdasan buatan dalam kehidupan
            sehari-hari. Apakah Anda ingin meningkatkan produktivitas, mengelola
            data dengan aman, atau membuat keputusan yang lebih cerdas, Rekan AI
            adalah solusi tepat yang dirancang khusus untuk Anda.
          </p>
          <ul className="mt-8 space-y-4 md:space-y-6 text-[16px] md:max-w-[70%]  font-medium">
            <li className="flex items-center ">
              <img
                src={chek2}
                alt="Check"
                className="w-6 h-6 md:w-11 md:h-11 mr-3"
              />
              Teknologi yang ramah pengguna, cocok untuk semua kalangan tanpa
              memerlukan keahlian teknis.
            </li>
            <li className="flex items-center">
              <img
                src={chek2}
                alt="Check"
                className="w-6 h-6 md:w-11 md:h-11 mr-3"
              />
              Data Anda aman dengan enkripsi tingkat tinggi, memastikan privasi
              Anda tetap terlindungi.
            </li>
            <li className="flex items-center">
              <img
                src={chek2}
                alt="Check"
                className="w-6 h-6 md:w-11 md:h-11 mr-3"
              />
              Dapatkan manfaat maksimal dari solusi AI yang dapat disesuaikan
              dengan kebutuhan individu Anda.
            </li>
          </ul>

          <div className="flex flex-col md:flex-row mt-8 md:mt-20 space-y-4 md:space-y-0 md:space-x-10 w-full mb-[112px]">
            <button className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[70px] border-2 border-[#CA2B68] text-[#CA2B68] md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition">
              <img
                src={wagreen}
                alt="WhatsApp Icon"
                className="mr-2 w-4 h-4 md:w-[30px] md:h-[30px]"
              />
              Konsultasi Gratis
            </button>
            <button className="w-full md:w-[276px] h-[50px] md:h-[70px] bg-gradient-to-r from-pink-700 to-indigo-600 text-white md:text-xl font-medium rounded-[14px] hover:opacity-90 transition">
              Coba Sekarang
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Kenapa;