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

{p.emoji}

))}

); }; const renderToast = () => { if (!toast) return null; return (

{toast.icon} {toast.message}

); }; const renderGarden = () => (

BloomConnect

Your friendship garden

{isMultiplayer && (memberList || []).length > 1 && (

Gardeners: {(memberList || []).map(m => (

openProfile(m.handle)} style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 4 }}> {m.avatarUrl ? ( {m.displayName}

{ e.currentTarget.style.display = 'none'; }} /> ) : (

👤

)}

))}

)}

{stats.total}

Friends

{stats.blooming}

Blooming

{stats.needsLove}

Need love

{(sortedFriends || []).map((friend, idx) => { const health = getFlowerHealth(friend); const healthColor = getHealthColor(health); const isBlooming = bloomEffect === friend.id; return (

setSelectedFriend(friend)} style={{ background: `linear-gradient(145deg, ${friend.color}40, ${healthColor}50)`, borderRadius: 20, padding: 16, textAlign: 'center', cursor: 'pointer', border: `2px solid ${friend.color}60`, transition: 'transform 0.2s, box-shadow 0.2s', animation: isBlooming ? 'bloomIn 0.8s ease-out' : `fadeSlideUp 0.4s ease-out ${idx * 0.05}s both`, boxShadow: `0 4px 16px ${friend.color}30`, position: 'relative', overflow: 'hidden' }} onPointerDown={(e) => { e.currentTarget.style.transform = 'scale(0.96)'; }} onPointerUp={(e) => { e.currentTarget.style.transform = 'scale(1)'; }} onPointerLeave={(e) => { e.currentTarget.style.transform = 'scale(1)'; }} onPointerCancel={(e) => { e.currentTarget.style.transform = 'scale(1)'; }} >

{friend.emoji}

{health === 'dried' &&

💧

} {health === 'seedling' &&

🆕

}

{friend.name}

{friend.lastCatchUp ? formatDate(friend.lastCatchUp) : "Let's bloom!"}

{getHealthLabel(health)}

{friend.reminderFreq && friend.reminderFreq !== 'none' && (

{getSprout(friend.reminderFreq)}

)}

); })}

{(friends || []).length === 0 && (

🌱

Plant your first friendship seed!

Tap the watering can below to add friends

)}

); const renderFriendDetail = () => { if (!selectedFriend) return null; const friend = (friends || []).find(f => f.id === selectedFriend.id) ?? selectedFriend; const health = getFlowerHealth(friend); const journal = friend.journal ?? []; return (

{ if (e.target === e.currentTarget) setSelectedFriend(null); }}>

🦋

{friend.emoji}

{friend.name}

{getHealthLabel(health)}

Last catch-up: {friend.lastCatchUp ? formatDate(friend.lastCatchUp) : 'Never yet'}

🌱 Reminder

{editReminder === friend.id ? (

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

) : (

{getSprout(friend.reminderFreq)} {(reminderOptions || []).find(o => o.value === friend.reminderFreq)?.label || 'No reminder'}

)}

✨ Log a catch-up

setJournalText(e.target.value)}
                placeholder="What did you talk about? How was it?"
                style={{
                  width: '100%', minHeight: 70, borderRadius: 14, border: '1px solid #E6E6FA',
                  padding: 12, fontFamily, fontSize: 15, color: '#5a3e36', resize: 'vertical',
                  background: 'white', boxSizing: 'border-box', outline: 'none'
                }}
              />
              <button onClick={() => logCatchUp(friend.id)} style={{
                width: '100%', minHeight: 48, borderRadius: 14, border: 'none',
                background: 'linear-gradient(135deg, #FFB7C5, #E6E6FA)',
                fontFamily, fontSize: 16, fontWeight: 700, color: '#5a3e36', cursor: 'pointer', marginTop: 8,
                boxShadow: '0 4px 12px rgba(255,183,197,0.4)'
              }}
              onPointerDown={(e) => { e.currentTarget.style.transform = 'scale(0.97)'; }}
              onPointerUp={(e) => { e.currentTarget.style.transform = 'scale(1)'; }}
              onPointerLeave={(e) => { e.currentTarget.style.transform = 'scale(1)'; }}
              onPointerCancel={(e) => { e.currentTarget.style.transform = 'scale(1)'; }}
              >
                🌸 Caught Up!
              </button>
            </div>

<div style={{ marginBottom: 20 }}>
              <div style={{ fontFamily, fontSize: 13, fontWeight: 600, color: '#5a3e36', marginBottom: 8 }}>📖 Journal</div>
              {(journal || []).length === 0 ? (
                <div style={{ textAlign: 'center', padding: 20, color: '#8B7D75', fontFamily, fontSize: 13 }}>
                  No entries yet. Log your first catch-up!
                </div>
              ) : (
                (journal || []).map(entry => (
                  <div key={entry.id} style={{
                    background: 'white', borderRadius: 14, padding: 12, marginBottom: 8,
                    border: '1px solid #F0EBE6', boxShadow: '0 2px 8px rgba(0,0,0,0.04)'
                  }}>
                    <div style={{ fontFamily, fontSize: 14, color: '#5a3e36', lineHeight: 1.5 }}>{entry.text}</div>
                    <div style={{ fontFamily, fontSize: 11, color: '#8B7D75', marginTop: 6, display: 'flex', justifyContent: 'space-between' }}>
                      <span>{entry.date ? new Date(entry.date).toLocaleDateString() : ''}</span>
                      {entry.loggedByName && <span>by {entry.loggedByName}</span>}
                    </div>
                  </div>
                ))
              )}
            </div>

