{/* Scanline Arcade Overlay */}

{/* HEADER BAR */}

NY26 🎮

DOMINATION MAP

Summer Intern Conquest Log

{share && ( )}

{/* HERO DOMINATION HUD */}

EXPLORER RANK:

{getExplorerRank()}

ARCADE SCORE:

🌟 {arcadeScore} PTS

{/* Global Progress Ring / Bar */}

🗺️ MAP DOMINATION {dominationPercent}% CONQUERED

{unlockedCount} Continents Logged {totalContinents - unlockedCount} Left to Conquer

{/* CREW PANEL — SOCIAL SURFACE */}

👥 {isMultiplayer ? 'EXPEDITION CREW' : 'SOLO EXPLORER'}

{(memberList || []).map((m) => { const handle = m.handle || m.id; const initials = (m.displayName || m.name || '?').slice(0, 1).toUpperCase(); return ( ); })}

{(crewFeed || []).length > 0 && (

📰 RECENT CONQUESTS

{[...crewFeed].slice(-5).reverse().map((entry) => (

{entry.continentEmoji} unlocked {entry.continentName}

))}

)}

{/* NAVIGATION TABS */}

{[ { id: 'conquest', label: '🗺️ WORLD MAP', count: null }, { id: 'badges', label: '🎖️ ARCADE BADGES', count: unlockedCount }, { id: 'intel', label: '📂 EXPEDITION INTEL', count: null } ].map(tab => ( ))}

{/* MAIN WORKFLOW AREA */} { activeTab === 'conquest' && (

⚡ Click on any continent below to log your conquest memory or future dream expedition to unlock it!

{/* THE INTERACTIVE CONTINENT GRID & RADAR */}

{(CONTINENTS || []).map(cont => { const isUnlocked = !!unlocked[cont.id]; const details = unlocked[cont.id]; return (

{ setSelectedContinent(cont); setMemoryText(details?.memory ?? ''); setExpeditionType(details?.type ?? 'conquest'); setRating(details?.rating ?? 5); }} style={{ background: isUnlocked ? 'rgba(15, 118, 110, 0.15)' : 'rgba(31, 41, 55, 0.4)', border: isUnlocked ? '3px solid #0F766E' : '2px dashed #4B5563', borderRadius: 16, padding: 16, position: 'relative', cursor: 'pointer', transition: 'transform 0.2s, box-shadow 0.2s', boxShadow: isUnlocked ? '0 0 15px rgba(15, 118, 110, 0.3)' : 'none', }} onPointerOver={(e) => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = isUnlocked ? '0 0 20px rgba(15, 118, 110, 0.5)' : '0 0 10px rgba(255,255,255,0.1)'; }} onPointerOut={(e) => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = isUnlocked ? '0 0 15px rgba(15, 118, 110, 0.3)' : 'none'; }} > {/* Top row status */}

{cont.emoji}

{cont.name}

{isUnlocked ? `🎖️ ${cont.title}` : '🔒 LOCKED'}

{isUnlocked ? 'CLAIMED ✓' : 'UNCLAIMED'}

{isUnlocked ? `"${details.memory}"` : cont.desc}

{isUnlocked ? `${details.type === 'conquest' ? '🔥 COMPLETED' : '✨ FUTURE EXPEDITION'}` : '🎯 Quest Awaiting'} {isUnlocked && ( {'⭐'.repeat(details.rating)} )}

); })}

) } {/* ARCADE BADGES TAB */} { activeTab === 'badges' && (

🎖️ HOLOGRAPHIC TROPHY CASE

Move your finger/cursor over unlocked badges to activate the retro holographic shimmer effect!

{unlockedCount === 0 ? (

🐣

No Badges Minted

Log a memory on any continent to unlock your very first badge!

) : (

{(CONTINENTS || []).map(cont => { const isUnlocked = !!unlocked[cont.id]; if (!isUnlocked) return null; return (

{/* Holographic glowing lines effect overlay */}

{cont.emoji}

{cont.title.split(' ')[0]}

{cont.rank}

CONQUERED ✓

); })}

)}

) } {/* EXPEDITION INTEL TAB */} { activeTab === 'intel' && (

📋 EXPEDITION CHRONICLES

Here lies the database of your registered conquests and upcoming vision boards. Manage your unlocked territories below.

{unlockedCount === 0 ? (

🪵

Chronicles are Bare

No logs saved yet. Explore the map to record your first vision!

) : (

{(CONTINENTS || []).map(cont => { const details = unlocked[cont.id]; if (!details) return null; return (

{cont.emoji} {cont.name}

TYPE: {details.type === 'conquest' ? '🔥 CONQUEST MEMORY' : '✨ DREAM EXPEDITION'}

"{details.memory}"

Registered: {new Date(details.unlockedAt).toLocaleDateString()} Rating: {'⭐'.repeat(details.rating)}

); })}

)}

) } {/* QUEST LOGGER BOTTOM SHEET (SLIDE UP MODAL) */} { selectedContinent && (

setSelectedContinent(null)} >

e.stopPropagation()} > {/* Handle Bar */}

