import { motion } from "framer-motion";
import { useEffect, useState } from "react";
import { useInView } from "react-intersection-observer";
import { chek2, wagreen, start33 } from "../asset";
import { Link } from "react-router-dom";

function Kenapa() {
  const { ref, inView } = useInView({ triggerOnce: false, threshold: 0.2 });

  return (
    <div ref={ref} className="container mx-auto flex justify-center items-center bg-customWhite mt-5 min-h-screen">
      <motion.div
        initial={{ opacity: 0, y: 50 }}
        animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
        transition={{ duration: 0.8 }}
        className="flex flex-col md:flex-row bg-customWhite rounded-lg overflow-hidden relative pt-16 md:pt-52"
      >
        {/* Image Section */}
        <motion.div
          initial={{ opacity: 0, scale: 0.8 }}
          animate={inView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
          transition={{ duration: 1 }}
          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"
          />
        </motion.div>

        {/* Text Section */}
        <motion.div
          initial={{ opacity: 0, x: 50 }}
          animate={inView ? { opacity: 1, x: 0 } : { opacity: 0, x: 50 }}
          transition={{ duration: 1, delay: 0.3 }}
          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">
            {["Teknologi yang ramah pengguna, cocok untuk semua kalangan tanpa memerlukan keahlian teknis.",
              "Data Anda aman dengan enkripsi tingkat tinggi, memastikan privasi Anda tetap terlindungi.",
              "Dapatkan manfaat maksimal dari solusi AI yang dapat disesuaikan dengan kebutuhan individu Anda."].map((text, index) => (
                <motion.li
                  key={index}
                  initial={{ opacity: 0, x: -30 }}
                  animate={inView ? { opacity: 1, x: 0 } : { opacity: 0, x: -30 }}
                  transition={{ duration: 0.8, delay: index * 0.2 }}
                  className="flex items-center"
                >
                  <img src={chek2 || "/placeholder.svg"} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" />
                  {text}
                </motion.li>
              ))}
          </ul>

          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
            transition={{ duration: 0.8, delay: 0.5 }}
            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]"
          >
            <motion.button
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              className="flex items-center justify-center w-full md:w-[245px] h-[50px] md:h-[62px] 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
            </motion.button>
            <Link to={"/Contact#form"}>
              <motion.button
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                className="w-full md:w-[245px] h-[50px] md:h-[62px] 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
              </motion.button>
            </Link>
          </motion.div>
        </motion.div>
      </motion.div>
    </div>
  );
}

export default Kenapa;