import { motion } from "framer-motion";
import { useEffect, useState, useRef } from "react";
import { card1, card2, card3 } from "../asset";

const useIntersectionObserver = (options = {}) => {
  const [isIntersecting, setIsIntersecting] = useState(false);
  const ref = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        setIsIntersecting(entry.isIntersecting);
      },
      {
        threshold: 0.5,
        ...options,
      }
    );

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

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

  return [ref, isIntersecting];
};

export default function FeatureCards() {
  const features = [
    {
      icon: card1,
      title: "Kemudahan Pengelolaan Dokumen",
      description:
        "Dengan fitur pengelolaan dokumen yang mudah dan cepat, anda dapat dengan mudah mengelola semua dokumen anda saat dan berikutnya.",
    },
    {
      icon: card3,
      title: "Efisiensi dalam Sehari-Hari",
      description:
        "Dengan fitur pencarian yang canggih, anda dapat dengan cepat menemukan pengaturan upload, penghapus, dan semua kebutuhan praktis, sehingga anda bisa fokus pada hal yang penting.",
    },
    {
      icon: card2,
      title: "Teknologi yang Mudah Diakses",
      description:
        "Seluruh fitur di dalam aplikasi kami dirancang dengan teknologi yang aman, yang dapat memberikan manfaat keseluruhan kepada semua pengguna layanan kami.",
    },
  ];

  return (
    <div className="container mx-auto px-4 py-16 md:mt-[-185px] text-center mb-[-70px]">
      <motion.h2
        className="text-[#212121] text-[32px] font-semibold mb-[91px] mt-[81px]"
        initial={{ opacity: 0, y: -20 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ duration: 1 }}
      >
        Dengan <span className="text-[#CA2B68]">#Rekan AI</span>, Anda bisa menghemat waktu, meningkatkan produktivitas, dan mendapatkan solusi yang benar-benar relevan dengan kebutuhan Anda.
      </motion.h2>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-[50px]">
        {features.map((feature, index) => {
          const [ref, isIntersecting] = useIntersectionObserver();
          return (
            <motion.div
              key={index}
              ref={ref}
              className="px-6 py-12 bg-white rounded-[10px] border shadow-lg transition-shadow duration-300 flex flex-col items-center text-center"
              initial={{ opacity: 0, y: 20 }}
              animate={isIntersecting ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
              transition={{ delay: index * 0.3 + 0.5, duration: 0.5 }}
            >
              <div className="mb-4 relative w-16 h-16">
                <img src={feature.icon} alt={feature.title} className="object-contain" />
              </div>
              <h3 className="text-[16px] font-semibold mb-3 text-[#212121]">{feature.title}</h3>
              <p className="text-[#212121] text-[14px] leading-relaxed">{feature.description}</p>
            </motion.div>
          );
        })}
      </div>
    </div>
  );
}
