import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
import { ChevronRight } from "lucide-react";
import Image from "next/image";

export function OurService() {
  return (
    <div className="bg-[#1e1d1c] py-10 md:py-16 lg:py-20">
      <div className="max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8">
        {/* Header */}
        <div className="space-y-4 md:space-y-6">
          <div className="flex items-center justify-center gap-2 text-base sm:text-lg md:text-xl text-white font-bold">
            <DotAnimatsiya />
            OUR SERVICES
          </div>
          <h1 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl tracking-wider lg:tracking-[5px] font-bold bg-gradient-to-br from-white via-white to-gray-400 text-transparent bg-clip-text text-center w-full">
            FIREFIGHTER RESPONSIBILITIES
          </h1>
          <p className="text-center text-sm sm:text-base md:text-lg text-gray-400 max-w-3xl mx-auto px-4">
            Aliquam lorem ante dapibus in viverra quis feugiat a tellus
            phasellus viverra nulla ut metus varius laoreet quisque rutrum.
          </p>
        </div>

        {/* Cards Section 1 - Top Two Cards */}
        <div className="max-w-6xl w-full mx-auto grid grid-cols-1 md:grid-cols-2 gap-5 lg:gap-6 my-10 md:my-14 lg:my-16">
          {/* Card 1 - Larger Card */}
          <div className="relative space-y-4 md:space-y-5 p-6 sm:p-8 lg:p-10 rounded-xl md:col-span-1 lg:col-span-1 bg-gradient-to-br from-black via-black to-[#d2610a] min-h-[280px] sm:min-h-[320px] md:min-h-[350px] overflow-hidden">
            <h3 className="font-bold text-lg sm:text-xl md:text-2xl bg-gradient-to-br from-white via-white to-gray-400 text-transparent bg-clip-text">
              Operation Force
            </h3>
            <p className="text-gray-400 text-sm sm:text-base max-w-xs">
              Aliquam lorem ante dapibus in viverra feugiat phasellus.
            </p>
            <button className="text-[#dc2626] hover:text-[#b91c1c] font-semibold flex items-center gap-2 text-sm sm:text-base transition-colors">
              LEARN MORE <ChevronRight size={20} />
            </button>
            <div className="absolute bottom-0 right-0 md:right-2 w-32 sm:w-40 md:w-48 lg:w-52">
              <Image
                src="/images/home/gruop.png"
                alt="Operation Force"
                width={200}
                height={100}
                className="object-contain w-full h-auto"
              />
            </div>
          </div>

          {/* Card 2 */}
          <div className="relative overflow-hidden space-y-4 md:space-y-5 p-6 sm:p-8 lg:p-10 rounded-xl bg-gradient-to-br from-black via-black to-[#d2610a] min-h-[280px] sm:min-h-[320px] md:min-h-[350px]">
            <h3 className="font-bold text-lg sm:text-xl md:text-2xl bg-gradient-to-br from-white via-white to-gray-400 text-transparent bg-clip-text">
              Operation Force
            </h3>
            <p className="text-gray-400 text-sm sm:text-base max-w-xs">
              Aliquam lorem ante dapibus in viverra feugiat phasellus.
            </p>
            <button className="text-[#dc2626] hover:text-[#b91c1c] font-semibold flex items-center gap-2 text-sm sm:text-base transition-colors">
              LEARN MORE <ChevronRight size={20} />
            </button>
            <div className="absolute -bottom-4 -right-4 w-32 sm:w-40 md:w-48 lg:w-52">
              <Image
                src="/images/home/redShlang.png"
                alt="Red Hose"
                width={200}
                height={100}
                className="object-contain w-full h-auto"
              />
            </div>
          </div>
        </div>

        {/* Cards Section 2 - Bottom Row */}
        <div className="max-w-6xl w-full mx-auto grid grid-cols-1 lg:grid-cols-5 gap-5 lg:gap-6">
          {/* Card 3 - Ambulance */}
          <div className="relative rounded-xl lg:col-span-2 bg-gradient-to-br from-[#d2610a] via-black to-black overflow-hidden">
            <div className="w-full flex justify-center pt-5 px-4">
              <Image
                src="/images/home/ambulance.png"
                alt="Ambulance"
                width={300}
                height={200}
                className="object-contain w-full max-w-xs sm:max-w-sm h-auto"
              />
            </div>
            <div className="space-y-4 md:space-y-5 p-6 sm:p-8">
              <h3 className="font-bold text-lg sm:text-xl md:text-2xl bg-gradient-to-br from-white via-white to-gray-400 text-transparent bg-clip-text">
                Operation Force
              </h3>
              <p className="text-gray-400 text-sm sm:text-base max-w-xs">
                Aliquam lorem ante dapibus in viverra feugiat phasellus.
              </p>
              <button className="text-[#dc2626] hover:text-[#b91c1c] font-semibold flex items-center gap-2 text-sm sm:text-base transition-colors">
                LEARN MORE <ChevronRight size={20} />
              </button>
            </div>
          </div>

          {/* Right Column */}
          <div className="lg:col-span-3 space-y-5 lg:space-y-6">
            {/* Card 4 - Balloon */}
            <div className="relative overflow-hidden space-y-4 md:space-y-5 p-6 sm:p-8 lg:p-10 rounded-xl bg-gradient-to-br from-black via-black to-[#d2610a] min-h-[280px] sm:min-h-[300px]">
              <h3 className="font-bold text-lg sm:text-xl md:text-2xl bg-gradient-to-br from-white via-white to-gray-400 text-transparent bg-clip-text">
                Operation Force
              </h3>
              <p className="text-gray-400 text-sm sm:text-base max-w-xs lg:max-w-sm">
                Aliquam lorem ante dapibus in viverra feugiat phasellus.
              </p>
              <button className="text-[#dc2626] hover:text-[#b91c1c] font-semibold flex items-center gap-2 text-sm sm:text-base transition-colors lg:mt-20">
                LEARN MORE <ChevronRight size={20} />
              </button>
              <div className="absolute -bottom-32 sm:-bottom-36 lg:-bottom-40 -right-4 w-32 sm:w-40 md:w-48 lg:w-52">
                <Image
                  src="/images/home/balon.png"
                  alt="Balloon"
                  width={200}
                  height={100}
                  className="object-contain w-full h-auto"
                />
              </div>
            </div>

            {/* CTA Card */}
            <div className="p-6 sm:p-8 lg:p-10 rounded-xl bg-gradient-to-tr from-black via-black to-[#d2610a] flex flex-col sm:flex-row items-center justify-between gap-6">
              <h2 className="text-2xl sm:text-3xl lg:text-4xl font-semibold font-armanai text-white text-center sm:text-left">
                View more service
              </h2>
              <button className="shadow-[0px_0px_2px_6px_#a60404ad] bg-red-600 hover:bg-red-700 active:bg-red-800 text-white font-bold py-3 px-6 sm:px-8 lg:px-10 rounded-full transition-all duration-300 transform hover:scale-105 active:scale-95 whitespace-nowrap text-sm sm:text-base">
                GET STARTED
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}