"use client";

import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay } from "swiper/modules";
import Image from "next/image";
import { useRef } from "react";
import "swiper/css";

const items = [
  {
    title: "Emas Asli",
    desc: "Dinar emas murni 24K (999.9) dengan standar kualitas tinggi",
    img: "/images/swip-dinar.png",
  },
  {
    title: "Nilai Terjaga",
    desc: "Mudah dicairkan kembali dengan harga kompetitif setiap waktu",
    img: "/images/dinar-2.png",
  },
  {
    title: "Sentuhan Islami",
    desc: "Ukiran bermakna yang merepresentasikan nilai muamalah syariah",
    img: "/images/dinar-3.png",
  },
  {
    title: "Jaringan Muamalah",
    desc: "Terhubung dengan komunitas muslim yang terus bertumbuh",
    img: "/images/dinar-4.png",
  },
  {
    title: "Tim Amanah",
    desc: "Dilayani oleh tim profesional dengan prinsip kejujuran",
    img: "/images/dinar-3.png",
  },
  {
    title: "Investasi Berkah",
    desc: "Ikhtiar menjaga harta sesuai Sunnah untuk masa depan keluarga",
    img: "/images/dinar-3.png",
  },
];

export default function WhyChooseDinar() {
  const swiperRef = useRef(null);

  return (
    <section id="keunggulan" className="py-20 bg-[#0b3a6a] relative overflow-hidden">
      <div className="max-w-[1200px] mx-auto px-2 sm:px-6 relative">

        {/* TITLE */}
        <h2 className="text-center text-xl sm:text-2xl lg:text-3xl font-bold mb-14">
          <span className="text-white">Mengapa Memilih Dinar KR di </span>
          <span className="bg-gradient-to-r from-[#fff2b0] via-[#f5c76b] to-[#c89b3c] bg-clip-text text-transparent">
            Rana Mulia
          </span>
        </h2>

        {/* ARROWS */}
        <button
          onClick={() => swiperRef.current.slidePrev()}
          className="absolute left-1 lg:-left-10 top-[55%] z-20 w-10 h-10 rounded-full border border-[#f5c76b] text-[#f5c76b] flex items-center justify-center hover:bg-[#f5c76b] hover:text-[#0b3a6a] transition cursor-pointer"
        >
          ❮
        </button>

        <button
          onClick={() => swiperRef.current.slideNext()}
          className="absolute right-1 lg:-right-10 top-[55%] z-20 w-10 h-10 rounded-full border border-[#f5c76b] text-[#f5c76b] flex items-center justify-center hover:bg-[#f5c76b] hover:text-[#0b3a6a] transition cursor-pointer"
        >
          ❯
        </button>

        <Swiper
          onSwiper={(swiper) => (swiperRef.current = swiper)}
          modules={[Autoplay]}
          autoplay={{
            delay: 3000,
            disableOnInteraction: false,
          }}
          loop
          centeredSlides
          spaceBetween={20}
          breakpoints={{
            0: { slidesPerView: 1 },
            640: { slidesPerView: 2, centeredSlides: false },
            1024: { slidesPerView: 3, centeredSlides: false },
          }}
        >
          {items.map((item, i) => (
            <SwiperSlide key={i}>
              <div className="text-center cursor-pointer group active:scale-95 transition">

                {/* IMAGE */}
                <div
                  className="relative w-[150px] h-[150px] sm:w-[160px] sm:h-[160px] mx-auto mb-6 rounded-full overflow-hidden shadow-lg
                  bg-gradient-to-br from-[#fff2b0] via-[#f5c76b] to-[#c89b3c]
                  group-hover:shadow-[0_0_25px_rgba(245,199,107,0.8)] transition"
                >
                  <Image
                    src={item.img}
                    alt={item.title}
                    fill
                    className="object-contain p-4"
                  />
                </div>

                {/* TITLE GOLD */}
                <h3 className="font-semibold text-base sm:text-lg mb-2 bg-gradient-to-r from-[#fff2b0] via-[#f5c76b] to-[#c89b3c] bg-clip-text text-transparent">
                  {item.title}
                </h3>

                <p className="text-xs sm:text-sm text-white/80 leading-relaxed max-w-[260px] mx-auto">
                  {item.desc}
                </p>

              </div>
            </SwiperSlide>
          ))}
        </Swiper>

      </div>
    </section>
  );
}