import { Autoplay, Navigation, Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";



export default function AboutSection({ settings, data }: { settings: any, data: any }) {
  const images = data.sec_2_images ?? [];
  return (
    <section id="about" className="overflow-x-hidden bg-white py-14 md:py-20">
      <div className="w-full max-w-[1300px] mx-auto px-2 md:px-4">
        <div className="flex flex-col items-start gap-6 md:flex-row md:gap-[22px]">
          <div className="min-w-0 w-full md:w-[50%] space-y-6">
            <div className="space-y-2">
              <h2 className="text-2xl font-semibold text-slate-900 md:text-3xl">
                {data.sec_2_title}
              </h2>
            </div>
            <p className="max-w-xl text-base md:text-xl leading-relaxed text-slate-500 font-medium">
              {data.sec_2_description}
            </p>
            <p className="max-w-xl text-base md:text-xl leading-relaxed text-slate-500 font-medium">
              {data.sec_2_description_2}
            </p>
            {/* تم تعديل الـ key هنا واستبدال text-100 بكلاس صحيح */}
            {/* <ul className="space-y-4 font-bold text-slate-700">
              {data.sec_2_repeater.map((item: any, index: number) => (
                <li key={index} className="flex items-start gap-3 text-base">
                  <span className="mt-0.5 inline-flex h-6 w-6 items-center justify-center rounded-full border border-emerald-600 text-emerald-700">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-4 w-4">
                      <path
                        fillRule="evenodd"
                        d="M16.704 5.29a1 1 0 010 1.415l-7.1 7.1a1 1 0 01-1.415 0l-3.594-3.593a1 1 0 111.414-1.414l2.887 2.887 6.392-6.392a1 1 0 011.415 0z"
                        clipRule="evenodd"
                      />
                    </svg>
                  </span>
                  <span>{item.value_text_1}</span>
                </li>
              ))}
            </ul> */}
            <a
              href={data.sec_2_button_link}
              className="inline-flex items-center rounded-full border border-emerald-600 px-4 py-1.5 text-base font-semibold text-emerald-700 transition-colors hover:bg-emerald-50"
            >
              {data.sec_2_button_text}
            </a>
          </div>

          <div className="min-w-0 w-full md:w-[50%]">
            <div className="relative w-full overflow-hidden rounded-3xl shadow-xl">
              {images.length > 0 ? (
                <Swiper
                  modules={[Autoplay, Navigation, Pagination]}
                  slidesPerView={1}
                  loop={images.length > 1}
                  speed={900}
                  autoplay={{
                    delay: 3500,
                    disableOnInteraction: false,
                    pauseOnMouseEnter: true,
                  }}
                  pagination={{ clickable: true }}
                  navigation
                  className="w-full [--swiper-theme-color:#ffffff] [--swiper-navigation-color:#ffffff] [--swiper-navigation-size:22px] [--swiper-pagination-color:#ffffff] [--swiper-pagination-bullet-inactive-color:#ffffff] [--swiper-pagination-bullet-inactive-opacity:0.45] [&_.swiper-button-next]:text-white! [&_.swiper-button-prev]:text-white!"
                >
                  {images.map((item: any, index: number) => (
                    <SwiperSlide key={item.id ?? index}>
                      <img
                        src={item.value_media_1}
                        alt={item.value_media_1_alt || `about-image-${index + 1}`}
                        className="aspect-4/3 w-full object-cover"
                      />
                    </SwiperSlide>
                  ))}
                </Swiper>
              ) : (
                <div className="flex aspect-4/3 w-full items-center justify-center bg-slate-100 text-sm font-medium text-slate-500">
                  No image available
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}