import { component11, wagreen, start22 } from "../asset";
import { Link } from "react-router-dom";
import { motion } from "framer-motion";
import { useInView } from "react-intersection-observer";

export default function HeadPersonal() {
  const options = { triggerOnce: false, threshold: 0.2 };
  const { ref: sectionRef, inView: sectionInView } = useInView(options);
  const { ref: textRef, inView: textInView } = useInView(options);
  const { ref: buttonRef, inView: buttonInView } = useInView(options);

  return (
    <div ref={sectionRef} className="container mx-auto px-4 lg:px-6">
      <div className="grid grid-cols-1 lg:grid-cols-2 items-center gap-12 py-8 mt-[200px] lg:mt-[85px]">
        {/* Left Column */}
        <motion.div
          ref={textRef}
          className="space-y-6 md:-mt-40 -mt-28 text-center lg:text-left order-1 lg:order-none"
          initial={{ opacity: 0, x: -50 }}
          animate={textInView ? { opacity: 1, x: 0 } : {}}
          transition={{ duration: 0.8 }}
        >
          {/* Logo and Tagline */}
          <div className="flex items-center lg:justify-start">
            <span className="flex items-center justify-center w-[53.52px] h-[43px] ml-[2px] mb-4">
              <img src={component11} alt="Logo" width={53.52} height={43} />
            </span>
            <span className="inline-flex items-center ml-[17px] justify-center bg-pink-600 text-white px-4 py-2 rounded-[14px] text-base sm:text-lg md:text-xl mt-[-20px] lg:text-2xl text-center">
              # Solusi Personal
            </span>
          </div>

          {/* Header Text */}
          <h1 className="text-[32px] lg:text-[30px] text-customBlack font-semibold mt-7">
            Saatnya mengintegrasikan AI ke dalam kehidupan Anda!
          </h1>

          {/* Description */}
          <p className="text-[20px] lg:text-[18px] text-customBlack mt-7">
            Rekan AI dirancang untuk mendukung kebutuhan personal Anda di era digital. Baik Anda seorang profesional,
            pelajar, atau individu yang mencari kemudahan dalam kehidupan sehari-hari, Rekan AI menawarkan teknologi
            yang mudah digunakan, efisien, dan dapat diandalkan.
          </p>
        </motion.div>

        {/* Right Column - Hero Image */}
        <motion.div
          className="order-2 lg:order-none flex justify-center"
          initial={{ opacity: 0, x: 50 }}
          animate={textInView ? { opacity: 1, x: 0 } : {}}
          transition={{ duration: 0.8 }}
        >
          <img
            src={start22}
            alt="Hero Illustration"
            width={716}
            height={743}
            className="w-full h-auto md:w-[600px] md:h-[600px]"
          />
        </motion.div>

        {/* Buttons - Ensure they come last on mobile */}
        <motion.div
          ref={buttonRef}
          className="flex flex-col sm:flex-row gap-4 md:-mt-96 order-3 lg:order-none"
          initial={{ opacity: 0, y: 50 }}
          animate={buttonInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.8 }}
        >
          <button className="flex items-center justify-center px-6 py-3 border-2 md:w-[245px] md:h-[55px] border-customRed rounded-[14px] text-customRed font-medium text-base lg:text-lg hover:bg-pink-50 transition-colors">
            <img src={wagreen} alt="WhatsApp Icon" width={30} height={30} className="mr-2" />
            Konsultasi Gratis
          </button>
          <Link to={"/Contact#form"}>
            <motion.button
              className="flex items-center justify-center px-6 py-3 rounded-[14px] w-[358px] h-[55px] md:w-[245px] md:h-[55px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-medium text-base lg:text-lg hover:opacity-90 transition-opacity"
              initial={{ opacity: 0, scale: 0.8 }}
              animate={buttonInView ? { opacity: 1, scale: 1 } : {}}
              transition={{ duration: 0.5 }}
            >
              Coba Sekarang
            </motion.button>
          </Link>
        </motion.div>
      </div>
    </div>
  );
}