/* Splash (ticket tears open → logo) + onboarding (3 distinct scenes: local radar, seat pick, one-tap pay) */ const STAGE_BG = 'radial-gradient(120% 70% at 50% 35%, #2B1640 0%, #160A24 55%, #0B0513 100%)'; function Splash({ onDone }) { const [ph, setPh] = useState(0); useEffect(() => { const t = [setTimeout(() => setPh(1), 1250), setTimeout(() => setPh(2), 1750), setTimeout(() => setPh(3), 4000), setTimeout(onDone, 4500)]; return () => t.forEach(clearTimeout); }, []); const half = (side) => { const L = side === 'L'; const d = L ? 'M14,0 H120 V44 A16,16 0 0 0 120,76 V120 H14 A14,14 0 0 1 0,106 V14 A14,14 0 0 1 14,0 Z' : 'M120,0 H226 A14,14 0 0 1 240,14 V106 A14,14 0 0 1 226,120 H120 V76 A16,16 0 0 0 120,44 Z'; return = 2 ? `translateX(${L ? -70 : 70}px) rotate(${L ? -14 : 14}deg)` : 'none', opacity: ph >= 2 ? 0 : 1, transition: 'transform .8s cubic-bezier(.5,0,.2,1), opacity .6s .25s' }}> = 1 ? 'url(#spTk)' : 'transparent'} stroke="#FFB6C0" strokeWidth="2" pathLength="1" style={{ strokeDasharray: 1, strokeDashoffset: 1, animation: 'spDraw 1.1s cubic-bezier(.6,0,.3,1) .1s forwards', transition: 'fill .4s' }} /> {L ? <>= 1 ? 1 : 0, transition: 'opacity .3s .1s' }} />= 1 ? 1 : 0, transition: 'opacity .3s .15s' }} />= 1 ? 1 : 0, transition: 'opacity .3s .2s' }} /> : = 1 ? 1 : 0, transition: 'opacity .3s .15s' }}>{[...Array(5)].map((_, r) => [...Array(5)].map((_, c) => ((r * 7 + c * 3) % 4 ? : null)))}} ; }; return

= 2 ? 1.25 : .5})`, opacity: ph >= 2 ? 1 : .5, transition: 'transform 1.2s cubic-bezier(.2,.8,.2,1), opacity .8s' }}>

= 2 ? 'dpLogoIn .9s cubic-bezier(.2,.8,.2,1) .2s both' : 'none', filter: 'drop-shadow(0 10px 40px rgba(229,69,88,.55))' }} />

= 2 ? 'dpTag .6s ease .9s both' : 'none' }}>Connecting cultures worldwide

; } /* scene 1 - local radar */ function SceneLocal() { const { city } = useApp(); const W = 360, H = 320, cx = W / 2, cy = H / 2 + 10; const roads = useMemo(() => { const r = rnd(3), o = []; for (let i = 0; i < 9; i++) o.push({ y: 20 + i * 36 + r() * 10, a: (r() - .5) * 18 }); for (let i = 0; i < 8; i++) o.push({ x: 10 + i * 48 + r() * 10, a: (r() - .5) * 12 }); return o; }, []); const local = DP.EVENTS.filter(e => e.city === city).slice(0, 4); const list = local.length >= 3 ? local : DP.EVENTS.filter(e => e.cc === DP.CITIES[city].cc).slice(0, 4); const spots = [[-92, -78], [88, -52], [-70, 70], [96, 84]]; const eu = Object.keys(DP.CITIES).map(n => DP.CITIES[n]); return

{list.map((e, i) => { const [dx, dy] = spots[i]; return

{e.nm.split(' · ')[0].split(':')[0]}{e.day} · {e.dateLbl}

; })}

Across Europe & UK

; } /* scene 2 - pick seats */ function SceneSeats() { const rows = 'ABCDEFGH'.split(''), N = 12; const taken = useMemo(() => { const r = rnd(9), t = new Set(); rows.forEach(R => { for (let i = 1; i <= N; i++) if (r() < .38) t.add(R + i); }); ['C6', 'C7'].forEach(x => t.delete(x)); return t; }, []); return

An Evening with Shreya Ghoshal

Festhalle, Frankfurt · Thu 22 Oct

STAGE

{rows.map((R, ri) =>

{[...Array(N)].map((_, i) => { const id = R + (i + 1), t = taken.has(id), pick = id === 'C6' || id === 'C7'; return ; })}

)}

2 seats selected

; } /* scene 3 - one tap to ticket */ function ScenePay() { const [s, setS] = useState(0); useEffect(() => { const t = setInterval(() => setS(x => (x + 1) % 4), 1500); return () => clearInterval(t); }, []); const ev = DP.EVENTS[0]; return

{ev.day} · {ev.dateLbl.toUpperCase()}

{ev.nm}

= 1 ? '#1D0D31' : '#eee'}`, transition: 'border-color .3s' }}>General−= 1 ? 2 : 0} className={s >= 1 ? 'pop' : ''}>{s >= 1 ? 2 : 0}+

Pay

Pay DesiPass

Face ID

You're going!

2 × GENERAL

{['Select', 'Pay', 'Face ID', 'Ticket'].map((l, i) => {l})}

; } const ON_COPY = [ ['Desi experiences,', 'around the corner', "See what's on near you tonight, across Europe and the UK."], ['Pick the', 'perfect seat', 'Choose your seats for concerts like Arijit Singh or Shreya Ghoshal.'], ['Tickets in', 'one tap', 'Pay with Apple Pay or Google Pay. Your QR is ready instantly.'], ]; function Onboarding({ onDone }) { const { topInset, bottomInset } = useApp(); const [i, setI] = useState(0); const ref = useRef(); const go = (n) => { const el = ref.current; el.scrollTo({ left: n * el.clientWidth, behavior: 'smooth' }); }; const last = i === ON_COPY.length - 1; const Scene = [SceneLocal, SceneSeats, ScenePay][i]; return

setI(Math.round(e.target.scrollLeft / e.target.clientWidth))} style={{ flex: 'none' }}> {ON_COPY.map(([a, em, d], k) =>

{a} {em}

{d}

)}

{ON_COPY.map((_, k) => go(k)} style={{ width: k === i ? 22 : 7, height: 7, borderRadius: 4, background: k === i ? '#E54558' : 'rgba(255,255,255,.25)', transition: 'all .35s cubic-bezier(.2,.8,.2,1)', cursor: 'pointer' }}>)}

last ? onDone() : go(i + 1)} style={{ minWidth: 130, height: 48, fontSize: 15 }}>{last ? 'Get Started' : 'Next'}{!last && }

; } Object.assign(window, { Splash, Onboarding });