{ e.stopPropagation(); if (openProfile) openProfile(handle); }} style={{ width: size, height: size, borderRadius: '50%', padding: showRing ? 2 : 0, background: showRing ? `linear-gradient(135deg, ${getRingColor(handle)})` : 'transparent', cursor: 'pointer', flexShrink: 0, position: 'relative', overflow: 'hidden' }} className={showRing ? "gradient-ring" : ""} >

{!src && }

); const EventCard = ({ event, index, onClick }) => { const cat = CATEGORIES[event.category] || CATEGORIES.Other; return (

onClick(event)} className="stagger-anim spring-btn" style={{ background: '#fff', borderRadius: 16, padding: 16, marginBottom: 12, boxShadow: '0 8px 24px rgba(99,102,241,0.08)', animationDelay: `${index * 60}ms`, cursor: 'pointer' }} >

{event.category}

{formatRelTime(event.time)}

{event.isDemo && Demo • } {event.title}

📍 {event.location}

@{event.host?.handle}

{(event.attendees || []).slice(0, 3).reverse().map((a, i) => (

))}

{(event.attendees || []).length > 3 && ( + {(event.attendees || []).length - 3} going )} {(event.attendees || []).length <= 3 && (event.attendees || []).length > 0 && ( going )}

); }; const SplashView = () => (

👯

tagalong

plans drop.

you pull up.

campus plans, on tap.

); const Confetti = () => (

{[...Array(12)].map((_, i) => { const angle = (i / 12) * Math.PI * 2; const dist = 30 + Math.random() * 40; const tx = Math.cos(angle) * dist; const ty = Math.sin(angle) * dist; const colors = ['#6366F1', '#EC4899', '#FBBF24', '#10B981']; return (

); })}

); // Views const FeedView = () => (

who's up to what 👀

{/* Filter Chips */}

{['All', ...Object.keys(CATEGORIES || {})].map(filter => { const isActive = activeFilter === filter; return ( ); })}

{/* Feed */}

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

👀

nothing happening yet — be the first to post

) : ( (filteredEvents || []).map((ev, i) => setSelectedEventId(e.id)} />) )}

); const DiscoverView = () => { const trending = [...events].sort((a, b) => (b.attendees || []).length - (a.attendees || []).length).slice(0, 5); const friendsGoing = (events || []).filter(e => (e.attendees || []).length > 0 && e.host.handle !== me.handle).slice(0, 3); return (

Discover

🔥 Trending this week

{(trending || []).map((ev, i) => (

setSelectedEventId(e.id)} />

))}

👥 Your friends are going to

{(friendsGoing || []).length > 0 ? ( (friendsGoing || []).map((ev, i) => setSelectedEventId(e.id)} />) ) : (

Invite friends to see their plans here! {share && }

)}

); }; const ProfileView = () => { const posted = (events || []).filter(e => e.host.handle === me.handle); const joined = (events || []).filter(e => (e.attendees || []).some(a => a.handle === me.handle)); const [pTab, setPTab] = React.useState('Posted'); const displayEvents = pTab === 'Posted' ? posted : joined; return (

{me.name}

@{me.handle}

Computer Science, 2nd year

{(posted || []).length}

posted

{(joined || []).length}

tagged along

{['Posted', 'Tagged Along'].map(t => ( ))}

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

No events yet.

) : ( (displayEvents || []).map((ev, i) => setSelectedEventId(e.id)} />) )}

); }; // Modals const EventDetailModal = () => { if (!selectedEvent) return null; const isGoing = (selectedEvent.attendees || []).some(a => a.handle === me.handle); const cat = CATEGORIES[selectedEvent.category] || CATEGORIES.Other; return (

setSelectedEventId(null)} />

{cat.icon} {selectedEvent.category}

{selectedEvent.title}

