import { component11, wagreen, start22 } from "../asset";

function HeadPersonal() {
  return (
    <div
      className="container px-4 sm:px-6 lg:px-8 mx-auto mt-16 sm:mt-20 md:mt-24 lg:mt-28 xl:mt-32"
      id="Home"
    >
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12">
        {/* Left Section */}
        <div className="text-left items-center">
          <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 mb-6">
            <img
              className="w-3/4 sm:w-auto max-h-20 object-contain"
              src={component11 || "/placeholder.svg"}
              alt="Home Logo"
              width={200}
              height={80}
            />
            <span className="inline-flex items-center 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>
          <h1 className="text-customBlack text-2xl sm:text-3xl md:text-4xl lg:text-[32px] font-semibold mb-4">
          Tumbuh Lebih Cepat dengan Automasi dan Analisis yang Terjangkau
                    </h1>
          <p className="text-customBlack text-base sm:text-lg md:text-xl lg:text-[20px] mb-8">
            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>
        </div>

        {/* Right Section (Home Image) */}
        <div className="flex justify-center lg:justify-end mt-8 lg:mt-0">
          <img
            src={start22 || "/placeholder.svg"}
            alt="Home Image"
            className="w-full max-w-[500px] sm:max-w-[600px] md:max-w-[700px] lg:max-w-[807px] h-auto"
            width={807}
            height={600}
          />
        </div>
      </div>

      {/* Buttons */}
      <div className="flex flex-col lg:flex-row mt-8 lg:-mt-28 lg:ml-28 gap-6 items-center px-4 lg:px-0">
        <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]  text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:bg-[#ffffff1a]">
          <img
            src={wagreen}
            alt="WhatsApp Icon"
            className="mr-2 h-[30px] w-[30px]"
          />
          Konsultasi Gratis
        </button>
        <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 text-[18px] lg:text-[20px] cursor-pointer transition-all ease-in-out hover:opacity-90">
          Coba Sekarang
        </button>
      </div>
    </div>
  );
}

export default HeadPersonal;