import React from "react";

const Refferals = () => {
  return (
    <div className="bg-[var(--color-naviBlue)] relative  overflow-hidden px-4 md:px-0 py-6 md:py-16 ">
      <div className=" max-w-5xl mx-auto p-5 mt-4 flex items-center flex-col md:flex-row gap-4 justify-between w-full">
        <div className="flex uppercase flex-col gap-3">
          <h1 className="font-sofia italic font-bold text-base md:text-2xl 2xl:text-2xl">
            More referals, more
          </h1>
          <h1 className="font-sofia italic font-bold text-base md:text-2xl -mt-4 2xl:text-2xl">
            deposits, MORE PROFITS.
          </h1>
        </div>
        <div className="flex relative flex-col items-center">
          <div className="absolute bottom-17 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[150px] md:w-[470px] h-[200px] md:h-[250px] bg-[var(--color-blue)] blur-3xl rounded-full opacity-50"></div>
          <img
            src="/images/home/1.png"
            className="w-16 md:w-36 object-contain z-999 absolute md:-left-24  blur-[1px] -top-56 h-[236px]"
            alt=""
          />
          <img
            src="/images/home/1.png"
            className="w-16 md:w-28 object-contain z-999 absolute left-24 blur-[1px] top-0 md:top-18 h-[236px]"
            alt=""
          />
            <img
            src="/images/home/1.png"
            className="w-16 md:w-28 object-contain z-999 absolute -rotate-30 -right-10 blur-[1px] bottom-0 h-[236px]"
            alt=""
          />

          <div className="flex flex-col z-[9999] relative justify-center">
            <div className="bg-[#13151A] relative gap-3 z-50 px-3 md:px-4 py-2 flex items-center">
              <span className="text-[#54657E] tracking-wide text-xs md:text-2xl">
                AFFILIATE CODE
              </span>
              <button className="bg-white px-3 md:px-6 cursor-pointer hover:bg-transparent border hover:border-white duration-300 hover:text-white font-onest uppercase py-1.5 text-[#4D4CFE]">
                Generate Link
              </button>
            </div>
            <div className="bg-[#13151A] mt-2 relative gap-3 z-50 px-3 md:px-4 py-2 flex justify-between items-center">
              <div className="flex items-center gap-2">
                <img
                  className="cursor-pointer"
                  src="images/affliate/copy.svg"
                  alt=""
                />
                <span className="text-[#54657E] tracking-wide text-xs md:text-2xl">
                  ILUVTCGWIN
                </span>
              </div>
              <img
                className="cursor-pointer"
                src="images/affliate/copy2.svg"
                alt=""
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Refferals;
