import { homeLogo, waIcon, homeImg } from '../../assets';
import { useNavigate, Link } from "react-router-dom";
import { motion } from "framer-motion";
import { useEffect, useState } from "react";

function Hero() {
  const [inView, setInView] = useState(false);
  const navigate = useNavigate();

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            setInView(true);
          } else {
            setInView(false);
          }
        });
      },
      { threshold: 0.2 }
    );

    const target = document.querySelector("#hero-section");
    if (target) {
      observer.observe(target);
    }

    return () => {
      if (target) {
        observer.unobserve(target);
      }
    };
  }, []);

  return (
    <div className="translate-y-24 md:translate-y-0 w-full overflow-hidden" id="Home">
      <div className="container mx-auto px-4 lg:px-12">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center py-12 lg:py-16" id="hero-section">
          {/* Left Section */}
          <motion.div
            initial={{ opacity: 0, x: -50 }}
            animate={{ opacity: inView ? 1 : 0, x: inView ? 0 : -50 }}
            transition={{ duration: 0.8 }}
            className="space-y-6 md:-mt-40 -mt-28 text-center lg:text-left order-1 md:-ml-4 2xl:-ml-4 lg:order-none"
            >
            <img src={homeLogo} alt="Rekan AI Logo" className="h-12 w-auto lg:mx-0" />
            <h1 className="text-[24px] lg:text-[30px] font-semibold text-customBlack leading-tight">
              Ciptakan Pengalaman Pelanggan yang Tak Terlupakan dengan Solusi AI dari Rekan AI.
            </h1>
            <p className="text-[16px] lg:text-[18px] lg:max-w-[90%] text-customBlack">
              Rekan AI menghadirkan teknologi kecerdasan buatan untuk membantu bisnis Anda beradaptasi dan tumbuh di era
              digital. Dari automasi hingga analisis data, kami membawa solusi cerdas yang mudah diimplementasikan.
            </p>
          </motion.div>

          {/* Right Section */}
          <motion.div 
            initial={{ opacity: 0, scale: 0.8 }} 
            animate={{ opacity: inView ? 1 : 0, scale: inView ? 1 : 0.8 }} 
            transition={{ duration: 0.8, delay: 0.3 }}
            className="relative w-full aspect-square lg:aspect-auto md:w-[650px] md:h-[680px] lg:h-[600px] order-2 lg:order-none"
          >
            <img src={homeImg} alt="Rekan AI Illustration" className="object-contain" />
          </motion.div>

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

export default Hero;