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

function Hero() {
  const navigate = useNavigate();
  return (
    <div className="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">
          {/* Left Section */}
          <div className="space-y-6 md:-mt-32 mt-10 text-center lg:text-left order-1 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>
          </div>

          {/* Right Section - Adjust order for mobile */}
          <div 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" />
          </div>

          {/* Buttons - Ensure they come last on mobile */}
          <div className="flex flex-col sm:flex-row gap-4 md:-mt-96 order-3 lg:order-none">
            <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={waIcon} alt="WhatsApp Icon" className="mr-2 h-7 w-7" />
              Konsultasi Gratis
            </button>
            <button className="flex items-center justify-center px-6 py-3 rounded-[14px] 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">
              Coba Sekarang
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Hero;