{selectedContinent.emoji}

{selectedContinent.name}

🏁 QUEST BADGE: {selectedContinent.title}

{selectedContinent.desc}

{/* Expedition Switcher */}

CHOOSE EXPEDITION PATH:

{/* Memory Log Input */}

{expeditionType === 'conquest' ? 'WHAT DID YOU DO THERE?' : 'WHAT IS YOUR DREAM EXPEDITION?'}

setMemoryText(e.target.value)}
                  placeholder={expeditionType === 'conquest' 
                    ? "e.g., Landed my dream finance internship in London and rode the Eurostar!"
                    : "e.g., Summit Mount Fuji, explore Tokyo tech alleys, and eat ramen!"
                  }
                  rows={3}
                  style={{
                    width: '100%',
                    background: '#1F2937',
                    border: '2px solid #0F766E',
                    borderRadius: 8,
                    padding: 10,
                    color: '#FFF',
                    fontSize: 16, // iOS zoom prevention
                    fontFamily: 'inherit',
                    boxSizing: 'border-box',
                    outline: 'none'
                  }}
                />
              </div>

{/* Star Rating */}
              <div style={{ marginBottom: 20 }}>
                <label style={{ display: 'block', fontSize: 11, fontWeight: 'bold', color: '#0F766E', marginBottom: 6 }}>
                  EXPEDITION RATING:
                </label>
                <div style={{ display: 'flex', gap: 10 }}>
                  {[1, 2, 3, 4, 5].map(val => (
                    <button
                      key={val}
                      onClick={() => setRating(val)}
                      style={{
                        background: 'transparent',
                        border: 'none',
                        fontSize: 24,
                        cursor: 'pointer',
                        opacity: val <= rating ? 1 : 0.3
                      }}
                    >
                      ⭐
                    </button>
                  ))}
                </div>
              </div>

{/* Action Buttons */}
              <div style={{ display: 'flex', gap: 10 }}>
                <button
                  onClick={() => setSelectedContinent(null)}
                  style={{
                    flex: 1,
                    padding: '14px',
                    background: '#374151',
                    color: '#FFF',
                    border: 'none',
                    borderRadius: 12,
                    fontSize: 13,
                    fontWeight: 'bold',
                    cursor: 'pointer'
                  }}
                >
                  CANCEL
                </button>
                <button
                  onClick={() => handleUnlock(selectedContinent.id)}
                  disabled={!memoryText.trim()}
                  style={{
                    flex: 2,
                    padding: '14px',
                    background: memoryText.trim() ? '#E11D48' : '#4B5563',
                    color: '#FFF',
                    border: 'none',
                    borderRadius: 12,
                    fontSize: 13,
                    fontWeight: 'bold',
                    cursor: 'pointer',
                    boxShadow: memoryText.trim() ? '0 4px 12px rgba(225, 29, 72, 0.4)' : 'none'
                  }}
                >
                  💾 SAVE CONQUEST
                </button>
              </div>

</div>
          </div>
        )
      }