📅 {new Date(selectedEvent.time).toLocaleString([], { weekday: 'short', month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' })}

📍 {selectedEvent.location}

👤 Hosted by { if(openProfile) openProfile(selectedEvent.host.handle); }}>@{selectedEvent.host.handle}

{selectedEvent.vibe && (

"{selectedEvent.vibe}"

)}

Going {(selectedEvent.attendees || []).length}

{(selectedEvent.attendees || []).length === 0 ? (

No one's in yet. Be the first!

) : (

{(selectedEvent.attendees || []).map(a => (

{a.name || a.handle} @{a.handle}

))}

)}

); }; const PostModal = () => { if (!isPosting) return null; const [form, setForm] = React.useState({ title: '', category: 'Other', location: '', date: new Date().toISOString().split('T')[0], time: '12:00', vibe: '' }); const handleSubmit = () => { if (!form.title || !form.location) return; const dt = new Date(`${form.date}T${form.time}`); const newEvent = { id: `evt-${Date.now()}`, title: form.title, category: form.category, location: form.location, time: dt.getTime(), host: me, attendees: [], vibe: form.vibe, createdAt: Date.now() }; const updated = [...events, newEvent]; setEvents(updated); writePatch({ events: updated }); setIsPosting(false); setActiveTab('feed'); }; return (

Post a plan

What's happening? setForm({...form, title: e.target.value})} placeholder="Coffee after 2pm tute" style={{ width: '100%', padding: 16, borderRadius: 12, border: '1px solid #E5E7EB', fontSize: 16, background: '#F9FAFB', boxSizing: 'border-box' }} />

Date setForm({...form, date: e.target.value})} style={{ width: '100%', padding: '14px 12px', borderRadius: 12, border: '1px solid #E5E7EB', fontSize: 16, background: '#F9FAFB', boxSizing: 'border-box' }} />

Time setForm({...form, time: e.target.value})} style={{ width: '100%', padding: '14px 12px', borderRadius: 12, border: '1px solid #E5E7EB', fontSize: 16, background: '#F9FAFB', boxSizing: 'border-box' }} />

Where? setForm({...form, location: e.target.value})} placeholder="The Underground" style={{ width: '100%', padding: 16, borderRadius: 12, border: '1px solid #E5E7EB', fontSize: 16, background: '#F9FAFB', boxSizing: 'border-box' }} />

Category

Vibe note (optional)

setForm({...form, vibe: e.target.value})} 
                placeholder="low-key, just want company"
                style={{ width: '100%', padding: 16, borderRadius: 12, border: '1px solid #E5E7EB', fontSize: 16, background: '#F9FAFB', minHeight: 80, boxSizing: 'border-box', resize: 'vertical' }}
             />
          </div>
        </div>

<div style={{ padding: '16px 24px calc(env(safe-area-inset-bottom, 20px) + 16px)', borderTop: '1px solid #eee' }}>
          <button 
            className="spring-btn"
            onClick={handleSubmit}
            disabled={!form.title || !form.location}
            style={{ width: '100%', height: 56, borderRadius: 16, fontSize: 18, fontWeight: 700, color: '#fff', background: (!form.title || !form.location) ? '#D1D5DB' : 'linear-gradient(135deg, #6366F1, #EC4899)', border: 'none', transition: 'all 0.2s', boxShadow: (!form.title || !form.location) ? 'none' : '0 8px 20px rgba(236,72,153,0.3)' }}
          >Post it</button>
        </div>
      </div>
    );
  };

