setHover(true)} onMouseLeave={() => setHover(false)}
onClick={() => onOpen && onOpen(product)}
style={{
breakInside: 'avoid', marginBottom: 12,
background: 'var(--bg-surface)',
borderRadius: 14,
border: '1px solid var(--border)',
overflow: 'hidden',
cursor: popoverOpen ? 'default' : 'pointer',
transition: 'box-shadow .15s, transform .15s',
transform: isHover ? 'translateY(-1px)' : 'none',
boxShadow: isHover
? '0 10px 28px rgba(14,18,27,0.10)'
: '0 1px 2px rgba(14,18,27,0.04)',
}}>
{/* Product image */}
{/* Product name overlay */}
{product.name}
{/* Badge top-right */}
{f.tags && product.badge && (
)}
{/* Hover overlay */}
{isHover && (
)}
{/* Brand header + price */}
{product.brand}
{f.activity && (
{activeProds}
{' '}of{' '}
{totalProds}
{' '}products
)}
{f.price && (
{fmtEur(product.price)}
)}
{/* Rank row */}
{f.rank && (
Rank #{myRank}
from{' '}
#{prevRank}
{' '}in{' '}
{rankWindow}
{' '}days
)}
{/* Sales stats */}
{f.stats && (
{_fmtCompactP(product.sales)} sold
·
{fmtEur(product.revenue)}
)}
{/* Sales area chart */}
{f.salesChart && (
Sales · last 30 days
{_fmtCompactP(Math.round(salesData.reduce((a, b) => a + b, 0)))} units
)}
{/* Rating + category */}
{f.rating && (
{product.rating.toFixed(1)}
· {_fmtCompactP(product.reviews)} reviews
{product.category}
)}
{/* Description */}
{f.description && (
{product.description}
)}
{/* Footer: Save | Analyze | More */}
e.stopPropagation()}>
{saveOpen && (
{
setSavedFolders(s => {
const n = new Set(s);
n.has(id) ? n.delete(id) : n.add(id);
return n;
});
onSave && onSave(product);
}}
onCreateFolder={(name, choice) => {
const id = 'custom_' + Date.now();
setExtraFolders(arr => [...arr, {
id, name, count: 0,
icon: choice?.icon || 'folder',
color: choice?.color || 'var(--text-faint)',
}]);
setSavedFolders(s => { const n = new Set(s); n.add(id); return n; });
}}
onClose={() => setSaveOpen(false)}
anchor="left"
/>
)}
e.stopPropagation()}>
{menuOpen && (
<>
setMenuOpen(false)} style={{ position: 'fixed', inset: 0, zIndex: 60, cursor: 'default' }}/>
{PRODUCT_CARD_MENU_ITEMS.map((item) => {
if (item.id === 'sep') return
;
const handle = (e) => {
e.stopPropagation();
setMenuOpen(false);
if (item.id === 'open') onOpen && onOpen(product);
if (item.id === 'copy') navigator.clipboard?.writeText(`https://${product.brand.toLowerCase().replace(/\s+/g, '-')}.com`);
if (item.id === 'folder') setSaveOpen(true);
};
return (
);
})}
)}
);
};
const PRODUCT_SORT_OPTIONS = [
{ id: 'sales', label: 'Sales', icon: 'wallet', key: (p) => p.sales },
{ id: 'revenue', label: 'Revenue', icon: 'wallet', key: (p) => p.revenue },
{ id: 'price', label: 'Price', icon: 'tag', key: (p) => p.price },
{ id: 'rating', label: 'Rating', icon: 'star', key: (p) => p.rating },
{ id: 'reviews', label: 'Reviews', icon: 'users', key: (p) => p.reviews },
{ id: 'recent', label: 'Most recent', icon: 'sparkles', key: (p) => -p.daysListed },
{ id: 'days', label: 'Days listed', icon: 'calendar', key: (p) => p.daysListed },
{ id: 'brand', label: 'Brand (A–Z)', icon: 'building', key: (p) => p.brand.toLowerCase() },
];
const sortProducts = (products, sortId, direction) => {
const opt = PRODUCT_SORT_OPTIONS.find(o => o.id === sortId) || PRODUCT_SORT_OPTIONS[0];
const sign = direction === 'asc' ? 1 : -1;
return [...products].sort((a, b) => {
const ka = opt.key(a), kb = opt.key(b);
if (typeof ka === 'string') return sign * ka.localeCompare(kb);
return sign * (ka - kb);
});
};
const ExploreProductsV3 = ({ onOpenProduct, onAnalyzeProduct }) => {
const [search, setSearch] = React.useState('');
const [activeChip, setActiveChip] = React.useState([]);
const [savedIds, setSavedIds] = React.useState({});
const [sort, setSort] = React.useState('sales');
const [sortDir, setSortDir] = React.useState('desc');
const [cardFields, setCardFields] = React.useState(PRODUCT_CARD_FIELDS_DEFAULT);
const mkFilter = (id, icon) => {
const value = FILTER_DEFS[id]?.initial;
return { id, icon, value, label: FILTER_DEFS[id]?.label(value) ?? '' };
};
const [activeFilters, setActiveFilters] = React.useState(() => [
mkFilter('date', 'calendar'),
mkFilter('geo', 'globe'),
mkFilter('reach', 'users'),
mkFilter('spend', 'wallet'),
]);
const chips = [
{ id: 'fashion', label: 'Fashion', icon: null },
{ id: 'beauty', label: 'Beauty', icon: null },
{ id: 'fragrance', label: 'Fragrance', icon: null },
{ id: 'sale', label: 'On sale', icon: 'tag' },
{ id: 'new', label: 'New', icon: 'sparkles' },
{ id: 'trending', label: 'Trending', icon: 'trend-up' },
];
const toggleChip = (id) => setActiveChip(a => a.includes(id) ? a.filter(x => x !== id) : [...a, id]);
const baseProducts = PRODUCTS_V3.filter(p => {
if (activeChip.includes('fashion') && p.category !== 'Fashion') return false;
if (activeChip.includes('beauty') && p.category !== 'Beauty') return false;
if (activeChip.includes('fragrance') && p.category !== 'Fragrance') return false;
if (activeChip.includes('sale') && p.badge !== 'Sale') return false;
if (activeChip.includes('new') && p.badge !== 'New') return false;
if (activeChip.includes('trending') && p.badge !== 'Trending') return false;
if (search && !(
p.name.toLowerCase().includes(search.toLowerCase()) ||
p.brand.toLowerCase().includes(search.toLowerCase()) ||
p.category.toLowerCase().includes(search.toLowerCase())
)) return false;
return true;
});
const products = sortProducts(baseProducts, sort, sortDir);
return (
<>
}
/>
{}}
search={search} onSearch={setSearch}
chips={chips} activeChip={activeChip} onChip={toggleChip}
activeFilters={activeFilters}
onActiveFiltersChange={setActiveFilters}
/>
{products.map((product, i) => (
setSavedIds(s => ({ ...s, [p.id]: !s[p.id] }))}
/>
))}
);
};
Object.assign(window, { ExploreProductsV3, ProductCard, PRODUCT_SORT_OPTIONS, sortProducts, PRODUCT_CARD_FIELDS_DEFAULT, PRODUCT_CARD_FIELD_OPTIONS });