"use client";

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

export function WhyChooseUs() {
  const t = useTranslations();
  const features = [
    { title: t("about.whyChoose.features.fastResponse") },
    { title: t("about.whyChoose.features.ready24") },
    { title: t("about.whyChoose.features.experienced") },
    { title: t("about.whyChoose.features.quality") },
  ];

  return (
    <section className=" bg-[#1e1d1c] px-4 py-30 pb-40 md:px-8 lg:px-12">
      <div className="mx-auto grid max-w-7xl gap-8 lg:grid-cols-2 lg:gap-16">
        {/* Left Content */}
        <div className="flex flex-col justify-center space-y-8">
          {/* Header */}
          <div>
            <div className="mb-4 flex items-center gap-2">
              <DotAnimatsiya />
              <span className="font-almarai text-sm font-semibold tracking-wider text-white">
                {t("about.whyChoose.title")}
              </span>
            </div>
            <h2
              className="font-unbounded uppercase bg-linear-to-br from-white via-white to-black
  text-transparent bg-clip-text text-3xl font-bold sm:text-4xl lg:text-5xl"
            >
              {t("about.whyChoose.subtitle")}
            </h2>
          </div>

          {/* Description */}
          <p className="font-almarai text-base leading-relaxed text-gray-400 sm:text-lg">
            {t("about.whyChoose.description")}
          </p>

          {/* Features Grid */}
          <div className="grid grid-cols-2 gap-4 sm:gap-6">
            {features.map((feature, index) => (
              <div key={index} className="flex items-center gap-3">
                <div className="shrink-0">
                  <Check className="h-5 w-5 text-red-600 sm:h-6 sm:w-6" />
                </div>
                <span className="font-almarai text-sm font-medium text-white sm:text-base">
                  {feature.title}
                </span>
              </div>
            ))}
          </div>

          {/* CTA Button */}
          <div>
            <button className="font-almarai shadow-[0px_0px_2px_8px_#ff01015c] rounded-full bg-red-600 px-6 py-3 font-bold text-white transition-all hover:bg-red-700 sm:px-8 sm:py-4">
              {t("about.whyChoose.contact")}
            </button>
          </div>
        </div>

        {/* Right Image Section */}
        <div className="relative flex items-center justify-center">
          <div className="relative h-96 md:w-[80%] w-full sm:h-125 lg:h-150">
            {/* Main Image */}
            <Image
              src="/images/img8.jpg"
              alt="Best Award Firefighter"
              fill
              className="rounded-3xl object-cover object-top"
            />

            {/* Overlay Gradient */}
            <div className="absolute inset-0 rounded-3xl bg-linear-to-t from-black via-transparent to-black/0" />

            {/* Award Badge */}
            <div className="absolute bottom-6 left-1/2 flex -translate-x-1/2 items-center gap-3 ">
              <Image
                src="/images/home/emblem.png"
                alt="Award"
                width={70}
                height={70}
                className="h-24 w-24 sm:h-20 sm:w-20"
              />
              <div>
                <p className="font-almarai text-sm font-bold text-white sm:text-base">
                  {t("about.whyChoose.award")}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}