{/* HEADER */}

COLLECTIVE BITE

{/* CREW BAR */}

COMRADES:

{(memberList || []).map((m, i) => (

m.handle ? openProfile(m.handle) : null} style={{ width: '36px', height: '36px', borderRadius: '0px', border: '3px solid #111', backgroundColor: ['#E10600', '#F5E6C8', '#8B0000', '#2F4F4F'][i % 4], color: ['#F5E6C8', '#111', '#F5E6C8', '#F5E6C8'][i % 4], display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 'bold', fontFamily: theme.fontDisplay, backgroundImage: m.avatarUrl ? `url(${m.avatarUrl})` : 'none', backgroundSize: 'cover', flexShrink: 0, cursor: m.handle ? 'pointer' : 'default' }} title={m.displayName} > {!m.avatarUrl && (m.displayName?.[0]?.toUpperCase() || 'X')}

))}

{/* ACTION BAR: ADD SPOT */}

{/* RECENT ACTIVITY FEED */} {(appData?.activity || []).length > 0 && (

ACTION LOG

{(appData?.activity || []).slice(0, 8).map((entry, idx) => { const entryUser = entry?._user || {}; const timeDiff = Date.now() - (entry?._timestamp || Date.now()); const timeLabel = timeDiff < 60000 ? 'just now' : timeDiff < 3600000 ? `${Math.floor(timeDiff / 60000)}m ago` : `${Math.floor(timeDiff / 3600000)}h ago`; return (

0 ? '1px solid #eee' : 'none' }}>

entryUser.handle ? openProfile(entryUser.handle) : null} style={{ width: '24px', height: '24px', borderRadius: '50%', border: '1.5px solid #000', background: entryUser.profileImageUrl ? `url(${entryUser.profileImageUrl}) center/cover` : ['#FF00FF','#00FF00','#00FFFF','#FFFF00'][idx % 4], display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '10px', fontWeight: 'bold', flexShrink: 0, cursor: entryUser.handle ? 'pointer' : 'default' }} > {!entryUser.profileImageUrl && (entryUser.displayName?.[0]?.toUpperCase() || '👤')}

entryUser.handle ? openProfile(entryUser.handle) : null} style={{ fontWeight: 'bold', cursor: entryUser.handle ? 'pointer' : 'default', fontFamily: theme.fontMono, textTransform: 'uppercase' }} > {entryUser.displayName || 'SOMEONE'} {' '}{entry?.action === 'voted' ? 'ENDORSED' : 'REVOKED SUPPORT FOR'}{' '} {entry?.restaurantName || ''}

[{timeLabel}]

); })}

)} {/* MAIN CONTENT */}

{/* FILTER BAR */}

{Object.entries(prefs || {}).filter(([k, v]) => v !== 'Any' && v !== false).map(([k, v]) => ( {typeof v === 'boolean' ? (v ? '🟢 Open' : k) : v} { e.stopPropagation(); updatePref(k, k === 'openOnly' ? false : 'Any'); }} style={{ cursor: 'pointer', marginLeft: '2px' }}>✕ ))} {Object.entries(prefs || {}).filter(([k, v]) => v !== 'Any' && v !== false).length === 0 && ( All Vibes Active 💥 )}

{/* RESTAURANT COUNT */}

{(filteredRestaurants || []).length} LOCATIONS FOUND {(filteredRestaurants || []).length > visibleCount && ( SHOWING {Math.min(visibleCount, (filteredRestaurants || []).length)} )}

{/* RESTAURANT LIST */}

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

!!!

NO MATCHES FOUND

BROADEN YOUR DIRECTIVES OR SUBMIT A NEW LOCATION.

) : ( (filteredRestaurants || []).slice(0, visibleCount).map(r => { const rVotes = votes[r.id] || []; const hasVoted = (rVotes || []).some(v => v.id === (user?.id || 'me')); return (

{/* Image Header */}

{r.img}

{/* Area badge */}

🚶 {r.walkMins || '?'} MIN

{/* Vote count badge */} {(rVotes || []).length > 0 && (

ENDORSED X{(rVotes || []).length}

)}

{/* Content */}

{r.name}

{r.budget} | 🚶 {r.distance} {r.deal && r.deal !== '-' && (<>|💰 DEAL)}

{r.isCustom && (

ADDED BY: {r.addedBy}

)}

📍 {r.suburb} {(r.tags || []).slice(0, 4).map(t => ( {t} ))}

{/* Action & Avatars */}

{(rVotes || []).map((v, i) => (

{ e.stopPropagation(); (v._user?.handle || v.handle) ? openProfile(v._user?.handle || v.handle) : null; }} style={{ width: '28px', height: '28px', borderRadius: '0px', border: '2px solid #000', background: ['#E10600', '#F5E6C8', '#8B0000', '#2F4F4F'][i % 4], color: ['#F5E6C8', '#111', '#F5E6C8', '#F5E6C8'][i % 4], marginLeft: '-4px', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '12px', fontWeight: 'bold', backgroundImage: (v._user?.profileImageUrl || v.avatarUrl) ? `url(${v._user?.profileImageUrl || v.avatarUrl})` : 'none', backgroundSize: 'cover', zIndex: (rVotes || []).length - i, cursor: (v._user?.handle || v.handle) ? 'pointer' : 'default' }} title={v._user?.displayName || v.displayName || ''} > {!(v._user?.profileImageUrl || v.avatarUrl) && ((v._user?.displayName || v.displayName)?.[0]?.toUpperCase() || '👤')}

))}

); }) )}

