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

export function OurService() {
  const t = useTranslations();
  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 />
            {t("home.services.title")}
          </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-linear-to-br from-white via-white to-gray-400 text-transparent bg-clip-text text-center w-full">
            {t("home.services.subtitle")}
          </h1>
          <p className="text-center text-sm sm:text-base md:text-lg text-gray-400 max-w-3xl mx-auto px-4">
            {t("home.services.description")}
          </p>
        </div>

        {/* cards */}
        <div className="max-w-250 w-full mx-auto flex sm:flex-row flex-col items-center gap-5 my-10">
          <div className="relative space-y-4 py-6 px-8 rounded-xl sm:w-[55%] w-full bg-[linear-gradient(to_bottom_right,#000000,#000000,#000000,#d2610a)]">
            <p className="font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
              {t("home.services.services.operation.title")}
            </p>
            <p className="text-gray-400 max-w-80 w-full">
              {t("home.services.services.operation.description")}
            </p>
            <button className="text-[#dc2626] font-semibold flex items-center gap-2 text-sm">
              {t("home.services.learnmore")} <ChevronRight size={20} />
            </button>
            <Image
              src="/images/home/gruop.png"
              alt="images"
              width={200}
              height={100}
              className="object-contain sm:absolute bottom-0 right-2 z-50"
            />
          </div>
          <div className="relative overflow-hidden space-y-4 py-6 px-8 rounded-xl sm:w-[45%] w-full bg-[linear-gradient(to_bottom_right,#000000,#000000,#000000,#d2610a)]">
            <p className="font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
              {t("home.services.services.suppression.title")}
            </p>
            <p className="text-gray-400 max-w-70 w-full">
              {t("home.services.services.suppression.description")}
            </p>
            <button className="text-[#dc2626] font-semibold flex items-center gap-2 text-sm">
              {t("home.services.learnmore")} <ChevronRight size={20} />
            </button>
            <Image
              src="/images/home/redShlang.png"
              alt="images"
              width={200}
              height={100}
              className="object-contain sm:absolute -bottom-4 -right-4 z-50"
            />
          </div>
        </div>

        <div className="max-w-250 flex sm:flex-row flex-col items-start justify-between gap-5 mt-5 w-full mx-auto">
          <div className="relative rounded-xl sm:w-[40%] w-full bg-[linear-gradient(to_bottom_right,#d2610a,#000000,#000000)]">
            <Image
              src="/images/home/ambulance.png"
              alt="images"
              width={300}
              height={200}
              className="object-contain mt-5"
            />
            <div className="space-y-4 py-6 px-8">
              <p className="font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
                {t("home.services.services.safety.title")}
              </p>
              <p className="text-gray-400 max-w-80 w-full">
                {t("home.services.services.safety.description")}
              </p>
              <button className="text-[#dc2626] font-semibold flex items-center gap-2 text-sm">
                {t("home.services.learnmore")} <ChevronRight size={20} />
              </button>
            </div>
          </div>
          <div className="sm:w-[60%] w-full">
            <div className="relative overflow-hidden space-y-4 py-6 px-8 rounded-xl w-full bg-[linear-gradient(to_bottom_right,#000000,#000000,#000000,#d2610a)]">
              <p className="font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
                {t("home.services.services.monitoring.title")}
              </p>
              <p className="text-gray-400 max-w-70 w-full">
                {t("home.services.services.monitoring.description")}
              </p>
              <button className="sm:mt-38 mt-0 text-[#dc2626] font-semibold flex items-center gap-2 text-sm">
                {t("home.services.learnmore")} <ChevronRight size={20} />
              </button>
              <Image
                src="/images/home/balon.png"
                alt="images"
                width={200}
                height={100}
                className="object-contain sm:absolute -bottom-20 -right-4 max-sm:-mb-20 z-50"
              />
            </div>
            <div className="py-8 px-8 rounded-xl mt-5 w-full p-5 bg-[linear-gradient(to_top_right,#000000,#000000,#d2610a)] flex sm:flex-row flex-col  gap-5 items-center justify-between">
              <h2 className="sm:text-3xl text-xl font-semibold font-armanai text-white">
                {t("home.services.viewMoreServices")}
              </h2>
              <Link
                href="/services"
                className="shadow-[0px_0px_2px_6px_#a60404ad] bg-red-600 hover:bg-red-700 text-white font-bold sm:py-3 sm:px-8 px-8 py-2 rounded-full transition duration-300 transform hover:scale-105 w-fit"
              >
                {t("home.services.viewMore")}
              </Link>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}