"use client";

import { useState, useMemo } from "react";
import Image from "next/image";
import Link from "next/link";
import Header from "@/app/_components/Header";
import Footer from "@/app/_components/Footer";

/* ================= DATA ================= */

export const PRODUCTS = [
  {
    title: "1 Dinar Masjidil Haram",
    slug: "produk/1-dinar-masjidil-haram",
    cat: "Dinar",
    img: "/images/haram.png",
  },
  {
    title: "2 Dinar Multazam",
    slug: "produk/2-dinar-multazam",
    cat: "Dinar",
    img: "/images/meltazam.png",
  },
  {
    title: "3 Dinar Labbaik",
    slug: "produk/3-dinar-labbaik",
    cat: "Dinar",
    img: "/images/Labbaik.png",
  },
  {
    title: "4 Dinar Asmaul Husna",
    slug: "produk/4-dinar-asmaul-husna",
    cat: "Dinar",
    img: "/images/AsmaulHusna.png",
  },
  {
    title: "5 Dinar Ayat Kursi",
    slug: "produk/5-dinar-ayat-kursi",
    cat: "Dinar",
    img: "/images/Ayat Kursi.png",
  },
  {
    title: "7 Dinar Pintu Makam Nabi SAW",
    slug: "produk/7-dinar-pintu-makam-nabi",
    cat: "Dinar",
    img: "/images/makam.png",
  },
  {
    title: "10 Dinar Pintu Kabah",
    slug: "produk/10-dinar-pintu-kabah",
    cat: "Dinar",
    img: "/images/Pintu-Kabah.png",
  },
  {
    title: "¼ Dinar Masjidil Aqsha",
    slug: "produk/1-4-dinar-masjid-al-aqsha",
    cat: "Dinar",
    img: "/images/aqsha.png",
  },
  {
    title: "¼ Dinar Aya Sofia",
    slug: "produk/1-4-dinar-aya-sofia",
    cat: "Dinar",
    img: "/images/Aya-Sofia.png",
  },
    {
    title: "Paket Dinar Exclusive",
    slug: "produk/paket-dinar-exclusive",
    cat: "Dinar",
    img: "/images/paket-eklusif.png",
  },

  /* ===== GOLD ===== */

  {
    title: "MR Gold 0.5 gr",
    slug: "produk/mr-gold-01",
    cat: "Gold",
    img: "/images/0,5.png",
  },
  {
    title: "MR Gold 0.2 gr",
    slug: "produk/mr-gold-02",
    cat: "Gold",
    img: "/images/0,2.png",
  },
  {
    title: "MR Gold 0.1 gr",
    slug: "produk/mr-gold-01",
    cat: "Gold",
    img: "/images/0,1.png",
  },
  {
    title: "MR Gold 0.05 gr",
    slug: "produk/mr-gold-0,05-gr",
    cat: "Gold",
    img: "/images/0,05.png",
  },
  {
    title: "MR Gold 0.25 gr",
    slug: "produk/mr-gold-0,25-gr",
    cat: "Gold",
    img: "/images/0,025.png",
  },
    {
    title: "Box Dinar Besar",
    slug: "produk/box-dinar-besar",
    cat: "Box",
    img: "/images/box-dinar-besar.png",
  },

 
  {
    title: "Box Dinar Kecil",
    slug: "produk/box-dinar-kecil",
    cat: "Box",
    img: "/images/box-dinar-kecil.png",
  },
 
  /* ===== PERHIASAN GOLD ===== */

  {
    title: "Kalung 3 gr",
    slug: "produk/kalung-liontin-3-gr",
    cat: "Kalung",
    img: "/images/rm-liontin-3-gr.png",
  },
  {
    title: "Kalung 6 gr",
    slug: "produk/kalung-liontin-6-gr",
    cat: "Kalung",
    img: "/images/kalung-liontin-6-gr.png",
  },
  {
    title: "Liontin Aisyah",
    slug: "produk/liontin-aisyah",
    cat: "Kalung",
    img: "/images/aisyah.png",
  },
  {
    title: "Liontin Aminah",
    slug: "produk/liontin-aminah",
    cat: "Kalung",
    img: "/images/aminah-r.png",
  },
  {
    title: "Liontin Fatimah",
    slug: "produk/liontin-fatimah",
    cat: "GoKalungld",
    img: "/images/fatimah.png",
  },
  {
    title: "Liontin Khadijah",
    slug: "produk/liontin-khadijah",
    cat: "Kalung",
    img: "/images/khadijah.png",
  },

  /* ===== PAKET ===== */



]
export default function ProdukDinar() {
  const [search, setSearch] = useState("");
  const [cat, setCat] = useState("All");
  const [page, setPage] = useState(1);

  const perPage = 8;

  const filtered = useMemo(() => {
    return PRODUCTS.filter(
      p =>
        p.title.toLowerCase().includes(search.toLowerCase()) &&
        (cat === "All" || p.cat === cat)
    );
  }, [search, cat]);

  const totalPage = Math.ceil(filtered.length / perPage);
  const visible = filtered.slice((page - 1) * perPage, page * perPage);

  return (
    <div className="bg-[#f6f8fb] min-h-screen">
      <Header />

      {/* HERO */}
      <div
        className="pt-32 pb-20 bg-center bg-cover"
        style={{ backgroundImage: "url('/images/bg-produk.png')" }}
      >
        <div className="text-center">
          <h1 className="text-4xl font-bold text-[#1e3a5f]">
            Produk Katalog
          </h1>
        </div>
      </div>

      <div className="max-w-7xl mx-auto px-4 py-14 grid md:grid-cols-[260px_1fr] gap-8">

        {/* SIDEBAR */}
        <div className="space-y-6">

          <div className="bg-[#1e3a5f] rounded-xl p-4">
            <p className="text-white font-semibold mb-3">Cari Produk</p>
            <input
              className="w-full p-2 rounded text-white"
               placeholder="Cari produk..."
              value={search}
              onChange={e => {
                setSearch(e.target.value);
                setPage(1);
              }}
            />
          </div>

          <div className="bg-[#e9eff6] rounded-xl p-4">
            <p className="font-semibold text-[#1e3a5f] mb-3">
              Filter Produk
            </p>

            {["All", "Dinar", "Kalung", "Gold", "Box"].map(x => (
              <label key={x} className="flex items-center gap-2 mb-2 text-sm">
                <input
                  type="radio"
                  checked={cat === x}
                  onChange={() => {
                    setCat(x);
                    setPage(1);
                  }}
                />
                {x}
              </label>
            ))}
          </div>

        </div>

        {/* MAIN */}
        <div>

          {/* BANNER */}
          <div className="rounded-xl mb-8 p-6 text-white font-semibold text-lg"
            style={{
              background:
                "linear-gradient(90deg,#1e3a5f,#d4af37)",
            }}
          >
            Dapatkan segera produk terbaru kami!
          </div>

          <p className="text-sm mb-5 text-[#1e3a5f]">
            Menampilkan {(page - 1) * perPage + 1}–
            {Math.min(page * perPage, filtered.length)} dari {filtered.length} hasil
          </p>

          {/* GRID */}
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">

            {visible.map((p, i) => (
              <div
                key={i}
                className="bg-white rounded-xl shadow hover:-translate-y-1 transition overflow-hidden"
              >
                <div className="relative h-56">
                  <Image
                    src={p.img}
                    alt={p.title}
                    fill
                    className="object-contain p-3"
                  />
                </div>

                <div className="p-4 text-center">
                  <p className="font-semibold text-sm text-[#1e3a5f]">
                    {p.title}
                  </p>

                  <Link
                    href={`/${p.slug}`}
                    className="block mt-4 bg-[#1e3a5f] text-white py-2 rounded text-xs hover:bg-[#d4af37] hover:text-black transition"
                  >
                    Order Yuk
                  </Link>
                </div>
              </div>
            ))}

          </div>

          {/* PAGINATION */}
          <div className="flex justify-center gap-3 mt-12">
            {[...Array(totalPage)].map((_, i) => (
              <button
                key={i}
                onClick={() => setPage(i + 1)}
                className={`w-9 h-9 rounded ${
                  page === i + 1
                    ? "bg-[#d4af37]"
                    : "border border-[#1e3a5f]"
                }`}
              >
                {i + 1}
              </button>
            ))}
          </div>

        </div>

      </div>

      <Footer />
    </div>
  );
}