import { imgLeft, chek2, waIcon, circle1, circle2 } from '../../assets';
import { Link } from "react-router-dom";
import { motion } from "framer-motion";
import { useInView } from "react-intersection-observer";

function Kenapa() {
  const options = { triggerOnce: false, threshold: 0.2 };
  const { ref: sectionRef, inView: sectionInView } = useInView(options);
  const { ref: textRef, inView: textInView } = useInView(options);
  const { ref: listRef, inView: listInView } = useInView(options);
  const { ref: buttonRef, inView: buttonInView } = useInView(options);

  return (
    <div ref={sectionRef} className="container mx-auto flex justify-center items-center bg-customWhite mt-5 min-h-screen">
      <motion.div 
        initial={{ opacity: 0, y: 50 }} 
        animate={sectionInView ? { opacity: 1, y: 0 } : {}} 
        transition={{ duration: 0.8 }}
        className="flex flex-col md:flex-row bg-customWhite rounded-lg overflow-hidden relative pt-16 md:pt-52"
      >
        {/* Decorative Circles */}
        <div className="absolute hidden md:flex top-1 right-24 flex-col items-end space-y-4">
          <motion.img 
            src={circle1} alt="Circle 1" 
            className="w-auto h-auto" 
            initial={{ opacity: 0, scale: 0.5 }}
            animate={sectionInView ? { opacity: 1, scale: 1 } : {}}
            transition={{ duration: 0.6, delay: 0.3 }}
          />
          <motion.img 
            src={circle2} alt="Circle 2" 
            className="w-auto h-auto" 
            initial={{ opacity: 0, scale: 0.5 }}
            animate={sectionInView ? { opacity: 1, scale: 1 } : {}}
            transition={{ duration: 0.6, delay: 0.5 }}
          />
        </div>

        {/* Image Section */}
        <motion.div 
          ref={textRef}
          className="relative w-full md:w-1/2 p-5 flex justify-center md:ml-14 md:justify-start"
          initial={{ opacity: 0, x: -50 }}
          animate={textInView ? { opacity: 1, x: 0 } : {}}
          transition={{ duration: 0.8 }}
        >
          <img
            src={imgLeft}
            alt="Woman with Tablet"
            className="w-[300px] h-auto md:w-[654.5px] md:h-[609.67px]"
          />
        </motion.div>

        {/* Text Section */}
        <motion.div 
          ref={listRef}
          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"
          initial={{ opacity: 0, x: 50 }}
          animate={listInView ? { opacity: 1, x: 0 } : {}}
          transition={{ duration: 0.8, delay: 0.3 }}
        >
          <h2 className="text-2xl md:text-[28px] font-semibold text-customBlack">Kenapa Harus Rekan AI?</h2>
          <p className="text-customBlack mt-4 text-sm md:leading-7 md:text-[18px]">
            Rekan AI adalah mitra inovasi bisnis Anda dalam menghadapi era
            digital. Kami menghadirkan teknologi kecerdasan buatan yang dirancang
            untuk meningkatkan efisiensi operasional, mempercepat proses, dan
            memberikan wawasan berbasis data yang akurat.
          </p>
          <ul className="mt-8 space-y-4 md:space-y-6 text-sm md:max-w-[90%] md:text-base text-customBlack font-medium">
            {[
              "Automasi proses untuk mengurangi biaya dan meningkatkan produktivitas.",
              "Analisis data real-time untuk pengambilan keputusan yang lebih tepat.",
              "Menciptakan interaksi pelanggan yang lebih relevan dan berkesan.",
              "Verifikasi dan autentikasi berbasis AI yang memperkuat keamanan data."
            ].map((text, index) => (
              <motion.li 
                key={index} 
                className="flex items-center"
                initial={{ opacity: 0, x: -20 }}
                animate={listInView ? { opacity: 1, x: 0 } : {}}
                transition={{ duration: 0.6, delay: index * 0.2 }}
              >
                <img src={chek2} alt="Check" className="w-6 h-6 md:w-11 md:h-11 mr-3" />
                {text}
              </motion.li>
            ))}
          </ul>

          <div ref={buttonRef} 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">
            <motion.button 
              className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[70px] border-2 border-customRed text-customRed md:text-xl font-medium rounded-[14px] hover:bg-white hover:bg-opacity-10 transition"
              initial={{ opacity: 0, scale: 0.8 }}
              animate={buttonInView ? { opacity: 1, scale: 1 } : {}}
              transition={{ duration: 0.5, delay: 0.8 }}
            >
              <img src={waIcon} 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
                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"
                initial={{ opacity: 0, scale: 0.8 }}
                animate={buttonInView ? { opacity: 1, scale: 1 } : {}}
                transition={{ duration: 0.5, delay: 1 }}
              >
                Coba Sekarang
              </motion.button>
            </Link>
          </div>
        </motion.div>
      </motion.div>
    </div>
  );
}

export default Kenapa;