Update carousels, card hover, and IranBay branding.

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

components/catalog/BlogPanel.tsx

@@ -0,0 +1,197 @@
+"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 {
+  BLOG_PAGE_SIZE,
+  blogImage,
+  excerpt,
+  formatDate,
+  toPlainText,
+} from "@/components/catalog/utils";
+import ConfirmDialog from "@/components/ConfirmDialog";
+import styles from "@/components/BusinessDetailsPage.module.css";
+import { en } from "@/lib/i18n/en";
+import {
+  deleteMeshkeeBlog,
+  listMeshkeeBlogs,
+  type MeshkeeBlog,
+} from "@/services/meshkee-content";
+
+export default function BlogPanel({
+  meshkeeId,
+  emptyLabel = en.blog.empty,
+  addHref,
+  controlsMode = "edit-remove",
+  onManage,
+}: {
+  meshkeeId: string;
+  emptyLabel?: string;
+  addHref?: string;
+  controlsMode?: CatalogControlsMode;
+  onManage?: () => void;
+}) {
+  const sectionRef = useRef<HTMLDivElement>(null);
+  const [items, setItems] = useState<MeshkeeBlog[]>([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [busy, setBusy] = useState(false);
+  const [removing, setRemoving] = useState<MeshkeeBlog | null>(null);
+  const [removeBusy, setRemoveBusy] = useState(false);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      setBusy(true);
+      setError("");
+      try {
+        const res = await listMeshkeeBlogs(meshkeeId, {
+          page: 1,
+          pageSize: BLOG_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 blog posts.",
+          );
+        }
+      } 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 listMeshkeeBlogs(meshkeeId, {
+        page: next,
+        pageSize: BLOG_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 deleteMeshkeeBlog(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 blog post.",
+      );
+    } 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 blog…</p> : null}
+      <div className={styles.blogGrid}>
+        {items.map((post) => {
+          const image = blogImage(post);
+          const text = post.abstract
+            ? excerpt(toPlainText(post.abstract), 160)
+            : "";
+          return (
+            <article key={post.id} className={styles.blogCard}>
+              <div className={styles.cardMedia}>
+                {image ? (
+                  <img src={image} alt="" />
+                ) : (
+                  <div className={styles.mediaFallback} aria-hidden />
+                )}
+              </div>
+              <div className={`tile-hover ${styles.cardFoot}`}>
+                <div className={styles.blogBody}>
+                  <h3 dir="auto">{post.title}</h3>
+                  {text ? <p dir="auto">{text}</p> : null}
+                  {post.createdAt ? (
+                    <span className={styles.meta}>{formatDate(post.createdAt)}</span>
+                  ) : null}
+                </div>
+                <CatalogCardControls
+                  mode={controlsMode}
+                  busy={removeBusy}
+                  onManage={onManage}
+                  onEdit={() =>
+                    window.alert(`Edit blog coming soon: ${post.title}`)
+                  }
+                  onRemove={() => setRemoving(post)}
+                />
+              </div>
+            </article>
+          );
+        })}
+      </div>
+      {!items.length && !busy ? (
+        <CatalogEmptyState
+          icon="/images/icons/calendar.svg"
+          title={emptyLabel}
+          lead={en.blog.emptyLead}
+          actionHref={addHref}
+          actionLabel={en.blog.add}
+        />
+      ) : null}
+      <CatalogPagination
+        page={page}
+        total={total}
+        pageSize={BLOG_PAGE_SIZE}
+        busy={busy}
+        onChange={(next) => void loadPage(next)}
+      />
+      <ConfirmDialog
+        open={controlsMode === "edit-remove" && Boolean(removing)}
+        kicker="Remove"
+        title={`Remove ${removing?.title ?? "post"}?`}
+        message="This deletes the blog post from Meshkee. This cannot be undone."
+        confirmLabel="Remove"
+        cancelLabel="Keep"
+        danger
+        busy={removeBusy}
+        onClose={() => {
+          if (!removeBusy) setRemoving(null);
+        }}
+        onConfirm={() => {
+          void confirmRemove();
+        }}
+      />
+    </div>
+  );
+}