{/* Pseudo-map styling */}

BRINGELLY, NSW

{(items || []).map(item => (

{ setSelectedItem(item); handleView(item.id); }} style={{ position: 'absolute', left: `${item.x}%`, top: `${item.y}%`, transform: 'translate(-50%, -50%)', fontSize: 24, cursor: 'pointer', filter: item.claimedBy ? 'grayscale(1)' : 'drop-shadow(0 4px 4px rgba(0,0,0,0.2))', transition: 'transform 0.2s', zIndex: item.claimedBy ? 1 : 10 }} > {item.claimedBy ? '🔒' : '🐉'} {!item.claimedBy && (

)}

))}

); const renderConfetti = () => (

{(confetti || []).map(p => (

))}

); return (

{(confetti || []).length > 0 && renderConfetti()} {/* 🏮 HEADER */}

🏮

Bringelly Fortune

FIND LOCAL TREASURES

{/* Member Avatars - Single or Multiplayer */}

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

openProfile(m.handle)} style={{ width: 32, height: 32, borderRadius: '50%', border: `2px solid ${THEME.gold}`, marginLeft: -10, background: '#333', backgroundImage: `url(${m.avatarUrl})`, backgroundSize: 'cover', zIndex: 10 - i }} /> ))} {isMultiplayer && ( )}

{/* 🧭 NAVIGATION TABS */}

{/* 📜 MAIN CONTENT */}

{/* ⏳ TENSION BANNERS (Hot Hour + new today) */} {viewMode === 'list' && (

{hotHour.isLive ? 'HOT HOUR · LIVE' : 'HOT HOUR'}

{hotHour.isLive ? 'Neighbours are dropping fresh fortunes right now.' : `Drops at 5pm · in ${hotHour.hours}h ${hotHour.mins}m`}

{newTodayCount > 0 && (

NEW TODAY

+{newTodayCount} fresh {newTodayCount === 1 ? 'fortune' : 'fortunes'} this last 24 hours

)}

)} {/* 🧧 FORTUNE PROFILE CARD (top of scroll, only on list view) */} {viewMode === 'list' && hunterProfile && (

BRINGELLY FORTUNE PROFILE

{hunterProfile.archetype}

CLAIMED

{(myClaimedItems || []).length}

CONTRIBUTED

{(myContributedItems || []).length}

SAVED

~${mySavedValue}

)} {/* Empty-state quiz CTA when user is signed in but has no profile yet */} {viewMode === 'list' && user?.id && !hunterProfile && (

WHAT'S YOUR HUNTER TYPE?

Three taps. Get your Bringelly archetype.

)} {viewMode === 'map' ? renderMap() : (

{(items || []).map(item => { const viewerCount = (item.viewedBy || []).length; const isStarter = (starterFortuneIds || []).indexOf(item.id) !== -1; return (

{ setSelectedItem(item); handleView(item.id); }} style={{ background: `linear-gradient(135deg, ${THEME.red} 0%, #A61C1C 100%)`, border: `2px solid ${item.claimedBy ? '#555' : (isStarter ? THEME.gold : THEME.goldDark)}`, boxShadow: isStarter && !item.claimedBy ? `0 0 0 2px ${THEME.gold}, 0 4px 16px rgba(255,215,0,0.3)` : '0 4px 12px rgba(0,0,0,0.3)', borderRadius: 16, padding: 16, display: 'flex', alignItems: 'center', gap: 16, position: 'relative', transform: item.claimedBy ? 'scale(0.98)' : 'scale(1)', opacity: item.claimedBy ? 0.7 : 1, transition: 'transform 0.2s' }} > {/* Decorative Knot */}

{item.claimedBy ? '🔒' : '🎀'}

{isStarter && !item.claimedBy && (

FOR YOU

)}

{item.emoji}

{item.title}

📍 {item.location}

{viewerCount > 0 && !item.claimedBy && (

👀 {viewerCount} {viewerCount === 1 ? 'neighbour' : 'neighbours'} eyeing this

)} {!item.claimedBy && item.expiresAt && (

⏳ {formatExpiry(item.expiresAt)}

)} {item.claimedBy && (

Claimed by {item.claimedByName}

)}

{!item.claimedBy && (

›

)}

); })}

)}

{/* ➕ FAB */} {/* 🧧 ITEM DETAIL MODAL */} {selectedItem && (

setSelectedItem(null)}>

e.stopPropagation()} style={{ width: '100%', maxWidth: 400, background: THEME.paper, borderRadius: 24, padding: 24, position: 'relative', border: `4px solid ${THEME.red}`, boxShadow: `0 0 0 4px ${THEME.gold}`, textAlign: 'center', color: THEME.text }} >

{selectedItem.emoji}

{selectedItem.title}

📍 Location:
{selectedItem.location}

📝 Details:
{selectedItem.description}

Posted by {selectedItem.createdByName}

{!selectedItem.claimedBy ? ( ) : selectedItem.claimedBy === user?.id ? (

🧧 You claimed this fortune!

) : (

🔒 Already claimed by {selectedItem.claimedByName}

)}

)} {/* 📝 ADD MODAL (BOTTOM SHEET) */}

