import DotAnimatsiya from "../../dot/DotAnimatsiya";

export function Banner() {
  return (
    <section className="relative w-full lg:h-[86vh] h-screen min-h-[600px] overflow-hidden pt-20">
      {/* Background Image */}
      <div
        className="absolute inset-0 z-0"
        style={{
          backgroundImage: "url(/images/home/banner.jpg)",
          backgroundSize: "cover",
          backgroundPosition: "center",
        }}
      />

      {/* Gradient Overlay - Bottom-left to top-right */}
      <div
        className="absolute inset-0 z-10"
        style={{
          background: `linear-gradient(to top right, #d2610ab0 0%, #1e1d1ce3 20%, #1e1d1ce3 100%)`,
        }}
      />

      {/* Content Container */}
      <div className="relative z-20 h-full flex items-end lg:mt-0 md:mt-[15vh] sm:mt-[5vh] mt-0">
        <div className="max-w-[1500px] mx-auto px-4 sm:px-6 lg:px-8 w-full">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center h-full">
            {/* Right side - Text Content */}
            <div className="lg:hidden inline-block space-y-6 text-white">
              {/* Badge */}
              <div className="flex items-center gap-2 w-fit">
                <DotAnimatsiya />
                <span className="text-sm font-semibold tracking-wide">
                  WELCOME TO FIREFORCE
                </span>
              </div>

              {/* Main Heading */}
              <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight text-pretty">
                THE FIRE GUARDIAN
              </h1>

              {/* Description */}
              <p className="text-base sm:text-lg text-gray-300 leading-relaxed max-w-md">
                They are seen as a beacon of hope, a figure who brings calm
                amidst chaos and light in the darkest of moments.
              </p>

              {/* CTA Button */}
              <button className="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105 w-fit">
                GET STARTED
              </button>
            </div>

            {/* Left side - Firefighters Image */}
            <div className="flex items-end justify-center">
              <img
                src="/images/home/bannerHuman.png"
                alt="Firefighters"
                loading="lazy"
                className="w-full max-lg:w-[80vw] h-auto object-cover drop-shadow-2xl"
              />
            </div>

            {/* Right side - Text Content */}
            <div className="lg:inline-block hidden space-y-6 text-white mb-20">
              {/* Badge */}
              <div className="flex items-center gap-2 w-fit">
                <DotAnimatsiya />
                <span className="text-sm font-semibold tracking-wide">
                  WELCOME TO FIREFORCE
                </span>
              </div>

              {/* Main Heading */}
              <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight text-pretty">
                THE FIRE GUARDIAN
              </h1>

              {/* Description */}
              <p className="text-base sm:text-lg text-gray-300 leading-relaxed max-w-md">
                They are seen as a beacon of hope, a figure who brings calm
                amidst chaos and light in the darkest of moments.
              </p>

              {/* CTA Button */}
              <button className="shadow-[0px_0px_2px_8px_#ff01015c] bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 transform hover:scale-105 w-fit">
                GET STARTED
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}