{/* EPIC RETRO CELEBRATION MODAL (ARCADE UNLOCKED FANFARE) */}
      {
        showCelebration && (() => {
          const cont = (CONTINENTS || []).find(c => c.id === showCelebration);
          return (
            <div
              style={{
                position: 'fixed',
                inset: 0,
                zIndex: 9999,
                background: 'rgba(17, 24, 39, 0.95)',
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                justifyContent: 'center',
                padding: 24,
                animation: 'epicFadeIn 0.25s ease-out'
              }}
              onClick={() => setShowCelebration(null)}
            >
              {/* Falling confetti style emoji particles */}
              <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', overflow: 'hidden' }}>
                {[...Array(20)].map((_, i) => (
                  <div
                    key={i}
                    style={{
                      position: 'absolute',
                      left: `${Math.random() * 100}%`,
                      top: '-10%',
                      fontSize: 28,
                      animation: `fallConfetti ${1000 + Math.random() * 1000}ms linear forwards`,
                      animationDelay: `${Math.random() * 200}ms`
                    }}
                  >
                    {['⭐', '✨', '⚡', '🏆', '🎉', '✈️', '🗽'][Math.floor(Math.random() * 7)]}
                  </div>
                ))}
              </div>

<div style={{
                background: '#111827',
                border: '4px solid #0F766E',
                borderRadius: 24,
                padding: '32px 24px',
                textAlign: 'center',
                maxWidth: 360,
                width: '100%',
                boxShadow: '0 0 40px rgba(15, 118, 110, 0.7)',
                animation: 'scalePop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)'
              }}>
                <span style={{
                  fontSize: 72,
                  display: 'inline-block',
                  animation: 'spinPulse 1.5s infinite linear',
                  filter: 'drop-shadow(0 0 12px #0F766E)'
                }}>
                  {cont?.emoji}
                </span>

<div style={{
                  color: '#E11D48',
                  fontWeight: 'bold',
                  fontSize: 14,
                  letterSpacing: '2px',
                  marginTop: 16
                }}>
                  ✨ TERRITORY CONQUERED ✨
                </div>

<div style={{
                  background: 'rgba(15, 118, 110, 0.2)',
                  border: '1px solid #0F766E',
                  borderRadius: 12,
                  padding: '12px 16px',
                  margin: '16px 0',
                  fontSize: 13
                }}>
                  <div style={{ color: '#0F766E', fontSize: 10, fontWeight: 'bold' }}>UNLOCKED BADGE:</div>
                  <div style={{ fontWeight: 'bold', fontSize: 14, color: '#FFFFFF', marginTop: 4 }}>
                    🎖️ {cont?.title}
                  </div>
                </div>

<div style={{
                  fontSize: 18,
                  fontWeight: 'bold',
                  color: '#F59E0B',
                  marginBottom: 24
                }}>
                  🌟 +1,250 PTS MINTED!
                </div>

<button
                  onClick={() => setShowCelebration(null)}
                  style={{
                    width: '100%',
                    background: 'linear-gradient(90deg, #0F766E 0%, #E11D48 100%)',
                    color: '#FFF',
                    border: 'none',
                    padding: '14px',
                    borderRadius: 12,
                    fontSize: 14,
                    fontWeight: 'bold',
                    cursor: 'pointer',
                    boxShadow: '0 4px 12px rgba(225, 29, 72, 0.4)'
                  }}
                >
                  CONTINUE EXPEDITION 🚀
                </button>
              </div>
            </div>
          );
        })()
      }

{/* CSS Animation Keyframes */}
      <style>{`
        @keyframes slideUp {
          from { transform: translateY(100%); }
          to { transform: translateY(0); }
        }
        @keyframes epicFadeIn {
          from { opacity: 0; }
          to { opacity: 1; }
        }
        @keyframes scalePop {
          from { transform: scale(0.85); opacity: 0; }
          to { transform: scale(1); opacity: 1; }
        }
        @keyframes spinPulse {
          0% { transform: scale(1) rotate(0deg); }
          50% { transform: scale(1.1) rotate(5deg); }
          100% { transform: scale(1) rotate(0deg); }
        }
        @keyframes fallConfetti {
          0% { transform: translateY(0) rotate(0deg); opacity: 1; }
          100% { transform: translateY(110vh) rotate(360deg); opacity: 0; }
        }
        @keyframes holoShimmer {
          0% { background-position: 0% 50%; }
          50% { background-position: 100% 50%; }
          100% { background-position: 0% 50%; }
        }
      `}</style>
    </div>
  );
}</article></body></html>