import React from "react";

const Header = () => {
  return (
    <div className="relative bg-[#161E2A] overflow-hidden scrollbar-hide p-5 md:pt-16 mt-4 flex items-center flex-col md:flex-row gap-4 justify-between w-full">
      <div className="flex z-30 gap-3 md:gap-7 items-start">
        <div className="flex mb-7 flex-col gap-3">
          <h1 className="italic font-extrabold max-w-[250px] text-base md:text-3xl ">
            INVITE FRIENDS AND MAKE MONEY ON REFERALS
          </h1>
          <p className="max-w-[350px] text-[#54657E] leading-7 font-medium text-sm md:text-lg 2xl:text-2xl">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et.
          </p>
          <button className="bg-[#4D4CFE] text-xs md:text-base transistion-all duration-300 hover:bg-[var(--color-hoverBlue)] mt-3 md:mt-6 w-fit font-onest font-medium px-3 md:px-4 2xl:px-6 py-2.5 2xl:py-3">
            Generate Link
          </button>
        </div>
      </div>
      <div className="flex relative -mb-14 items-center">
        <div className="absolute bottom-17 left-1/2 -translate-x-1/2 w-[150px] md:w-[470px] h-[200px] md:h-[250px] bg-[#2B5AFF] blur-3xl rounded-full opacity-50"></div>
        <img
          src="/images/home/1.png"
          className="w-16 md:w-28 object-contain -rotate-10 blur-[1px] z-50 absolute -left-28 bottom-0 h-[236px]"
          alt=""
        />
        <img
          src="/images/home/1.png"
          className="w-16 md:w-20 object-contain -rotate-15 blur-[1px] z-50 absolute -left-10 -bottom-24 h-[236px]"
          alt=""
        />
        <img
          src="/images/home/1.png"
          className="w-16 md:w-32 object-contain blur-[1px] z-[99999] absolute left-36 -bottom-24 h-[236px]"
          alt=""
        />
        <img
          src="/images/home/1.png"
          className="w-16 md:w-20 object-contain z-999 absolute -right-10 blur-[1px] -rotate-15 bottom-36 h-[236px]"
          alt=""
        />
        <img
          src="/images/home/2.png"
          className="w-16 md:w-20 object-contain z-999 absolute -left-24  blur-[1px] bottom-28 md:bottom-28 h-[236px]"
          alt=""
        />
        <img
          src="/images/home/1.png"
          className="w-16 md:w-28 object-contain z-999 absolute left-24  blur-[1px] bottom-28 md:bottom-50 h-[236px]"
          alt=""
        />

        <img
          src="/images/affliate/3.svg"
          className="relative z-999 -mr-14 md:-mr-20 object-contain md:-mb-20 h-[200px] md:h-[336px]"
          alt=""
        />
        <img
          src="/images/affliate/box.png"
          className="relative z-999 object-contain -mr-24 md:-mb-20 h-[200px] md:h-[336px]"
          alt=""
        />
      </div>
    </div>
  );
};

export default Header;
