// ========================================
// PRISM SALES — Catalog page (FLIP-sort cinema)
// ========================================

function CatalogPage({ setRoute, setSelectedProduct }) {
  const [activeCat, setActiveCat] = React.useState("all");
  const [search, setSearch]       = React.useState("");
  const [sort, setSort]           = React.useState("featured");
  const [dir, setDir]             = React.useState("asc");
  const [view, setView]           = React.useState("card");
  const [sorting, setSorting]     = React.useState(false);


  const filtered = React.useMemo(() => {
    let r = window.PRODUCTS;
    if (activeCat !== "all") r = r.filter((p) => p.cat === activeCat);
    if (search) {
      const s = search.toLowerCase();
      r = r.filter((p) =>
        p.name.toLowerCase().includes(s) ||
        p.sku.toLowerCase().includes(s) ||
        p.tags.some((t) => t.toLowerCase().includes(s))
      );
    }
    r = [...r];
    const cmp = (a, b) => {
      if (sort === "az")    return a.name.localeCompare(b.name);
      if (sort === "sku")   return a.sku.localeCompare(b.sku);
      if (sort === "cat")   return a.cat.localeCompare(b.cat) || a.sku.localeCompare(b.sku);
      return 0;
    };
    r.sort((a, b) => (dir === "asc" ? cmp(a, b) : -cmp(a, b)));
    return r;
  }, [activeCat, search, sort, dir]);

  // FLIP animation
  const containerRef = React.useRef(null);
  const prevRectsRef = React.useRef(new Map());
  const prevKey = `${activeCat}|${search}|${sort}|${dir}|${view}`;
  const lastKeyRef = React.useRef(prevKey);

  React.useLayoutEffect(() => {
    const ctr = containerRef.current;
    if (!ctr) return;
    const rects = new Map();
    ctr.querySelectorAll("[data-flip-id]").forEach((el) => {
      rects.set(el.getAttribute("data-flip-id"), el.getBoundingClientRect());
    });
    prevRectsRef.current = rects;
  });

  React.useEffect(() => {
    const ctr = containerRef.current;
    if (!ctr) return;
    if (lastKeyRef.current === prevKey) return;
    lastKeyRef.current = prevKey;
    setSorting(true);

    const els = ctr.querySelectorAll("[data-flip-id]");
    const newRects = new Map();
    els.forEach((el) => newRects.set(el.getAttribute("data-flip-id"), el.getBoundingClientRect()));

    let pending = 0;
    els.forEach((el, i) => {
      const id = el.getAttribute("data-flip-id");
      const before = prevRectsRef.current.get(id);
      const after  = newRects.get(id);
      if (!before || !after) {
        el.animate(
          [{ opacity: 0, transform: "translateY(18px) scale(0.96)" },
           { opacity: 1, transform: "translateY(0) scale(1)" }],
          { duration: 380, delay: 60 + i * 12, easing: "cubic-bezier(0.2, 0.8, 0.2, 1)", fill: "both" }
        );
        return;
      }
      const dx = before.left - after.left;
      const dy = before.top  - after.top;
      if (dx === 0 && dy === 0) return;
      pending++;
      const anim = el.animate(
        [{ transform: `translate(${dx}px,${dy}px)`, filter: "brightness(1.1)" },
         { transform: `translate(${dx*0.3}px,${dy*0.3}px)`, offset: 0.6 },
         { transform: "translate(0,0)", filter: "brightness(1)" }],
        { duration: 600 + Math.min(200, Math.abs(dy) * 0.4), delay: i * 8,
          easing: "cubic-bezier(0.34, 1.2, 0.64, 1)", fill: "both" }
      );
      anim.onfinish = () => { pending--; if (pending <= 0) setSorting(false); };
    });
    if (pending === 0) setTimeout(() => setSorting(false), 380);
  }, [prevKey]);

  const setSortKey = (k) => {
    if (sort === k) setDir(dir === "asc" ? "desc" : "asc");
    else { setSort(k); setDir("asc"); }
  };

  return (
    <div className="page">
      <style>{`
        @keyframes catShimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
        .cat-row:hover { background: color-mix(in oklch, var(--ink) 4%, transparent); }
        .cat-row:hover .cat-arrow { transform: translateX(6px); color: var(--accent); }
        .cat-card { transition: box-shadow 0.3s, transform 0.3s; }
        .cat-card:hover { box-shadow: 0 16px 48px color-mix(in oklch, var(--ink) 14%, transparent); transform: translateY(-3px); }
        .cat-card:hover .cat-card-img { transform: scale(1.04); }
        .cat-card:hover .cat-card-overlay { opacity: 1 !important; }
        .cat-card-img { transition: transform 0.5s cubic-bezier(0.2,0.8,0.2,1); }
        .cat-card-overlay { transition: opacity 0.3s; }
      `}</style>

      {/* ── HEADER ── */}
      <section style={{
        background: "var(--bg)",
        borderBottom: "1.5px solid var(--ink)",
        paddingTop: 24,
      }}>
        <div className="container">
          {/* Compact doc strip */}
          <div className="cat-doc-strip" style={{
            display: "flex", justifyContent: "space-between", alignItems: "center",
            fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: "0.16em",
            color: "var(--ink-dim)", paddingBottom: 14,
            borderBottom: "1px solid var(--border)",
          }}>
            <span>DOC · PRS-CATALOG-04</span>
            <span className="bc-mid">{filtered.length} OF {window.PRODUCTS.length} SKUs · 8 LINES</span>
            <span style={{ color: sorting ? "var(--accent)" : "var(--ink-dim)" }}>
              {sorting ? "● SORTING…" : "● INDEX STABLE"}
            </span>
            <span>REV. 2026.04</span>
          </div>

          {/* Hero row — compact horizontal */}
          <div style={{
            display: "grid", gridTemplateColumns: "1fr auto",
            gap: 40, padding: "28px 0 24px", alignItems: "end",
          }}>
            <h1 style={{
              fontFamily: "var(--f-display-black)",
              fontSize: "clamp(48px, 7vw, 96px)",
              lineHeight: 0.88, letterSpacing: "-0.04em",
              margin: 0, fontWeight: 900, color: "var(--ink)", textTransform: "uppercase",
            }}>
              Every{" "}
              <span style={{ background: "var(--accent)", color: "var(--bg)", padding: "0 12px" }}>SKU</span>
              {" "}on the shelf.
            </h1>
            <div style={{ textAlign: "right", paddingBottom: 4 }}>
              <div className="mono" style={{ color: "var(--ink-dim)", fontSize: 10, marginBottom: 6 }}>
                OGNAJ · AHMEDABAD
              </div>
              <div className="mono" style={{ color: "var(--ink)", fontSize: 11 }}>
                Same-day dispatch · 94%
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ── FILTER STRIP — sticky ── */}
      <section style={{
        position: "sticky", top: 0, zIndex: 30,
        background: "var(--bg)", borderBottom: "1.5px solid var(--ink)",
      }}>
        <div className="container" style={{ paddingTop: 12, paddingBottom: 12, position: "relative" }}>
          {/* Category chips */}
          <div style={{ display: "flex", flexWrap: "wrap", gap: 5, marginBottom: 10 }}>
            <CatChip label={`ALL · ${window.PRODUCTS.length}`} active={activeCat === "all"} onClick={() => setActiveCat("all")} />
            {window.CATEGORIES.map((c) => (
              <CatChip key={c.id} label={`${c.name} · ${c.count}`} active={activeCat === c.id} onClick={() => setActiveCat(c.id)} />
            ))}
          </div>

          {/* Controls row */}
          <div style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 8, alignItems: "stretch" }}>
            {/* Search */}
            <div style={{ position: "relative", border: "1.5px solid var(--ink)" }}>
              <span className="mono" style={{
                position: "absolute", left: 12, top: "50%", transform: "translateY(-50%)",
                color: "var(--ink-soft)", fontSize: 11, pointerEvents: "none",
              }}>⌕</span>
              <input style={{
                width: "100%", height: "100%",
                padding: "11px 11px 11px 30px",
                background: "transparent", border: "none", outline: "none",
                fontFamily: "var(--f-mono)", fontSize: 12, color: "var(--ink)",
              }}
                placeholder="Search SKU, product, tag…"
                value={search}
                onChange={(e) => setSearch(e.target.value)}
              />
              {search && (
                <button aria-label="Clear search" onClick={() => setSearch("")} className="mono" style={{
                  position: "absolute", right: 8, top: "50%", transform: "translateY(-50%)",
                  background: "var(--ink)", color: "var(--bg)", border: "none",
                  padding: "3px 8px", fontSize: 9, cursor: "pointer",
                }}>✕</button>
              )}
            </div>

            {/* View toggle */}
            <div style={{ display: "flex", border: "1.5px solid var(--ink)" }}>
              {[["card","▦ CARD"],["dense","▤ TABLE"],["spec","⊟ SPEC"]].map(([k, lbl], i, arr) => (
                <button key={k} onClick={() => setView(k)} className="mono" style={{
                  padding: "0 14px", fontSize: 10, letterSpacing: "0.1em",
                  background: view === k ? "var(--ink)" : "transparent",
                  color: view === k ? "var(--bg)" : "var(--ink)",
                  border: "none", borderRight: i < arr.length - 1 ? "1px solid var(--ink)" : "none",
                  cursor: "pointer", whiteSpace: "nowrap",
                }}>{lbl}</button>
              ))}
            </div>
          </div>

          {/* Sort shimmer */}
          <div style={{
            position: "absolute", left: 0, right: 0, bottom: -1,
            height: 2, overflow: "hidden",
            opacity: sorting ? 1 : 0, transition: "opacity 200ms",
          }}>
            <div style={{
              position: "absolute", inset: 0,
              background: "linear-gradient(90deg, transparent, var(--accent), transparent)",
              animation: "catShimmer 900ms linear infinite",
            }} />
          </div>
        </div>
      </section>

      {/* ── RESULTS ── */}
      <section className="container" style={{ paddingTop: 28, paddingBottom: 120 }}>
        <div className="mono" style={{
          fontSize: 10, letterSpacing: "0.18em", color: "var(--ink-dim)",
          marginBottom: 20, display: "flex", justifyContent: "space-between",
        }}>
          <span>
            SORTED BY{" "}
            <span style={{ color: "var(--ink)" }}>
              {{ featured:"FEATURED", az:"NAME A–Z", sku:"SKU CODE", cat:"PRODUCT LINE" }[sort]}
            </span>
            {" · "}<span style={{ color: "var(--accent)" }}>{dir === "asc" ? "↑ ASC" : "↓ DESC"}</span>
          </span>
          <span>
            {filtered.length} RESULTS
            {activeCat !== "all" ? ` · ${activeCat.toUpperCase()}` : ""}
            {search ? ` · "${search.toUpperCase()}"` : ""}
          </span>
        </div>

        {filtered.length === 0 ? (
          <EmptyState onClear={() => { setActiveCat("all"); setSearch(""); }} />
        ) : (
          <div ref={containerRef}>
            {view === "card"  && <CardGrid  items={filtered} onPick={(p) => { setSelectedProduct(p); setRoute("product"); }} />}
            {view === "dense" && <DenseTable items={filtered} sort={sort} dir={dir} onPick={(p) => { setSelectedProduct(p); setRoute("product"); }} />}
            {view === "spec"  && <SpecRows  items={filtered} onPick={(p) => { setSelectedProduct(p); setRoute("product"); }} sort={sort} />}
          </div>
        )}
      </section>

      {/* ── PRICE LISTS ── */}
      <section className="container" style={{ paddingBottom: 120 }}>
        <div style={{
          borderTop: "1px solid var(--border)",
          paddingTop: 60
        }}>
          <div className="sec-head">
            <div className="sec-num">§ PRICE LISTS</div>
            <div className="sec-title">Download <span style={{ fontStyle: "italic" }}>latest rates</span>.</div>
            <div style={{ color: "var(--ink-dim)", fontSize: 13, maxWidth: 320 }}>
              Updated April 2026. Contact us if you need a custom BOQ.
            </div>
          </div>
          <div className="cat-price-grid" style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 1, background: "var(--border)" }}>
            {[
              { brand: "RR KABEL", label: "Wires & Cables", file: "assets/Pricing List/RR Kabel Pricelist_RRKLLPLDCPIIC4-126.pdf", updated: "Apr 2026", type: "PDF" },
              { brand: "LDC - Polycab", label: "Price List", file: "assets/Pricing List/LDC LP No_ 02 Dtd 29th April 2026.pdf", updated: "Apr 2026", type: "PDF" },
              { brand: "PCC - Polycab", label: "Price List", file: "assets/Pricing List/PCC LP No_ 02 Dtd 29th April 2026.pdf", updated: "Apr 2026", type: "PDF" },
              { brand: "AU POLY PLAST", label: "Conduit Systems & Fittings", file: "assets/Pricing List/AU Poly plastic .jpeg", updated: "2026", type: "IMG" },
            ].map((p) => (
              <a key={p.brand} href={p.file} target="_blank" rel="noopener noreferrer"
                style={{
                  background: "var(--bg)",
                  padding: "36px 32px",
                  display: "flex", flexDirection: "column", gap: 12,
                  textDecoration: "none",
                  transition: "all 0.2s",
                  cursor: "pointer",
                  borderLeft: "3px solid transparent",
                }}
                onMouseEnter={e => { e.currentTarget.style.background = "var(--surface)"; e.currentTarget.style.borderLeftColor = "var(--accent)"; }}
                onMouseLeave={e => { e.currentTarget.style.background = "var(--bg)"; e.currentTarget.style.borderLeftColor = "transparent"; }}
              >
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                  <div style={{
                    fontFamily: "var(--f-display)", fontSize: 28,
                    letterSpacing: "-0.02em", color: "var(--ink)", lineHeight: 1
                  }}>{p.brand}</div>
                  <span style={{
                    fontFamily: "var(--f-mono)", fontSize: 20,
                    color: "var(--accent)", lineHeight: 1
                  }}>↓</span>
                </div>
                <div className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", color: "var(--ink-dim)" }}>
                  {p.label.toUpperCase()}
                </div>
                <div className="mono" style={{
                  fontSize: 9, letterSpacing: "0.12em",
                  color: "var(--accent)", marginTop: "auto", paddingTop: 16,
                  borderTop: "1px solid var(--border)"
                }}>
                  UPDATED {p.updated} · {p.type} · CLICK TO OPEN
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

// ── Category chip ──
function CatChip({ label, active, onClick }) {
  return (
    <button onClick={onClick} className="mono" style={{
      padding: "6px 12px", fontSize: 10, letterSpacing: "0.14em",
      background: active ? "var(--ink)" : "transparent",
      color: active ? "var(--bg)" : "var(--ink)",
      border: "1.5px solid var(--ink)", cursor: "pointer",
      transition: "transform 100ms",
    }}
    onMouseDown={(e) => e.currentTarget.style.transform = "translateY(1px)"}
    onMouseUp={(e) => e.currentTarget.style.transform = ""}
    >
      {label}
    </button>
  );
}

// ── CARD GRID — uses ProductImage from components.jsx ──
function CardGrid({ items, onPick }) {
  return (
    <div className="cat-card-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24 }}>
      {items.map((p) => (
        <div key={p.id} data-flip-id={p.id}
          className="cat-card"
          onClick={() => onPick(p)}
          style={{
            cursor: "pointer",
            border: "1px solid var(--border)",
            background: "var(--bg)",
            display: "flex", flexDirection: "column",
            overflow: "hidden",
          }}>
          {/* Image zone */}
          <div style={{ position: "relative", overflow: "hidden" }}>
            <div className="cat-card-img">
              <ProductImage cat={p.cat} sku={p.sku} img={p.img} aspect="4/3" />
            </div>
            {/* Hover overlay */}
            <div className="cat-card-overlay" style={{
              position: "absolute", inset: 0,
              background: "color-mix(in oklch, var(--ink) 55%, transparent)",
              opacity: 0,
              display: "flex", alignItems: "center", justifyContent: "center",
            }}>
              <span className="mono" style={{
                color: "var(--bg)", fontSize: 11, letterSpacing: "0.28em",
                border: "1px solid var(--bg)", padding: "10px 20px",
              }}>VIEW DETAIL →</span>
            </div>
            {/* Category badge */}
            <div style={{
              position: "absolute", top: 12, left: 12,
              background: "var(--ink)", color: "var(--bg)",
              fontFamily: "var(--f-mono)", fontSize: 9, letterSpacing: "0.16em",
              padding: "4px 8px",
            }}>{p.cat.toUpperCase()}</div>
          </div>

          {/* Info */}
          <div style={{ padding: "16px 18px 20px", flex: 1, display: "flex", flexDirection: "column", gap: 8 }}>
            <div className="mono" style={{ color: "var(--ink-soft)", fontSize: 9, letterSpacing: "0.1em" }}>
              {p.sku}
            </div>
            <div style={{ fontSize: 14, lineHeight: 1.35, color: "var(--ink)", flex: 1 }}>
              {p.name}
            </div>
            <div style={{ display: "flex", gap: 4, flexWrap: "wrap", marginTop: 2 }}>
              {p.tags.slice(0, 2).map((t) => (
                <span key={t} className="mono" style={{
                  padding: "2px 6px", border: "1px solid var(--border-strong)",
                  fontSize: 9, color: "var(--ink-dim)",
                }}>{t}</span>
              ))}
            </div>
            <div style={{ paddingTop: 12, borderTop: "1px solid var(--border)", marginTop: 4 }}>
              <span className="mono" style={{ color: "var(--accent)", fontSize: 9, letterSpacing: "0.14em" }}>CONTACT FOR PRICE →</span>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

// ── DENSE TABLE ──
function DenseTable({ items, onPick, sort }) {
  return (
    <div className="cat-dense-wrap" style={{ border: "1.5px solid var(--ink)", overflowX: "auto", WebkitOverflowScrolling: "touch" }}>
      <div style={{
        display: "grid",
        gridTemplateColumns: "52px 130px 1fr 1.1fr 100px 120px 44px",
        gap: 16, padding: "11px 18px",
        background: "var(--ink)", color: "var(--bg)",
        fontFamily: "var(--f-mono)", fontSize: 9.5, letterSpacing: "0.2em",
      }}>
        <span>NO.</span><span>SKU</span><span>DESCRIPTION</span>
        <span>TAGS</span><span style={{ textAlign: "right" }}>PRICE</span>
        <span>UNIT</span><span style={{ textAlign: "right" }}>↗</span>
      </div>
      {items.map((p, i) => (
        <div key={p.id} data-flip-id={p.id}
          className="cat-row"
          onClick={() => onPick(p)}
          style={{
            display: "grid",
            gridTemplateColumns: "52px 130px 1fr 1.1fr 100px 120px 44px",
            gap: 16, padding: "15px 18px",
            borderTop: i === 0 ? "none" : "1px solid var(--border)",
            cursor: "pointer", position: "relative", transition: "background 180ms",
          }}>
          <span className="mono" style={{ color: "var(--ink-soft)", fontSize: 10, alignSelf: "center" }}>
            {String(i + 1).padStart(3, "0")}
          </span>
          <span className="mono" style={{
            fontSize: 10, color: "var(--ink)", alignSelf: "center",
            fontWeight: sort === "sku" ? 700 : 400,
          }}>{p.sku}</span>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <span style={{ width: 3, height: 26, background: catAccent(p.cat), flexShrink: 0 }} />
            <span style={{
              fontSize: 14, color: "var(--ink)", lineHeight: 1.3,
              fontWeight: sort === "az" ? 600 : 400,
            }}>{p.name}</span>
          </div>
          <div style={{ display: "flex", gap: 4, flexWrap: "wrap", alignSelf: "center" }}>
            {p.tags.slice(0, 3).map((t) => (
              <span key={t} className="mono" style={{
                padding: "2px 6px", border: "1px solid var(--border-strong)",
                fontSize: 9, color: "var(--ink-dim)",
              }}>{t.toUpperCase()}</span>
            ))}
          </div>
          <span className="mono" style={{ color: "var(--accent)", fontSize: 9, alignSelf: "center", letterSpacing: "0.12em" }}>ON REQUEST</span>
          <span className="cat-arrow mono" style={{
            alignSelf: "center", textAlign: "right",
            color: "var(--ink-dim)", fontSize: 16,
            transition: "transform 200ms, color 200ms",
          }}>→</span>
        </div>
      ))}
    </div>
  );
}

// ── SPEC ROWS ──
function SpecRows({ items, onPick, sort }) {
  return (
    <div>
      {items.map((p, i) => (
        <div key={p.id} data-flip-id={p.id}
          className="cat-row cat-spec-row"
          onClick={() => onPick(p)}
          style={{
            display: "grid", gridTemplateColumns: "88px 1.4fr 1fr 200px", gap: 24,
            padding: "24px 0",
            borderTop: i === 0 ? "1.5px solid var(--ink)" : "1px solid var(--border)",
            borderBottom: i === items.length - 1 ? "1.5px solid var(--ink)" : "none",
            cursor: "pointer", transition: "background 180ms",
          }}>
          <div>
            <div style={{
              fontFamily: "var(--f-display-black)", fontSize: 32,
              color: catAccent(p.cat), lineHeight: 0.9, letterSpacing: "-0.02em",
            }}>{String(i + 1).padStart(2, "0")}</div>
            <div className="mono" style={{ fontSize: 9, color: "var(--ink-dim)", marginTop: 6 }}>
              {p.cat.toUpperCase()}
            </div>
          </div>
          <div>
            <div className="mono" style={{ fontSize: 10, color: "var(--ink-dim)", marginBottom: 6 }}>{p.sku}</div>
            <div style={{
              fontFamily: "var(--f-display-black)", fontSize: 20,
              lineHeight: 1.1, color: "var(--ink)",
            }}>{p.name}</div>
            {p.desc && (
              <div style={{
                fontSize: 13, color: "var(--ink-dim)", marginTop: 8,
                lineHeight: 1.45, maxWidth: 480,
              }}>
                {String(p.desc).slice(0, 120)}{String(p.desc).length > 120 ? "…" : ""}
              </div>
            )}
          </div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 4, alignSelf: "start", paddingTop: 2 }}>
            {p.tags.map((t) => (
              <span key={t} className="mono" style={{
                padding: "3px 8px", border: "1px solid var(--ink)",
                fontSize: 9, color: "var(--ink)",
              }}>{t.toUpperCase()}</span>
            ))}
          </div>
          <div style={{ textAlign: "right" }}>
            <div className="mono" style={{ fontSize: 10, color: "var(--accent)", letterSpacing: "0.14em", marginBottom: 12 }}>PRICE ON REQUEST</div>
            <button className="mono" style={{
              padding: "7px 14px", fontSize: 9,
              letterSpacing: "0.18em",
              background: "var(--ink)", color: "var(--bg)",
              border: "none", cursor: "pointer",
            }}>VIEW ↗</button>
          </div>
        </div>
      ))}
    </div>
  );
}

// ── Empty state ──
function EmptyState({ onClear }) {
  return (
    <div style={{
      padding: "100px 32px", textAlign: "center",
      border: "1.5px dashed var(--border-strong)",
    }}>
      <div className="mono" style={{
        fontSize: 11, letterSpacing: "0.3em", color: "var(--ink-dim)", marginBottom: 16,
      }}>↳ NO RESULTS</div>
      <div style={{ fontFamily: "var(--f-display-black)", fontSize: "clamp(28px, 7vw, 52px)", color: "var(--ink)" }}>
        Nothing matches.
      </div>
      <button onClick={onClear} className="mono" style={{
        marginTop: 20, padding: "12px 22px",
        fontSize: 11, letterSpacing: "0.2em",
        background: "var(--ink)", color: "var(--bg)",
        border: "none", cursor: "pointer",
      }}>RESET ↻</button>
    </div>
  );
}

function catAccent(cat) {
  const map = {
    conduit: "var(--accent)", wires: "var(--ink)", switches: "var(--ink)",
    mcb: "var(--accent)", trays: "var(--ink)", enclosures: "var(--ink)",
    accessories: "var(--ink)",
  };
  return map[cat] || "var(--ink)";
}

Object.assign(window, { CatalogPage });