{/* VIEW MORE BUTTON */} {(filteredRestaurants || []).length > visibleCount && (

)} {/* STICKY BOTTOM BAR */} {!isRevealed && (

{/* Stats bar */}

{totalVotes} ENDORSEMENTS | {(filteredRestaurants || []).length} TARGETS | {(memberList || []).length} COMRADES

)} {/* FILTER BOTTOM SHEET */}

FILTER DIRECTIVES

{/* Filter Sections */} {[ { label: '💰 Budget', key: 'budget', opts: ['Any', '$', '$$', '$$$'] }, { label: '✨ Vibe', key: 'vibe', opts: ['Any', 'Grunge', 'Trendy', 'Lively', 'Classic', 'Chill', 'Cozy'] }, { label: '📍 Area', key: 'area', opts: ALL_SUBURBS }, { label: '🍽️ Cuisine', key: 'cuisine', opts: ALL_CUISINES }, { label: '🌱 Dietary', key: 'dietary', opts: ALL_DIETARY }, { label: '🚶 Walk Time', key: 'distance', opts: ['Any', '<5 min', '<10 min', '<15 min'] }, { label: '🏷️ Tag', key: 'tag', opts: ALL_TAGS } ].map(section => (

{section.label}

{(section.opts || []).map(opt => ( ))}

))} {/* Open Only Toggle */}

🟢 Open Now Only

{/* ADD SPOT BOTTOM SHEET */}

NOMINATE A LOCATION

NAME (REQUIRED) setNewSpotForm({...newSpotForm, name: e.target.value})} style={{ width: '100%', padding: '12px', border: theme.border, background: '#fff', fontFamily: theme.fontMono, fontSize: '16px', boxSizing: 'border-box' }} />

LINK / URL setNewSpotForm({...newSpotForm, url: e.target.value})} placeholder="https://..." style={{ width: '100%', padding: '12px', border: theme.border, background: '#fff', fontFamily: theme.fontMono, fontSize: '16px', boxSizing: 'border-box' }} />

ZONE/SUBURB setNewSpotForm({...newSpotForm, suburb: e.target.value})} style={{ width: '100%', padding: '12px', border: theme.border, background: '#fff', fontFamily: theme.fontMono, fontSize: '16px', boxSizing: 'border-box' }} />

BUDGET

CUISINE (COMMA SEPARATED) setNewSpotForm({...newSpotForm, cuisine: e.target.value})} placeholder="e.g. Pub, Burgers" style={{ width: '100%', padding: '12px', border: theme.border, background: '#fff', fontFamily: theme.fontMono, fontSize: '16px', boxSizing: 'border-box' }} />

WHY HERE?

setNewSpotForm({...newSpotForm, note: e.target.value})} rows={3} style={{ width: '100%', padding: '12px', border: theme.border, background: '#fff', fontFamily: theme.fontMono, fontSize: '16px', boxSizing: 'border-box', resize: 'vertical' }} />
          </div>
          <button onClick={submitAddSpot} style={{...btnStyle('submit-spot', theme.accent1), color: '#fff', width: '100%', padding: '16px', marginTop: '8px', fontSize: '18px'}}>
            SUBMIT TO COLLECTIVE
          </button>
        </div>
      </div>

{/* OVERLAY BACKDROP */}
      {(isFilterOpen || isAddSpotOpen) && (
        <div 
          onClick={() => { setIsFilterOpen(false); setIsAddSpotOpen(false); }}
          style={{
            position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
            background: 'rgba(17,17,17,0.7)', zIndex: 99,
            backdropFilter: 'blur(2px)'
          }}
        />
      )}

