import { motion } from "framer-motion";
import { useEffect, useState, useRef } from "react";
import { CardStart1, CardStart2, CardStart3 } 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: CardStart1,
      title: "Solusi Bisnis yang Praktis",
      description:
        "Rekan AI menghadirkan teknologi yang intuitif dan mudah digunakan, memungkinkan pelaku Startup mengelola bisnis lebih efisien tanpa perlu keahlian teknis. Setiap fitur dirancang untuk mempercepat dan menyederhanakan operasional bisnis sehari-hari."
    },
    {
      icon: CardStart2,
      title: "Hemat Biaya, Maksimal Hasil",
      description:
        "Optimalkan efisiensi bisnis dengan solusi berbasis AI yang terjangkau. Dengan mengurangi pekerjaan manual dan meningkatkan produktivitas. Menekan biaya operasional tanpa mengorbankan kualitas layanan maupun kepuasan pelanggan."
    },
    {
      icon: CardStart3,
      title: "Skalabilitas Bisnis",
      description:
        " Rekan AI dirancang untuk beradaptasi dengan kebutuhan Anda. Dengan sistem yang dapat diperluas, Startup dapat mengembangkan bisnisnya secara bertahap tanpa perlu khawatir akan keterbatasan teknologi."
    },
  ];

  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 }}
      >
        Bersama <span className="text-[#CA2B68]">#Rekan AI</span>, Startup lebih produktif, efisien, dan siap bersaing di era digital.
      </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>
  );
}
