QUESTION {String(step).padStart(2,'0')} / {String(total).padStart(2,'0')} {Math.round(step/total*100)}% COMPLETE

{Array.from({ length: total }).map((_, i) => (

))}

); } function TealButton({ children, onClick, full = true, glow = true, style = {}, id = '' }) { return ( ); } function OrangeButton({ children, onClick, full = true, style = {}, id = '' }) { return ( ); } // Original monogram mark — hex shape with two-letter tag. NOT a real team logo. function TeamMark({ abbr, accent, size = 44 }) { return (

60 ? 18 : 11, fontWeight: 700, color: accent, letterSpacing: '0.04em', position: 'relative', }}>{abbr}

); } // Tiny map glyph built from geometric shapes — not a real CS2 map icon function MapGlyph({ kind, size = 48, color = TEAL }) { const s = size; const common = { width: s, height: s, viewBox: '0 0 48 48', fill: 'none', stroke: color, strokeWidth: 1.4, strokeLinecap: 'round', strokeLinejoin: 'round' }; switch (kind) { case 'mirage': return ; case 'inferno': return ; case 'anubis': return ; case 'nuke': return ; case 'ancient': return ; case 'overpass': return ; default: return ; } } // ────────────────────────────────────────────────────────────── // 1. Welcome // ────────────────────────────────────────────────────────────── function WelcomeScreen({ onStart }) { return (

{/* Abstract blurred pro-match ambient background — NOT a real screenshot */}

{/* scanline overlay */}

{/* Top brand bar */}

WINIO

CS2 · AI PREDICTIONS

{/* Main content */}

◆ 89% MODEL ACCURACY · 80+ FACTORS

Think you
know CS2?

Answer 4 questions. Get a free AI prediction on a live match.

{/* floating stat pills */}

{['Team form', 'Map winrates', 'H2H history', 'Eco trends'].map(t => (

{t}

))}

{/* CTA + meta */}

Get my free prediction

⏱ 60 SECONDS NEXT MATCH · 2H 14M

); } // ────────────────────────────────────────────────────────────── // 2. Q1 — best team // ────────────────────────────────────────────────────────────── const TEAMS = [ { id: 'vit', abbr: 'VIT', name: 'Vitality', region: 'EU', rank: '#1', accent: '#ffd447' }, { id: 'navi', abbr: 'NAVI', name: 'NAVI', region: 'EU', rank: '#2', accent: '#ffd21f' }, { id: 'spirit', abbr: 'SPR', name: 'Spirit', region: 'EU', rank: '#3', accent: '#ff7a45' }, { id: 'mouz', abbr: 'MZ', name: 'MOUZ', region: 'EU', rank: '#4', accent: '#ef4444' }, { id: 'faze', abbr: 'FAZE', name: 'FaZe', region: 'EU', rank: '#5', accent: '#dc2626' }, { id: 'g2', abbr: 'G2', name: 'G2', region: 'EU', rank: '#6', accent: '#e5e5e5' }, ]; function Q1Screen({ onNext, onBack, value, setValue }) { return ( Who's the strongest
CS2 team right now?} sub="Pick your #1. We'll compare against the current HLTV-style global rating." />

{TEAMS.map(t => { const sel = value === t.id; return ( ); })}

); } // ────────────────────────────────────────────────────────────── // 3. Q2 — pick the winner // ────────────────────────────────────────────────────────────── function Q2Screen({ onNext, onBack, value, setValue }) { const A = { abbr: 'VIT', name: 'Vitality', accent: '#ffd447', form: ['W','W','W','W','W'], odds: '1.30' }; const B = { abbr: 'NAVI', name: 'NAVI', accent: '#ffd21f', form: ['W','L','W','W','L'], odds: '3.25' }; return ( Pick the winner.} sub="Starts in 2h 14m · BO3 on neutral server" />

{[A, B].map((t, i) => { const sel = value === t.name; return ( ); })}

{/* VS badge */}

{/* H2H strip */}

HEAD TO HEAD · LAST 12 MONTHS 9 MEETS

VIT · 7

