import { wagreen } from "../asset";
import { Link } from "react-router-dom";
import { motion } from "framer-motion";

function Transformasi() {
  return (
    <>
      <motion.div 
        initial={{ opacity: 0, y: 50 }} 
        whileInView={{ opacity: 1, y: 0 }} 
        transition={{ duration: 1.2, ease: "easeOut" }} 
        viewport={{ once: false, amount: 0.2 }}
        className="flex flex-col items-center justify-center text-center w-full h-[65vh] mb-20 -mt-3"
      >
        {/* Tagline Section */}
        <div className="mb-5">
          <div className="flex flex-col sm:flex-row items-center justify-center gap-2 p-4">
            <span className="flex items-center justify-center bg-pink-600 text-white font-semibold text-2xl rounded-2xl w-48 h-12">
              #Rekan AI
            </span>
            <h1 className="text-2xl sm:text-[32px] font-semibold text-black">
              Transformasi Digital Anda Dimulai di Sini
            </h1>
          </div>
          <p className="text-base sm:text-xl text-customBlack-600 md:ml-24 mt-2 leading-relaxed px-4 sm:px-0">
            Bersama Rekan AI, Anda dapat menikmati kemudahan dan efisiensi yang didukung teknologi mutakhir.
            <span className="block sm:hidden mt-2">
              Saatnya mengintegrasikan AI ke dalam kehidupan Anda!
            </span>
            <span className="hidden sm:block mt-2">
              Saatnya mengintegrasikan AI ke dalam kehidupan Anda!
            </span>
          </p>
        </div>
      </motion.div>

      <motion.div 
        initial={{ opacity: 0, y: 50 }} 
        whileInView={{ opacity: 1, y: 0 }} 
        transition={{ duration: 1.2, ease: "easeOut" }} 
        viewport={{ once: false, amount: 0.2 }}
        className="flex flex-col justify-center md:-mt-52 md:mb-56 sm:flex-row gap-6 sm:gap-12 -mt-10 mb-20 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>
        <Link to={"/Contact#form"}>
          <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>
        </Link>
      </motion.div>
    </>
  );
}

export default Transformasi;