// ─── Gunzaru: core screens (Discovery, Event Detail, Chat, Profile, Onboarding) ─── // Bottom tab bar const TabBar = ({ active, onChange, onCreate }) => { const tabs = [ { id: 'home', icon: 'home', label: 'Discover' }, { id: 'my', icon: 'ticket', label: 'My Events' }, { id: 'create', icon: 'plus', label: '', center: true }, { id: 'chat', icon: 'chat', label: 'Chat' }, { id: 'profile', icon: 'user', label: 'Profile' }, ]; return (
{tabs.map(t => { if (t.center) { return ( ); } const isActive = active === t.id; return ( ); })}
); }; // ═══════════════════════════════════════════════════════ // 1. ONBOARDING // ═══════════════════════════════════════════════════════ const OnboardingScreen = ({ onDone }) => { return (
{/* visual hero */}
{/* wave decoration */} {/* floating event cards */}
{/* copy */}
Gunzaru · ގުންޒަރު

Real plans.
Real attendance.

Stop guessing who's actually showing up. Discover, RSVP, and run events around Malé, Hulhumalé and Addu.

); }; // ═══════════════════════════════════════════════════════ // 2. DISCOVERY / HOME // ═══════════════════════════════════════════════════════ const DiscoveryScreen = ({ onOpenEvent, onTab, onCreate }) => { const [filter, setFilter] = React.useState('All'); const filters = ['All', 'Today', 'Sports', 'Outdoors', 'Study', 'Community']; const featured = EVENTS[0]; const rest = EVENTS.slice(1); return (
{/* Header */}
Malé · Henveiru

Hi, Mahfooz.

{/* Stats strip */}
3
Joined this week
12
Near you today
+47
This weekend
{/* Filter chips */}
{filters.map(f => ( ))}
{/* Featured */}
onOpenEvent(featured.id)} />
{/* List */}
{rest.map(e => ( onOpenEvent(e.id)} /> ))}
{/* Categories grid */}
{[ { l: 'Sports', i: 'flame', h: 35 }, { l: 'Study', i: 'sparkle', h: 250 }, { l: 'Outdoors', i: 'waves', h: 215 }, { l: 'Community', i: 'users', h: 155 }, ].map(c => ( ))}
); }; const iconBtn = { width: 42, height: 42, borderRadius: 14, background: 'var(--surface)', border: '1px solid var(--line-2)', display: 'grid', placeItems: 'center', cursor: 'pointer', color: 'var(--ink)', position: 'relative', boxShadow: 'var(--shadow-sm)', }; const statCell = { flex: 1, padding: '12px 8px', textAlign: 'center' }; const statN = { fontFamily: 'Bricolage Grotesque', fontSize: 22, fontWeight: 600, color: 'var(--ink)', letterSpacing: '-0.02em' }; const statL = { fontFamily: 'Geist', fontSize: 11, color: 'var(--ink-3)', marginTop: 2 }; // Featured card (tall) const FeaturedEventCard = ({ event, onOpen }) => (
Tonight {event.tags[0]}
FRI
22

{event.title}

{event.time} {event.where}
{event.going} going
{event.maybe} maybe · {event.cap - event.going} spots left
); // List card const EventListCard = ({ event, onOpen }) => (
{event.date.split(',')[0]}
{event.date.match(/\d+/)?.[0]}
{event.price ? mvr(event.price) : 'Free'} {event.category}

{event.title}

{event.where} · {event.distance}
{event.going} going
{event.time}
); // ═══════════════════════════════════════════════════════ // 3. EVENT DETAIL // ═══════════════════════════════════════════════════════ const EventDetailScreen = ({ eventId, onBack, onChat, onCheckin }) => { const event = EVENTS.find(e => e.id === eventId) || EVENTS[0]; const [rsvp, setRsvp] = React.useState(null); const [hidden, setHidden] = React.useState(false); return (
{/* Hero */}
{/* Status bar overlay controls */}
{/* Title overlay */}
{event.tags.map(t => ( {t} ))}

{event.title}

{/* Meta grid */}
{/* Organiser */}
{event.org}
{event.orgVerified && (
)}
Organiser · 24 past events
{/* About */}

{event.about}

{/* Attendees */}
{event.going_list.map((n, i) => (
{n.split(' ')[0]}
))}
+{event.going - event.going_list.length}
more
{/* Privacy toggle */}
Hide my name publicly
Organiser still sees you. Counts toward total.
setHidden(!hidden)} />
{/* Chat preview if RSVP'd */} {rsvp === 'going' && (
Event chat is open
3 new messages
)}
{/* RSVP dock */}
{rsvp === null ? (
Will you be there?
setRsvp('going')} /> setRsvp('maybe')} /> setRsvp('no')} />
) : rsvp === 'going' ? (
You're going
We'll remind you 1h before.
) : (
{rsvp === 'maybe' ? 'Marked as maybe' : "Marked can't go"}
You can change this any time.
)}
); }; const glassBtn = { width: 38, height: 38, borderRadius: 12, background: 'rgba(255,255,255,0.18)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.3)', display: 'grid', placeItems: 'center', cursor: 'pointer', }; const MetaCell = ({ icon, l, v, sub, divider, top }) => (
{l}
{v}
{sub &&
{sub}
}
); const RsvpBtn = ({ icon, label, tone, onClick }) => { const tones = { ok: { bg: 'var(--ok-soft)', c: 'var(--ok)' }, warn: { bg: 'var(--warn-soft)', c: 'var(--warn)' }, neutral: { bg: 'var(--bg-2)', c: 'var(--ink-2)' }, }; const t = tones[tone]; return ( ); }; const Toggle = ({ on, onClick }) => ( ); Object.assign(window, { TabBar, OnboardingScreen, DiscoveryScreen, EventDetailScreen, FeaturedEventCard, EventListCard, Toggle, RsvpBtn, MetaCell, glassBtn, iconBtn, });