2 · NAVI

); } // ────────────────────────────────────────────────────────────── // 4. Q3 — map picker // ────────────────────────────────────────────────────────────── const MAPS = [ { id: 'mirage', name: 'Mirage', stat: '62% T-side' }, { id: 'inferno', name: 'Inferno', stat: '54% CT' }, { id: 'anubis', name: 'Anubis', stat: '58% T' }, { id: 'nuke', name: 'Nuke', stat: '67% CT' }, { id: 'ancient', name: 'Ancient', stat: '51% T' }, { id: 'overpass', name: 'Overpass', stat: '55% CT' }, ]; function Q3Screen({ onNext, onBack, value, setValue }) { return ( Which map
decides the series?} sub="Pick the map you think matters most — our model weighs veto patterns and win-rates." />

{MAPS.map(m => { const sel = value === m.id; return ( ); })}

); } // ────────────────────────────────────────────────────────────── // 5. Q4 — confidence slider // ────────────────────────────────────────────────────────────── function Q4Screen({ onNext, onBack, value, setValue }) { const pct = value; const label = pct < 60 ? 'Shot in the dark' : pct < 75 ? 'Leaning' : pct < 90 ? 'Confident' : 'All-in'; return ( How confident
are you?} sub="We'll weight your answers against your self-assessed certainty." />

{/* Huge number */}

{pct}%

◆ {label.toUpperCase()}

{/* Custom slider */}

setValue(Number(e.target.value))} style={{ position: 'absolute', inset: 0, width: '100%', appearance: 'none', background: 'transparent', cursor: 'pointer', margin: 0, }} /> {/* tick labels */}

{[50, 65, 80, 95, 100].map(n => ( = n ? TEAL : MUTED_2 }}>{n}% ))}

Lock in your prediction

AI will cross-check your picks against 80+ live factors.

); } // ────────────────────────────────────────────────────────────── // Quiz shell / header / footer // ────────────────────────────────────────────────────────────── function QuizShell({ step, onBack, children }) { return (

WINIO

{children}

); } function QuizHeader({ kicker, title, sub }) { return (

◆ {kicker}

{title}

{sub &&

{sub}

}

); } function QuizFooter({ onNext, disabled, ctaLabel = 'Continue', id = '' }) { return (

{ctaLabel}

); } // ────────────────────────────────────────────────────────────── // 6. Loading / AI analyzing // ────────────────────────────────────────────────────────────── function LoadingScreen({ onDone, autoAdvance = true }) { const [tick, setTick] = React.useState(0); const [factorIdx, setFactorIdx] = React.useState(0); const factors = [ 'team form · 30 matches', 'map winrate matrix', 'player HLTV-style ratings', 'head-to-head history', 'economy & force-buy trends', 'veto pattern analysis', 'server latency modeling', 'meta weapon shifts', ]; const numbers = React.useMemo(() => Array.from({ length: 24 }, () => (Math.random() * 0.9 + 0.08).toFixed(3)), [tick]); React.useEffect(() => { const id = setInterval(() => setTick(t => t + 1), 140); return () => clearInterval(id); }, []); React.useEffect(() => { const id = setInterval(() => setFactorIdx(i => (i + 1) % factors.length), 500); return () => clearInterval(id); }, []); React.useEffect(() => { if (!autoAdvance) return; const t = setTimeout(onDone, 4200); return () => clearTimeout(t); }, [onDone, autoAdvance]); return (

{/* Top bar */}

◆ WINIO ENGINE v4.2 {String(Math.min(99, Math.floor(tick * 3.5))).padStart(2,'0')}%

{/* Center — pulsing ring + orbit factors */}

{/* orbit rings */} {[180, 240, 300].map((d, i) => (

))} {/* pulse */}

{/* core */}

{/* orbiting data points */} {factors.slice(0, 5).map((f, i) => { const angle = (tick * 0.04 + (i * Math.PI * 2) / 5) % (Math.PI * 2); const r = 130; const x = Math.cos(angle) * r; const y = Math.sin(angle) * r; return (

{f.split(' · ')[0]}

); })}

{/* status text */}

AI is analyzing 80+ factors…

>> {factors[factorIdx]}

{/* number grid */}

{numbers.map((n, i) => (

{n}

))}

{/* progress bar */}

MODEL · STREAMING {String(Math.min(99, Math.floor(tick * 3.5))).padStart(2,'0')} / 80 FACTORS

); } // ────────────────────────────────────────────────────────────── // 7. Teaser // ────────────────────────────────────────────────────────────── function TeaserScreen({ onSignup, onBack, userPick }) { const aiPick = 'Vitality'; const matches = aiPick === userPick; return (

