
import React, { useState, useEffect } from "react";
import { Element } from "react-scroll";
import { useTranslation } from "react-i18next";
import {
  Zap,
  ShieldCheck,
  RadioTower,
  HelpCircle,
  PackageSearch,
} from "lucide-react";

import gasStationImage from "./../../../assets/Images/gasstation.jpg";

const CARDS_PER_PAGE = 3;
const gasstation1 = "https://i.imgur.com/be6t8zE.jpg"; 
const gasstation2 = "https://i.imgur.com/dn7OSjX.jpg"; 
const gasstation3 = "https://i.imgur.com/audovxI.jpg"; 
const gasstation4 = "https://i.imgur.com/k1s680S.jpg"; 

const clean1 = "https://i.imgur.com/2NQs9Wh.jpg"; 
const clean2 = "https://i.imgur.com/TCJsvHj.jpg"; 
const clean3 = "https://i.imgur.com/EIye8JU.jpg"; 
const clean4 = "https://i.imgur.com/mO5LETx.jpg"; 

const test1 = "https://i.imgur.com/5d2r3N4.jpg"; 
const test2 = "https://i.imgur.com/0HqkCPA.jpg"; 
const test3 = "https://i.imgur.com/HpTV1GD.jpg"; 
const test4 = "https://i.imgur.com/V4zTiA1.jpg"; 
const test5 = "https://i.imgur.com/op6nAk3.jpg"; 

const dev1 = "https://i.imgur.com/IKJeTs7.jpg"; 
const dev2 = "https://i.imgur.com/GjSwGhF.jpg"; 
const dev3 = "https://i.imgur.com/TIR5WfS.jpg"; 
const dev4 = "https://i.imgur.com/kbJe8Ty.jpg";

const repair1 = "https://i.imgur.com/ywBDvPS.jpg"; 
const repair2 = "https://i.imgur.com/zN43sqf.jpg"; 
const repair3 = "https://i.imgur.com/eJsWCZq.jpg"; 
const repair4 = "https://i.imgur.com/VSHij6g.jpg";

const ite1 = "https://i.imgur.com/CNPO4Vu.jpg"; 
const ite2 = "https://i.imgur.com/7TSbjgF.jpg"; 
const ite3 = "https://i.imgur.com/RbNZyg3.jpg"; 
const ite4 = "https://i.imgur.com/uFINv0O.jpg"; 
const ite5 = "https://i.imgur.com/ZwrNebq.jpg"; 
const ite6 = "https://i.imgur.com/tKOC0gO.jpg"; 

