import React from 'react';
import { motion } from 'framer-motion';
import { useInView } from 'react-intersection-observer';
import { imgLeft1, imgLeft2, imgLeft3, imgRight } from '../../assets';

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

  const items = [
    { id: 1, image: imgLeft1, title: 'Personal' },
    { id: 2, image: imgLeft2, title: 'UMKM' },
    { id: 3, image: imgLeft3, title: 'Corporate Business' },
  ];

  return (
    <motion.div 
      ref={ref}
      initial={{ opacity: 0 }} 
      animate={inView ? { opacity: 1 } : { opacity: 0 }} 
      transition={{ duration: 1 }}
      className="container mx-auto flex flex-col md:flex-row items-center justify-between gap-4 h-auto md:h-screen px-6 md:px-32 py-8 md:py-0" 
      id="solusi2"
    >
      {/* Left Content */}
      <motion.div 
        ref={ref}
        initial={{ x: -50, opacity: 0 }} 
        animate={inView ? { x: 0, opacity: 1 } : { x: -50, opacity: 0 }} 
        transition={{ duration: 1 }}
        className="flex flex-col justify-center w-full md:w-[45%] space-y-8 order-2 md:order-1"
      >
        <p className="text-[24px] md:text-[32px] font-semibold text-customBlack text-left md:text-left">
          Solusi Mendukung Bisnis di Setiap
          <br />
          Skala Usaha
        </p>
        <p className="text-[16px] md:text-[20px] font-normal text-customBlack text-left md:text-left">
          Kami menawarkan berbagai teknologi AI yang dapat mengotomatisasi proses, menganalisis data dengan akurat, dan memberikan pengalaman pelanggan yang lebih personal. Dengan implementasi yang mudah dan hasil yang cepat, Rekan AI menjadi mitra terbaik untuk mendukung pertumbuhan bisnis Anda.
        </p>

        <div className="flex flex-col md:flex-row justify-center md:justify-between gap-6">
          {items.map((item, index) => (
            <motion.div 
              key={item.id} 
              ref={ref}
              initial={{ y: 50, opacity: 0 }} 
              animate={inView ? { y: 0, opacity: 1 } : { y: 50, opacity: 0 }} 
              transition={{ duration: 0.8, delay: index * 0.2 }}
              className="flex flex-col items-center w-full md:w-auto md:mt-5"
            >
              {/* Image */}
              <img
                src={item.image}
                alt={item.title}
                className="w-[190px] h-[150px] sm:w-[150px] sm:h-[150px] md:w-[190px] md:h-[200px] rounded-lg"
              />
              {/* Title */}
              <p className="bg-[#5B59E8] text-white text-center rounded-lg shadow-md w-[190px] sm:w-[150px] md:w-[190px] h-10 flex items-center justify-center text-sm font-bold mt-4">
                {item.title}
              </p>
            </motion.div>
          ))}
        </div>
      </motion.div>

      {/* Right Content */}
      <motion.div 
        ref={ref}
        initial={{ x: 50, opacity: 0 }} 
        animate={inView ? { x: 0, opacity: 1 } : { x: 50, opacity: 0 }} 
        transition={{ duration: 1 }}
        className="w-full md:w-2/5 mt-8 md:mt-0 order-1 md:order-2"
      >
        <img src={imgRight} alt="Image Right" className="w-auto h-auto" />
      </motion.div>
    </motion.div>
  );
}

export default Mendukung;