import { chek2, wagreen, start33 } from "../asset"
import { Link } from "react-router-dom"
function Kenapa() {
  return (
    <div className="container mx-auto 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-2/5 p-5 flex justify-center md:ml-14 md:justify-start">
          <img
            src={start33 || "/placeholder.svg"}
            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-3/5 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-[30px] font-semibold">Mengapa Memilih Rekan AI untuk Penggunaan Pribadi?</h2>
          <p className="mt-4 md:text-lg  md:leading-8 text-sm">
            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 || "/placeholder.svg"} 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 || "/placeholder.svg"} 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 || "/placeholder.svg"} 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 || "/placeholder.svg"}
                alt="WhatsApp Icon"
                className="mr-2 w-4 h-4 md:w-[30px] md:h-[30px]"
              />
              Konsultasi Gratis
            </button>
            <Link to={"/Contact#form"}>
              <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>
            </Link>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Kenapa