Wire Meshkee catalog: products, blog, mega menu, and product search.

Catalog-only (no cart); search targets store items and products pages.

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

app/blog/[slug]/page.tsx

@@ -3,11 +3,14 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { Container } from "@/components/Container";
 import { PageHero } from "@/components/layout/PageHero";
-import { blogPosts, getBlogPost } from "@/lib/data";
+import { ProductTabs } from "@/components/product/ProductTabs";
+import { Placeholder } from "@/components/Placeholder";
+import { blogImage, fetchBlog } from "@/lib/blog";
+import { fetchComments } from "@/lib/comments";
+import { getBlogPost } from "@/lib/data";
+import { formatFaDate } from "@/lib/format";
 
-export function generateStaticParams() {
-  return blogPosts.map((post) => ({ slug: post.slug }));
-}
+export const revalidate = 60;
 
 export async function generateMetadata({
   params,
@@ -15,9 +18,11 @@ export async function generateMetadata({
   params: Promise<{ slug: string }>;
 }): Promise<Metadata> {
   const { slug } = await params;
-  const post = getBlogPost(slug);
-  if (!post) return { title: "مقاله" };
-  return { title: post.title, description: post.excerpt };
+  const apiPost = await fetchBlog(slug);
+  if (apiPost) return { title: apiPost.title, description: apiPost.abstract ?? undefined };
+  const local = getBlogPost(slug);
+  if (!local) return { title: "مقاله" };
+  return { title: local.title, description: local.excerpt };
 }
 
 export default async function BlogPostPage({
@@ -26,6 +31,36 @@ export default async function BlogPostPage({
   params: Promise<{ slug: string }>;
 }) {
   const { slug } = await params;
+  const apiPost = await fetchBlog(slug);
+
+  if (apiPost) {
+    const comments = await fetchComments("blog", apiPost.id);
+    return (
+      <>
+        <PageHero kicker="Blog" title={apiPost.title} image={blogImage(apiPost)} />
+        <section className="py-16 sm:py-24">
+          <Container className="max-w-3xl">
+            <p className="font-latin text-[12px] tracking-[0.18em] text-muted">
+              {formatFaDate(apiPost.publishedAt || apiPost.createdAt)}
+            </p>
+            {apiPost.abstract ? <p className="mt-6 text-[16px] leading-9 text-muted">{apiPost.abstract}</p> : null}
+            {apiPost.mainTextHtml ? (
+              <div
+                className="rich-text mt-8 text-[16px] leading-9 text-muted"
+                dangerouslySetInnerHTML={{ __html: apiPost.mainTextHtml }}
+              />
+            ) : null}
+            <ProductTabs showDescription={false} comments={comments} />
+            <Link href="/blog" className="mt-10 inline-flex items-center gap-3 text-[14px] font-bold text-brand">
+              بازگشت به مقالات
+              <span className="h-px w-10 bg-brand" />
+            </Link>
+          </Container>
+        </section>
+      </>
+    );
+  }
+
   const post = getBlogPost(slug);
   if (!post) notFound();
 
@@ -40,6 +75,9 @@ export default async function BlogPostPage({
               <p key={paragraph}>{paragraph}</p>
             ))}
           </div>
+          <div className="mt-8 overflow-hidden rounded-2xl">
+            <Placeholder src={post.image} alt={post.title} className="aspect-[16/9] w-full object-cover" />
+          </div>
           <Link href="/blog" className="mt-10 inline-flex items-center gap-3 text-[14px] font-bold text-brand">
             بازگشت به مقالات
             <span className="h-px w-10 bg-brand" />