SPOTS.

{/* Main Feed */}

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

EMPTY.

Tap + to curate.

) : ( (spots || []).map(spot => (

{spot.isDemo && (

DEMO

)} {/* Photo Area */}

{/* Actions (Stark boxes) */}

{/* Like Button */} {/* Notes Button */}

{/* Spot Info */}

{spot.name}

{spot.description}

)) )}

{/* Global Add Button */}

{/* Add Spot Bottom Sheet */}

e.stopPropagation()} >

NEW
SPOT.

{!newSpot.photoUrl && (

{uploading ? '⏳' : '📸'} {uploading ? 'UPLOADING' : 'CAPTURE VISUAL'}

)}

setNewSpot({...newSpot, name: e.target.value})} style={{ ...swissInputStyle, marginBottom: 24 }} />

setNewSpot({...newSpot, description: e.target.value})}
            style={{ ...swissInputStyle, height: 80, resize: 'none', marginBottom: 32, fontSize: 18, fontWeight: 400, borderBottom: `2px solid ${SWISS_BLACK}` }}
          />

<button 
            onClick={handleSaveSpot}
            style={{...swissButtonStyle, opacity: !newSpot.name.trim() ? 0.5 : 1}}
            disabled={!newSpot.name.trim()}
          >
            PUBLISH
          </button>
        </div>
      </div>

{/* Notes/Comments Bottom Sheet */}
      <div style={{ 
        position: 'fixed', inset: 0, zIndex: 110, 
        backgroundColor: 'rgba(0,0,0,0.4)', backdropFilter: 'blur(4px)',
        opacity: activeNotesSpotId ? 1 : 0, pointerEvents: activeNotesSpotId ? 'auto' : 'none',
        transition: 'opacity 0.3s',
        display: 'flex', flexDirection: 'column', justifyContent: 'flex-end'
      }}>
        <div 
          style={{ 
            backgroundColor: SWISS_WHITE, borderTop: `8px solid ${SWISS_BLACK}`,
            padding: '32px 20px calc(env(safe-area-inset-bottom, 20px) + 24px)',
            height: '75dvh', display: 'flex', flexDirection: 'column',
            transform: activeNotesSpotId ? 'translateY(0)' : 'translateY(100%)',
            transition: 'transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1)'
          }}
          onClick={e => e.stopPropagation()}
        >
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 24 }}>
            <div>
              <h2 style={{ margin: 0, fontSize: 40, fontWeight: 900, color: SWISS_BLACK, textTransform: 'uppercase', lineHeight: 0.9, letterSpacing: '-2px' }}>
                NOTES.
              </h2>
              <div style={{ fontSize: 14, color: SWISS_ACCENT, fontWeight: 700, marginTop: 8, textTransform: 'uppercase', letterSpacing: '1px' }}>
                {activeNotesSpot?.name || 'Spot'}
              </div>
            </div>
            <button onClick={() => setActiveNotesSpotId(null)} style={{ background: 'none', border: `4px solid ${SWISS_BLACK}`, width: 48, height: 48, display: 'flex', alignItems: 'center', justifyContent: 'center', color: SWISS_BLACK, fontSize: 24, fontWeight: 900, cursor: 'pointer' }}>✕</button>
          </div>

<div style={{ 
            flex: 1, overflowY: 'auto', marginBottom: 24, 
            display: 'flex', flexDirection: 'column', gap: 16,
            padding: '4px 0'
          }}>
            {(activeNotesSpot?.notes?.length || 0) === 0 ? (
              <div style={{ textAlign: 'center', color: SWISS_BLACK, opacity: 0.5, marginTop: 40, fontSize: 18, fontWeight: 300 }}>
                No records found.
              </div>
            ) : (
              (activeNotesSpot?.notes || []).map(note => (
                <div key={note.id} style={{ 
                  backgroundColor: SWISS_WHITE, 
                  borderLeft: `4px solid ${SWISS_ACCENT}`,
                  padding: '8px 0 8px 16px'
                }}>
                  <div style={{ color: SWISS_BLACK, fontSize: 18, fontWeight: 500, marginBottom: 8, lineHeight: 1.4 }}>{note.text}</div>
                  <div style={{ color: SWISS_BLACK, opacity: 0.5, fontSize: 12, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '1px' }}>
                    {new Date(note.timestamp).toLocaleString()}
                  </div>
                </div>
              ))
            )}
          </div>

<div style={{ display: 'flex', gap: 12 }}>
            <input 
              placeholder="WRITE..."
              value={newNoteText}
              onChange={e => setNewNoteText(e.target.value)}
              onKeyDown={e => e.key === 'Enter' && handleAddNote()}
              style={{ ...swissInputStyle, flex: 1, minHeight: 48, fontSize: 18, padding: '4px 0', borderBottom: `2px solid ${SWISS_BLACK}` }}
            />
            <button 
              onClick={handleAddNote}
              style={{ 
                width: 64, height: 56,
                backgroundColor: SWISS_BLACK, color: SWISS_WHITE,
                border: 'none',
                fontSize: 24, fontWeight: 900, cursor: 'pointer',
                display: 'flex', alignItems: 'center', justifyContent: 'center'
              }}
            >
              <span role="img" aria-label="send">↗</span>
            </button>
          </div>
        </div>
      </div>
      
      {/* Global CSS animation for the heart burst */}
      <style dangerouslySetInnerHTML={{__html: `
        @keyframes burst {
          0% { opacity: 1; transform: scale(0.5) translateY(0); }
          50% { opacity: 1; transform: scale(1.2) translateY(-20px); }
          100% { opacity: 0; transform: scale(1.5) translateY(-40px); }
        }
      `}} />
    </div>
  );
}</article></body></html>

EMPTY.

{spot.name}

NEWSPOT.

NEW
SPOT.