setHover(true)} onMouseLeave={() => setHover(false)}
onClick={() => onOpen && onOpen(ad)}
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)',
}}>
{/* Header: brand + activity + right-cluster tags */}
{ad.brand}
{f.activity && (
{adCount} of {totalAds} ads
)}
{f.tags && (
{ad.type === 'Carousel' ? Math.max(1, (ad.reach % 5)) : 0}
{winningAds > 0 && {winningAds}}
{ad.daysActive}d
)}
{/* Rank row */}
{f.rank && (
Rank #{myRank}
from #{prevRank}
{' '}in {rankWindow} days
)}
{/* Compact stats line + geo */}
{(f.stats || f.geo) && (
{f.stats ? (
{fmtCompact(ad.reach)}
·
{fmtCompact(ad.estSpend)}€
·
{dailySpend}€/d
) :
}
{f.geo && (
{geoCoverage}%
)}
)}
{/* Creative — most prominent block */}
{ad.brand.split(' ')[0]}
{/* Centered play overlay for videos */}
{isVideo && (
)}
{/* Hover lift (no dark overlay) */}
{hover && !isVideo && (
)}
{/* Primary text — Meta-style caption above the link card */}
{f.primaryText && (
{ad.primaryText}
)}
{/* Link card — domain + headline + description + CTA, all in one box */}
{(f.linkDomain || f.linkHeadline || f.linkDescription || f.linkCta) && (
{f.linkDomain && (
{domain}
)}
{f.linkHeadline && (
{ad.headline}
)}
{f.linkDescription && (
{ad.description}
)}
{f.linkCta && (
)}
)}
{/* Footer: split actions — Save | Analyze | kebab menu */}
e.stopPropagation()}>
{saveOpen && (
{
setSavedFolders(s => {
const n = new Set(s);
n.has(id) ? n.delete(id) : n.add(id);
return n;
});
onSave && onSave(ad);
}}
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' }}/>
{AD_CARD_MENU_ITEMS.map((item) => {
if (item.id === 'sep') return
;
const handle = (e) => {
e.stopPropagation();
setMenuOpen(false);
if (item.id === 'open') onOpen && onOpen(ad);
if (item.id === 'copy') navigator.clipboard?.writeText(`https://${(ad.handle || '').replace('@','').toLowerCase()}.com`);
if (item.id === 'folder') setSaveOpen(true);
};
return (
);
})}
)}
);
};
// Sort options + comparators for ads. Comparator returns the sort key (numeric
// or string); SortRowV3's direction toggle decides asc/desc.
const AD_SORT_OPTIONS = [
{ id: 'spend', label: 'Budget spent', icon: 'wallet', key: (a) => a.estSpend },
{ id: 'reach', label: 'Reach', icon: 'users', key: (a) => a.reach },
{ id: 'daily', label: 'Daily spend', icon: 'wallet', key: (a) => a.estSpend / Math.max(1, a.daysActive) },
{ id: 'days', label: 'Days running', icon: 'calendar',key: (a) => a.daysActive },
{ id: 'recent', label: 'Most recent', icon: 'sparkles',key: (a) => -a.daysActive },
{ id: 'ctr', label: 'CTR', icon: 'trend-up',key: (a) => parseFloat(a.ctr) },
{ id: 'cpm', label: 'CPM', icon: 'trend-up',key: (a) => parseFloat(a.cpm) },
{ id: 'brand', label: 'Brand (A–Z)', icon: 'building',key: (a) => a.brand.toLowerCase() },
];
const sortAds = (ads, sortId, direction) => {
const opt = AD_SORT_OPTIONS.find(o => o.id === sortId) || AD_SORT_OPTIONS[0];
const sign = direction === 'asc' ? 1 : -1;
return [...ads].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 ExploreV3 = ({ onOpenAd, onAnalyzeAd }) => {
const [filterMode, setFilterMode] = React.useState('all');
const [search, setSearch] = React.useState('');
const [activeChip, setActiveChip] = React.useState([]);
const [savedIds, setSavedIds] = React.useState({});
const [sort, setSort] = React.useState('spend');
const [sortDir, setSortDir] = React.useState('desc');
const [cardFields, setCardFields] = React.useState(AD_CARD_FIELDS_DEFAULT);
// Active filters owned here so they can actually filter the grid.
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('format', 'play-circle'),
mkFilter('geo', 'globe'),
mkFilter('platform', 'sparkles'),
mkFilter('reach', 'users'),
mkFilter('spend', 'wallet'),
]);
const chips = [
{ id: 'cta', label: 'CTA: Shop now', icon: 'shop' },
{ id: 'audio', label: 'Audio: Voiceover', icon: 'speaker' },
{ id: 'longvid', label: '> 30s', icon: 'video' },
{ id: 'product', label: 'Has product link', icon: 'link' },
{ id: 'fashion', label: 'Fashion', icon: null },
{ id: 'beauty', label: 'Beauty', icon: null },
{ id: 'home', label: 'Home', icon: null },
];
const toggleChip = (id) => setActiveChip(a => a.includes(id) ? a.filter(x => x !== id) : [...a, id]);
const baseAds = ADS_V3.filter(a => {
if (filterMode !== 'all' && a.type.toLowerCase() !== filterMode) return false;
if (search && !(a.title.toLowerCase().includes(search.toLowerCase()) || a.brand.toLowerCase().includes(search.toLowerCase()))) return false;
return true;
});
const ads = sortAds(applyFilters(baseAds, activeFilters), sort, sortDir);
return (
<>
}
/>
{ads.map((ad) => (
setSavedIds(s => ({ ...s, [a.id]: !s[a.id] }))}/>
))}
);
};
Object.assign(window, { ExploreV3, AdCard, AD_SORT_OPTIONS, sortAds, AD_CARD_FIELDS_DEFAULT, AD_CARD_FIELD_OPTIONS });