const Services = () => {
  const { t, ready } = useTranslation();

  const reasonsToChooseUs = [
    {
      icon: <Zap className="w-6 h-6 text-[#e0ba38]" />,
      text: t("services.reasons.0", "Fast Service"),
    },
    {
      icon: <ShieldCheck className="w-6 h-6 text-[#e0ba38]" />,
      text: t("services.reasons.1", "Quality Assurance"),
    },
    {
      icon: <RadioTower className="w-6 h-6 text-[#e0ba38]" />,
      text: t("services.reasons.2", "Modern Technology"),
    },
    {
      icon: <HelpCircle className="w-6 h-6 text-[#e0ba38]" />,
      text: t("services.reasons.3", "Customer Support"),
    },
    {
      icon: <PackageSearch className="w-6 h-6 text-[#e0ba38]" />,
      text: t("services.reasons.4", "Comprehensive Solutions"),
    },
  ];

  const servicesData = [
    {
      title: t("services.items.0.title", "Gas Station Services"),
      text: t("services.items.0.text", "Comprehensive gas station solutions"),
      details: t(
        "services.items.0.details",
        "Installation\nMaintenance\nSafety Checks\nUpgrades"
      ),
      images: [gasstation1, gasstation2, gasstation3, gasstation4],
      type: "default"
    },
    {
      title: t("services.items.1.title", "Development"),
      text: t("services.items.1.text", "Custom development solutions"),
      details: t(
        "services.items.1.details",
        "Web Development\nMobile Apps\nCustom Software\nSystem Integration"
      ),
      images: [dev1, dev2, dev3, dev4],
      type: "default"
    },
    {
      title: t("services.items.2.title", "Repair Services"),
      text: t("services.items.2.text", "Professional repair services"),
      details: t(
        "services.items.2.details",
        "Equipment Repair\nComponent Replacement\nDiagnostics\nPreventive Maintenance"
      ),
      images: [repair1, repair2, repair3, repair4],
      type: "default"
    },
    {
      title: t("services.items.3.title", "Cleaning Services"),
      text: t("services.items.3.text", "Thorough cleaning solutions"),
      details: t("services.items.3.details", "Deep Cleaning\nSanitization\nEquipment Cleaning\nMaintenance Cleaning"),
      images: [clean1, clean2, clean3, clean4, test1, test2, test3, test4, test5],
      type: "default"
    },
    {
      title: t("services.items.5.title", "IT Equipment"),
      text: t("services.items.5.text", "IT equipment services"),
      details: t(
        "services.items.5.details",
        "Installation\nConfiguration\nMaintenance\nUpgrades"
      ),
      images: [ite1, ite2, ite3, ite4, ite5, ite6],
      type: "ite"
    },
  ];

  const [expandedIndex, setExpandedIndex] = useState(null);
  const [currentImage, setCurrentImage] = useState(gasStationImage);
  const [imageIndex, setImageIndex] = useState(0);
  const [page, setPage] = useState(0);
  const [isPaused, setIsPaused] = useState(false);
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => {
      setWindowWidth(window.innerWidth);
    };

    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  useEffect(() => {
    let intervalId;

    if (expandedIndex !== null && !isPaused) {
      const images = servicesData[expandedIndex].images;

      setImageIndex(0);
      setCurrentImage(images[0]);

      intervalId = setInterval(() => {
        setImageIndex((prevIndex) => {
          const nextIndex = (prevIndex + 1) % images.length;
          setCurrentImage(images[nextIndex]);
          return nextIndex;
        });
      }, 2000);
    } else if (expandedIndex === null) {
      setCurrentImage(gasStationImage);
      setImageIndex(0);
    }

    return () => clearInterval(intervalId);
  }, [expandedIndex, isPaused]);

  const toggleCard = (index) => {
    const actualIndex = startIndex + index;
    setExpandedIndex(actualIndex === expandedIndex ? null : actualIndex);
  };

  const startIndex = page * CARDS_PER_PAGE;
  const endIndex = startIndex + CARDS_PER_PAGE;
  const visibleServices = servicesData.slice(startIndex, endIndex);

  const handleNextPage = () => {
    const totalPages = Math.ceil(servicesData.length / CARDS_PER_PAGE);
    setExpandedIndex(null);
    setPage((prev) => (prev + 1) % totalPages);
  };

  if (!ready) return <div>Loading translations...</div>;

  return (
    <>
      <Element name="services">
        <section
          className="w-full min-h-screen py-12 px-4 sm:px-6 bg-[var(--dark-color)] text-[var(--font-color)] flex flex-col items-center font-sans relative"
          style={{ direction: "rtl" }}
        >
          <h1 className="pt-6 mb-6 text-4xl font-extrabold md:text-5xl lg:text-6xl text-center">
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#10375C] to-[#F3C623]">
              {t("services.title", "Our Services")}
            </span>
          </h1>

          <div className="w-full max-w-7xl mx-auto flex flex-col lg:flex-row items-start justify-between relative">
            <div className="w-full lg:w-1/2 px-4 relative z-10 mb-8 lg:mb-0">
              <p className="text-lg font-normal text-[var(--font-color)] lg:text-xl mb-8 text-center">
                {t("services.subtitle", "Explore our professional services")}
              </p>

              <div className="flex flex-col gap-6 relative">
                {visibleServices.map((service, index) => (
                  <React.Fragment key={index}>
                    <div
                      onClick={() => toggleCard(index)}
                      className="relative cursor-pointer transition-all duration-300 ease-in-out transform hover:scale-[1.02] p-6 bg-gray-800 rounded-md shadow-md hover:shadow-[0px_2px_6px_#F3C623] flex flex-col justify-center items-center text-center"
                    >
                      <h3 className="text-xl font-semibold text-[var(--accent-color)] mb-2">
                        {service.title}
                      </h3>
                      <p className="text-[var(--font-color)] text-md">
                        {service.text}
                      </p>

                      {expandedIndex === startIndex + index && (
                        <div className="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-4 justify-center transition-all duration-300">
                          {service.details.split("\n").map((line, i, arr) => {
                            const isLastCentered =
                              arr.length % 2 === 1 && i === arr.length - 1;
                            return (
                              <div
                                key={i}
                                className={`w-[220px] h-[100px] px-4 py-2 bg-[#1f2937] text-white text-center rounded-lg shadow-[0_2px_8px_rgba(243,198,35,0.25)] flex items-center justify-center text-sm font-medium ${
                                  isLastCentered
                                    ? "sm:col-span-2 mx-auto"
                                    : ""
                                }`}
                              >
                                {line}
                              </div>
                            );
                          })}
                        </div>
                      )}

                      <div className="absolute bottom-4 right-4">
                        <svg
                          className="w-6 h-6 animate-soft-blink"
                          viewBox="0 0 24 24"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <defs>
                            <linearGradient
                              id="arrowGradient"
                              x1="0"
                              y1="0"
                              x2="1"
                              y2="0"
                            >
                              <stop offset="0%" stopColor="#10375C" />
                              <stop offset="100%" stopColor="#F3C623" />
                            </linearGradient>
                          </defs>
                          <path
                            d="M13 5l7 7-7 7M5 12h14"
                            stroke="url(#arrowGradient)"
                            strokeWidth="2"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                          />
                        </svg>
                      </div>
                    </div>

                    {windowWidth < 1024 && expandedIndex === startIndex + index && (
                      <div className="relative w-full h-64 overflow-hidden rounded-lg shadow-md mb-4">
                        <img
                          src={currentImage}
                          alt={`${service.title} Visual`}
                          className={`w-full h-full ${
                            service.type === "ite"
                              ? "object-contain bg-black"
                              : "object-cover"
                          }`}
                          loading="lazy"
                          decoding="async"
                        />
                      </div>
                    )}
                  </React.Fragment>
                ))}

                <button
                  onClick={handleNextPage}
                  className="h-12 bg-[#10375C] rounded-full flex items-center justify-between px-4 shadow-lg"
                  style={{
                    boxShadow: "0 0 12px 3px #F3C623",
                    transition: "box-shadow 0.3s ease-in-out",
                    width: "fit-content",
                  }}
                  onMouseEnter={(e) =>
                    (e.currentTarget.style.boxShadow = "0 0 20px 6px #F3C623")
                  }
                  onMouseLeave={(e) =>
                    (e.currentTarget.style.boxShadow = "0 0 12px 3px #F3C623")
                  }
                  aria-label="Next Services"
                >
                  <svg className="w-6 h-6" viewBox="0 0 24 24" fill="none">
                    <path
                      d="M8 5l7 7-7 7"
                      stroke="#F3C623"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                  </svg>
                  <span style={{ color: "#F3C623" }}>
                    {t("services.moreServices", "More Services")}
                  </span>
                </button>
              </div>
            </div>

            {!(windowWidth < 1024 && expandedIndex !== null) && (
              <div
                className={`w-full lg:w-1/2 px-4 flex justify-center items-center relative z-10
                  ${windowWidth < 1024 ? "order-first mb-8" : ""}`}
                onMouseEnter={() => setIsPaused(true)}
                onMouseLeave={() => setIsPaused(false)}
              >
                <div className="relative w-full max-w-[740px]">
                  <div className="relative w-full h-[300px] sm:h-[400px] md:h-[494px] overflow-hidden rounded-lg shadow-md">
                    <img
                      src={currentImage}
                      alt="Service Visual"
                      className={`w-full h-full ${
                        expandedIndex !== null && 
                        servicesData[expandedIndex].type === "ite"
                          ? "object-contain bg-black"
                          : "object-cover"
                      }`}
                      loading="lazy"
                      decoding="async"
                    />
                  </div>
                  {expandedIndex === null && (
                    <div
                      className="
                        absolute bottom-4 left-1/2 transform -translate-x-1/2
                        sm:left-6 sm:bottom-6 sm:translate-x-0
                        bg-white/20 backdrop-blur-md p-4 sm:p-6 rounded-lg shadow-lg
                        w-[90%] sm:w-[360px] text-white text-center
                        z-20
                      "
                    >
                      <h2 className="text-lg sm:text-xl font-bold text-white mb-2">
                        {t("services.futureVision", "Our Future Vision")}
                      </h2>
                      <p className="text-sm sm:text-base text-[var(--font-color)]">
                        {t(
                          "services.futureVisionText",
                          "Innovative solutions for tomorrow's challenges"
                        )}
                      </p>
                    </div>
                  )}
                </div>
              </div>
            )}
          </div>
        </section>
      </Element>

      <Element name="why-us">
        <section
          className="w-full py-12 px-4 sm:px-6 bg-[var(--dark-color)] text-[var(--font-color)] flex flex-col items-center font-sans relative"
          style={{ direction: "rtl" }}
        >
          <h1 className="pt-6 mb-6 text-4xl font-extrabold md:text-5xl lg:text-6xl text-center">
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#10375C] to-[#F3C623]">
              {t("services.whyChooseUs", "Why Choose Us")}
            </span>
          </h1>
          <div className="w-full max-w-6xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 px-4">
            {reasonsToChooseUs.map((reason, index) => (
              <div
                key={index}
                className="group flex items-start gap-6 bg-gradient-to-br from-[#1f2937] to-[#374151] p-6 rounded-xl shadow-lg hover:shadow-[0px_8px_25px_rgba(243,198,35,0.3)] transition-all duration-500 hover:scale-105 border border-gray-700 hover:border-[#F3C623]/50"
              >
                <div className="relative flex-shrink-0">
                  <div className="flex items-center justify-center w-16 h-16 bg-gradient-to-br from-[#F3C623] to-[#EB8317] rounded-2xl shadow-lg group-hover:shadow-xl group-hover:shadow-[#F3C623]/40 transition-all duration-500 group-hover:rotate-6">
                    <div className="text-white text-2xl group-hover:scale-110 transition-transform duration-300">
                      {React.cloneElement(reason.icon, {
                        className: "w-8 h-8 text-white",
                      })}
                    </div>
                  </div>
                  <div className="absolute -top-1 -right-1 w-4 h-4 bg-[#F3C623] rounded-full animate-pulse"></div>
                  <div className="absolute inset-0 bg-gradient-to-br from-[#F3C623]/20 to-[#EB8317]/20 rounded-2xl blur-xl group-hover:blur-2xl transition-all duration-500 opacity-0 group-hover:opacity-100"></div>
                </div>

                <div className="flex-1">
                  <p className="text-[var(--font-color)] text-lg leading-relaxed group-hover:text-white transition-colors duration-300">
                    {reason.text}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </section>
      </Element>
    </>
  );
};

export default Services;














// import React, { useState, useEffect } from "react";
// import { Element } from "react-scroll";
// import { useTranslation } from "react-i18next";
// import {
//   Zap,
//   ShieldCheck,
//   RadioTower,
//   HelpCircle,
//   PackageSearch,
// } from "lucide-react";

// import gasStationImage from "./../../../assets/Images/gasstation.jpg";


// const CARDS_PER_PAGE = 3;
// const gasstation1 = "https://i.imgur.com/be6t8zE.jpg"; 
// const gasstation2 = "https://i.imgur.com/dn7OSjX.jpg"; 
// const gasstation3 = "https://i.imgur.com/audovxI.jpg"; 
// const gasstation4 = "https://i.imgur.com/k1s680S.jpg"; 

// const clean1 = "https://i.imgur.com/2NQs9Wh.jpg"; 
// const clean2 = "https://i.imgur.com/TCJsvHj.jpg"; 
// const clean3 = "https://i.imgur.com/EIye8JU.jpg"; 
// const clean4 = "https://i.imgur.com/mO5LETx.jpg"; 

// const test1 = "https://i.imgur.com/5d2r3N4.jpg"; 
// const test2 = "https://i.imgur.com/0HqkCPA.jpg"; 
// const test3 = "https://i.imgur.com/HpTV1GD.jpg"; 
// const test4 = "https://i.imgur.com/V4zTiA1.jpg"; 
// const test5 = "https://i.imgur.com/op6nAk3.jpg"; 

// const dev1 = "https://i.imgur.com/IKJeTs7.jpg"; 
// const dev2 = "https://i.imgur.com/GjSwGhF.jpg"; 
// const dev3 = "https://i.imgur.com/TIR5WfS.jpg"; 
// const dev4 = "https://i.imgur.com/kbJe8Ty.jpg";

// const repair1 = "https://i.imgur.com/ywBDvPS.jpg"; 
// const repair2 = "https://i.imgur.com/zN43sqf.jpg"; 
// const repair3 = "https://i.imgur.com/eJsWCZq.jpg"; 
// const repair4 = "https://i.imgur.com/VSHij6g.jpg";

// const ite1 = "https://i.imgur.com/CNPO4Vu.jpg"; 
// const ite2 = "https://i.imgur.com/7TSbjgF.jpg"; 
// const ite3 = "https://i.imgur.com/RbNZyg3.jpg"; 
// const ite4 = "https://i.imgur.com/uFINv0O.jpg"; 
// const ite5 = "https://i.imgur.com/ZwrNebq.jpg"; 
// const ite6 = "https://i.imgur.com/tKOC0gO.jpg"; 

// const Services = () => {
//   const { t, ready } = useTranslation();

//   const reasonsToChooseUs = [
//     {
//       icon: <Zap className="w-6 h-6 text-[#e0ba38]" />,
//       text: t("services.reasons.0", "Fast Service"),
//     },
//     {
//       icon: <ShieldCheck className="w-6 h-6 text-[#e0ba38]" />,
//       text: t("services.reasons.1", "Quality Assurance"),
//     },
//     {
//       icon: <RadioTower className="w-6 h-6 text-[#e0ba38]" />,
//       text: t("services.reasons.2", "Modern Technology"),
//     },
//     {
//       icon: <HelpCircle className="w-6 h-6 text-[#e0ba38]" />,
//       text: t("services.reasons.3", "Customer Support"),
//     },
//     {
//       icon: <PackageSearch className="w-6 h-6 text-[#e0ba38]" />,
//       text: t("services.reasons.4", "Comprehensive Solutions"),
//     },
//   ];

//   const servicesData = [
//     {
//       title: t("services.items.0.title", "Gas Station Services"),
//       text: t("services.items.0.text", "Comprehensive gas station solutions"),
//       details: t(
//         "services.items.0.details",
//         "Installation\nMaintenance\nSafety Checks\nUpgrades"
//       ),
//       images: [gasstation1, gasstation2, gasstation3, gasstation4],
//       type: "default"
//     },
//     {
//       title: t("services.items.1.title", "Development"),
//       text: t("services.items.1.text", "Custom development solutions"),
//       details: t(
//         "services.items.1.details",
//         "Web Development\nMobile Apps\nCustom Software\nSystem Integration"
//       ),
//       images: [dev1, dev2, dev3, dev4],
//       type: "default"
//     },
//     {
//       title: t("services.items.2.title", "Repair Services"),
//       text: t("services.items.2.text", "Professional repair services"),
//       details: t(
//         "services.items.2.details",
//         "Equipment Repair\nComponent Replacement\nDiagnostics\nPreventive Maintenance"
//       ),
//       images: [repair1, repair2, repair3, repair4],
//       type: "default"
//     },
//     {
//       title: t("services.items.3.title", "Cleaning Services"),
//       text: t("services.items.3.text", "Thorough cleaning solutions"),
//       details: t("services.items.3.details", "Deep Cleaning\nSanitization\nEquipment Cleaning\nMaintenance Cleaning"),
//       images: [clean1, clean2, clean3, clean4, test1,test2,test3,test4,test5],
//       type: "default"
//     },
//     {
//       title: t("services.items.5.title", "IT Equipment"),
//       text: t("services.items.5.text", "IT equipment services"),
//       details: t(
//         "services.items.5.details",
//         "Installation\nConfiguration\nMaintenance\nUpgrades"
//       ),
//       images: [ite1, ite2, ite3, ite4, ite5, ite6],
//       type: "ite"
//     },
//   ];

//   const [expandedIndex, setExpandedIndex] = useState(null);
//   const [currentImage, setCurrentImage] = useState(gasStationImage);
//   const [imageIndex, setImageIndex] = useState(0);
//   const [page, setPage] = useState(0);
//   const [isPaused, setIsPaused] = useState(false);
//   const [windowWidth, setWindowWidth] = useState(window.innerWidth);

//   useEffect(() => {
//     const handleResize = () => {
//       setWindowWidth(window.innerWidth);
//     };

//     window.addEventListener("resize", handleResize);
//     return () => window.removeEventListener("resize", handleResize);
//   }, []);

//   useEffect(() => {
//     let intervalId;

//     if (expandedIndex !== null && !isPaused) {
//       const images = servicesData[expandedIndex].images;

//       setImageIndex(0);
//       setCurrentImage(images[0]);

//       intervalId = setInterval(() => {
//         setImageIndex((prevIndex) => {
//           const nextIndex = (prevIndex + 1) % images.length;
//           setCurrentImage(images[nextIndex]);
//           return nextIndex;
//         });
//       }, 2000);
//     } else if (expandedIndex === null) {
//       setCurrentImage(gasStationImage);
//       setImageIndex(0);
//     }

//     return () => clearInterval(intervalId);
//   }, [expandedIndex, isPaused]);

//   const toggleCard = (index) => {
//     setExpandedIndex(index === expandedIndex ? null : index);
//   };

//   const startIndex = page * CARDS_PER_PAGE;
//   const endIndex = startIndex + CARDS_PER_PAGE;
//   const visibleServices = servicesData.slice(startIndex, endIndex);

//   const handleNextPage = () => {
//     const totalPages = Math.ceil(servicesData.length / CARDS_PER_PAGE);
//     setExpandedIndex(null);
//     setPage((prev) => (prev + 1) % totalPages);
//   };

//   if (!ready) return <div>Loading translations...</div>;

//   return (
//     <>
//       <Element name="services">
//         <section
//           className="w-full min-h-screen py-12 px-4 sm:px-6 bg-[var(--dark-color)] text-[var(--font-color)] flex flex-col items-center font-sans relative"
//           style={{ direction: "rtl" }}
//         >
//           <h1 className="pt-6 mb-6 text-4xl font-extrabold md:text-5xl lg:text-6xl text-center">
//             <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#10375C] to-[#F3C623]">
//               {t("services.title", "Our Services")}
//             </span>
//           </h1>

//           <div className="w-full max-w-7xl mx-auto flex flex-col lg:flex-row items-start justify-between relative">
//             <div className="w-full lg:w-1/2 px-4 relative z-10 mb-8 lg:mb-0">
//               <p className="text-lg font-normal text-[var(--font-color)] lg:text-xl mb-8 text-center">
//                 {t("services.subtitle", "Explore our professional services")}
//               </p>

//               <div className="flex flex-col gap-6 relative">
//                 {visibleServices.map((service, index) => {
//                   const globalIndex = startIndex + index;
//                   return (
//                     <React.Fragment key={globalIndex}>
//                       <div
//                         onClick={() => toggleCard(globalIndex)}
//                         className="relative cursor-pointer transition-all duration-300 ease-in-out transform hover:scale-[1.02] p-6 bg-gray-800 rounded-md shadow-md hover:shadow-[0px_2px_6px_#F3C623] flex flex-col justify-center items-center text-center"
//                       >
//                         <h3 className="text-xl font-semibold text-[var(--accent-color)] mb-2">
//                           {service.title}
//                         </h3>
//                         <p className="text-[var(--font-color)] text-md">
//                           {service.text}
//                         </p>

//                         {expandedIndex === globalIndex && (
//                           <div className="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-4 justify-center transition-all duration-300">
//                             {service.details.split("\n").map((line, i, arr) => {
//                               const isLastCentered =
//                                 arr.length % 2 === 1 && i === arr.length - 1;
//                               return (
//                                 <div
//                                   key={i}
//                                   className={`w-[220px] h-[100px] px-4 py-2 bg-[#1f2937] text-white text-center rounded-lg shadow-[0_2px_8px_rgba(243,198,35,0.25)] flex items-center justify-center text-sm font-medium ${
//                                     isLastCentered
//                                       ? "sm:col-span-2 mx-auto"
//                                       : ""
//                                   }`}
//                                 >
//                                   {line}
//                                 </div>
//                               );
//                             })}
//                           </div>
//                         )}

//                         <div className="absolute bottom-4 right-4">
//                           <svg
//                             className="w-6 h-6 animate-soft-blink"
//                             viewBox="0 0 24 24"
//                             fill="none"
//                             xmlns="http://www.w3.org/2000/svg"
//                           >
//                             <defs>
//                               <linearGradient
//                                 id="arrowGradient"
//                                 x1="0"
//                                 y1="0"
//                                 x2="1"
//                                 y2="0"
//                               >
//                                 <stop offset="0%" stopColor="#10375C" />
//                                 <stop offset="100%" stopColor="#F3C623" />
//                               </linearGradient>
//                             </defs>
//                             <path
//                               d="M13 5l7 7-7 7M5 12h14"
//                               stroke="url(#arrowGradient)"
//                               strokeWidth="2"
//                               strokeLinecap="round"
//                               strokeLinejoin="round"
//                             />
//                           </svg>
//                         </div>
//                       </div>

//                       {windowWidth < 1024 && expandedIndex === globalIndex && (
//                         <div className="relative w-full h-64 overflow-hidden rounded-lg shadow-md mb-4">
//                           <img
//                             src={currentImage}
//                             alt={`${service.title} Visual`}
//                             // className="w-full h-full object-cover"
//                             className={`w-full h-full ${
//       expandedIndex !== null && servicesData[expandedIndex].type === "ite"
//         ? "object-contain bg-black"
//         : "object-cover"
//     }`}
//                             loading="lazy"
//                             decoding="async"
//                           />
//                         </div>
//                       )}
//                     </React.Fragment>
//                   );
//                 })}

//                 <button
//                   onClick={handleNextPage}
//                   className="h-12 bg-[#10375C] rounded-full flex items-center justify-between px-4 shadow-lg"
//                   style={{
//                     boxShadow: "0 0 12px 3px #F3C623",
//                     transition: "box-shadow 0.3s ease-in-out",
//                     width: "fit-content",
//                   }}
//                   onMouseEnter={(e) =>
//                     (e.currentTarget.style.boxShadow = "0 0 20px 6px #F3C623")
//                   }
//                   onMouseLeave={(e) =>
//                     (e.currentTarget.style.boxShadow = "0 0 12px 3px #F3C623")
//                   }
//                   aria-label="Next Services"
//                 >
//                   <svg className="w-6 h-6" viewBox="0 0 24 24" fill="none">
//                     <path
//                       d="M8 5l7 7-7 7"
//                       stroke="#F3C623"
//                       strokeWidth="2"
//                       strokeLinecap="round"
//                       strokeLinejoin="round"
//                     />
//                   </svg>
//                   <span style={{ color: "#F3C623" }}>
//                     {t("services.moreServices", "More Services")}
//                   </span>
//                 </button>
//               </div>
//             </div>

//             {!(windowWidth < 1024 && expandedIndex !== null) && (
//               <div
//                 className={`w-full lg:w-1/2 px-4 flex justify-center items-center relative z-10
//                   ${windowWidth < 1024 ? "order-first mb-8" : ""}`}
//                 onMouseEnter={() => setIsPaused(true)}
//                 onMouseLeave={() => setIsPaused(false)}
//               >
//                 <div className="relative w-full max-w-[740px]">
//                   <div className="relative w-full h-[300px] sm:h-[400px] md:h-[494px] overflow-hidden rounded-lg shadow-md">
//                     <img
//                       src={currentImage}
//                       alt="Service Visual"
//                       className="w-full h-full object-cover"
//                       loading="lazy"
//                       decoding="async"
//                     />
//                   </div>
//                   {expandedIndex === null && (
//                     <div
//                       className="
//                         absolute bottom-4 left-1/2 transform -translate-x-1/2
//                         sm:left-6 sm:bottom-6 sm:translate-x-0
//                         bg-white/20 backdrop-blur-md p-4 sm:p-6 rounded-lg shadow-lg
//                         w-[90%] sm:w-[360px] text-white text-center
//                         z-20
//                       "
//                     >
//                       <h2 className="text-lg sm:text-xl font-bold text-white mb-2">
//                         {t("services.futureVision", "Our Future Vision")}
//                       </h2>
//                       <p className="text-sm sm:text-base text-[var(--font-color)]">
//                         {t(
//                           "services.futureVisionText",
//                           "Innovative solutions for tomorrow's challenges"
//                         )}
//                       </p>
//                     </div>
//                   )}
//                 </div>
//               </div>
//             )}
//           </div>
//         </section>
//       </Element>

//       <Element name="why-us">
//         <section
//           className="w-full py-12 px-4 sm:px-6 bg-[var(--dark-color)] text-[var(--font-color)] flex flex-col items-center font-sans relative"
//           style={{ direction: "rtl" }}
//         >
//           <h1 className="pt-6 mb-6 text-4xl font-extrabold md:text-5xl lg:text-6xl text-center">
//             <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#10375C] to-[#F3C623]">
//               {t("services.whyChooseUs", "Why Choose Us")}
//             </span>
//           </h1>
//           <div className="w-full max-w-6xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 px-4">
//             {reasonsToChooseUs.map((reason, index) => (
//               <div
//                 key={index}
//                 className="group flex items-start gap-6 bg-gradient-to-br from-[#1f2937] to-[#374151] p-6 rounded-xl shadow-lg hover:shadow-[0px_8px_25px_rgba(243,198,35,0.3)] transition-all duration-500 hover:scale-105 border border-gray-700 hover:border-[#F3C623]/50"
//               >
//                 <div className="relative flex-shrink-0">
//                   <div className="flex items-center justify-center w-16 h-16 bg-gradient-to-br from-[#F3C623] to-[#EB8317] rounded-2xl shadow-lg group-hover:shadow-xl group-hover:shadow-[#F3C623]/40 transition-all duration-500 group-hover:rotate-6">
//                     <div className="text-white text-2xl group-hover:scale-110 transition-transform duration-300">
//                       {React.cloneElement(reason.icon, {
//                         className: "w-8 h-8 text-white",
//                       })}
//                     </div>
//                   </div>
//                   <div className="absolute -top-1 -right-1 w-4 h-4 bg-[#F3C623] rounded-full animate-pulse"></div>
//                   <div className="absolute inset-0 bg-gradient-to-br from-[#F3C623]/20 to-[#EB8317]/20 rounded-2xl blur-xl group-hover:blur-2xl transition-all duration-500 opacity-0 group-hover:opacity-100"></div>
//                 </div>

//                 <div className="flex-1">
//                   <p className="text-[var(--font-color)] text-lg leading-relaxed group-hover:text-white transition-colors duration-300">
//                     {reason.text}
//                   </p>
//                 </div>
//               </div>
//             ))}
//           </div>
//         </section>
//       </Element>
//     </>
//   );
// };

// export default Services;

