import { waIcon2, L1, L2, L3, L4, R1, R2, R3, R4, bgcBanner } from "../../assets/"
import { Link } from "react-router-dom"

function Banner() {
  return (
    <div className="relative w-full overflow-hidden">
      <div
        className="absolute top-0 left-0 w-full h-full"
        style={{
          backgroundImage: `linear-gradient(248.72deg, #5B59E0 50.11%, rgba(202, 43, 104, 0.4) 90%), url(${bgcBanner})`,
          backgroundSize: "cover",
          backgroundPosition: "center",
          backgroundRepeat: "no-repeat",
          backgroundBlendMode: "multiply",
        }}
      ></div>

      <div className="container mx-auto relative w-full flex flex-col items-center justify-center mt-20 h-auto md:h-[692px] text-white text-center">
        {/* Gambar L1-L4 untuk mobile */}
        <div className="grid md:hidden grid-cols-2 gap-4 px-4 mt-8">
          <img src={L1} alt="image 1" className="w-full rounded-lg shadow-lg object-cover" />
          <img src={L2} alt="image 2" className="w-full rounded-lg shadow-lg object-cover" />
          <img src={L3} alt="image 3" className="w-full rounded-lg shadow-lg object-cover" />
          <img src={L4} alt="image 4" className="w-full rounded-lg shadow-lg object-cover" />
        </div>

        {/* Teks dan tombol */}
        <div className="container mx-auto px-4 text-center w-full mt-8 md:mt-0 z-10">
          <div className="text-customWhite max-w-[90%] md:max-w-[45%] mx-auto">
            <h1 className="text-xl md:text-[30px] font-semibold text-center leading-10">
              Bersama Rekan AI, Wujudkan Masa Depan Bisnis yang Lebih Inovatif dan Kompetitif.
            </h1>
          </div>
          <p className="mt-4 md:mt-14 max-w-[90%] md:max-w-[700px] mx-auto text-customWhite text-sm md:text-[18px] md:font-extralight md:leading-7">
            Dari autentikasi dokumen hingga analisis data dan automasi HR, Rekan AI menawarkan produk-produk cerdas yang
            siap membantu bisnis Anda tumbuh dan bersaing di pasar yang dinamis.
          </p>
          <div className="flex flex-col md:flex-row gap-4 mt-4 md:mt-20 justify-center">
            <button className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[65px] rounded-2xl border-[1px] border-white text-white text-sm md:text-lg font-bold hover:bg-white hover:bg-opacity-10">
              <img
                src={waIcon2}
                alt="WhatsApp Icon"
                className="mr-2 h-4 md:h-[30px] md:w-[30px] w-auto"
              />
              Konsultasi Gratis
            </button>
            <Link to={"/Contact#form"}>
              <button
                className="flex items-center justify-center w-full md:w-[270px] h-[50px] md:h-[65px] rounded-2xl px-4 md:px-8 py-2 md:py-3 border-[1px] border-white bg-gradient-to-r from-[#dc0168] to-[#5b59e8] text-white text-sm md:text-lg font-bold hover:opacity-90">
                Coba Sekarang
              </button>
            </Link>
          </div>
        </div>

        {/* Gambar L1-L4 untuk desktop */}
        <div className="absolute hidden md:grid top-1/2 left-0 transform -translate-y-1/2 grid-cols-2 gap-4 w-[30vw] max-w-[400px]">
          <img
            src={L1}
            alt="image 1"
            className="w-[15vw] max-w-[200px] rounded-lg shadow-lg object-cover"
          />
          <img
            src={L2}
            alt="image 2"
            className="w-[11vw] max-w-[150px] rounded-lg shadow-lg object-cover mt-16"
          />
          <img
            src={L3}
            alt="image 3"
            className="w-[16vw] max-w-[210px] rounded-lg shadow-lg object-cover"
          />
          <img
            src={L4}
            alt="image 4"
            className="w-[11vw] max-w-[150px] rounded-lg shadow-lg object-cover -mt-11"
          />
        </div>

        {/* Gambar R1-R4 untuk desktop */}
        <div className="absolute hidden md:grid top-1/2 right-4 transform -translate-y-1/2 grid-cols-2 gap-4 w-[30vw] max-w-[400px]">
          <img
            src={R1}
            alt="image 1"
            className="w-[11vw] max-w-[150px] rounded-lg shadow-lg object-cover mt-20 ml-9"
          />
          <img
            src={R2}
            alt="image 2"
            className="w-[15vw] max-w-[200px] rounded-lg shadow-lg object-cover -ml-4"
          />
          <img
            src={R3}
            alt="image 3"
            className="w-[13vw] max-w-[180px] rounded-lg shadow-lg object-cover ml-7"
          />
          <img
            src={R4}
            alt="image 4"
            className="w-[15vw] max-w-[206px] rounded-lg shadow-lg object-cover"
          />
        </div>

        {/* Gambar R1-R4 untuk mobile */}
        <div className="grid md:hidden grid-cols-2 gap-4 px-4 mt-8 mb-8">
          <img src={R1} alt="image 1" className="w-full rounded-lg shadow-lg object-cover" />
          <img src={R2} alt="image 2" className="w-full rounded-lg shadow-lg object-cover" />
          <img src={R3} alt="image 3" className="w-full rounded-lg shadow-lg object-cover" />
          <img src={R4} alt="image 4" className="w-full rounded-lg shadow-lg object-cover" />
        </div>
      </div>
    </div>
  )
}

export default Banner