🏮 Share a Fortune

setNewItem({...newItem, title: e.target.value})} style={{ padding: 16, borderRadius: 12, border: '1px solid #ccc', fontSize: 16 }} /> setNewItem({...newItem, location: e.target.value})} style={{ padding: 16, borderRadius: 12, border: '1px solid #ccc', fontSize: 16 }} />

setNewItem({...newItem, description: e.target.value})}
            style={{ padding: 16, borderRadius: 12, border: '1px solid #ccc', fontSize: 16, height: 80, fontFamily: 'sans-serif' }}
          />
          <div style={{ display: 'flex', gap: 12 }}>
            <button 
              onClick={() => setShowAddModal(false)}
              style={{ flex: 1, padding: 16, borderRadius: 12, background: '#eee', border: 'none', color: '#333', fontSize: 16, fontWeight: 600 }}
            >Cancel</button>
            <button 
              onClick={handleAddItem}
              style={{ flex: 1, padding: 16, borderRadius: 12, background: THEME.red, border: 'none', color: THEME.gold, fontSize: 16, fontWeight: 600 }}
            >Share Fortune</button>
          </div>
        </div>
      </div>

{/* Modal Backdrop */}
      {showAddModal && (
        <div
          onClick={() => setShowAddModal(false)}
          style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)', zIndex: 1900 }}
        />
      )}

