import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
import { useTranslations } from "next-intl";

export function ServiceBanner() {
  const t = useTranslations();
  return (
    <section className="relative w-full h-[60vh] min-h-100 overflow-hidden pt-10">
      {/* Background Image */}
      <div
        className="absolute inset-0 z-0"
        style={{
          backgroundImage: "url(/images/services/serviceBanner.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, #d2610a 0%, #1e1d1ce3 30%, #1e1d1ce3 100%)`,
        }}
      />

      <div className="max-w-250 w-full mx-auto px-4">
        <div className="relative z-20 h-full flex max-lg:flex-col items-start justify-between gap-5 pt-30">
          <div className="spacw-y-4 ">
            <div className="flex items-center gap-3">
              <DotAnimatsiya />
              <span className="text-sm text-white font-semibold tracking-wide">
                {t("services.banner.title")}
              </span>
            </div>
            <p
              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"
            >
              {t("services.banner.subtitle")}
            </p>
          </div>
          <div className="lg:w-[40%] text-gray-300 mt-10 text-lg">
            {t("services.banner.description")}
          </div>
        </div>
      </div>
    </section>
  );
}