{showBack && ( )}

{!showBack && 👟} {title}

); const renderTabBar = () => (

{[ { id: 'board', icon: '🏃', label: 'Runs' }, { id: 'profile', icon: '👤', label: 'Profile' } ].map(tab => ( ))}

); const renderRunBoard = () => (

Find your people. Run together.

{(events || []).map(evt => { const evtRsvps = (rsvps || []).filter(r => r.eventId === evt.id); const amIGoing = (evtRsvps || []).some(r => r._user?.id === user?.id); return (

handleEventClick(evt.id)} style={{ background: BRAND.surface, borderRadius: 20, padding: 20, boxShadow: '0 4px 20px rgba(0, 39, 76, 0.08)', border: `1px solid ${BRAND.border}`, cursor: 'pointer', transition: 'transform 0.1s', position: 'relative', overflow: 'hidden' }} > {evt.isDemo && (

DEMO

)}

{evt.date}

{evt.title}

📍 {evt.distance} ⏱️ {evt.pace}

{(evtRsvps || []).slice(0, 4).map((r, i) => (

0 ? -12 : 0, background: '#E2E8F0', backgroundImage: r._user?.profileImageUrl ? `url(${r._user.profileImageUrl})` : 'none', backgroundSize: 'cover', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, zIndex: 4 - i }} > {!r._user?.profileImageUrl && '👤'}

))}

{(evtRsvps || []).length > 0 ? `${evtRsvps.length} going` : 'Be the first'}

{amIGoing ? '✓ You\'re in' : 'View'}

); })}

); const renderEventDetail = () => { if (!activeEvent) return null; return (

{/* Map Placeholder Graphic */}

📍 Route Preview

{activeEvent.date}

{activeEvent.title}

{activeEvent.description}

📍

Location

{activeEvent.location}

⏱️

Pace

{activeEvent.pace}

Who's Going ({activeEventRsvps.length})

{typeof share === 'function' && ( )}

{(activeEventRsvps || []).length === 0 ? (

Be the first to join!

) : ( (activeEventRsvps || []).map((r, i) => (

openProfile && r._user?.handle && openProfile(r._user.handle)} style={{ width: 64, height: 64, borderRadius: '50%', background: '#E2E8F0', backgroundImage: r._user?.profileImageUrl ? `url(${r._user.profileImageUrl})` : 'none', backgroundSize: 'cover', marginBottom: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 24, cursor: r._user?.handle ? 'pointer' : 'default' }} > {!r._user?.profileImageUrl && '👤'}

openProfile && r._user?.handle && openProfile(r._user.handle)} style={{ fontSize: 13, fontWeight: 600, color: BRAND.text, textAlign: 'center', width: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', cursor: r._user?.handle ? 'pointer' : 'default' }} > {r._user?.displayName?.split(' ')[0] || 'Runner'} {typeof startChat === 'function' && r._user?.handle && r._user?.id !== user?.id && ( )}

)) )}

{/* Photo Drop Section */}

Photo Drop 📸

{hasRsvpdToActive && pickAndUploadPhoto && ( )}

{(activeEventPhotos || []).length === 0 ? (

📷

No photos yet. {hasRsvpdToActive ? 'Upload the first one!' : 'RSVP to add photos.'}

) : (

{(activeEventPhotos || []).map((photo, i) => { const src = resolvedPhotos[photo.assetId]; return (

{src ? (

) : (

⏳

)}

); })}

)}

{/* Sticky RSVP Bar */}

); }; const renderProfileSetupModal = () => (

👋

Almost in!

Quick vibe check so others know who they're running with.

Your usual pace:

{(PACES || []).map(p => ( ))}

Why are you here?

{(VIBES || []).map(v => ( ))}

); const renderConfettiOverlay = () => (

🎉

You're In, Wolverine!

See you at the run.

); const renderProfileView = () => (

{!user?.avatarUrl && '👤'}

{user?.name || 'Your Profile'}

{user?.handle ? `@${user.handle}` : 'University of Michigan'}

Your Vibe

PACE

{myProfile?.pace || 'Not set yet'}

LOOKING FOR

{myProfile?.vibe || 'Not set yet'}

{!hasCompletedSetup && ( )}

); // ─── MAIN APP SHELL ────────────────────────────────────────────────────────── return (

{view === 'board' && ( <> {renderHeader('Maize & Pace')}

{renderRunBoard()}

{renderTabBar()} )} {view === 'event' && ( <> {renderHeader('Details', true)}

{renderEventDetail()}

)} {view === 'profile' && ( <> {renderHeader('Profile')}

{renderProfileView()}

{renderTabBar()} )} {showProfileSetup && renderProfileSetupModal()} {showConfetti && renderConfettiOverlay()}

); }