"use client";

import { useEffect, useRef, useState } from "react";
import Image from "next/image"; // hanya 1 kali import
import Link from "next/link"; 
import { BsArrowLeft, BsArrowRight } from "react-icons/bs";

const products = [
  {
    title: "1 Dinar Masjidil Haram",
    image: "/images/haram.png",
    link: "/produk/1-dinar-masjidil-haram",
  },
  {
    title: "2 Dinar Multazam",
    image: "/images/meltazam.png",
    link: "/produk/2-dinar-multazam",
  },
  {
    title: "3 Dinar Labbaik",
    image: "/images/Labbaik.png",
    link: "/produk/3-dinar-labbaik",
  },
  {
    title: "4 Dinar Asmaul Husna",
    image: "/images/AsmaulHusna.png",
    link: "/produk/4-dinar-asmaul-husna",
  },
  {
    title: "5 Dinar Ayat Kursi",
    image: "/images/Ayat Kursi.png",
    link: "/produk/5-dinar-ayat-kursi",
  },
  {
    title: "7 Dinar Pintu Makam Nabi SAW",
    image: "/images/makam.png",
    link: "/produk/7-dinar-pintu-makam-nabi",
  },
  {
    title: "10 Dinar Pintu Kabah",
    image: "/images/Pintu-Kabah.png",
    link: "/produk/10-dinar-pintu-kabah",
  },
  {
    title: "1/4 Dinar Masjidil Aqsha",
    image: "/images/aqsha.png",
    link: "/produk/1-4-dinar-masjid-al-aqsha",
  },
  {
    title: "1/4 Dinar Aya Sofia",
    image: "/images/Aya-Sofia.png",
    link: "/produk/1-4-dinar-aya-sofia",
  },
    {
    title: "MR Gold 0,5 gr",
    image: "/images/0,5.png",
    link: "/produk/mr-gold-01",
  },
  {
    title: "MR Gold 0,2 gr",
    image: "/images/0,2.png",
    link: "/produk/mr-gold-02",
  },
  {
    title: "MR Gold 0,1 gr",
    image: "/images/0,1.png",
    link: "/produk/mr-gold-01",
  },
  {
    title: "MR Gold 0,05 gr",
    image: "/images/0,05.png",
    link: "/produk/mr-gold-05-gr",
  },
  {
    title: "MR Gold 0,25 gr",
    image: "/images/0,025.png",
    link: "/produk/mr-gold-0,25-gr",
  },
];

export default function DinarProductCards() {
  const sliderRef = useRef(null);
  const [activeIndex, setActiveIndex] = useState(0);

  // Auto scroll
  useEffect(() => {
    const slider = sliderRef.current;
    if (!slider) return;

    const interval = setInterval(() => {
      const nextIndex = (activeIndex + 1) % products.length;
      setActiveIndex(nextIndex);
      slider.scrollTo({ left: nextIndex * 360, behavior: "smooth" });
    }, 3500);

    return () => clearInterval(interval);
  }, [activeIndex]);

  const scrollToIndex = (index) => {
    setActiveIndex(index);
    sliderRef.current.scrollTo({ left: index * 360, behavior: "smooth" });
  };

  const scrollLeft = () => {
    const prevIndex = activeIndex === 0 ? products.length - 1 : activeIndex - 1;
    scrollToIndex(prevIndex);
  };

  const scrollRight = () => {
    const nextIndex = (activeIndex + 1) % products.length;
    scrollToIndex(nextIndex);
  };

  return (
    <section className="py-20 bg-white relative">
      <div className="max-w-[1200px] mx-auto px-4 text-center">
        <h2 className="text-3xl md:text-4xl font-bold text-gray-800 mb-2">
          Produk Favorit
        </h2>
        <p className="text-gray-500 mb-10">Investasi emas syariah terpercaya</p>

        {/* Slider arrows */}
        <button
          onClick={scrollLeft}
          className="absolute left-4 top-1/2 -translate-y-1/2 z-10 bg-[#d4af37]/70 text-black w-10 h-10 flex items-center justify-center rounded-full shadow hover:bg-[#d4af37]/90 transition"
        >
          <BsArrowLeft />
        </button>
        <button
          onClick={scrollRight}
          className="absolute right-4 top-1/2 -translate-y-1/2 z-10 bg-[#d4af37]/70 text-black w-10 h-10 flex items-center justify-center rounded-full shadow hover:bg-[#d4af37]/90 transition"
        >
          <BsArrowRight />
        </button>

        {/* Slider */}
        <div
          ref={sliderRef}
          className="flex gap-6 overflow-x-auto scroll-smooth snap-x snap-mandatory no-scrollbar"
        >
          {products.map((item, i) => (
            <div
              key={i}
              className="min-w-[320px] md:min-w-[360px] bg-[rgba(212,175,55,0.15)] rounded-2xl shadow hover:shadow-lg snap-center transition cursor-pointer"
              onClick={() => (window.location.href = item.link)}
            >
              <div className="relative h-[300px] md:h-[350px] p-6">
                <Image
                  src={item.image}
                  alt={item.title}
                  fill
                  className="object-contain"
                />
              </div>
              <div className="border-t mx-6" />
              <div className="p-4 text-center">
                <p className="font-semibold text-gray-800">{item.title}</p>
              </div>
            </div>
          ))}
        </div>

        {/* Pagination dots */}
        <div className="flex justify-center mt-6 gap-2">
          {products.map((_, i) => (
            <button
              key={i}
              onClick={() => scrollToIndex(i)}
              className={`w-3 h-3 rounded-full ${i === activeIndex ? "bg-[#d4af37]" : "bg-gray-300"}`}
            />
          ))}
        </div>

        {/* Button Lihat Produk Lainnya */}
        <div className="mt-8">
          <Link
    href="/produk-dinar"
    className="inline-block px-8 py-3 rounded-full bg-[#1e3a5f] text-[#d4af37] font-semibold hover:bg-[#162c48] transition"
  >
    Lihat Produk Lainnya →
  </Link>
        </div>
      </div>

      {/* Hide scrollbar */}
      <style jsx>{`
        .no-scrollbar::-webkit-scrollbar {
          display: none;
        }
        .no-scrollbar {
          scrollbar-width: none;
        }
      `}</style>
    </section>
  );
}