⏳

; return {alt

; }; // 8. MODALS const CrowdReporter = ({ hallId, onClose }) => { const handleReport = (level, color) => { const newReport = { id: Date.now().toString(), hallId, level, color, isDemo: false }; if (isMultiplayer && typeof pushToSharedArray === 'function') { pushToSharedArray('crowds', newReport); } else { const withoutDemo = (allCrowds || []).filter(c => !c.isDemo); writePatch({ crowds: [...withoutDemo, { ...newReport, _user: { displayName: user?.name || 'You' }, _timestamp: Date.now() }] }); } // Visual ping WOW moment const card = document.getElementById(`hall-card-${hallId}`); if (card) { card.style.transform = 'scale(1.05)'; setTimeout(() => card.style.transform = 'scale(1)', 200); } onClose(); }; return (

How's the line? 🧍‍♂️🧍‍♀️

); }; const ReviewComposer = ({ hallId, onClose }) => { const [rating, setRating] = useState(0); const [text, setText] = useState(''); const [dishName, setDishName] = useState(''); const [photoAssetId, setPhotoAssetId] = useState(null); const [uploading, setUploading] = useState(false); const handlePhoto = async () => { if (!pickAndUploadPhoto) return; setUploading(true); try { const result = await pickAndUploadPhoto({ target: 'shared', visibility: 'public' }); if (result.cancelled) return; setPhotoAssetId(result.assetId); } catch (e) { console.error(e); } finally { setUploading(false); } }; const handleSubmit = () => { if (!rating || !text) return; const newReview = { id: Date.now().toString(), hallId, rating, text, dishName, photoAssetId, isDemo: false }; if (isMultiplayer && typeof pushToSharedArray === 'function') { pushToSharedArray('reviews', newReview); } else { const withoutDemo = (allReviews || []).filter(r => !r.isDemo); writePatch({ reviews: [{ ...newReview, _user: { displayName: user?.name || 'You', handle: user?.handle }, _timestamp: Date.now() }, ...withoutDemo] }); } triggerConfetti(); onClose(); }; return (

Rate your meal 🧑‍🍳

{[1,2,3,4,5].map(star => ( setRating(star)} style={{cursor: 'pointer', opacity: rating >= star ? 1 : 0.3}}> ⭐ ))}

setDishName(e.target.value)} style={styles.input} />

setText(e.target.value)}
            style={{...styles.input, height: 80, resize: 'none'}}
          />

<div style={{display: 'flex', gap: 12, marginTop: 12}}>
             <button onClick={handlePhoto} style={{...styles.btn, flex: 1, backgroundColor: photoAssetId ? '#e6ffe6' : '#f0f0f0'}} disabled={uploading}>
               {uploading ? '⏳' : photoAssetId ? '✅ Photo Added' : '📸 Add Photo'}
             </button>
          </div>

<div style={{display: 'flex', gap: 12, marginTop: 24}}>
            <button onClick={onClose} style={{...styles.btn, flex: 1, backgroundColor: '#eee'}}>Cancel</button>
            <button onClick={handleSubmit} style={{...styles.btn, flex: 2, backgroundColor: '#FF4500', color: 'white', opacity: (rating && text) ? 1 : 0.5}} disabled={!rating || !text}>
              Post Review ✨
            </button>
          </div>
        </div>
      </div>
    );
  };

