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

const BottomCTA = () => {
  return (
    <motion.section
      initial={{ opacity: 0, y: 50 }}
      whileInView={{ opacity: 1, y: 0 }}
      transition={{ duration: 1.2, ease: "easeOut" }}
      viewport={{ once: false, amount: 0.2 }}
      className="w-full bg-white text-center py-10 mb-[113px]"
    >
      <div 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] rounded-[18px] text-[#ffffff] px-9 py-2 inline-block mr-[5px]">
            #Rekan AI
          </span>
          <span className="font-semibold ml-1">?</span>
        </h3>
      </div>

      <p 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!
      </p>

      <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 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 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>
    </motion.section>
  );
};

export default BottomCTA;
