// ─── Gunzaru: more screens (Chat, Create, Check-in, Payment, Packages, Profile, My Events) ─── // ═══════════════════════════════════════════════════════ // CHAT (event-specific) // ═══════════════════════════════════════════════════════ const ChatScreen = ({ eventId, onBack }) => { const event = EVENTS.find(e => e.id === eventId) || EVENTS[0]; const [draft, setDraft] = React.useState(''); const [messages, setMessages] = React.useState([ { id: 1, from: 'Ahmed Rasheed', isOrg: true, t: '4:12 PM', text: "Hey team! We'll meet at the east gate. Two teams will rotate every 12 minutes." }, { id: 2, from: 'Hassan', t: '4:18 PM', text: "I'll bring an extra ball just in case 🙌" }, { id: 3, from: 'Mariyam', t: '4:22 PM', text: 'Anyone passing by Sosun Magu? Can hop in your taxi.' }, { id: 4, from: 'me', t: '4:24 PM', text: "I'm 10 mins away, can pick you up at the corner." }, { id: 5, from: 'Ahmed Rasheed', isOrg: true, t: '4:30 PM', text: 'Reminder: water and dark/light bibs. Cleats optional.' }, { id: 6, from: 'Ibrahim', t: '4:41 PM', text: 'On my way 🏃' }, ]); const scrollRef = React.useRef(null); React.useEffect(() => { if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight; }, [messages]); const send = () => { if (!draft.trim()) return; setMessages([...messages, { id: Date.now(), from: 'me', t: 'now', text: draft }]); setDraft(''); }; return (
{/* Header */}
{event.title}
{event.going} going · 12 online
{/* Pinned event banner */}
{event.date} · {event.time} · {event.where}
2d to go
{/* Messages */}
— Today —
{messages.map((m, i) => { const mine = m.from === 'me'; const prev = messages[i - 1]; const sameFrom = prev && prev.from === m.from; return (
{!mine && (
{!sameFrom && }
)}
{!sameFrom && !mine && (
{m.from} {m.isOrg && Organiser}
)}
{m.text}
{m.t}
); })}
{/* Composer */}
setDraft(e.target.value)} onKeyDown={e => e.key === 'Enter' && send()} placeholder="Message the group…" style={{ flex: 1, border: 'none', outline: 'none', fontFamily: 'Geist', fontSize: 14, color: 'var(--ink)', background: 'transparent', padding: '8px 4px', }} />
); }; // ═══════════════════════════════════════════════════════ // CREATE EVENT // ═══════════════════════════════════════════════════════ const CreateEventScreen = ({ onBack, onPublish }) => { const [step, setStep] = React.useState(1); const [data, setData] = React.useState({ title: '', category: 'Sports', date: '', time: '', where: '', cap: 12, price: 0, chat: true, private: false, }); const update = (k, v) => setData(d => ({ ...d, [k]: v })); return (
Step {step} of 3
{step === 1 ? 'What & where' : step === 2 ? 'When & who' : 'Review'}
Gold
{/* Progress */}
{[1,2,3].map(s => (
))}
{step === 1 && (
update('title', e.target.value)} placeholder="e.g. Pickup Football at Galolhu" style={inputStyle} />
{['Sports','Outdoors','Study','Tech','Food','Community'].map(c => ( ))}
update('where', e.target.value)} placeholder="Galolhu Stadium, Malé" style={{ flex: 1, border: 'none', outline: 'none', fontFamily: 'Geist', fontSize: 14, background: 'transparent', padding: '14px 0' }} />
)} {step === 2 && (
Fri, 22 May
5:30 PM
update('cap', +e.target.value)} style={{ width: '100%', accentColor: 'var(--primary)' }} />
450100+
{[0, 50, 100, 250].map(p => ( ))}
update('chat', !data.chat)} /> update('private', !data.private)} isLast />
)} {step === 3 && (
{data.category}

{data.title || 'Pickup Football at Galolhu'}

Fri, 22 May · 5:30 PM
{data.where || 'Galolhu Stadium, Malé'}
Once published, attendees can RSVP and join the chat. You'll get a notification for every check-in.
)}
{step > 1 && } {step < 3 ? ( ) : ( )}
); }; const inputStyle = { width: '100%', height: 50, borderRadius: 14, border: '1px solid var(--line)', background: 'var(--surface)', fontFamily: 'Geist', fontSize: 14, color: 'var(--ink)', padding: '0 14px', outline: 'none', }; const Field = ({ label, sub, children }) => (
{sub && {sub}}
{children}
); const OptRow = ({ icon, label, sub, on, onClick, isLast }) => (
{label}
{sub}
); const ReviewRow = ({ l, v }) => (
{l} {v}
); // ═══════════════════════════════════════════════════════ // CHECK-IN // ═══════════════════════════════════════════════════════ const CheckinScreen = ({ eventId, onBack }) => { const event = EVENTS.find(e => e.id === eventId) || EVENTS[0]; const [done, setDone] = React.useState(false); return (
Check in
{event.title}
{!done ? (
{/* QR-like pattern */}
{/* corner marks */}
{/* scan animation line */}

Show this to the organiser

Or tap below to check yourself in when you've arrived at {event.where}.

Waiting · Organiser nearby
) : (

You're checked in

{event.going + 1} of {event.cap} confirmed

)}
); }; const FauxQR = () => { // 17x17 grid of pseudo-random squares const cells = React.useMemo(() => Array.from({ length: 17 * 17 }, () => Math.random() > 0.5), []); return (
{cells.map((on, i) => { const x = i % 17, y = Math.floor(i / 17); // hollow out corners for finder rectangles if ((x < 4 && y < 4) || (x > 12 && y < 4) || (x < 4 && y > 12)) return
; return
; })}
); }; const CornerMark = ({ pos }) => { const s = { position: 'absolute', width: 38, height: 38, background: 'var(--ink)', borderRadius: 6, padding: 6 }; const m = pos.includes('t') ? { top: 16 } : { bottom: 16 }; const m2 = pos.includes('l') ? { left: 16 } : { right: 16 }; return (
); }; // ═══════════════════════════════════════════════════════ // PAYMENT — card scanner // ═══════════════════════════════════════════════════════ const PaymentScreen = ({ pkg, onBack, onDone }) => { const selected = PACKAGES.find(p => p.id === pkg) || PACKAGES[2]; const [stage, setStage] = React.useState('scan'); // scan -> form -> done const [cvv, setCvv] = React.useState(''); return (
Subscribe to {selected.name}
Payment
{mvr(selected.price)}/mo
{stage === 'scan' && (
{/* fake card viewfinder */}
{/* grid */} {/* card frame */}
BML · DEBIT
4532 ••18 •••• 7204
M. HASSAN 08/29
{/* corner brackets */} {['tl','tr','bl','br'].map(p => (
))} {/* scanning line */}

Scan your card

Point your camera at the front of your debit or credit card. We auto-fill the number and expiry.

Card data is encrypted. We never store the CVV. Powered by BML Gateway.
)} {stage === 'form' && (
Card scanned
•••• 7204 · expires 08/29
4532 0418 •••• 7204 AUTO
08/29 AUTO
setCvv(e.target.value.replace(/\D/g, '').slice(0, 4))} placeholder="123" inputMode="numeric" style={{ ...inputStyle, fontFamily: 'Geist Mono', letterSpacing: '0.2em' }} />
)}
{stage === 'form' && (
By continuing you agree to Gunzaru's terms
)} {stage === 'done' && (

Welcome to {selected.name}

You can now create unlimited events and use event chat.

)}
); }; const SumRow = ({ l, v, sub, big }) => (
{l} {v}
); // ═══════════════════════════════════════════════════════ // PACKAGES // ═══════════════════════════════════════════════════════ const PackagesScreen = ({ onBack, onSelect }) => { const [sel, setSel] = React.useState('gold'); return (
Choose your plan