// 9. SCREENS
  const HallDetailView = ({ hall }) => {
    const stats = getHallStats(hall.id);
    
    return (
      <div style={{...styles.screen, paddingBottom: 100, overflowY: 'auto'}}>
        <div style={{display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20}}>
          <button onClick={() => setSelectedHallId(null)} style={{fontSize: 24, background: 'none', border: 'none', padding: 8}}>←</button>
          <h1 style={{margin: 0, fontSize: 24}}>{hall.name}</h1>
        </div>

<div style={styles.card}>
          <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start'}}>
            <div>
              <div style={{fontSize: 32, fontWeight: 'bold'}}>{stats.avgRating} <span style={{fontSize: 20}}>⭐</span></div>
              <div style={{opacity: 0.7}}>{stats.reviewCount} reviews</div>
            </div>
            <div style={{textAlign: 'right'}}>
              <div style={{...styles.badge, backgroundColor: stats.currentCrowd.color + '33', color: stats.currentCrowd.color}}>
                 {stats.currentCrowd.level}
              </div>
              <div style={{fontSize: 12, marginTop: 4, opacity: 0.6}}>Live status</div>
            </div>
          </div>
          
          <div style={{marginTop: 16, padding: 12, backgroundColor: '#FFF5EE', borderRadius: 12, border: '2px solid #FFE4E1'}}>
            <div style={{fontSize: 12, fontWeight: 'bold', color: '#FF4500', textTransform: 'uppercase'}}>🏆 Top Dish Trending</div>
            <div style={{fontSize: 18, fontWeight: 'bold'}}>{stats.topDish}</div>
          </div>

<div style={{marginTop: 16, fontSize: 14, opacity: 0.8}}>
            <span role="img" aria-label="clock">⏰</span> {hall.hours}
          </div>
        </div>

<div style={{display: 'flex', gap: 12, marginTop: 16}}>
          <button onClick={() => setShowCrowdModal(true)} style={{...styles.bigBtn, flex: 1, backgroundColor: '#9370DB', color: 'white'}}>
             📍 Report Line
          </button>
          <button onClick={() => setShowReviewModal(true)} style={{...styles.bigBtn, flex: 1, backgroundColor: '#FF4500', color: 'white'}}>
             ✍️ Add Review
          </button>
        </div>

<h3 style={{marginTop: 32, marginBottom: 16}}>Campus Chatter 🗣️</h3>
        {(stats.reviews || []).length === 0 ? (
          <div style={{textAlign: 'center', padding: 32, opacity: 0.5}}>No reviews yet. Be the first!</div>
        ) : (
          <div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
            {(stats.reviews || []).map(r => (
               <div key={r.id} style={{...styles.card, padding: 16}}>
                 <div style={{display: 'flex', justifyContent: 'space-between', marginBottom: 8}}>
                   <div style={{fontWeight: 'bold', display: 'flex', alignItems: 'center', gap: 6}}>
                     <span onClick={() => r._user?.handle && openProfile && openProfile(r._user.handle)} style={{cursor: 'pointer'}}>
                       {r.isDemo ? '🤖 ' : '👤 '}{r._user?.displayName || 'Anonymous'}
                     </span>
                     {r.isDemo && <span style={styles.demoTag}>DEMO</span>}
                   </div>
                   <div>
                     {Array(5).fill(0).map((_, i) => (
                       <span key={i} style={{opacity: i < r.rating ? 1 : 0.2, fontSize: 14}}>⭐</span>
                     ))}
                   </div>
                 </div>
                 {r.dishName && <div style={{fontSize: 13, color: '#FF4500', fontWeight: 'bold', marginBottom: 4}}>Had: {r.dishName}</div>}
                 <div style={{fontSize: 15, lineHeight: 1.4}}>{r.text}</div>
                 {r.photoAssetId && (
                   <AsyncImage assetId={r.photoAssetId} style={{width: '100%', height: 200, borderRadius: 12, marginTop: 12}} />
                 )}
               </div>
            ))}
          </div>
        )}

{showCrowdModal && <CrowdReporter hallId={hall.id} onClose={() => setShowCrowdModal(false)} />}
        {showReviewModal && <ReviewComposer hallId={hall.id} onClose={() => setShowReviewModal(false)} />}
      </div>
    );
  };

const FeedView = () => (
    <div style={{...styles.screen, overflowY: 'auto', paddingBottom: 100}}>
      <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '16px', paddingBottom: 0}}>
        <h1 style={{margin: 0, fontSize: 28, color: '#FF4500'}}>Chow Compass 🧭</h1>
        <button onClick={() => share && share({ title: 'Chow Compass 🧭', text: 'Join me on Chow Compass — rate dining halls, see live wait times & top dishes!' })} style={{...styles.btn, padding: '8px 12px', fontSize: 14}}>🔗 Share</button>
      </div>
      
      <p style={{padding: '0 16px', margin: '8px 0 20px', opacity: 0.7, fontSize: 14}}>
        {(memberList || []).length > 1 ? `Feasting with ${memberList.length} foodies 👥` : 'Track your campus bites 🍕'}
      </p>