<button onClick={() => deleteFriend(friend.id)} style={{
              width: '100%', padding: '12px', borderRadius: 14, border: '1px solid #FFCDD2',
              background: '#FFF5F5', fontFamily, fontSize: 14, color: '#E53935', cursor: 'pointer', marginBottom: 30
            }}>
              🗑️ Remove from garden
            </button>
          </div>

<div style={{ padding: '8px 20px', paddingBottom: 'calc(env(safe-area-inset-bottom, 16px) + 8px)', flexShrink: 0 }}>
            <button onClick={() => setSelectedFriend(null)} style={{
              width: '100%', minHeight: 48, borderRadius: 14, border: 'none',
              background: '#F0EBE6', fontFamily, fontSize: 15, fontWeight: 600, color: '#5a3e36', cursor: 'pointer'
            }}>← Back to Garden</button>
          </div>
        </div>
      </div>
    );
  };

<div style={{ flex: 1, overflowY: 'auto', WebkitOverflowScrolling: 'touch', padding: '0 20px' }}>
            {!showBulkAdd ? (
              <div>
                <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
                  <input
                    ref={inputRef}
                    value={newFriendName}
                    onChange={(e) => setNewFriendName(e.target.value)}
                    onKeyDown={(e) => { if (e.key === 'Enter') addSingleFriend(); }}
                    placeholder="Friend's name..."
                    style={{
                      flex: 1, height: 48, borderRadius: 14, border: '2px solid #C8E6C9',
                      padding: '0 14px', fontFamily, fontSize: 16, color: '#5a3e36', outline: 'none',
                      background: 'white'
                    }}
                  />
                  <button onClick={addSingleFriend} style={{
                    width: 48, height: 48, borderRadius: 14, border: 'none',
                    background: 'linear-gradient(135deg, #98D8AA, #B8F5E0)',
                    fontSize: 22, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
                    boxShadow: '0 4px 12px rgba(152,216,170,0.4)'
                  }}>🌸</button>
                </div>

<div style={{ textAlign: 'center', margin: '12px 0' }}>
                  <div style={{ fontFamily, fontSize: 12, color: '#8B7D75', marginBottom: 12 }}>— or —</div>
                  <button onClick={() => setShowBulkAdd(true)} style={{
                    padding: '12px 24px', borderRadius: 20, border: '2px dashed #C8E6C9',
                    background: 'transparent', fontFamily, fontSize: 14, color: '#5a3e36', cursor: 'pointer',
                    fontWeight: 600
                  }}>
                    📋 Add Many at Once
                  </button>
                </div>

<div style={{
                  background: '#F0FFF0', borderRadius: 16, padding: 14, marginTop: 16
                }}>
                  <div style={{ fontFamily, fontSize: 13, fontWeight: 600, color: '#5a3e36', marginBottom: 8 }}>
                    💡 Tips for adding friends:
                  </div>
                  <div style={{ fontFamily, fontSize: 12, color: '#8B7D75', lineHeight: 1.8 }}>
                    • Type one name at a time and tap 🌸<br />
                    • Or use "Add Many" to paste a list<br />
                    • Copy names from your contacts app<br />
                    • Separate names with commas or new lines<br />
                    • You can always add more later!
                  </div>
                </div>
              </div>
            ) : (
              <div>
                <div style={{ fontFamily, fontSize: 13, fontWeight: 600, color: '#5a3e36', marginBottom: 8 }}>
                  📋 Paste or type friend names
                </div>
                <div style={{ fontFamily, fontSize: 12, color: '#8B7D75', marginBottom: 8 }}>
                  Separate names with commas, semicolons, or new lines
                </div>
                <textarea
                  ref={bulkInputRef}
                  value={bulkText}
                  onChange={(e) => setBulkText(e.target.value)}
                  placeholder={"Emma, Liam, Sophia\nOlivia, Noah, Ava\nJackson; Mia; Lucas"}
                  style={{
                    width: '100%', minHeight: 140, borderRadius: 14, border: '2px solid #C8E6C9',
                    padding: 14, fontFamily, fontSize: 15, color: '#5a3e36', resize: 'vertical',
                    background: 'white', boxSizing: 'border-box', outline: 'none'
                  }}
                />
                {bulkText.trim() && (
                  <div style={{ fontFamily, fontSize: 12, color: '#98D8AA', marginTop: 6, fontWeight: 600 }}>
                    {/* FIX: Simplified splitting logic in render to match function logic */}
                    🌱 {bulkText.split(/[,;\n]+/).map(n => n.trim()).filter(n => (n || []).length > 0).length} friends ready to plant!
                  </div>
                )}
                <button onClick={addBulkFriends} disabled={!bulkText.trim()} style={{
                  width: '100%', minHeight: 48, borderRadius: 14, border: 'none',
                  background: bulkText.trim() ? 'linear-gradient(135deg, #98D8AA, #B8F5E0)' : '#E0E0E0',
                  fontFamily, fontSize: 16, fontWeight: 700, color: bulkText.trim() ? '#2E7D32' : '#999',
                  cursor: bulkText.trim() ? 'pointer' : 'default', marginTop: 12,
                  boxShadow: bulkText.trim() ? '0 4px 12px rgba(152,216,170,0.4)' : 'none'
                }}>🌸 Plant All Friends</button>
                <button onClick={() => setShowBulkAdd(false)} style={{
                  width: '100%', padding: 12, borderRadius: 14, border: 'none',
                  background: 'transparent', fontFamily, fontSize: 14, color: '#8B7D75', cursor: 'pointer', marginTop: 8
                }}>← Back to single add</button>
              </div>
            )}
          </div>

