import { card1, card2, card3, card4, chek } from "../../assets"
import { motion } from "framer-motion"
import { useState, useEffect, useRef } from "react"

// Custom hook untuk menggunakan Intersection Observer
const useIntersectionObserver = (options = {}) => {
  const [isIntersecting, setIsIntersecting] = useState(false)
  const ref = useRef(null)

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        setIsIntersecting(entry.isIntersecting)
      },
      {
        threshold: 0.5, // Ketika 50% elemen terlihat
        ...options,
      }
    )

    if (ref.current) {
      observer.observe(ref.current)
    }

    return () => {
      if (ref.current) {
        observer.unobserve(ref.current)
      }
    }
  }, [options])

  return [ref, isIntersecting]
}

function Solusi() {
  const cards = [
    {
      image: card1,
      description:
        "Rekan HR menghadirkan solusi automasi untuk proses HR, mulai dari rekrutmen hingga manajemen kinerja. Platform ini membantu perusahaan meningkatkan efisiensi administrasi dan kepuasan karyawan melalui integrasi AI.",
      features: ["Automasi Proses HR", "Manajemen Karyawan"],
    },
    {
      image: card2,
      description:
        "Rekan Doku adalah platform digital untuk autentikasi dan pengelolaan dokumen yang aman dan efisien. Dengan fitur e-Meterai dan e-Signature, Rekan Doku memastikan dokumen sah secara hukum dan terorganisir dengan baik.",
      features: ["Autentikasi dokumen", "Meterai dan Tanda Tangan Digital"],
    },
    {
      image: card3,
      description:
        "Rekan LLM memanfaatkan kecerdasan buatan berbasis model bahasa besar (Large Language Model) untuk menganalisis data. Solusi ini mempercepat pengambilan keputusan strategis.",
      features: ["(Large Language Model) System", "Virtual Assistant"],
    },
    {
      image: card4,
      description:
        "Rekan Veri menyediakan layanan verifikasi data secara instan dan akurat untuk berbagai kebutuhan bisnis. Rekan Veri membantu memastikan keaslian informasi pelanggan dan memperkuat keamanan transaksi digital.",
      features: ["Verifikasi Data dan Dokumen", "Keaslian Informasi Pelanggan"],
    },
  ]

  return (
    <section className="min-h-screen flex flex-col items-center justify-center py-8 bg-customWhite mt-24" id="solusi">
      <div className="text-center mb-12 md:-mt-48 px-4">
        <motion.div
          className="flex flex-col md:flex-row items-center justify-center gap-4"
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 1 }}
        >
          <h1 className="text-2xl md:text-[32px] font-semibold">Ragam Solusi Terbaik Dari</h1>
          <span className="flex items-center justify-center text-lg md:text-2xl text-customWhite bg-customRed rounded-[19px] font-bold w-[194px] h-[48px] text-center">
            #Rekan AI
          </span>
        </motion.div>
        <motion.p
          className="text-customBlack md:text-[20px] mt-4 md:max-w-[85%] mx-auto text-center"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.5, duration: 1 }}
        >
          Kami menyediakan berbagai produk berbasis AI yang dirancang khusus untuk mendukung bisnis Anda dari berbagai
          aspek.
        </motion.p>
      </div>

      <div className="mt-24 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 lg:gap-8 px-4 md:px-6 lg:px-8">
        {cards.map((card, index) => {
          const [ref, isIntersecting] = useIntersectionObserver({
            threshold: 0.5, // Set threshold when 50% of the element is visible
          })

          return (
            <motion.div
              key={index}
              ref={ref}
              className="bg-customWhite rounded-xl border p-4 md:p-6 flex flex-col items-center w-full max-w-[350px] mx-auto min-h-[500px]"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: isIntersecting ? 1 : 0, y: isIntersecting ? 0 : 20 }}
              transition={{ delay: index * 0.3 + 0.5, duration: 0.5 }}
            >
              <img
                src={card.image || "/placeholder.svg"}
                alt={`Card ${index + 1}`}
                className="w-24 h-32 md:w-32 md:h-40 lg:w-40 lg:h-48 object-contain mb-4 md:mb-6"
              />
              <p className="text-customBlack text-left mt-2 md:mt-4 flex-grow text-sm md:text-base">
                {card.description}
              </p>
              <ul className="text-left space-y-2 md:space-y-4 my-4 md:my-6 w-full min-h-[80px]">
                {card.features.map((feature, i) => (
                  <li key={i} className="flex items-center gap-2 text-sm md:text-base">
                    <img src={chek || "/placeholder.svg"} alt="Check" className="w-4 h-4 md:w-5 md:h-5" /> {feature}
                  </li>
                ))}
              </ul>
              <button className="w-full h-12 md:h-14 bg-white border border-blue-600 text-customBlue font-medium py-2 px-4 rounded-[18px] hover:bg-blue-600 hover:text-white transition duration-300 text-sm md:text-base">
                Selengkapnya <span>&rarr;</span>
              </button>
            </motion.div>
          )
        })}
      </div>
    </section>
  )
}

export default Solusi