// 9. Main Layout Render
  return (
    <>
      <style>{`
        @keyframes slideUpFade {
          from { opacity: 0; transform: translateY(16px); }
          to { opacity: 1; transform: translateY(0); }
        }
        @keyframes rotateGradient {
          from { transform: rotate(0deg); }
          to { transform: rotate(360deg); }
        }
        @keyframes springScale {
          0% { transform: scale(1); }
          50% { transform: scale(0.96); }
          100% { transform: scale(1); }
        }
        @keyframes popOut {
          0% { transform: scale(0.95); opacity: 0; }
          50% { transform: scale(1.05); }
          100% { transform: scale(1); opacity: 1; }
        }
        @keyframes fadeScaleIn {
          from { opacity: 0; transform: scale(0.9); }
          to { opacity: 1; transform: scale(1); }
        }
        @keyframes fadeIn {
          from { opacity: 0; }
          to { opacity: 1; }
        }
        @keyframes bgShift {
          0% { filter: hue-rotate(0deg); }
          50% { filter: hue-rotate(15deg); }
          100% { filter: hue-rotate(0deg); }
        }
        @keyframes shimmerBg {
          0% { background-position: -200% center; }
          100% { background-position: 200% center; }
        }
        @keyframes pulseBtn {
          0%, 100% { transform: scale(1); }
          50% { transform: scale(1.03); }
        }
        @keyframes slideUpApp {
          from { transform: translateY(100vh); }
          to { transform: translateY(0); }
        }
        @keyframes floatSplashEmoji {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-6px); }
        }
        @keyframes confettiDrop {
          0% { transform: translateY(0) rotate(0deg); opacity: 1; }
          100% { transform: translateY(100px) rotate(360deg); opacity: 0; }
        }
        @keyframes floatEmoji {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-8px); }
        }
        @keyframes flicker {
          0%, 100% { opacity: 1; transform: scale(1); }
          50% { opacity: 0.8; transform: scale(1.1); }
        }
        .stagger-anim { animation: slideUpFade 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
        .spring-btn:active { animation: springScale 0.3s forwards; }
        .gradient-ring { 
           background: linear-gradient(135deg, #6366F1, #EC4899, #FBBF24);
           background-size: 200% 200%;
           animation: rotateGradient 8s linear infinite;
        }
        .hide-scrollbar::-webkit-scrollbar { display: none; }
        .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        input, textarea, select { font-family: inherit; }
        input:focus, textarea:focus, select:focus { outline: 2px solid #6366F1; outline-offset: -1px; }
      `}</style>
    {splashState !== 'hidden' && <SplashView />}
    <div 
      onAnimationEnd={(e) => {
        if (e.animationName === 'slideUpApp' && splashState === 'animating_out') {
          setSplashState('hidden');
        }
      }}
      style={{ 
        minHeight: '100dvh', display: splashState === 'visible' ? 'none' : 'flex', flexDirection: 'column', 
        background: 'linear-gradient(135deg, #FFF1F2 0%, #EEF2FF 100%)',
        fontFamily: 'system-ui, -apple-system, sans-serif',
        paddingTop: 'max(env(safe-area-inset-top, 20px), 20px)',
        maxWidth: 480, margin: '0 auto', position: 'relative',
        color: '#1A1A1A', zIndex: 10,
        animation: splashState === 'animating_out' ? 'slideUpApp 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards' : 'none'
      }}>
      {/* Top Bar */}
      {activeTab !== 'profile' && (
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 16px', flexShrink: 0, gap: 8 }}>
          <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-0.5px' }}>tagalong</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <button
              onClick={() => {
                if (typeof share === 'function') {
                  share({
                    title: 'tagalong',
                    text: "what's happening at uts ✨ join me on tagalong"
                  });
                }
              }}
              aria-label="Share tagalong"
              className="spring-btn"
              style={{
                display: 'inline-flex', alignItems: 'center', gap: 6,
                padding: '8px 12px', borderRadius: 99, border: 'none',
                background: 'linear-gradient(135deg, #6366F1, #EC4899)',
                color: '#fff', fontSize: 13, fontWeight: 700, letterSpacing: 0.3,
                boxShadow: '0 4px 12px rgba(236,72,153,0.25)', cursor: 'pointer'
              }}
            >
              <span aria-hidden="true">📤</span> Invite
            </button>
            <Avatar src={me.avatarUrl} handle={me.handle} size={36} />
          </div>
        </div>
      )}

{/* Main Content Area */}
      {activeTab === 'feed' && <FeedView />}
      {activeTab === 'discover' && <DiscoverView />}
      {activeTab === 'profile' && <ProfileView />}

{/* Bottom Nav */}
      <div style={{ 
        position: 'fixed', bottom: 0, left: 0, right: 0, background: '#fff', 
        paddingBottom: 'env(safe-area-inset-bottom, 0px)',
        borderTop: '1px solid rgba(0,0,0,0.05)', display: 'flex', justifyContent: 'space-around',
        maxWidth: 480, margin: '0 auto', zIndex: 40,
        boxShadow: '0 -4px 24px rgba(0,0,0,0.04)'
      }}>
        {[ 
          { id: 'feed', icon: '🏠', label: 'Feed' },
          { id: 'discover', icon: '🔍', label: 'Discover' },
          { id: 'post', icon: '➕', isAction: true },
          { id: 'profile', icon: '👤', label: 'Profile' }
        ].map(tab => (
          <button 
            key={tab.id}
            onClick={() => tab.id === 'post' ? setIsPosting(true) : setActiveTab(tab.id)}
            style={{ 
              flex: 1, padding: '12px 0', border: 'none', background: 'transparent', 
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, 
              color: activeTab === tab.id ? '#1A1A1A' : '#9CA3AF',
              position: 'relative'
            }}
          >
            {tab.isAction ? (
              <div className="spring-btn" style={{ 
                background: 'linear-gradient(135deg, #6366F1, #EC4899)', width: 44, height: 44, borderRadius: 22, 
                display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: 20,
                boxShadow: '0 4px 12px rgba(236,72,153,0.3)', transform: 'translateY(-8px)'
              }}>
                <span aria-hidden="true">{tab.icon}</span>
              </div>
            ) : (
              <>
                <span style={{ fontSize: 24, filter: activeTab === tab.id ? 'grayscale(0)' : 'grayscale(1)', opacity: activeTab === tab.id ? 1 : 0.6, transition: 'all 0.2s', transform: activeTab === tab.id ? 'scale(1.1) translateY(-2px)' : 'scale(1)' }}>{tab.icon}</span>
                <span style={{ fontSize: 10, fontWeight: 600 }}>{tab.label}</span>
              </>
            )}
          </button>
        ))}
      </div>