fix: refactor MDXContent to use getLocale and add missing blog blocks

components/MDXContent.tsx

@@ -1,12 +1,15 @@
 import React from 'react';
 import { MDXRemote } from 'next-mdx-remote/rsc';
-import { useLocale } from 'next-intl';
+import { getLocale } from 'next-intl/server';
 
 // Blog components
 import TechnicalGrid from './blog/TechnicalGrid';
 import Stats from './blog/Stats';
 import VisualLinkPreview from './blog/VisualLinkPreview';
 import StickyNarrative from './blog/StickyNarrative';
+import ComparisonGrid from './blog/ComparisonGrid';
+import HighlightBox from './blog/HighlightBox';
+import ChatBubble from './blog/ChatBubble';
 
 // Home components
 import Hero from './home/Hero';
@@ -36,10 +39,14 @@ function HeroSection(props: any) {
   );
 }
 
-function Block(props: any) {
-  const { type, data } = props;
-  const locale = useLocale();
-  switch (type) {
+async function Block(props: any) {
+  const { type, data, children } = props;
+  const locale = await getLocale();
+
+  // Normalize type (Payload sometimes uses blockType in data)
+  const blockType = type || data?.blockType;
+
+  switch (blockType) {
     // Blog Components
     case 'technicalGrid':
       return <TechnicalGrid {...data} />;
@@ -49,6 +56,12 @@ function Block(props: any) {
       return <VisualLinkPreview {...data} />;
     case 'stickyNarrative':
       return <StickyNarrative {...data} />;
+    case 'comparisonGrid':
+      return <ComparisonGrid {...data} />;
+    case 'highlightBox':
+      return <HighlightBox {...data}>{children}</HighlightBox>;
+    case 'chatBubble':
+      return <ChatBubble {...data}>{children}</ChatBubble>;
 
     // Home Components
     case 'homeHero':
@@ -74,7 +87,12 @@ function Block(props: any) {
 
     default:
       return (
-        <div className="p-4 border-2 border-dashed border-gray-300">Unknown Block: {type}</div>
+        <div className="p-8 border-2 border-dashed border-red-200 rounded-2xl my-8 bg-red-50 text-red-600">
+          <p className="font-bold mb-2">Unknown Block Type: {blockType}</p>
+          <pre className="text-xs overflow-auto p-4 bg-white/50 rounded">
+            {JSON.stringify({ type, data: !!data, hasChildren: !!children }, null, 2)}
+          </pre>
+        </div>
       );
   }
 }