{/* edge sheen */}

{/* faint bottom shadow */}

{/* logo */}

{/* odds number */}

{(sel.odds || 0).toFixed(2)}

{/* pick + stake — pick label first, stake amount smaller next to it */}

{sel.pick}

{sel.ccy}{(sel.stake || 0).toFixed(2)}

{/* BET badge — shows when hovering and betLink available */} {betLink && (

BET NOW →

)} ); } function StakeChart({ stake, payout, accent }) { const stakePct = Math.round((stake / payout) * 100); return (

STAKE vs PAYOUT

${(stake || 0).toFixed(0)}

${(payout || 0).toFixed(0)}

Stake Total

); } function formatStartTime(st) { if (!st) return ''; const d = new Date(st); if (isNaN(d.getTime())) return ''; const pad = n => n.toString().padStart(2, '0'); return `${pad(d.getDate())}/${pad(d.getMonth()+1)} ${pad(d.getHours())}:${pad(d.getMinutes())}`; } function SurebetCard({ sb, onHide, compact = false }) { const sport = window.SPORTS[sb.sport] || { acc: '#27f0a3', emoji: '🎯', label: sb.sport }; const accent = sport.acc; const [toggleOn, setToggleOn] = useState(sb.live); const stakePct = Math.round((sb.totalStake / sb.payout) * 100); // ── Locked / encrypted card for free users ────────────────── if (sb._encrypted) { return (

{/* blurred ghost card */}

{/* fake header */}

+{(sb.profit || 0).toFixed(2)}%

{/* fake tiles */}

{[0,1].map(i => (

))}

{/* overlay */}

{/* top — ROI badge (visible, unblurred) */}

+{(sb.profit || 0).toFixed(2)}%

{/* center — lock */}

🔒 Premium Surebet

{/* bottom spacer */}

); } return (

{/* gradient rim */}

{/* sheen */}

{/* header — sport pill + live + ROI hero on the right */}

{sport.emoji} {sport.label.toUpperCase()} {sb.live && ( )} {sb.live ? 'LIVE' : 'PRE'}

{/* ROI hero — top right */}

+{(sb.roi || 0).toFixed(2)}%

{/* match meta */}

{sb.home} vs {sb.away} {sb.startTime && ({formatStartTime(sb.startTime)})}

{sb.league} {sb.clock && <>•⏱ {sb.clock}} {sb.score && <>•{sb.score}}

{/* market label — bigger, left aligned with connector line going right */}

{sb.market}{sb.line ? ` (${sb.line})` : ''}

{/* body — full-width tiles (picks now embedded in each tile) */}

{sb.selections.slice(0, 3).map((sel, i) => { // Match fallbackLink by bookmaker identity, not array index const bk = (sel.book || '').toLowerCase(); const bk1 = (sb.bookmaker1 || '').toLowerCase(); const bk2 = (sb.bookmaker2 || '').toLowerCase(); const fb = bk && bk2 && (bk === bk2 || bk2.includes(bk) || bk.includes(bk2)) ? sb.betLink2 : bk && bk1 && (bk === bk1 || bk1.includes(bk) || bk.includes(bk1)) ? sb.betLink1 : i === 0 ? sb.betLink1 : sb.betLink2; return ; })}

Stake: ${(sb.totalStake || 0).toFixed(2)} Payout: ${(sb.payout || 0).toFixed(2)} Profit: ${(sb.profit || 0).toFixed(2)}

); } // Memo: skip re-render when surebet content hasn't changed. // Without this, every 5s socket update re-renders ALL 200+ cards, triggering // expensive backdropFilter GPU compositing for every visible card on desktop. const SurebetCardMemo = React.memo(SurebetCard, (prev, next) => { if (prev.sb.id !== next.sb.id) return false; if (prev.sb._encrypted !== next.sb._encrypted) return false; if (prev.sb.profit !== next.sb.profit) return false; const ps = prev.sb.selections, ns = next.sb.selections; if (!ps || !ns || ps.length !== ns.length) return false; for (let i = 0; i < ps.length; i++) { if (ps[i].odds !== ns[i].odds) return false; } return true; // props equal — skip re-render }); Object.assign(window, { SurebetCard: SurebetCardMemo, BookmakerChip, WaveBars });