+ {/* Floating shoes */}
+ {['5%', '35%', 'calc(100% - 200px)', '65%', '-5%'].map((top, i) => (
+
👟
+ ))}
+
+ {/* Header */}
+
+
+ {/* Hero */}
+
+
GLOBAL SNEAKER INTELLIGENCE
+
+
+ FIND YOUR
+ GRAIL
+ ANYWHERE
+
+
+
+ Enter any sneaker. SoleRadar deploys AI agents across 7+ retailers in your region — simultaneously — and surfaces every deal, size, and colorway in real-time.
+
+
+
+ {/* Search */}
+
+
+
+ {[
+ { label: 'Sneaker Name', value: sneakerName, setter: setSneakerName, placeholder: 'e.g. Jordan 1 Low, Yeezy 350...' },
+ { label: 'Size', value: size, setter: setSize, placeholder: 'e.g. US 10, UK 9...' },
+ { label: 'Colorway', value: colorway, setter: setColorway, placeholder: 'e.g. University Blue...' },
+ ].map((field, i) => (
+
+
{field.label}
+
field.setter(e.target.value)}
+ onKeyDown={e => { if (e.key === 'Enter') handleSearch() }}
+ placeholder={field.placeholder}
+ style={{
+ width: '100%', background: 'transparent', border: 'none',
+ outline: 'none', color: '#f5f0e8', fontSize: 15, fontWeight: 500,
+ padding: '12px 16px', cursor: 'text',
+ }}
+ />
+
+ ))}
+
+ {/* Region dropdown */}
+
+
Region
+
setRegion(e.target.value)}
+ style={{
+ width: '100%', background: 'transparent', border: 'none',
+ outline: 'none', color: '#f5f0e8', fontSize: 14,
+ padding: '12px 16px', cursor: 'crosshair',
+ }}
+ >
+ {REGION_OPTIONS.map(r => {r} )}
+
+
+
+ {/* Currency dropdown */}
+
+
Currency
+
setCurrency(e.target.value)}
+ style={{
+ width: '100%', background: 'transparent', border: 'none',
+ outline: 'none', color: '#f5f0e8', fontSize: 14,
+ padding: '12px 16px', cursor: 'crosshair',
+ }}
+ >
+ {CURRENCY_OPTIONS.map(c => {c.label} )}
+
+
+
+
+
+ {searching ? (
+ <>
+
+
+
+
+ {/* Counter strip */}
+ {searched && (
+
+ {[
+ { num: agents.length, lbl: 'Sites Targeted' },
+ { num: allDrops.length, lbl: 'Results Found' },
+ { num: activeAgents, lbl: 'Agents Active' },
+ { num: lowestPrice === Infinity ? '—' : `${currencySymbol}${lowestPrice.toFixed(0)}`, lbl: 'Lowest Price' },
+ ].map((item, i) => (
+
+ {item.num}
+ {item.lbl}
+
+ ))}
+
+ )}
+
+ {/* Agents section */}
+ {agents.length > 0 && (
+
+
+
AGENTS
+
+
+ {activeAgents} RUNNING · {agents.filter(a => a.status === 'done').length} COMPLETE
+
+
+
+ {agents.map((agent, i) =>
)}
+
+
+ )}
+
+ {/* Results */}
+ {searched && (
+
+
+ {/* Sidebar */}
+
+ {[
+ {
+ heading: 'Filter by Site',
+ items: sitesInResults,
+ active: filterSite,
+ onSelect: setFilterSite,
+ },
+ {
+ heading: 'Availability',
+ items: ['All', 'In Stock', 'Low Stock', 'Pre-Order'],
+ active: filterStock,
+ onSelect: setFilterStock,
+ },
+ ].map(sec => (
+
+
{sec.heading}
+
+ {sec.items.map(item => (
+ sec.onSelect(item)} style={{
+ display: 'inline-flex', alignItems: 'center',
+ padding: '6px 10px', margin: '3px 3px 3px 0',
+ border: `1px solid ${sec.active === item ? '#FFE600' : '#2a2a2a'}`,
+ background: sec.active === item ? 'rgba(255,230,0,0.05)' : 'transparent',
+ color: sec.active === item ? '#FFE600' : '#444',
+ fontFamily: "'Space Grotesk', sans-serif",
+ fontSize: 11, fontWeight: 500, cursor: 'crosshair',
+ transition: 'all 0.15s',
+ }}>{item}
+ ))}
+
+
+
+ {/* Main results */}
+
+
+
+
+ {displayDrops.length} RESULTS
+
+ {searched && (
+
+ {sneakerName} · {colorway || 'Any colorway'} · {size || 'Any size'} · {region}
+
+ )}
+
+
+ {(['quality', 'price-asc', 'price-desc', 'newest'] as const).map(s => (
+ setSortBy(s)} style={{
+ padding: '7px 12px',
+ border: `1px solid ${sortBy === s ? '#FFE600' : '#2a2a2a'}`,
+ background: sortBy === s ? 'rgba(255,230,0,0.06)' : 'transparent',
+ color: sortBy === s ? '#FFE600' : '#444',
+ fontFamily: "'Barlow Condensed', sans-serif",
+ fontSize: 11, fontWeight: 700, letterSpacing: 2,
+ textTransform: 'uppercase', cursor: 'crosshair', transition: 'all 0.15s',
+ }}>
+ {s === 'quality' ? 'Best Match' : s === 'price-asc' ? 'Price ↑' : s === 'price-desc' ? 'Price ↓' : 'Newest'}
+
+ ))}
+
+
+
+ {allDrops.length === 0 && !searching && (
+
+ {searched ? 'No results found — try a different sneaker or region' : 'Enter a sneaker above to start hunting'}
+
+ )}
+
+ {allDrops.length === 0 && searching && (
+
+ Agents deploying... results will appear as they come in
+
+ )}
+
+
+ {displayDrops.map((drop, i) => (
+
toggleCompare(drop)}
+ currencySymbol={currencySymbol}
+ />
+ ))}
+
+
+
+ )}
+
+ {/* Compare bar — ALWAYS visible after search */}
+ {searched && (
+
0 ? '#FFE600' : '#1a1a1a',
+ zIndex: 100, padding: '14px 40px',
+ display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+ borderTop: compareItems.length === 0 ? '1px solid #222' : 'none',
+ transition: 'background 0.3s',
+ animation: 'slideUp 0.3s ease',
+ }}>
+
+
0 ? '#0a0a0a' : '#333', letterSpacing: 2,
+ }}>COMPARE
+ {compareItems.length === 0 && (
+
+ SELECT ITEMS TO COMPARE
+
+ )}
+ {compareItems.map((item, i) => (
+
+ {item['Website'] || item._agentSite} {item['Price'] ? `· ${item['Price']}` : ''}
+ toggleCompare(item)}
+ style={{ cursor: 'crosshair', opacity: 0.6, fontSize: 13 }}
+ >×
+
+ ))}
+ {compareError && (
+
+ ⚠ SELECT AT LEAST 2 ITEMS
+
+ )}
+
+
{
+ if (compareItems.length < 2) {
+ setCompareError(true)
+ setTimeout(() => setCompareError(false), 3000)
+ return
+ }
+ setShowDashboard(true)
+ }}
+ style={{
+ background: compareItems.length >= 2 ? '#0a0a0a' : '#222',
+ color: compareItems.length >= 2 ? '#FFE600' : '#555',
+ border: 'none',
+ fontFamily: "'Bebas Neue', sans-serif",
+ fontSize: 20, letterSpacing: 3,
+ padding: '12px 32px', cursor: 'crosshair',
+ display: 'flex', alignItems: 'center', gap: 10,
+ transition: 'all 0.15s',
+ }}
+ >
+ OPEN DASHBOARD →
+
+
+ )}
+
+ {/* Dashboard */}
+ {showDashboard && (
+
setShowDashboard(false)}
+ />
+ )}
+
+ {/* Bottom padding for compare bar */}
+ {searched &&
}
+