import { jsxs, jsx, Fragment } from "react/jsx-runtime";
import { useMemo, useState, useEffect } from "react";
import { Link } from "@tanstack/react-router";
import { PackageCheck, Search, Gem, ArrowUpRight, SearchX, X, ZoomIn, Gamepad2, Clock3, Sparkles, Timer, ShieldAlert } from "lucide-react";
import { u as useProducts } from "./useProducts-DKx9jW9k.js";
import { u as useSiteSettings } from "./useSiteSettings-7O51JHh5.js";
const TOPUP_URL = "https://www.pergamshop.com/id-id";
const formatIDR = (n) => new Intl.NumberFormat("id-ID", {
  style: "currency",
  currency: "IDR",
  maximumFractionDigits: 0
}).format(n);
const getRotationOffset = (count) => {
  if (count <= 1) return 0;
  const msInDay = 24 * 60 * 60 * 1e3;
  const offsetMs = 17 * 60 * 60 * 1e3;
  const dayId = Math.floor((Date.now() - offsetMs) / msInDay);
  return dayId % count;
};
const rotateArray = (arr, offset) => {
  if (arr.length <= 1) return arr;
  const k = offset % arr.length;
  if (k === 0) return arr;
  return [...arr.slice(-k), ...arr.slice(0, -k)];
};
const buildWaLink = (p, waNumber) => {
  if ((p.game === "Partner Resmi Bang Pergam" || p.game === "Paid Promote Bang Pergam") && p.whatsappNumber) {
    const num = p.whatsappNumber.replace(/[^0-9]/g, "");
    const msg2 = `Halo Kak ${p.name} , Saya kenal kakak dari Web Bang Pergam`;
    return `https://wa.me/${num}?text=${encodeURIComponent(msg2)}`;
  }
  const action = p.game === "Rental" ? "menyewa" : "membeli";
  const msg = `Halo, Pergam Store! Saya berminat untuk ${action} ${p.name}. Mohon segera diproses, ya!`;
  return `https://wa.me/${waNumber}?text=${encodeURIComponent(msg)}`;
};
function Catalog({ initialGame, mode = "all" }) {
  const { products, loading } = useProducts();
  const { settings } = useSiteSettings();
  const games = useMemo(() => {
    const allGames = [
      { v: "Free Fire", label: "Free Fire" },
      { v: "Mobile Legends", label: "Mobile Legends" },
      { v: "Rental", label: "Rental" },
      { v: "JasaPost", label: "JasaPost" },
      { v: "Partner Resmi Bang Pergam", label: "Partner Resmi Bang Pergam" },
      { v: "Paid Promote Bang Pergam", label: "Paid Promote Bang Pergam" },
      { v: "Top Up", label: "Top Up" }
    ];
    if (mode === "produk") {
      return allGames.filter(
        (g) => ["Free Fire", "Mobile Legends", "Rental", "JasaPost"].includes(g.v)
      );
    }
    if (mode === "layanan") {
      return allGames.filter(
        (g) => ["Partner Resmi Bang Pergam", "Paid Promote Bang Pergam", "Top Up"].includes(g.v)
      );
    }
    return allGames;
  }, [mode]);
  const defaultGame = initialGame && initialGame !== "all" && games.some((g) => g.v === initialGame) ? initialGame : games[0].v;
  const [game, setGame] = useState(defaultGame);
  const [status, setStatus] = useState("all");
  const [sort, setSort] = useState("newest");
  const [query, setQuery] = useState("");
  const [detail, setDetail] = useState(null);
  const [zoomImage, setZoomImage] = useState(null);
  const [now, setNow] = useState(0);
  const [visibleCount, setVisibleCount] = useState(8);
  useEffect(() => {
    setVisibleCount(8);
  }, [game, status, sort, query]);
  useEffect(() => {
    if (initialGame && initialGame !== "all") setGame(initialGame);
  }, [initialGame]);
  useEffect(() => {
    setNow(Date.now());
    const id = setInterval(() => setNow(Date.now()), 3e4);
    return () => clearInterval(id);
  }, []);
  const effective = useMemo(
    () => products.map((p) => {
      if (p.status === "Not Available" && p.readyEstimateAt && new Date(p.readyEstimateAt).getTime() <= now) {
        return { ...p, status: "Ready" };
      }
      return p;
    }),
    [products, now]
  );
  const filtered = useMemo(() => {
    if (game === "Top Up") return [];
    let list = effective.filter((p) => {
      if (p.game !== game) return false;
      if (status !== "all" && p.status !== status) return false;
      if (query.trim()) {
        const q = query.toLowerCase();
        if (!p.name.toLowerCase().includes(q) && !p.game.toLowerCase().includes(q)) return false;
      }
      return true;
    });
    const isRotationCategory = game === "Partner Resmi Bang Pergam" || game === "Paid Promote Bang Pergam";
    if (isRotationCategory && sort === "newest" && !query.trim()) {
      list = [...list].sort((a, b) => a.createdAt - b.createdAt);
      const offset = getRotationOffset(list.length);
      list = rotateArray(list, offset);
    } else {
      if (sort === "price-asc") list = [...list].sort((a, b) => a.price - b.price);
      else if (sort === "price-desc") list = [...list].sort((a, b) => b.price - a.price);
      else list = [...list].sort((a, b) => b.createdAt - a.createdAt);
    }
    return list;
  }, [effective, game, status, sort, query]);
  const visibleProducts = useMemo(() => filtered.slice(0, visibleCount), [filtered, visibleCount]);
  const statuses = [
    { v: "all", label: "All Status" },
    { v: "Ready", label: "Ready Only" },
    { v: "Not Available", label: "Not Available" }
  ];
  return /* @__PURE__ */ jsxs("section", { id: "catalog", className: "section-shell", children: [
    /* @__PURE__ */ jsxs("div", { className: "section-container", children: [
      /* @__PURE__ */ jsxs("div", { className: "mb-7 flex flex-col gap-5 md:flex-row md:items-end md:justify-between", children: [
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsxs("div", { className: "section-kicker", children: [
            /* @__PURE__ */ jsx(PackageCheck, { className: "h-3.5 w-3.5" }),
            mode === "layanan" ? "Layanan" : "Produk"
          ] }),
          /* @__PURE__ */ jsx("h2", { className: "section-title", children: mode === "layanan" ? "List partner resmi bang pergam" : "Stock dan rental tersedia." }),
          /* @__PURE__ */ jsx("p", { className: "section-copy", children: mode === "layanan" ? "Daftar partner terpercaya dan layanan resmi." : "Filter, urutkan, dan cari akun yang kamu butuhkan secara realtime." })
        ] }),
        /* @__PURE__ */ jsxs("div", { className: "relative w-full md:w-80", children: [
          /* @__PURE__ */ jsx(
            "input",
            {
              type: "text",
              value: query,
              onChange: (e) => setQuery(e.target.value),
              placeholder: "Cari nama atau game...",
              className: "input rounded-2xl pl-11"
            }
          ),
          /* @__PURE__ */ jsx(Search, { className: "absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground opacity-75" })
        ] })
      ] }),
      /* @__PURE__ */ jsx("div", { className: "relative mb-4", children: /* @__PURE__ */ jsx("div", { className: "[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden -mx-4 flex gap-2 overflow-x-auto px-4 pb-2 sm:mx-0 sm:flex-wrap sm:px-0", children: games.map((g) => /* @__PURE__ */ jsx(
        "button",
        {
          onClick: () => setGame(g.v),
          className: `shrink-0 rounded-full border px-4 py-2 text-xs font-bold transition-all sm:text-sm ${game === g.v ? "border-primary bg-primary text-primary-foreground shadow-glow-sm" : "border-border bg-card/70 text-muted-foreground hover:border-primary/40 hover:text-foreground"}`,
          children: g.label
        },
        g.v
      )) }) }),
      /* @__PURE__ */ jsxs("div", { className: "mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [
        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: statuses.map((s) => /* @__PURE__ */ jsx(
          "button",
          {
            onClick: () => setStatus(s.v),
            className: `rounded-full border px-3 py-1.5 text-xs font-bold transition-all ${status === s.v ? "border-primary/50 bg-primary/10 text-primary" : "border-border bg-card/40 text-muted-foreground hover:border-primary/40"}`,
            children: s.label
          },
          s.v
        )) }),
        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-2xl border border-border bg-card/60 p-1.5", children: [
          /* @__PURE__ */ jsx("label", { className: "pl-2 text-xs font-bold text-muted-foreground", children: "Sort" }),
          /* @__PURE__ */ jsxs(
            "select",
            {
              value: sort,
              onChange: (e) => setSort(e.target.value),
              className: "rounded-xl border border-border bg-background/70 px-3 py-2 text-xs font-semibold outline-none focus:border-primary",
              children: [
                /* @__PURE__ */ jsx("option", { value: "newest", children: "Newest" }),
                /* @__PURE__ */ jsx("option", { value: "price-asc", children: "Price: Low to High" }),
                /* @__PURE__ */ jsx("option", { value: "price-desc", children: "Price: High to Low" })
              ]
            }
          )
        ] })
      ] }),
      game === "Top Up" ? /* @__PURE__ */ jsxs("div", { className: "card-surface relative overflow-hidden rounded-[2rem] p-8 text-center md:p-14", children: [
        /* @__PURE__ */ jsx("div", { className: "absolute -top-32 left-1/2 h-[420px] w-[420px] -translate-x-1/2 rounded-full bg-primary/20 blur-[120px]" }),
        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
          /* @__PURE__ */ jsx("div", { className: "group mx-auto mb-5 grid h-16 w-16 place-items-center rounded-[1.5rem] bg-primary text-primary-foreground shadow-glow-sm", children: /* @__PURE__ */ jsx(Gem, { className: "h-8 w-8 transition-transform group-hover:-translate-y-1 group-hover:scale-105" }) }),
          /* @__PURE__ */ jsxs("h3", { className: "font-display text-2xl font-bold md:text-4xl", children: [
            "Top Up Games ",
            /* @__PURE__ */ jsx("span", { className: "gradient-text", children: "Cepat & Aman" })
          ] }),
          /* @__PURE__ */ jsx("p", { className: "mt-4 text-muted-foreground max-w-xl mx-auto leading-relaxed", children: "Layanan top up tersedia langsung di website khusus kami. Diamond, UC, dan berbagai voucher game dengan transaksi yang dijamin aman." }),
          /* @__PURE__ */ jsxs(
            "a",
            {
              href: TOPUP_URL,
              target: "_blank",
              rel: "noopener noreferrer",
              className: "btn-primary mt-8 px-8 py-3 text-base",
              children: [
                "Kunjungi Website Top Up",
                /* @__PURE__ */ jsx(ArrowUpRight, { className: "h-5 w-5 transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5" })
              ]
            }
          )
        ] })
      ] }) : loading ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3 md:gap-4 lg:grid-cols-4", children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "card-surface animate-pulse rounded-3xl p-2.5 sm:p-3", children: [
        /* @__PURE__ */ jsx("div", { className: "mb-3 aspect-[3/4] rounded-2xl bg-muted" }),
        /* @__PURE__ */ jsx("div", { className: "mb-2 h-3 w-1/3 rounded bg-muted" }),
        /* @__PURE__ */ jsx("div", { className: "h-4 w-2/3 rounded bg-muted" })
      ] }, i)) }) : filtered.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "card-surface rounded-[2rem] p-10 text-center", children: [
        /* @__PURE__ */ jsx(SearchX, { className: "mx-auto mb-4 h-10 w-10 text-primary/70", strokeWidth: 1.7 }),
        /* @__PURE__ */ jsx("h3", { className: "font-display font-semibold text-xl", children: "Belum ada produk" }),
        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-2 text-sm", children: "Stock untuk kategori ini sedang kosong. Silakan cek kategori lain." })
      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3 md:gap-4 lg:grid-cols-4", children: visibleProducts.map((p, i) => /* @__PURE__ */ jsx(
          ProductCard,
          {
            product: p,
            index: i,
            waNumber: settings.whatsappNumber,
            now,
            onDetail: () => setDetail(p),
            onZoom: (src) => setZoomImage({ src, name: p.name })
          },
          p.id
        )) }),
        filtered.length > visibleCount && /* @__PURE__ */ jsx("div", { className: "mt-8 flex justify-center", children: /* @__PURE__ */ jsx(
          "button",
          {
            type: "button",
            onClick: () => setVisibleCount((prev) => prev + 8),
            className: "btn-secondary px-8",
            children: "Tampilkan Lebih Banyak"
          }
        ) })
      ] })
    ] }),
    detail && /* @__PURE__ */ jsx(
      DetailModal,
      {
        product: detail,
        waNumber: settings.whatsappNumber,
        onClose: () => setDetail(null),
        onZoom: (src) => setZoomImage({ src, name: detail.name })
      }
    ),
    zoomImage && /* @__PURE__ */ jsxs(
      "div",
      {
        className: "fixed inset-0 z-[70] grid place-items-center bg-background/86 p-4 backdrop-blur-xl animate-fade-up",
        onClick: () => setZoomImage(null),
        children: [
          /* @__PURE__ */ jsx(
            "button",
            {
              onClick: () => setZoomImage(null),
              className: "group absolute right-4 top-4 z-10 grid h-11 w-11 place-items-center rounded-full border border-border bg-card shadow-card transition hover:bg-primary/15",
              "aria-label": "Close",
              children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5 opacity-80 transition-transform group-hover:rotate-90" })
            }
          ),
          /* @__PURE__ */ jsx(
            "div",
            {
              className: "max-h-[90vh] max-w-4xl overflow-auto rounded-3xl shadow-card",
              onClick: (e) => e.stopPropagation(),
              children: /* @__PURE__ */ jsx("img", { src: zoomImage.src, alt: zoomImage.name, className: "w-full h-auto block" })
            }
          )
        ]
      }
    )
  ] });
}
function StatusBadge({ status, readyLabel = "Ready" }) {
  if (status === "Ready") {
    return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-semibold bg-primary/20 text-primary-glow border border-primary/40 glow-purple-sm", children: [
      /* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-primary-glow animate-pulse" }),
      readyLabel
    ] });
  }
  return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-medium bg-muted text-muted-foreground border border-border", children: [
    /* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-muted-foreground" }),
    "N/A"
  ] });
}
function ProductCard({
  product,
  index,
  waNumber,
  now,
  onDetail,
  onZoom
}) {
  const isReady = product.status === "Ready";
  const hasPackages = !!product.rentalPackages?.length;
  const isPartnerLike = product.game === "Partner Resmi Bang Pergam" || product.game === "Paid Promote Bang Pergam";
  const displayPrice = product.price > 0 ? formatIDR(product.price) : hasPackages ? `Mulai ${formatIDR(product.rentalPackages[0].price)}` : "Hubungi";
  const showEstimate = now > 0 && !isReady && product.game === "Rental" && !!product.readyEstimateAt && new Date(product.readyEstimateAt).getTime() > now;
  const estimateLabel = showEstimate ? (() => {
    const d = new Date(product.readyEstimateAt);
    const parts = new Intl.DateTimeFormat("id-ID", {
      day: "numeric",
      month: "short",
      hour: "2-digit",
      minute: "2-digit",
      hour12: false,
      timeZone: "Asia/Jakarta"
    }).formatToParts(d);
    const get = (t) => parts.find((p) => p.type === t)?.value ?? "";
    const month = get("month").replace(".", "");
    return `${get("day")} ${month}, ${get("hour")}:${get("minute")}`;
  })() : null;
  return /* @__PURE__ */ jsxs(
    "article",
    {
      className: "card-surface hover-lift flex animate-fade-up flex-col rounded-3xl p-2.5 sm:p-3",
      style: { animationDelay: `${index * 50}ms` },
      children: [
        product.image ? /* @__PURE__ */ jsxs("div", { className: "relative mb-2.5 aspect-[3/4] w-full overflow-hidden rounded-2xl bg-muted", children: [
          /* @__PURE__ */ jsx(
            "img",
            {
              src: product.image,
              alt: product.name,
              className: "absolute inset-0 w-full h-full object-cover",
              loading: "lazy"
            }
          ),
          /* @__PURE__ */ jsx(
            "button",
            {
              onClick: () => onZoom(product.image),
              "aria-label": "Zoom image",
              className: "group absolute bottom-2 right-2 grid h-8 w-8 place-items-center rounded-full border border-primary/30 bg-background/82 text-foreground shadow-sm backdrop-blur-md transition hover:bg-primary hover:text-primary-foreground",
              children: /* @__PURE__ */ jsx(ZoomIn, { className: "h-3.5 w-3.5 transition-transform group-hover:scale-110" })
            }
          )
        ] }) : /* @__PURE__ */ jsx("div", { className: "relative mb-2.5 grid aspect-[3/4] w-full place-items-center rounded-2xl bg-muted text-muted-foreground", children: /* @__PURE__ */ jsx(Gamepad2, { className: "h-8 w-8 opacity-60", strokeWidth: 1.7 }) }),
        /* @__PURE__ */ jsxs("div", { className: "mb-1.5 flex items-start justify-between gap-1.5", children: [
          /* @__PURE__ */ jsx("span", { className: "truncate rounded-full border border-primary/20 bg-primary/10 px-2 py-0.5 text-[9px] font-bold text-primary", children: product.game }),
          /* @__PURE__ */ jsx(StatusBadge, { status: product.status, readyLabel: isPartnerLike ? "Online" : "Ready" })
        ] }),
        /* @__PURE__ */ jsx("h3", { className: "line-clamp-1 font-display text-sm font-bold leading-snug text-foreground md:text-base", children: product.name }),
        /* @__PURE__ */ jsx("p", { className: "mt-1 line-clamp-2 flex-1 text-[11px] leading-5 text-muted-foreground sm:text-xs", children: product.description }),
        showEstimate && /* @__PURE__ */ jsxs("div", { className: "mt-2 flex max-w-full items-center gap-1 self-start rounded-xl border border-amber-400/30 bg-amber-400/10 px-2 py-1 text-[10px] leading-tight text-amber-600 dark:text-amber-300", children: [
          /* @__PURE__ */ jsx(Clock3, { className: "h-3 w-3 shrink-0 opacity-80" }),
          /* @__PURE__ */ jsxs("span", { className: "whitespace-normal break-words", children: [
            "Estimasi Ready: ",
            estimateLabel,
            " WIB"
          ] })
        ] }),
        !isPartnerLike && /* @__PURE__ */ jsxs("div", { className: "mt-2.5", children: [
          /* @__PURE__ */ jsx("div", { className: "text-[9px] font-bold uppercase tracking-[0.12em] text-muted-foreground", children: "Harga" }),
          /* @__PURE__ */ jsx("div", { className: "font-display text-sm font-bold leading-tight text-primary md:text-base", children: displayPrice })
        ] }),
        /* @__PURE__ */ jsxs("div", { className: "mt-3 grid grid-cols-2 gap-1.5", children: [
          /* @__PURE__ */ jsx(
            "a",
            {
              href: isReady ? buildWaLink(product, waNumber) : void 0,
              target: "_blank",
              rel: "noopener noreferrer",
              "aria-disabled": !isReady,
              className: `rounded-full py-2 text-center text-xs font-bold transition-all ${isReady ? "bg-primary text-primary-foreground shadow-glow-sm" : "bg-muted text-muted-foreground cursor-not-allowed pointer-events-none"}`,
              children: isPartnerLike ? "Hubungi" : product.game === "Rental" ? "Sewa" : "Beli"
            }
          ),
          /* @__PURE__ */ jsx(
            "button",
            {
              onClick: onDetail,
              className: "rounded-full border border-border bg-background/40 py-2 text-xs font-bold text-foreground transition-all hover:border-primary/40 hover:bg-primary/10",
              children: "Detail"
            }
          )
        ] }),
        isPartnerLike && product.whatsappChannelUrl && /* @__PURE__ */ jsx(
          "a",
          {
            href: product.whatsappChannelUrl,
            target: "_blank",
            rel: "noopener noreferrer",
            className: "mt-1.5 block text-center text-xs font-semibold py-2 rounded-full border border-primary/40 text-foreground hover:bg-primary/10 hover:border-primary transition-all",
            children: "Saluran WA"
          }
        )
      ]
    }
  );
}
function DetailModal({
  product,
  waNumber,
  onClose,
  onZoom
}) {
  const hasPackages = !!product.rentalPackages?.length;
  const isPartnerLike = product.game === "Partner Resmi Bang Pergam" || product.game === "Paid Promote Bang Pergam";
  const allImages = [...product.image ? [product.image] : [], ...product.gallery ?? []];
  return /* @__PURE__ */ jsx(
    "div",
    {
      className: "fixed inset-0 z-[60] grid place-items-center overflow-y-auto bg-background/82 p-4 backdrop-blur-xl animate-fade-up",
      onClick: onClose,
      children: /* @__PURE__ */ jsxs(
        "div",
        {
          className: "card-surface relative my-8 w-full max-w-md rounded-[2rem] p-5 shadow-card sm:p-7",
          onClick: (e) => e.stopPropagation(),
          children: [
            /* @__PURE__ */ jsx(
              "button",
              {
                onClick: onClose,
                className: "group absolute right-4 top-4 grid h-9 w-9 place-items-center rounded-full bg-muted transition hover:bg-primary/15",
                "aria-label": "Close",
                children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4 opacity-80 transition-transform group-hover:rotate-90" })
              }
            ),
            /* @__PURE__ */ jsx("span", { className: "rounded-full border border-primary/20 bg-primary/10 px-2.5 py-1 text-xs font-bold text-primary", children: product.game }),
            /* @__PURE__ */ jsx("h3", { className: "mt-4 font-display text-2xl font-bold", children: product.name }),
            /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm leading-relaxed text-muted-foreground", children: product.description }),
            allImages.length > 1 && /* @__PURE__ */ jsx("div", { className: "mt-4 grid grid-cols-4 gap-2", children: allImages.slice(0, 8).map((src, i) => /* @__PURE__ */ jsx(
              "button",
              {
                onClick: () => onZoom(src),
                className: "aspect-square overflow-hidden rounded-2xl border border-border transition hover:border-primary",
                children: /* @__PURE__ */ jsx("img", { src, alt: "", className: "w-full h-full object-cover" })
              },
              i
            )) }),
            hasPackages ? /* @__PURE__ */ jsxs("div", { className: "mt-6", children: [
              /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center gap-2", children: [
                /* @__PURE__ */ jsx(Sparkles, { className: "h-4 w-4 text-primary/75", strokeWidth: 1.8 }),
                /* @__PURE__ */ jsx("h4", { className: "font-display font-bold text-lg gradient-text", children: "Paket Hemat" }),
                /* @__PURE__ */ jsx(PackageCheck, { className: "h-4 w-4 text-primary/75", strokeWidth: 1.8 })
              ] }),
              /* @__PURE__ */ jsx("div", { className: "space-y-2.5", children: product.rentalPackages.map((pkg) => /* @__PURE__ */ jsxs(
                "div",
                {
                  className: "flex items-center justify-between rounded-2xl border border-primary/20 bg-primary/8 px-4 py-3 transition-all hover:border-primary/50 hover:bg-primary/12",
                  children: [
                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
                      /* @__PURE__ */ jsx("div", { className: "grid h-9 w-9 place-items-center rounded-full bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(Timer, { className: "h-4 w-4 opacity-80" }) }),
                      /* @__PURE__ */ jsx("span", { className: "font-display font-semibold", children: pkg.duration })
                    ] }),
                    /* @__PURE__ */ jsx("span", { className: "font-display font-bold text-primary-glow", children: formatIDR(pkg.price) })
                  ]
                },
                pkg.duration
              )) }),
              /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground mt-3 text-center", children: "Hubungi admin untuk pilih paket sesuai kebutuhanmu." })
            ] }) : isPartnerLike ? null : /* @__PURE__ */ jsxs("div", { className: "mt-6 flex items-center justify-between", children: [
              /* @__PURE__ */ jsxs("div", { children: [
                /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: "Harga" }),
                /* @__PURE__ */ jsx("div", { className: "font-display text-2xl font-bold gradient-text", children: product.price > 0 ? formatIDR(product.price) : "Hubungi Admin" })
              ] }),
              /* @__PURE__ */ jsx(StatusBadge, { status: product.status, readyLabel: isPartnerLike ? "Online" : "Ready" })
            ] }),
            /* @__PURE__ */ jsx(
              "a",
              {
                href: buildWaLink(product, waNumber),
                target: "_blank",
                rel: "noopener noreferrer",
                className: `mt-6 block w-full rounded-full py-3 text-center font-bold transition-all ${product.status === "Ready" ? "bg-primary text-primary-foreground shadow-glow-sm" : "bg-muted text-muted-foreground cursor-not-allowed pointer-events-none"}`,
                children: isPartnerLike ? "Hubungi Sekarang" : product.game === "Rental" ? "Sewa Sekarang" : "Beli Sekarang"
              }
            ),
            /* @__PURE__ */ jsxs(
              Link,
              {
                to: "/lapor",
                className: "mt-3 flex w-full items-center justify-center gap-2 rounded-full border border-destructive/30 bg-destructive/10 py-3 text-center font-bold text-destructive transition-all hover:border-destructive/60 hover:bg-destructive/15",
                children: [
                  /* @__PURE__ */ jsx(ShieldAlert, { className: "h-4 w-4" }),
                  "Laporkan Produk"
                ]
              }
            ),
            isPartnerLike && product.whatsappChannelUrl && /* @__PURE__ */ jsx(
              "a",
              {
                href: product.whatsappChannelUrl,
                target: "_blank",
                rel: "noopener noreferrer",
                className: "mt-3 block w-full rounded-full border border-primary/30 py-3 text-center font-bold text-foreground transition-all hover:border-primary hover:bg-primary/10",
                children: "Gabung Saluran WhatsApp"
              }
            )
          ]
        }
      )
    }
  );
}
export {
  Catalog as C
};