{/* WINNER REVEAL FULL SCREEN */}
      {isRevealed && winner && (
        <div style={{
          position: 'fixed',
          top: 0, left: 0, right: 0, bottom: 0,
          background: theme.bg,
          zIndex: 200,
          display: 'flex',
          flexDirection: 'column',
          padding: 'max(env(safe-area-inset-top, 20px), 20px) 20px env(safe-area-inset-bottom, 20px) 20px',
          overflowY: 'auto'
        }}>
          
          {showConfetti && (
            <div style={{
              position: 'absolute', top: 0, left: 0, right: 0, bottom: 0,
              pointerEvents: 'none', zIndex: 201,
              display: 'flex', justifyContent: 'center', alignItems: 'center',
              background: 'repeating-linear-gradient(45deg, rgba(225,6,0,0.2), rgba(225,6,0,0.2) 20px, transparent 20px, transparent 40px)',
              animation: 'flash 0.5s ease-out forwards'
            }} />
          )}
          
          <style>{`
            @keyframes flash { 
              0% { opacity: 1; } 
              100% { opacity: 0; }
            }
            @keyframes pulse { 
              0% { transform: scale(1) rotate(-1deg); } 
              50% { transform: scale(1.02) rotate(1deg); }
              100% { transform: scale(1) rotate(-1deg); }
            }
          `}</style>

<div style={{ background: '#111', color: '#fff', padding: '12px', border: '4px solid #fff', margin: '16px 0', textAlign: 'center', boxShadow: '4px 4px 0px #111' }}>
            <h2 style={{ margin: 0, fontFamily: theme.fontDisplay, fontSize: '28px', textTransform: 'uppercase', letterSpacing: '2px' }}>
              {appData?.wasSurprise ? 'RANDOM DEPLOYMENT ASSIGNED' : 'COLLECTIVE DECISION REACHED'}
            </h2>
          </div>

{/* WINNER CARD */}
          <div style={{
            background: '#fff',
            border: theme.border,
            borderRadius: theme.radius,
            boxShadow: '6px 6px 0px #000',
            overflow: 'hidden',
            animation: 'pulse 2s infinite',
            marginBottom: '20px'
          }}>
            <div style={{
              height: '140px',
              background: `linear-gradient(135deg, ${winner.color}ee, ${winner.color}88)`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: '72px', position: 'relative', borderBottom: theme.border
            }}>
              {winner.img}
              <div style={{ position: 'absolute', top: '10px', left: '10px', background: '#111', color: '#fff', border: '2px solid #fff', padding: '4px 10px', fontFamily: theme.fontDisplay, fontSize: '16px', fontWeight: 'bold', letterSpacing: '1px' }}>
                [ PRIME DIRECTIVE ]
              </div>
            </div>
            <div style={{ padding: '20px', textAlign: 'center', background: '#fff' }}>
              <h1 style={{ fontFamily: theme.fontDisplay, fontSize: '42px', margin: '0 0 6px 0', textTransform: 'uppercase', color: theme.accent1, textShadow: '2px 2px 0px #111' }}>
                {winner.name}
              </h1>
              
              {winner.isCustom && (
                <div style={{ display: 'inline-block', background: '#111', color: '#fff', padding: '4px 8px', fontFamily: theme.fontMono, fontSize: '12px', fontWeight: 'bold', marginBottom: '12px', border: '2px solid #111' }}>
                  SUBMITTED BY: {winner.addedBy}
                </div>
              )}

<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '8px', fontSize: '16px', fontFamily: theme.fontMono, fontWeight: 'bold', marginBottom: '12px', flexWrap: 'wrap' }}>
                <span>ZONE: {winner.suburb}</span>
                <span>|</span>
                <span style={{ background: '#111', color: '#fff', padding: '0 4px' }}>{winner.budget}</span>
                <span>|</span>
                <span style={{ color: theme.accent2 }}>[ {winner.rating} ]</span>
              </div>
              <div style={{ display: 'flex', gap: '6px', justifyContent: 'center', flexWrap: 'wrap', marginBottom: '16px' }}>
                {(winner.cuisine || []).map(c => (
                  <span key={c} style={{ border: '2px solid #111', padding: '3px 8px', fontFamily: theme.fontMono, fontSize: '12px', fontWeight: 'bold' }}>CLASS: {c}</span>
                ))}
              </div>
              <div style={{ display: 'flex', justifyContent: 'center', gap: '6px', marginBottom: '16px' }}>
                <span style={{ background: winner.isOpen ? '#111' : theme.accent1, color: '#fff', padding: '4px 10px', fontFamily: theme.fontMono, fontSize: '13px', fontWeight: 'bold', border: '2px solid #111' }}>
                  {winner.isOpen ? `OPEN TIL ${winner.openUntil}` : 'CURRENTLY CLOSED'}
                </span>
                {(votes[winner.id]?.length || 0) > 0 && (
                  <span style={{ background: theme.accent2, color: '#fff', padding: '4px 10px', fontFamily: theme.fontMono, fontSize: '13px', fontWeight: 'bold', border: '2px solid #111' }}>
                    [ {(votes[winner.id]?.length || 0)} ENDORSEMENTS ]
                  </span>
                )}
              </div>
              
              {/* WHY THIS MATCHES */}
              <div style={{ 
                background: theme.bg, padding: '16px',
                border: '4px solid #111', fontSize: '15px', lineHeight: '1.6', textAlign: 'left'
              }}>
                <div style={{ fontFamily: theme.fontDisplay, fontSize: '18px', textTransform: 'uppercase', marginBottom: '8px', borderBottom: '2px solid #111', paddingBottom: '4px' }}>STATEMENT OF PURPOSE</div>
                <div style={{ marginBottom: '12px', fontFamily: theme.fontMono, fontWeight: 'bold' }}>
                  {appData?.wasSurprise
                    ? `RANDOM DEPLOYMENT ASSIGNED: This operation directs all personnel to ${winner.suburb}. Prepare for deployment.`
                    : `Supported by ${(votes[winner.id]?.length || 0)} comrades. This location meets the strict criteria established by the collective.`
                  }
                </div>
                {(winner.matchReasons || []).length > 0 && (
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '6px', fontFamily: theme.fontMono }}>
                    {(winner.matchReasons || []).map((reason, i) => (
                      <div key={i} style={{ fontSize: '13px' }}>► {reason}</div>
                    ))}
                  </div>
                )}
                {winner.url && (
                  <a href={winner.url} target="_blank" rel="noreferrer" style={{ display: 'block', marginTop: '16px', background: '#111', color: '#fff', textAlign: 'center', padding: '10px', textDecoration: 'none', fontFamily: theme.fontDisplay, letterSpacing: '1px' }}>
                    ACCESS EXTERNAL INTEL
                  </a>
                )}
              </div>
            </div>
          </div>

