"use client";

import React from "react";

import { Button } from "@/components/ui/button";
import Image from "next/image";
import { Flame, Building2, Ambulance } from "lucide-react";
import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
import { useTranslations } from "next-intl";

interface ServiceItem {
  icon: React.ReactNode;
  title: string;
  description: string;
}

export function AboutUs() {
  const t = useTranslations();
  const services: ServiceItem[] = [
    {
      icon: <Flame width={40} height={40} className="text-red-500" />,
      title: t("home.about.prevention.title"),
      description: t("home.about.prevention.description"),
    },
    {
      icon: <Building2 width={40} height={40} className="text-red-500" />,
      title: t("home.about.accidents.title"),
      description: t("home.about.accidents.description"),
    },
    {
      icon: <Ambulance width={40} height={40} className="text-red-500" />,
      title: t("home.about.service.title"),
      description: t("home.about.service.description"),
    },
  ];
  return (
    <section className="bg-[#1e1d1c] py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
      <div className="max-w-7xl mx-auto">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center">
          {/* Left Content */}
          <div className="space-y-8">
            {/* Header */}
            <div className="space-y-6">
              <div className="flex items-center gap-3">
                <DotAnimatsiya />
                <span className="font-almarai text-white font-bold text-sm tracking-wide">
                  {t("home.about.title")}
                </span>
              </div>
              <h2
                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"
              >
                {t("home.about.subtitle")}
              </h2>
            </div>

            {/* Services */}
            <div className="space-y-6">
              {services.map((service, index) => (
                <div key={index} className="flex items-center gap-4">
                  <div className="rounded-lg p-3 inline-block bg-[#282828]">
                    {service.icon}
                  </div>
                  <div>
                    <h3 className="uppercase font-unbounded text-white font-bold text-base sm:text-lg mb-2">
                      {service.title}
                    </h3>
                    <p className="font-almarai text-gray-400 text-sm sm:text-base leading-relaxed">
                      {service.description}
                    </p>
                  </div>
                </div>
              ))}
            </div>

            {/* Button */}
            <div>
              <Button className="font-almarai bg-red-600 hover:bg-red-700 text-white font-bold px-8 py-3 rounded-full transition-colors duration-300 shadow-[0px_0px_2px_8px_#ff01015c]">
                {t("home.about.title")}
              </Button>
            </div>
          </div>

          {/* Right Image */}
          <div className="relative flex justify-center lg:justify-end">
            <div className="relative w-full max-w-md">
              {/* Main Image */}
              <div className="relative rounded-lg overflow-hidden bg-gray-900">
                <Image
                  src="/images/img8.jpg"
                  alt="Firefighter at ready"
                  width={400}
                  height={600}
                  className="w-full h-150 object-cover"
                  priority
                />
              </div>

              {/* Badge Overlay */}
              <div className="absolute bottom-4 right-4 sm:bottom-6 sm:left-6 flex items-center justify-start gap-3">
                <Image
                  src="/images/home/emblem.png"
                  alt="Best Award Badge"
                  width={100}
                  height={100}
                  className="w-20 h-20 sm:w-24 sm:h-34 drop-shadow-lg"
                />
                <div className="text-center">
                  <p className="text-white font-bold text-sm sm:text-base">
                    {t("home.about.award")}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}