<div style={{display: 'flex', flexDirection: 'column', gap: 16, padding: '0 16px'}}>
        {(halls || []).map(hall => {
          const stats = getHallStats(hall.id);
          return (
            <div 
              key={hall.id} 
              id={`hall-card-${hall.id}`}
              onClick={() => setSelectedHallId(hall.id)}
              style={{...styles.card, cursor: 'pointer', transition: 'transform 0.2s ease'}}
            >
              <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start'}}>
                <h2 style={{margin: '0 0 8px 0', fontSize: 20}}>{hall.name}</h2>
                <div style={{...styles.badge, backgroundColor: stats.currentCrowd.color + '33', color: stats.currentCrowd.color}}>
                  {stats.currentCrowd.level}
                </div>
              </div>
              
              <div style={{display: 'flex', alignItems: 'center', gap: 12, marginTop: 8}}>
                <div style={{fontWeight: 'bold', fontSize: 18}}>{stats.avgRating} <span style={{fontSize: 16}}>⭐</span></div>
                <div style={{width: 4, height: 4, borderRadius: '50%', backgroundColor: '#ccc'}} />
                <div style={{opacity: 0.6, fontSize: 14}}>{stats.reviewCount} reviews</div>
              </div>

<div style={{marginTop: 16, display: 'flex', alignItems: 'center', gap: 8, padding: '8px 12px', backgroundColor: '#FFF5EE', borderRadius: 8}}>
                 <span style={{fontSize: 16}}>🏆</span>
                 <span style={{fontSize: 13, opacity: 0.7}}>Trending:</span>
                 <strong style={{fontSize: 14, color: '#FF4500'}}>{stats.topDish}</strong>
              </div>
            </div>
          );
        })}
      </div>

<h3 style={{padding: '0 16px', marginTop: 32, marginBottom: 4}}>Recent Bites Feed 📸</h3>
      <p style={{padding: '0 16px', margin: '0 0 16px 0', fontSize: 13, opacity: 0.6}}>Tap a dining hall above to post your own review!</p>
      <div style={{display: 'flex', flexDirection: 'column', gap: 16, padding: '0 16px'}}>
        {(allReviews || []).slice().sort((a, b) => b._timestamp - a._timestamp).map(r => {
          const hall = (halls || []).find(h => h.id === r.hallId);
          return (
            <div key={r.id} onClick={() => setSelectedHallId(r.hallId)} style={{...styles.card, padding: 16, cursor: 'pointer'}}>
               <div style={{display: 'flex', justifyContent: 'space-between', marginBottom: 8}}>
                 <div style={{fontWeight: 'bold', display: 'flex', alignItems: 'center', gap: 6}}>
                   <span>{r.isDemo ? '🤖 ' : '👤 '}{r._user?.displayName || 'Anonymous'}</span>
                   <span style={{fontSize: 12, opacity: 0.6}}>@ {hall?.name}</span>
                 </div>
                 <div>
                   {Array(5).fill(0).map((_, i) => (
                     <span key={i} style={{opacity: i < r.rating ? 1 : 0.2, fontSize: 14}}>⭐</span>
                   ))}
                 </div>
               </div>
               {r.dishName && <div style={{fontSize: 13, color: '#FF4500', fontWeight: 'bold', marginBottom: 4}}>Had: {r.dishName}</div>}
               <div style={{fontSize: 15, lineHeight: 1.4}}>{r.text}</div>
               {r.photoAssetId && (
                 <AsyncImage assetId={r.photoAssetId} style={{width: '100%', height: 200, borderRadius: 12, marginTop: 12}} />
               )}
            </div>
          );
        })}
      </div>
    </div>
  );

