Add Buy Box Lost detection feature with visual warning badges

components/BuyBoxWarningBadge.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+interface BuyBoxWarningBadgeProps {
+    asin: string;
+    buyBoxLostMap?: Map<string, { countries: string[]; reasons: Record<string, string> }>;
+}
+
+export const BuyBoxWarningBadge: React.FC<BuyBoxWarningBadgeProps> = ({ asin, buyBoxLostMap }) => {
+    if (!buyBoxLostMap || !asin) return null;
+
+    const data = buyBoxLostMap.get(asin.toUpperCase());
+    if (!data || data.countries.length === 0) return null;
+
+    const tooltipContent = data.countries
+        .map(c => `${c}: ${data.reasons[c] || 'Unknown'}`)
+        .join('\n');
+
+    return (
+        <div
+            className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-amber-500/20 border border-amber-500/50 text-amber-400 text-[9px] font-bold uppercase tracking-tight cursor-help transition-all hover:bg-amber-500/30 hover:scale-105"
+            title={`⚠️ Buy Box Lost\n${tooltipContent}`}
+        >
+            <span className="text-xs">⚠️</span>
+            <span>BB Lost</span>
+            <span className="text-amber-300/80">{data.countries.join(', ')}</span>
+        </div>
+    );
+};