"use client";

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

/* ================= DATA TESTIMONI ================= */
const testimonialsData = [
  {
    review:
      "Sejak kenal Dinar KR, saya jadi lebih disiplin menyimpan aset. Alhamdulillah, dari sini Allah mudahkan sampai bisa beli mobil dan tanah pesantren tanpa cicilan. Proses buyback-nya gampang dan nilai simpanannya tetap terjaga. InsyaAllah berkah.",
    image: "/images/testi-1.png",
  },
  {
    review:
      "Awalnya hanya ingin coba, tapi ternyata pelayanannya bikin nyaman. Penjelasannya runtut, tidak ribet, dan semua dijelaskan dengan bahasa yang mudah dipahami.",
    image: "/images/testi-2.png",
  },
  {
    review:
      "Prosesnya terasa tertib dan terarah. Dari awal sudah jelas alurnya, jadi tidak ada rasa khawatir selama menyimpan dinar.",
    image: "/images/testi-3.png",
  },
  {
    review:
      "Saya merasa terbantu karena sistemnya simpel. Tidak banyak prosedur rumit dan hasilnya sesuai dengan yang dijelaskan di awal.",
    image: "/images/testi-5.png",
  },
  {
    review:
      "Pelayanan yang saya rasakan cukup memuaskan. Semuanya berjalan lancar tanpa kendala berarti dan komunikasinya enak.",
    image: "/images/testi-6.png",
  },
  {
    review:
      "Selama proses berjalan, saya merasa aman karena setiap tahapan dijelaskan dengan jelas. Cocok untuk yang ingin simpan emas dengan tenang.",
    image: "/images/testi-7.png",
  },
  {
    review:
      "Dinar KR memberi pengalaman yang positif. Sistemnya rapi dan tidak membuat bingung bagi pemula.",
    image: "/images/testi-8.png",
  },
  {
    review:
      "Pelayanannya konsisten dari awal sampai akhir. Saya merasa dilayani dengan baik dan profesional.",
    image: "/images/testi-9.png",
  },
  {
    review:
      "Yang saya suka, prosesnya transparan dan mudah dipantau. Jadi lebih yakin untuk menyimpan aset di sini.",
    image: "/images/testi-10.png",
  },
 
  {
    review:
      "Pengalaman yang cukup menyenangkan. Cocok untuk yang ingin menyimpan dinar tanpa banyak ribet.",
    image: "/images/testi-12.png",
  },
  {
    review:
      "Sistemnya jelas dan pelayanannya responsif. Setiap pertanyaan selalu dijawab dengan baik.",
    image: "/images/testi-13.png",
  },
  {
    review:
      "Saya merasa lebih tenang karena prosesnya tertata. Tidak ada hal yang membuat ragu selama berjalan.",
    image: "/images/testi-14.png",
  },
  {
    review:
      "Dari awal komunikasi sudah terasa profesional. Semua berjalan sesuai dengan yang dijanjikan.",
    image: "/images/testi-15.png",
  },


 
  {
    review:
      "Pengalaman yang cukup positif. Prosesnya jelas dan komunikasinya juga enak.",
    image: "/images/testi-20.png",
  },
  
];

/* ================= CARD ================= */
const SingleItem = ({ testimonial, onImageClick }) => {
  return (
    <div className="bg-white rounded-2xl shadow-md hover:shadow-xl transition p-5 flex flex-col h-full border border-gray-100">

      {/* FOTO FULL */}
      <div
        className="relative w-full h-64 rounded-xl overflow-hidden mb-5 cursor-pointer"
        onClick={() => onImageClick(testimonial.image)}
      >
        <Image
          src={testimonial.image}
          alt="Testimoni Dinar KR"
          fill
          sizes="(max-width: 768px) 100vw, 33vw"
          className="object-cover"
        />
      </div>

      {/* TEKS TESTIMONI */}
      <p className="text-gray-700 text-sm sm:text-base leading-relaxed italic">
        “{testimonial.review}”
      </p>
    </div>
  );
};

/* ================= SECTION ================= */
const Testimonials = () => {
  const sliderRef = useRef(null);
  const [previewImage, setPreviewImage] = useState(null);

  const handlePrev = useCallback(() => {
    sliderRef.current?.swiper.slidePrev();
  }, []);

  const handleNext = useCallback(() => {
    sliderRef.current?.swiper.slideNext();
  }, []);

  return (
    <>
      <section className="py-16 bg-gradient-to-b from-gray-50 to-white overflow-hidden">
        <div className="max-w-[1235px] mx-auto px-4 sm:px-6 lg:px-8">

          {/* HEADER */}
          <div className="mb-10 flex flex-col sm:flex-row justify-between items-start sm:items-center">
            <div className="max-w-2xl">
              <span className="text-sm font-medium text-[#D4AF37]">
                Testimoni Klien
              </span>

              <h2 className="text-3xl font-bold text-gray-900 mt-2">
                Kata Mereka yang Memiliki <br />
                Dinar KR by Rana Mulia
              </h2>

              <p className="text-sm text-gray-600 mt-3">
                Cerita langsung dari para nasabah yang telah merasakan kemudahan,
                ketenangan, dan nilai jangka panjang bersama Dinar KR.
              </p>
            </div>

            {/* NAV ARROW */}
            <div className="flex gap-3 mt-4 sm:mt-0">
              <button
                onClick={handlePrev}
                className="w-11 h-11 flex items-center justify-center rounded-full
                           bg-black text-[#D4AF37] border border-[#D4AF37]
                           hover:bg-[#D4AF37] hover:text-black
                           transition-all duration-300 shadow"
              >
                ←
              </button>
              <button
                onClick={handleNext}
                className="w-11 h-11 flex items-center justify-center rounded-full
                           bg-black text-[#D4AF37] border border-[#D4AF37]
                           hover:bg-[#D4AF37] hover:text-black
                           transition-all duration-300 shadow"
              >
                →
              </button>
            </div>
          </div>

          {/* SLIDER */}
          <Swiper
            ref={sliderRef}
            modules={[Autoplay]}
            loop
            spaceBetween={24}
            autoplay={{ delay: 3500, disableOnInteraction: false }}
            breakpoints={{
              0: { slidesPerView: 1 },
              768: { slidesPerView: 2 },
              1200: { slidesPerView: 3 },
            }}
          >
            {testimonialsData.map((item, index) => (
              <SwiperSlide key={index}>
                <SingleItem
                  testimonial={item}
                  onImageClick={setPreviewImage}
                />
              </SwiperSlide>
            ))}
          </Swiper>
        </div>
      </section>

      {/* MODAL IMAGE PREVIEW */}
      {previewImage && (
        <div
          className="fixed inset-0 z-50 bg-black/80 flex items-center justify-center p-4"
          onClick={() => setPreviewImage(null)}
        >
          <div className="relative w-full max-w-4xl h-[80vh]">
            <Image
              src={previewImage}
              alt="Preview Testimoni"
              fill
              className="object-contain"
            />
          </div>
        </div>
      )}
    </>
  );
};

export default Testimonials;