◆ PREDICTION READY

{/* Match / compare banner */}

{matches ? : }

{matches ? 'Your pick matches the AI' : 'AI disagrees with you'}

{matches ? 'Sharp read. See the breakdown.' : `Model leans ${aiPick}. See why.`}

{/* Blurred prediction */}

AI FORECAST · BO3 MODEL v4.2

{/* teams row — PARTIALLY blurred (can see shape/split, not read) */}

Vitality

71%

NAVI

29%

{/* winprob bar */}

{/* BLURRED key factors */} KEY FACTORS — LOCKED

{[ ['Recent form rating', '+1.84'], ['Anti-eco efficiency', '+0.62'], ['Star duel winrate', '+0.31'], ['Map veto edge', 'Mirage +12%'], ].map(([k, v], i) => (

{k} {v}

))}

{/* lock overlay */}

UNLOCK WITH FREE ACCOUNT

FREE · NO CARD · 5 PREDICTIONS / MONTH

); } // ────────────────────────────────────────────────────────────── // 8. Sign up // ────────────────────────────────────────────────────────────── function SignupScreen({ onSubmit, onBack }) { const [email, setEmail] = React.useState(''); const [sending, setSending] = React.useState(false); const handleSubmit = () => { if (!email.includes('@') || sending) return; setSending(true); fetch('/api/lead', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email: email }), }).then(() => { onSubmit(email); }).catch(() => { onSubmit(email); }); }; return (

◆ STEP · FINAL

◆ UNLOCK YOUR PREDICTION

One field.
Then it's yours.

We'll send predictions, never spam. Opt out any time.

EMAIL ADDRESS setEmail(e.target.value)} style={{ width: '100%', boxSizing: 'border-box', padding: '16px 18px', borderRadius: 14, border: `1px solid ${BORDER}`, background: 'rgba(255,255,255,0.03)', color: '#fff', fontSize: 15, fontFamily: 'Wix Madefor Display, system-ui', outline: 'none', }} onFocus={e => e.target.style.borderColor = TEAL} onBlur={e => e.target.style.borderColor = BORDER} />

Get my prediction

FREE · NO CARD NEEDED · 5 PREDICTIONS / MONTH

{/* trust markers */}

ACCURACY

89%

FACTORS

80+

USERS

42k

); } // ────────────────────────────────────────────────────────────── // 9. Full result // ────────────────────────────────────────────────────────────── function ResultScreen({ onRestart }) { return (

WINIO

◆ FULL PREDICTION

{/* match header */}

◆ IEM COLOGNE MAJOR 2026 · GROUP STAGE · BO3 IN 2H 14M

Vitality

71%

NAVI

29%

{/* winprob bar */}

VIT WIN

NAVI WIN

AI CONFIDENCE

HIGH · 87%

MODEL v4.2

3.1s COMP.

{/* Key factors */} Key factors

{/* Map recommendation */} Map recommendations

{/* Star player callout */} Star player rating

VIT

"v0idz" — AWP / Entry

RATING 1.31 · +14% VS TIER-1

S+

{/* Sticky CTA */}

window.open('https://winio.ai/?utm_source=quiz&utm_medium=landing&utm_campaign=cs2_quiz_funnel&utm_content=see_more_predictions', '_blank')}> See more predictions

UPCOMING MATCHES TODAY · 4

); } function SectionLabel({ children }) { return (

{children.toUpperCase ? children.toUpperCase() : children}

); } function FactorRow({ label, aVal, bVal, aPct }) { return (

{label} {aVal} / {bVal}

); } function MapCard({ kind, label, team, tone }) { const c = tone === 'teal' ? TEAL : ORANGE; return (

◆ {label.toUpperCase()}

{kind}

{team}

); } Object.assign(window, { WelcomeScreen, Q1Screen, Q2Screen, Q3Screen, Q4Screen, LoadingScreen, TeaserScreen, SignupScreen, ResultScreen, });

Think youknow CS2?

{title}

AI is analyzing 80+ factors…

One field.Then it's yours.

Think you
know CS2?

One field.
Then it's yours.