<div style={{ padding: '12px 20px', paddingBottom: 'calc(env(safe-area-inset-bottom, 16px) + 8px)', flexShrink: 0 }}>
            <button onClick={() => { setShowAddModal(false); setShowBulkAdd(false); }} style={{
              width: '100%', minHeight: 48, borderRadius: 14, border: 'none',
              background: '#F0EBE6', fontFamily, fontSize: 15, fontWeight: 600, color: '#5a3e36', cursor: 'pointer'
            }}>Done</button>
          </div>
        </div>
      </div>
    );
  };

return (
    <div style={{
      minHeight: '100dvh',
      display: 'flex',
      flexDirection: 'column',
      background: 'linear-gradient(180deg, #FFFEF9 0%, #FFF5F7 40%, #F0FFF0 100%)',
      paddingTop: 'max(env(safe-area-inset-top, 20px), 20px)',
      paddingBottom: 'env(safe-area-inset-bottom, 20px)',
      paddingLeft: 'max(env(safe-area-inset-left, 0px), 16px)',
      paddingRight: 'max(env(safe-area-inset-right, 0px), 16px)',
      maxWidth: 480,
      margin: '0 auto',
      width: '100%',
      boxSizing: 'border-box',
      fontFamily
    }}>
      <style>{styleKeyframes}</style>
      {renderPetals()}
      {renderGarden()}
      {renderFriendDetail()}
      {renderAddModal()}
      {renderToast()}

<div style={{
        position: 'fixed',
        bottom: 'calc(env(safe-area-inset-bottom, 20px) + 16px)',
        left: '50%',
        transform: 'translateX(-50%)',
        display: 'flex',
        gap: 12,
        zIndex: 100
      }}>
        <button
          onClick={() => setShowAddModal(true)}
          style={{
            width: 60, height: 60, borderRadius: '50%', border: 'none',
            background: 'linear-gradient(135deg, #98D8AA, #B8F5E0)',
            fontSize: 28, cursor: 'pointer',
            boxShadow: '0 6px 24px rgba(152,216,170,0.5)',
            animation: 'gentlePulse 2.5s ease-in-out infinite',
            display: 'flex', alignItems: 'center', justifyContent: 'center'
          }}
          onPointerDown={(e) => { e.currentTarget.style.transform = 'scale(0.92)'; }}
          onPointerUp={(e) => { e.currentTarget.style.transform = 'scale(1)'; }}
          onPointerLeave={(e) => { e.currentTarget.style.transform = 'scale(1)'; }}
          onPointerCancel={(e) => { e.currentTarget.style.transform = 'scale(1)'; }}
        >
          <span role="img" aria-label="Add friend">🚿</span>
        </button>
        <button
          onClick={handleShare}
          style={{
            width: 60, height: 60, borderRadius: '50%', border: 'none',
            background: 'linear-gradient(135deg, #FFB7C5, #E6E6FA)',
            fontSize: 24, cursor: 'pointer',
            boxShadow: '0 6px 24px rgba(255,183,197,0.4)',
            display: 'flex', alignItems: 'center', justifyContent: 'center'
          }}
          onPointerDown={(e) => { e.currentTarget.style.transform = 'scale(0.92)'; }}
          onPointerUp={(e) => { e.currentTarget.style.transform = 'scale(1)'; }}
          onPointerLeave={(e) => { e.currentTarget.style.transform = 'scale(1)'; }}
          onPointerCancel={(e) => { e.currentTarget.style.transform = 'scale(1)'; }}
        >
          <span role="img" aria-label="Share garden">📤</span>
        </button>
      </div>
    </div>
  );
}</article></body></html>

🌸 BloomConnect 🌸

{friend.name}

BloomConnect