{/* RUNNERS UP */}
          {(rankedRestaurants || []).length > 1 && (
            <div style={{ marginBottom: '24px', background: '#fff', border: theme.border, padding: '16px' }}>
              <h3 style={{ fontFamily: theme.fontDisplay, fontSize: '20px', textTransform: 'uppercase', margin: '0 0 12px 0', borderBottom: '2px solid #111' }}>SECONDARY TARGETS</h3>
              {(rankedRestaurants || []).slice(1).map((r, i) => (
                <div key={r.id} style={{
                  display: 'flex', alignItems: 'center', gap: '12px',
                  borderBottom: i === (rankedRestaurants || []).length - 2 ? 'none' : '2px solid #111', padding: '12px 0'
                }}>
                  <div style={{ fontSize: '24px', width: '40px', height: '40px', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#F5E6C8', border: '2px solid #111', flexShrink: 0 }}>{r.img}</div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontFamily: theme.fontDisplay, fontSize: '18px', textTransform: 'uppercase' }}>{r.name}</div>
                    <div style={{ fontSize: '12px', fontFamily: theme.fontMono, fontWeight: 'bold' }}>ZONE: {r.suburb} | {r.budget} | ENDORSEMENTS: {(votes[r.id]?.length || 0)}</div>
                  </div>
                  <div style={{ fontFamily: theme.fontDisplay, fontSize: '24px', color: '#111' }}>0{i + 2}</div>
                </div>
              ))}
            </div>
          )}

<div style={{ display: 'flex', flexDirection: 'column', gap: '16px', marginTop: 'auto' }}>
             <button 
              onPointerDown={() => setPressedBtn('share-winner')}
              onPointerUp={() => setPressedBtn(null)}
              onPointerLeave={() => setPressedBtn(null)}
              onClick={share}
              style={{...btnStyle('share-winner', '#111'), color: '#fff', padding: '16px'}}
            >
              DISTRIBUTE INTEL [SHARE]
            </button>
            
            <button 
              onPointerDown={() => setPressedBtn('reset')}
              onPointerUp={() => setPressedBtn(null)}
              onPointerLeave={() => setPressedBtn(null)}
              onClick={resetSession}
              style={{...btnStyle('reset', '#fff'), padding: '16px'}}
            >
              DISBAND AND REORGANIZE
            </button>
          </div>

</div>
      )}
    </div>
  );
}</article></body></html>