// Main Render
  return (
    <div style={styles.container}>
      {/* Main Content Area */}
      {selectedHallId ? (
         <HallDetailView hall={(halls || []).find(h => h.id === selectedHallId)} />
      ) : (
         currentTab === 'feed' ? <FeedView /> : <MapView />
      )}

{/* Sticky Bottom Nav */}
      {!selectedHallId && (
        <div style={styles.tabBar}>
          <button 
            onClick={() => setCurrentTab('feed')}
            style={{...styles.tabBtn, color: currentTab === 'feed' ? '#FF4500' : '#888'}}
          >
            <div style={{fontSize: 24, marginBottom: 4}}>📋</div>
            Feed
          </button>
          <button 
            onClick={() => setCurrentTab('map')}
            style={{...styles.tabBtn, color: currentTab === 'map' ? '#FF4500' : '#888'}}
          >
            <div style={{fontSize: 24, marginBottom: 4}}>📍</div>
            Map
          </button>
        </div>
      )}

{/* Confetti Overlay */}
      {confetti && (
        <div style={{position: 'fixed', inset: 0, pointerEvents: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 100, zIndex: 9999, animation: 'fadeUp 2s ease-out forwards'}}>
          🎉🎊✨
        </div>
      )}

const styles = {
  container: {
    minHeight: '100dvh',
    display: 'flex',
    flexDirection: 'column',
    backgroundColor: '#FFFBEA',
    fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
    paddingTop: 'max(env(safe-area-inset-top, 20px), 20px)',
    paddingBottom: 'env(safe-area-inset-bottom, 20px)',
    maxWidth: 480,
    margin: '0 auto',
    width: '100%',
    boxSizing: 'border-box',
    position: 'relative'
  },
  screen: {
    flex: 1,
    display: 'flex',
    flexDirection: 'column',
  },
  card: {
    backgroundColor: '#fff',
    borderRadius: 20,
    padding: 20,
    border: '3px solid #FFE4E1',
    boxShadow: '4px 4px 0px rgba(255, 69, 0, 0.1)',
  },
  badge: {
    padding: '4px 8px',
    borderRadius: 12,
    fontSize: 12,
    fontWeight: 'bold',
    display: 'inline-block',
  },
  btn: {
    padding: '12px 20px',
    borderRadius: 16,
    border: 'none',
    fontSize: 16,
    fontWeight: 'bold',
    cursor: 'pointer',
    backgroundColor: '#fff',
    border: '2px solid #ddd',
  },
  bigBtn: {
    padding: '16px 20px',
    borderRadius: 20,
    border: 'none',
    fontSize: 16,
    fontWeight: 'bold',
    cursor: 'pointer',
    border: '2px solid rgba(0,0,0,0.1)',
    boxShadow: '0 4px 0 rgba(0,0,0,0.1)',
  },
  input: {
    width: '100%',
    padding: 16,
    borderRadius: 16,
    border: '2px solid #ddd',
    fontSize: 16,
    boxSizing: 'border-box',
    backgroundColor: '#fafafa',
  },
  tabBar: {
    position: 'fixed',
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: 'rgba(255, 255, 255, 0.95)',
    backdropFilter: 'blur(10px)',
    borderTop: '1px solid #eee',
    display: 'flex',
    justifyContent: 'space-around',
    paddingBottom: 'max(env(safe-area-inset-bottom, 20px), 10px)',
    paddingTop: 10,
    zIndex: 100,
    maxWidth: 480,
    margin: '0 auto',
  },
  tabBtn: {
    background: 'none',
    border: 'none',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    fontSize: 12,
    fontWeight: 'bold',
    padding: '8px 24px',
    cursor: 'pointer',
  },
  modalOverlay: {
    position: 'fixed',
    inset: 0,
    backgroundColor: 'rgba(0,0,0,0.5)',
    display: 'flex',
    alignItems: 'flex-end',
    zIndex: 1000,
  },
  modalContent: {
    backgroundColor: '#fff',
    width: '100%',
    borderTopLeftRadius: 32,
    borderTopRightRadius: 32,
    padding: '32px 24px calc(env(safe-area-inset-bottom, 20px) + 24px)',
    boxSizing: 'border-box',
    boxShadow: '0 -10px 40px rgba(0,0,0,0.2)',
    maxWidth: 480,
    margin: '0 auto',
  },
  demoTag: {
    fontSize: 10,
    backgroundColor: '#eee',
    padding: '2px 6px',
    borderRadius: 8,
    fontWeight: 'bold',
    color: '#888',
    marginLeft: 8
  }
}</article></body></html>