Fix color name detection with fuzzy matching, fix checkout syntax errors, add error handling for products page

src/lib/colorNames.ts

@@ -95,13 +95,31 @@ const COLOR_NAMES: Record<string, string> = {
   '#f5f5f5': 'Smoke',
 };
 
+function hexDistance(a: string, b: string): number {
+  const [ar, ag, ab] = [1, 3, 5].map((i) => parseInt(a.slice(i, i + 2), 16));
+  const [br, bg, bb] = [1, 3, 5].map((i) => parseInt(b.slice(i, i + 2), 16));
+  return Math.sqrt((ar - br) ** 2 + (ag - bg) ** 2 + (ab - bb) ** 2);
+}
+
 /**
  * Get the friendly name for a hex color
- * Falls back to "Custom" if hex code is not in the standard palette
+ * Matches exactly if available, otherwise finds the nearest color in the palette
  */
 export function getColorName(hex: string): string {
   const normalized = hex.toLowerCase();
-  return COLOR_NAMES[normalized] || 'Custom';
+  if (COLOR_NAMES[normalized]) return COLOR_NAMES[normalized];
+
+  // Find nearest color by distance (tolerance for lighting/JPEG compression variations)
+  let nearest: string | null = null;
+  let minDistance = Infinity;
+  for (const [colorHex, colorName] of Object.entries(COLOR_NAMES)) {
+    const dist = hexDistance(normalized, colorHex);
+    if (dist < minDistance && dist < 40) {
+      minDistance = dist;
+      nearest = colorName;
+    }
+  }
+  return nearest || 'Custom';
 }
 
 /**