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

export default function Hero() {
  return (
    <div className="container mx-auto px-4 lg:px-6">
      <div className="flex flex-col lg:mt-[85px] lg:flex-row items-center mt-[200px]  gap-12 py-8">
        {/* Left Column */}
        <div className="flex-1 space-y-7">
          {/* Logo and Tagline */}
          <div className="flex items-center">
            <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] text-[#212121] font-bold mt-7">
            Saatnya mengintegrasikan AI ke dalam kehidupan Anda!
          </h1>

          {/* Description */}
          <p className="text-[20px] text-[#212121] 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>

          {/* Buttons */}
          <div className="flex flex-col lg:flex-row gap-6 mt-[79px]">
            <button className="flex items-center justify-center w-full lg:w-[270px] h-[70px] border-2 border-[#DC0168] rounded-[14px] text-[#DC0168] font-bold text-[18px] lg:text-[20px] hover:bg-[#ffffff1a] transition-all">
              <img src= {wagreen} alt="WhatsApp Icon" width={30} height={30} className="mr-2" />
              Konsultasi Gratis
            </button>
            <button className="w-full lg:w-[276px] h-[70px] rounded-[14px] bg-gradient-to-r from-[#DC0168] to-[#5B59E8] text-white font-bold text-[18px] lg:text-[20px] hover:opacity-90 transition-all">
              Coba Sekarang
            </button>
          </div>
        </div>

        {/* Right Column - Hero Image */}
        <div className="flex-1 mt-[149px] lg:mt-0">
          <img
            src= {start22}
            alt="Hero Illustration"
            width={716}
            height={743}
            className="w-full h-auto"
          />
        </div>
      </div>
    </div>
  )
}