Update carousels, card hover, and IranBay branding.

Co-authored-by: Cursor <cursoragent@cursor.com>

components/catalog/PortfoliosPanel.tsx

@@ -0,0 +1,202 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import CatalogCardControls, {
+  type CatalogControlsMode,
+} from "@/components/catalog/CatalogCardControls";
+import CatalogEmptyState from "@/components/catalog/CatalogEmptyState";
+import CatalogPagination from "@/components/catalog/CatalogPagination";
+import {
+  PORTFOLIO_PAGE_SIZE,
+  portfolioImage,
+  portfolioTitle,
+  portfolioTitleEn,
+  portfolioTitleFa,
+} from "@/components/catalog/utils";
+import ConfirmDialog from "@/components/ConfirmDialog";
+import styles from "@/components/BusinessDetailsPage.module.css";
+import { en } from "@/lib/i18n/en";
+import {
+  deleteMeshkeePortfolio,
+  listMeshkeePortfolios,
+  type MeshkeePortfolio,
+} from "@/services/meshkee-content";
+
+export default function PortfoliosPanel({
+  meshkeeId,
+  emptyLabel = en.portfolios.empty,
+  addHref,
+  controlsMode = "edit-remove",
+  onManage,
+}: {
+  meshkeeId: string;
+  emptyLabel?: string;
+  addHref?: string;
+  controlsMode?: CatalogControlsMode | "none";
+  onManage?: () => void;
+}) {
+  const sectionRef = useRef<HTMLDivElement>(null);
+  const [items, setItems] = useState<MeshkeePortfolio[]>([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [busy, setBusy] = useState(false);
+  const [removing, setRemoving] = useState<MeshkeePortfolio | null>(null);
+  const [removeBusy, setRemoveBusy] = useState(false);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      setBusy(true);
+      setError("");
+      try {
+        const res = await listMeshkeePortfolios(meshkeeId, {
+          page: 1,
+          pageSize: PORTFOLIO_PAGE_SIZE,
+        });
+        if (cancelled) return;
+        setItems(res.items);
+        setTotal(res.total);
+        setPage(1);
+      } catch (err) {
+        if (!cancelled) {
+          setError(
+            err instanceof Error ? err.message : "Could not load portfolios.",
+          );
+        }
+      } finally {
+        if (!cancelled) setBusy(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [meshkeeId]);
+
+  function scrollToSection() {
+    const node = sectionRef.current;
+    if (!node) return;
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        node.scrollIntoView({ behavior: "smooth", block: "start" });
+      });
+    });
+  }
+
+  async function loadPage(next: number) {
+    setBusy(true);
+    try {
+      const res = await listMeshkeePortfolios(meshkeeId, {
+        page: next,
+        pageSize: PORTFOLIO_PAGE_SIZE,
+      });
+      setItems(res.items);
+      setTotal(res.total);
+      setPage(res.page);
+      scrollToSection();
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function confirmRemove() {
+    if (!removing) return;
+    setRemoveBusy(true);
+    try {
+      await deleteMeshkeePortfolio(meshkeeId, removing.id);
+      setItems((prev) => prev.filter((item) => item.id !== removing.id));
+      setTotal((value) => Math.max(0, value - 1));
+      setRemoving(null);
+    } catch (err) {
+      window.alert(
+        err instanceof Error ? err.message : "Could not remove portfolio.",
+      );
+    } finally {
+      setRemoveBusy(false);
+    }
+  }
+
+  if (error) {
+    return <p className={styles.panelHint}>{error}</p>;
+  }
+
+  return (
+    <div ref={sectionRef} className={styles.productsSection}>
+      {busy ? <p className={styles.panelHint}>Loading portfolios…</p> : null}
+      <div className={styles.portfolioGrid}>
+        {items.map((item) => {
+          const image = portfolioImage(item);
+          const title = portfolioTitle(item);
+          const titleEn = portfolioTitleEn(item);
+          const titleFa = portfolioTitleFa(item);
+          return (
+            <article key={item.id} className={styles.portfolioCard}>
+              <div className={styles.portfolioMedia}>
+                {image ? (
+                  <img src={image} alt="" />
+                ) : (
+                  <div className={styles.mediaFallback} aria-hidden />
+                )}
+              </div>
+              <div className={styles.portfolioMeta}>
+                <h3 className={styles.portfolioTitleEn}>
+                  {titleEn || title}
+                </h3>
+                {titleFa ? (
+                  <p className={`fa ${styles.portfolioTitleFa}`} lang="fa">
+                    {titleFa}
+                  </p>
+                ) : null}
+              </div>
+              {controlsMode !== "none" ? (
+                <div className={`tile-hover ${styles.cardFoot} ${styles.cardFootSolo}`}>
+                  <CatalogCardControls
+                    mode={controlsMode}
+                    busy={removeBusy}
+                    onManage={onManage}
+                    onEdit={() =>
+                      window.alert(`Edit portfolio coming soon: ${title}`)
+                    }
+                    onRemove={() => setRemoving(item)}
+                  />
+                </div>
+              ) : null}
+            </article>
+          );
+        })}
+      </div>
+      {!items.length && !busy ? (
+        <CatalogEmptyState
+          icon="/images/icons/gear.svg"
+          title={emptyLabel}
+          lead={en.portfolios.emptyLead}
+          actionHref={addHref}
+          actionLabel={en.portfolios.add}
+        />
+      ) : null}
+      <CatalogPagination
+        page={page}
+        total={total}
+        pageSize={PORTFOLIO_PAGE_SIZE}
+        busy={busy}
+        onChange={(next) => void loadPage(next)}
+      />
+      <ConfirmDialog
+        open={controlsMode === "edit-remove" && Boolean(removing)}
+        kicker="Remove"
+        title={`Remove ${removing ? portfolioTitle(removing) : "portfolio"}?`}
+        message="This deletes the portfolio from Meshkee. This cannot be undone."
+        confirmLabel="Remove"
+        cancelLabel="Keep"
+        danger
+        busy={removeBusy}
+        onClose={() => {
+          if (!removeBusy) setRemoving(null);
+        }}
+        onConfirm={() => {
+          void confirmRemove();
+        }}
+      />
+    </div>
+  );
+}