import { useLocale, useTranslations } from "next-intl";
import DotAnimatsiya from "../../dot/DotAnimatsiya";
import Link from "next/link";

export function Banner() {
  const t = useTranslations();
  const locale = useLocale();
  return (
    <section className="relative w-full lg:h-[86vh] h-screen min-h-150 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, #c75c08 0%, #1e1d1ce3 28%, #1e1d1ce3 100%)`,
        }}
      />

      {/* Content Container */}
      <div className="relative z-20 h-full flex items-center lg:mt-0 sm:mt-[10vh] mt-[5vh]">
        <div className="max-w-400 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 font-almarai">
                  {t("home.banner.title1")}
                </span>
              </div>

              {/* Main Heading */}
              <h1
                className="bg-linear-to-br from-white via-white to-black
  text-transparent bg-clip-text text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight text-pretty font-unbounded"
              >
                {t("home.banner.title2")}
              </h1>

              {/* Description */}
              <p className="text-base sm:text-lg text-gray-300 leading-relaxed max-w-md">
                {t("home.banner.description")}
              </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">
                {t("home.banner.cta")}
              </button>
            </div>

            {/* Left side - Firefighters Image */}
            <div className="flex items-end justify-center  ">
              <img
                src="/images/homeBanner3.png"
                alt="Firefighters"
                loading="lazy"
                className="lg:w-150 w-100 lg:h-150 max-[300px]:w-[80vw] object-contain object-right rounded-xl drop-shadow-2xl"
              />
            </div>

            {/* Right side - Text Content */}
            <div className="lg:inline-block hidden space-y-6 mb-20">
              {/* Badge */}
              <div className="flex items-center gap-2 w-fit">
                <DotAnimatsiya />
                <span className="text-sm font-semibold text-white tracking-wide font-almarai">
                  {t("home.banner.title1")}
                </span>
              </div>

              {/* Main Heading */}
              <h1
                className="font-unbounded uppercase text-4xl bg-linear-to-br from-white via-white to-black
  text-transparent bg-clip-text sm:text-5xl lg:text-6xl font-bold leading-tight text-pretty"
              >
                {t("home.banner.title2")}
              </h1>

              {/* Description */}
              <p className="font-almarai text-base sm:text-lg text-gray-300 leading-relaxed max-w-md">
                {t("home.banner.description")}
              </p>

              {/* CTA Button */}
              <Link
                href={`/${locale}/contact`}
                className="font-almarai 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"
              >
                {t("home.banner.cta")}
              </Link>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}