🔍 Add Debug Logging to CollectionThumbnail

Added comprehensive debug logging to understand why card images aren't displaying:
- Log collection name, thumbnails data, and custom image
- Log mainCard and gridCards data
- Add onError and onLoad handlers for images
- Log when showing crying emoji placeholder

This will help identify if the issue is with data flow or image loading.

pages/collections.js

@@ -253,6 +253,10 @@ export default function Collections() {
   const CollectionThumbnail = ({ collection }) => {
     const { thumbnails = [], image } = collection;
 
+    console.log('🔍 CollectionThumbnail - collection:', collection.name);
+    console.log('🔍 CollectionThumbnail - thumbnails:', thumbnails);
+    console.log('🔍 CollectionThumbnail - image:', image);
+
     // If there's a custom image, show it
     if (image) {
       return (
@@ -268,6 +272,7 @@ export default function Collections() {
 
     // If no cards, show crying emoji
     if (!thumbnails || thumbnails.length === 0) {
+      console.log('🔍 CollectionThumbnail - showing crying emoji (no thumbnails)');
       return (
         <div className="w-full h-48 rounded-xl mb-4 flex items-center justify-center" style={{ backgroundColor: 'var(--bg-tertiary)' }}>
           <div className="text-center">
@@ -281,6 +286,9 @@ export default function Collections() {
     const mainCard = thumbnails[0];
     const gridCards = thumbnails.slice(1, 5); // Get up to 4 cards for the 2x2 grid
 
+    console.log('🔍 CollectionThumbnail - mainCard:', mainCard);
+    console.log('🔍 CollectionThumbnail - gridCards:', gridCards);
+
     return (
       <div className="w-full h-48 rounded-xl overflow-hidden mb-4 p-3 flex gap-2" style={{ backgroundColor: 'var(--bg-tertiary)' }}>
         {/* Main card (larger, left side) */}
@@ -291,6 +299,8 @@ export default function Collections() {
                 src={mainCard.image_url || mainCard.stock_image_url}
                 alt={mainCard.name}
                 className="w-full h-full object-cover"
+                onError={(e) => console.log('🔍 Image load error:', e.target.src)}
+                onLoad={() => console.log('🔍 Image loaded successfully:', mainCard.image_url || mainCard.stock_image_url)}
               />
             </div>
           ) : (
@@ -311,6 +321,8 @@ export default function Collections() {
                         src={card.image_url || card.stock_image_url}
                         alt={card.name}
                         className="w-full h-full object-cover"
+                        onError={(e) => console.log('🔍 Grid image load error:', e.target.src)}
+                        onLoad={() => console.log('🔍 Grid image loaded successfully:', card.image_url || card.stock_image_url)}
                       />
                     </div>
                   ) : (