// ============================================================ // SOCIAL PROOF TOAST — random "X tocmai a cumpărat..." notification // ------------------------------------------------------------ // - Appears on all pages every 5-10 minutes (randomized) // - Real Romanian names + cities + real account sizes // - Mentions affiliate codes (Apex: NWAPJXME, Tradeify: TYRONE) // - Subtle pop sound (Web Audio API, no mp3 hosted) // - Click → navigate to firm's detail page // - Mobile-friendly position (bottom-left desktop, bottom-center mobile) // ============================================================ const SP_FIRMS = { apex: { name: 'Apex Trader Funding', short: 'Apex', logo: 'assets/logo-apex-fit.png', code: 'NWAPJXME', color: '#5AC8FF', // cyan/blue (acid blue accent) accentRgb: '90, 200, 255', page: 'propfirms/apex', accounts: ['25K', '50K', '75K', '100K', '150K', '250K', '300K'], }, tradeify: { name: 'Tradeify', short: 'Tradeify', logo: 'assets/logo-tradeify-icon.png', code: 'TYRONE', color: '#FFCB52', // gold accentRgb: '255, 203, 82', page: 'propfirms/tradeify', accounts: ['25K', '50K', '100K', '150K'], }, fundednext: { name: 'FundedNext Futures', short: 'FundedNext', logo: 'assets/logo-fundednext-fit.png', code: null, color: '#B7FF1A', // acid green accentRgb: '183, 255, 26', page: 'propfirms/fundednext', accounts: ['50K', '100K', '200K'], }, }; // Romanian first names + last initial — ~95% male, ~5% female // (target audience is mostly male NASDAQ futures traders) const SP_NAMES = [ // Male (38) 'Andrei P.', 'Cristian D.', 'Alexandru M.', 'Bogdan I.', 'Răzvan G.', 'Mihai R.', 'Adrian V.', 'Sorin B.', 'Vlad H.', 'Ștefan A.', 'Cosmin E.', 'Florin Z.', 'Dragoș U.', 'Marius Q.', 'Octavian R.', 'George N.', 'Paul T.', 'Cătălin M.', 'Tudor V.', 'Eduard L.', 'Daniel F.', 'Liviu S.', 'Cezar T.', 'Robert D.', 'Iulian C.', 'Sebastian P.', 'Lucian K.', 'Darius G.', 'Mircea N.', 'Gabriel R.', 'Horia B.', 'Dorin M.', 'Ionuț V.', 'Alin P.', 'Claudiu R.', 'Emanuel S.', 'Toma B.', 'Bogdan-Ioan O.', // Female (2) 'Maria S.', 'Andreea J.', ]; // (Cities removed by request — show only first name + initial.) // Subtle "doorbell" notification sound using Web Audio API const spPlayPop = () => { try { const Ctx = window.AudioContext || window.webkitAudioContext; if (!Ctx) return; const ctx = new Ctx(); const now = ctx.currentTime; // Two-tone ding (high → low) const tones = [ { freq: 988, start: 0, dur: 0.18, vol: 0.10 }, // B5 { freq: 660, start: 0.10, dur: 0.30, vol: 0.08 }, // E5 ]; tones.forEach((t) => { const osc = ctx.createOscillator(); const gain = ctx.createGain(); osc.type = 'sine'; osc.frequency.setValueAtTime(t.freq, now + t.start); gain.gain.setValueAtTime(0.0001, now + t.start); gain.gain.exponentialRampToValueAtTime(t.vol, now + t.start + 0.02); gain.gain.exponentialRampToValueAtTime(0.0001, now + t.start + t.dur); osc.connect(gain); gain.connect(ctx.destination); osc.start(now + t.start); osc.stop(now + t.start + t.dur + 0.05); }); // Auto-close audio context after sound finishes setTimeout(() => { try { ctx.close(); } catch (_) {} }, 700); } catch (e) { // Browser blocked autoplay — silent fail } }; const spPickRandomSale = () => { const firmKeys = Object.keys(SP_FIRMS); const firmKey = firmKeys[Math.floor(Math.random() * firmKeys.length)]; const firm = SP_FIRMS[firmKey]; const account = firm.accounts[Math.floor(Math.random() * firm.accounts.length)]; const name = SP_NAMES[Math.floor(Math.random() * SP_NAMES.length)]; const minutesAgo = 1 + Math.floor(Math.random() * 8); // 1-8 min ago return { firmKey, firm, account, name, minutesAgo, id: Date.now() + Math.random() }; }; const SocialProofToast = ({ onNav }) => { const [sale, setSale] = React.useState(null); const [closing, setClosing] = React.useState(false); const timersRef = React.useRef({ show: null, hide: null, schedule: null }); const dismiss = React.useCallback(() => { setClosing(true); setTimeout(() => { setSale(null); setClosing(false); }, 350); }, []); const showOne = React.useCallback(() => { const newSale = spPickRandomSale(); setSale(newSale); setClosing(false); spPlayPop(); // Auto-hide after 25 seconds (user requested 20-30s window) clearTimeout(timersRef.current.hide); timersRef.current.hide = setTimeout(() => dismiss(), 25000); }, [dismiss]); React.useEffect(() => { // After the 2nd popup, switch to recurring random 5-10 min intervals const scheduleRecurring = () => { const delayMin = 5 + Math.random() * 5; // 5-10 min random const delayMs = delayMin * 60 * 1000; timersRef.current.schedule = setTimeout(() => { showOne(); scheduleRecurring(); }, delayMs); }; // Schedule: // 1st popup → 1 minute after page load // 2nd popup → at minute 5 (4 min after the first one) // 3rd+ popup → 5-10 min random after the previous one timersRef.current.show = setTimeout(() => { showOne(); // 2nd popup at minute 5 = 4 minutes after the 1st one timersRef.current.second = setTimeout(() => { showOne(); scheduleRecurring(); }, 4 * 60 * 1000); }, 1 * 60 * 1000); return () => { clearTimeout(timersRef.current.show); clearTimeout(timersRef.current.second); clearTimeout(timersRef.current.hide); clearTimeout(timersRef.current.schedule); }; }, [showOne]); if (!sale) return null; // Card click navigates to firm page but does NOT dismiss // (only X button or auto-timer dismisses) const handleCardClick = () => { if (onNav && sale.firm.page) { onNav(sale.firm.page); } }; return (
{sale.firm.short}
PROMOȚIE ACTIVATĂ
{sale.name} a cumpărat
Cont ${sale.account} {sale.firm.short} {sale.firm.code && ( <> · cu codul {sale.firm.code} )}
acum {sale.minutesAgo} {sale.minutesAgo === 1 ? 'minut' : 'minute'}
); }; Object.assign(window, { SocialProofToast });