import { wagreen } from "./asset"; // Import gambar WhatsApp untuk ikon
import { motion } from "framer-motion";
import { useEffect, useState } from "react";

const BottomCTA = () => {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      const scrollY = window.scrollY;
      const triggerHeight = window.innerHeight / 1.5;
      setIsVisible(scrollY > triggerHeight);
    };

    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <section className="w-full bg-white text-center py-10 mb-[113px]">
      {/* Animasi teks turun dari atas saat di-scroll */}
      <motion.div 
        initial={{ opacity: 0, y: -50 }} 
        animate={isVisible ? { opacity: 1, y: 0 } : { opacity: 0, y: -50 }} 
        transition={{ duration: 2.5, ease: "easeOut" }}
        className="flex flex-wrap justify-center gap-2"
      >
        <h3 className="text-[#212121] text-center text-[32px] font-[550] leading-[48px] tracking-[0.005em]">
          Masih punya pertanyaan seputar
        </h3>
        <h3 className="text-[24px] sm:text-xl md:text-2xl text-[#212121] mb-3">
          <span className="bg-[#dc0168] bg-[length:100%] rounded-[18px] text-[#ffffff] px-9 py-2 inline-block mr-[5px]">
            #Rekan AI
          </span>
          <span className="font-semibold ml-1">?</span>
        </h3>
      </motion.div>

      <motion.p 
        initial={{ opacity: 0, y: -30 }} 
        animate={isVisible ? { opacity: 1, y: 0 } : { opacity: 0, y: -30 }} 
        transition={{ duration: 2, ease: "easeOut" }}
        className="text-[20px] font-normal leading-[30px] tracking-[0.005em] text-center text-[#212121] mb-5 mx-auto"
      >
        Jika pertanyaan Anda belum terjawab di atas, jangan ragu untuk menghubungi kami melalui formulir<br />
        kontak atau email. Kami dengan senang hati akan membantu!
      </motion.p>

      {/* Animasi tombol keluar dari kanan dan kiri saat di-scroll */}
      <div className="flex flex-col justify-center md:mt-12 sm:flex-row gap-6 sm:gap-12 sm:mt-1 px-4 sm:px-0">
        <motion.button
          initial={{ opacity: 0, x: -50 }}
          animate={isVisible ? { opacity: 1, x: 0 } : { opacity: 0, x: -50 }}
          transition={{ duration: 2.5, ease: "easeOut" }}
          className="w-full lg:w-[270px] h-[70px] btn2 flex items-center justify-center py-3 border-2 border-[#DC0168] rounded-[14px] text-[#DC0168] font-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]"
        >
          <img src={wagreen} alt="WhatsApp Icon" className="mr-4 w-5 h-5 md:w-[30px] md:h-[30px]" />
          Konsultasi Gratis
        </motion.button>
        <motion.button
          initial={{ opacity: 0, x: 50 }}
          animate={isVisible ? { opacity: 1, x: 0 } : { opacity: 0, x: 50 }}
          transition={{ duration: 2.5, ease: "easeOut" }}
          className="w-full lg:w-[276px] h-[70px] btn2 flex items-center justify-center py-3 px-8 rounded-[14px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-semibold text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90"
        >
          Coba Sekarang
        </motion.button>
      </div>
    </section>
  );
};

export default BottomCTA;