Casual joiners start free. Organisers unlock event creation on Gold.

{PACKAGES.map(p => { const isSel = sel === p.id; return (
setSel(p.id)} style={{ padding: 18, borderRadius: 22, cursor: 'pointer', background: isSel ? 'var(--ink)' : 'var(--surface)', color: isSel ? 'var(--bg)' : 'var(--ink)', border: '1px solid ' + (isSel ? 'var(--ink)' : 'var(--line-2)'), boxShadow: isSel ? '0 12px 30px rgba(20,40,60,0.2)' : 'var(--shadow-sm)', position: 'relative', transition: 'all .2s', }}> {p.recommended && (
Most popular
)}
{p.name}
{p.tagline}
{p.price === 0 ? 'Free' : mvr(p.price)}
{p.price > 0 &&
PER MONTH
}
{p.features.map((f, i) => (
{f.t}
))}
); })}
Cancel any time · No commitment
); }; // ═══════════════════════════════════════════════════════ // PROFILE // ═══════════════════════════════════════════════════════ const ProfileScreen = ({ onTab, onCreate, onPackages }) => (

Profile

Mahfooz Hassan

@mahfooz · Malé
Gold member
{/* Plan card */}
Your plan
Gold · {mvr(89)} / month
Renews 14 Jun · Tap to manage
{/* Settings list */}
{/* Achievements */}
Show-up
14 weeks
Host rating
4.9 · 23 reviews
); const Stat = ({ n, l }) => (
{n}
{l}
); const SettingsRow = ({ icon, label, right, last }) => (
{label}
{right && {right}}
); // ═══════════════════════════════════════════════════════ // MY EVENTS // ═══════════════════════════════════════════════════════ const MyEventsScreen = ({ onTab, onCreate, onOpenEvent }) => { const [tab, setTab] = React.useState('going'); const tabs = [ { id: 'going', l: 'Going', n: 4 }, { id: 'hosting', l: 'Hosting', n: 2 }, { id: 'past', l: 'Past', n: 38 }, ]; return (

My Events

{tabs.map(t => ( ))}
{tab === 'going' && (
{EVENTS.slice(0, 4).map(e => ( onOpenEvent(e.id)} padding={0} style={{ overflow: 'hidden' }}>
{e.date} · {e.time}
Going

{e.title}

{e.where}
))}
)} {tab === 'hosting' && (
{EVENTS.slice(0, 2).map(e => ( onOpenEvent(e.id)} padding={14}>
You're hosting {e.date}

{e.title}

{e.going} going · {e.maybe} maybe
))}
)} {tab === 'past' && (
{['Coffee & Code · 12 May', 'Saturday Football · 9 May', 'Marina Walk · 5 May', 'Book Club · 2 May'].map((t,i) => (
{t.split('·')[0]}
{t.split('·')[1]}
Attended ))}
)}
); }; Object.assign(window, { ChatScreen, CreateEventScreen, CheckinScreen, PaymentScreen, PackagesScreen, ProfileScreen, MyEventsScreen, });