{/* 🧧 FORTUNE PROFILE SHARE — full-screen card for screenshotting */}
      {showProfileShare && hunterProfile && (
        <div style={{ position: 'fixed', inset: 0, zIndex: 4000, background: `linear-gradient(180deg, ${THEME.darkRed} 0%, #4A0000 100%)`, color: THEME.paper, display: 'flex', flexDirection: 'column', padding: 'max(env(safe-area-inset-top, 20px), 20px) 20px env(safe-area-inset-bottom, 20px)', fontFamily: 'Georgia, serif' }}>
          <button onClick={() => setShowProfileShare(false)} style={{ background: 'none', border: 'none', color: THEME.goldDark, fontSize: 16, cursor: 'pointer', padding: 8, alignSelf: 'flex-start' }}>Close</button>
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
            <div style={{ background: THEME.paper, color: THEME.text, border: `4px solid ${THEME.red}`, borderRadius: 20, padding: 28, marginTop: 16, marginBottom: 16, boxShadow: `0 0 0 4px ${THEME.gold}` }}>
              <div style={{ fontSize: 36, textAlign: 'center', marginBottom: 8 }}>🏮</div>
              <div style={{ fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', color: THEME.red, marginBottom: 6, fontWeight: 700, textAlign: 'center' }}>BRINGELLY FORTUNE FINDER</div>
              <div style={{ fontSize: 14, color: '#666', marginBottom: 16, textAlign: 'center' }}>{user?.displayName || user?.name || 'A neighbour'} is a</div>
              <div style={{ fontSize: 32, fontWeight: 700, color: THEME.darkRed, marginBottom: 24, textAlign: 'center', lineHeight: 1.1 }}>{hunterProfile.archetype}</div>
              <div style={{ borderTop: `1px solid ${THEME.goldDark}`, paddingTop: 14 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
                  <div style={{ fontSize: 11, color: '#888', letterSpacing: 1 }}>FORTUNES CLAIMED</div>
                  <div style={{ fontSize: 14, fontWeight: 700 }}>{(myClaimedItems || []).length}</div>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
                  <div style={{ fontSize: 11, color: '#888', letterSpacing: 1 }}>CONTRIBUTED</div>
                  <div style={{ fontSize: 14, fontWeight: 700 }}>{(myContributedItems || []).length}</div>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <div style={{ fontSize: 11, color: '#888', letterSpacing: 1 }}>SAVED</div>
                  <div style={{ fontSize: 14, fontWeight: 700, color: THEME.red }}>~${mySavedValue}</div>
                </div>
              </div>
              <div style={{ fontSize: 11, color: '#888', marginTop: 18, textAlign: 'center', letterSpacing: 1 }}>BRINGELLY, NSW · FORTUNE FINDER</div>
            </div>
            <div style={{ fontSize: 13, color: THEME.goldDark, textAlign: 'center', marginBottom: 16 }}>Screenshot this and post it</div>
          </div>
          <button onClick={() => share({ title: 'Bringelly Fortune Finder', text: `I'm a ${hunterProfile.archetype} on Bringelly Fortune Finder. What's your hunter type?` })} style={{ width: '100%', minHeight: 54, borderRadius: 14, fontSize: 17, fontWeight: 700, background: THEME.red, color: THEME.gold, border: `2px solid ${THEME.gold}`, cursor: 'pointer' }}>Send the app link</button>
        </div>
      )}

{/* 🎯 HUNTER TYPE QUIZ — bottom-sheet drawer (scroll/map stays visible behind) */}
      {(quizActive || showQuizResult) && (
        <div style={{ position: 'fixed', inset: 0, zIndex: 3000, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>
          {/* Backdrop — gentle dim, tappable to dismiss */}
          <div onClick={dismissQuiz} style={{ position: 'absolute', inset: 0, background: 'linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.7))', cursor: 'pointer' }} />

{/* Drawer */}
          <div style={{
            position: 'relative', background: THEME.paper, color: THEME.text,
            borderTopLeftRadius: 24, borderTopRightRadius: 24,
            paddingTop: 12, paddingBottom: 'calc(env(safe-area-inset-bottom, 20px) + 20px)',
            paddingLeft: 20, paddingRight: 20,
            maxWidth: 480, width: '100%', margin: '0 auto',
            boxShadow: `0 -16px 40px rgba(0,0,0,0.5), 0 0 0 4px ${THEME.gold}`,
            maxHeight: '78vh', overflowY: 'auto',
            border: `4px solid ${THEME.red}`,
            borderBottom: 'none'
          }}>
            <div style={{ width: 40, height: 4, background: '#ddd', borderRadius: 2, margin: '0 auto 14px' }} />

{/* QUIZ STEP */}
            {quizActive && !showQuizResult && (() => {
              const qq = QUIZ_QUESTIONS[quizStep];
              return (
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', position: 'relative' }}>
                  <button onClick={dismissQuiz} style={{ position: 'absolute', top: -4, right: -4, background: 'none', border: 'none', color: '#888', fontSize: 14, cursor: 'pointer', padding: 8 }}>Skip</button>
                  <div style={{ fontSize: 36, marginBottom: 4 }}>🏮</div>
                  <div style={{ fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', color: THEME.red, marginBottom: 8, fontWeight: 700 }}>
                    HUNTER CHECK {quizStep + 1} OF {(QUIZ_QUESTIONS || []).length}
                  </div>
                  <div style={{ fontSize: 22, fontWeight: 700, marginBottom: 22, color: THEME.darkRed, maxWidth: 360, lineHeight: 1.25 }}>{qq.q}</div>
                  <button
                    onClick={() => handleQuizAnswer(qq.a)}
                    style={{
                      width: '100%', maxWidth: 400, padding: 18,
                      background: '#FFF8DC', border: `2px solid ${THEME.goldDark}`, borderRadius: 14,
                      color: THEME.darkRed, fontSize: 18, fontWeight: 700, fontFamily: 'Georgia, serif',
                      cursor: 'pointer', marginBottom: 10
                    }}
                  >{qq.a}</button>
                  <div style={{ fontSize: 12, color: '#888', marginBottom: 10 }}>or</div>
                  <button
                    onClick={() => handleQuizAnswer(qq.b)}
                    style={{
                      width: '100%', maxWidth: 400, padding: 18,
                      background: '#FFF8DC', border: `2px solid ${THEME.goldDark}`, borderRadius: 14,
                      color: THEME.darkRed, fontSize: 18, fontWeight: 700, fontFamily: 'Georgia, serif',
                      cursor: 'pointer'
                    }}
                  >{qq.b}</button>
                  <div style={{ marginTop: 14, fontSize: 11, color: '#888' }}>Three taps. Get your hunter type.</div>
                </div>
              );
            })()}

{/* QUIZ RESULT */}
            {showQuizResult && (() => {
              const starters = computeStarterFortunes(hunterProfile?.answers, items);
              return (
                <div style={{ display: 'flex', flexDirection: 'column' }}>
                  <div style={{ fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', color: '#888', marginBottom: 6, textAlign: 'center', fontWeight: 600 }}>YOU ARE A</div>
                  <div style={{ fontSize: 30, fontWeight: 700, color: THEME.red, marginBottom: 16, textAlign: 'center', lineHeight: 1.1 }}>
                    {hunterProfile?.archetype ?? 'Bringelly Wanderer'}
                  </div>
                  <div style={{ fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', color: '#888', marginBottom: 10, fontWeight: 600 }}>YOUR STARTER FORTUNES</div>
                  <div style={{ marginBottom: 14 }}>
                    {(starters || []).map(s => (
                      <div key={s.id} style={{
                        background: '#FFF8DC', border: `2px solid ${THEME.goldDark}`, borderRadius: 12,
                        padding: 12, marginBottom: 8, display: 'flex', alignItems: 'center', gap: 12
                      }}>
                        <div style={{ fontSize: 28 }}>{s.emoji}</div>
                        <div style={{ flex: 1 }}>
                          <div style={{ fontSize: 15, fontWeight: 700, color: THEME.darkRed, marginBottom: 2 }}>{s.title}</div>
                          <div style={{ fontSize: 12, color: '#888' }}>{s.location}</div>
                        </div>
                      </div>
                    ))}
                  </div>
                  <button
                    onClick={() => { setShowQuizResult(false); setQuizActive(false); setQuizStep(0); }}
                    style={{
                      width: '100%', minHeight: 50, borderRadius: 14, fontSize: 16, fontWeight: 700,
                      background: THEME.red, color: THEME.gold, border: 'none', cursor: 'pointer'
                    }}
                  >See your scroll</button>
                </div>
              );
            })()}
          </div>
        </div>
      )}
    </div>
  );
}</article></body></html>