My Keepsake Box

swipe the ribbon · tap to discover ✨

{bloomedCount}/{(charms || []).length} secrets revealed 🌸

{/* HERO: Charm Ribbon Tapestry */}

{/* Ribbon line */}

{(charms || []).map((charm, idx) => { const c = charm ?? { id: idx, emoji: '✨', label: '?', color: '#F8C8DC', bloomed: false }; return (

handleCharmTap(c)} style={{ minWidth: 100, height: 120, background: `linear-gradient(135deg, ${c.color}DD, ${c.color}88, white)`, borderRadius: 20, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 8, cursor: 'pointer', boxShadow: c.bloomed ? `0 4px 20px ${c.color}88, 0 0 30px ${c.color}44` : `0 2px 12px ${c.color}66`, border: `2px solid ${c.bloomed ? '#D4A0B0' : c.color}`, transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)', transform: 'scale(1)', position: 'relative', overflow: 'hidden' }} onMouseDown={(e) => e.currentTarget.style.transform = 'scale(0.92)'} onMouseUp={(e) => e.currentTarget.style.transform = 'scale(1)'} onTouchStart={(e) => { e.currentTarget.style.transform = 'scale(0.92)'; }} onTouchEnd={(e) => { e.currentTarget.style.transform = 'scale(1)'; }} > {c.bloomed && (

🌸

)} {c.emoji} {c.label}

); })}

{/* Ribbon scroll dots */}

{Array.from({ length: Math.max(1, (charms || []).length - 2) }, (_, i) => (

))}

{/* Guest Book zone */}

✉️ Guest Book

{showNotepad && (

setNoteText(e.target.value)}
              placeholder="Write something sweet..."
              maxLength={100}
              style={{
                flex: 1,
                border: 'none',
                background: 'transparent',
                fontFamily: 'inherit',
                fontSize: 14,
                fontStyle: 'italic',
                color: '#6B4C5A',
                resize: 'none',
                height: 50,
                outline: 'none'
              }}
            />
            <button
              onClick={submitNote}
              style={{
                background: '#D4A0B0',
                border: 'none',
                borderRadius: 12,
                padding: '10px 14px',
                fontSize: 16,
                cursor: 'pointer',
                color: 'white',
                transition: 'transform 0.2s'
              }}
              onMouseDown={(e) => e.currentTarget.style.transform = 'scale(0.9)'}
              onMouseUp={(e) => e.currentTarget.style.transform = 'scale(1)'}
            >🕊️</button>
          </div>
        )}

<div style={{ display: 'flex', flexDirection: 'column', gap: 8, paddingBottom: 20 }}>
          {[...visitors].reverse().map((v, i) => {
            const visitor = v ?? { name: '?', emoji: '💕', note: '' };
            return (
              <div key={i} style={{
                background: 'linear-gradient(135deg, #FFFFFF99, #FFF0F588)',
                backdropFilter: 'blur(10px)',
                borderRadius: 14,
                padding: '12px 16px',
                border: '1px solid #F8C8DC66',
                display: 'flex',
                gap: 10,
                alignItems: 'center',
                opacity: mountAnim ? 1 : 0,
                transform: mountAnim ? 'translateX(0)' : 'translateX(-20px)',
                transition: `all 0.5s ease ${0.8 + i * 0.15}s`
              }}>
                <span style={{ fontSize: 22 }}>{visitor.emoji}</span>
                <div>
                  <div style={{ fontSize: 12, fontWeight: 600, color: '#9B7088', letterSpacing: 0.5 }}>{visitor.name}</div>
                  <div style={{ fontSize: 13, fontStyle: 'italic', color: '#7A5568', marginTop: 2 }}>{visitor.note}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>

{/* BLOOM OVERLAY */}
      {activeCharm && showBloom && (
        <div
          onClick={closeBloom}
          style={{
            position: 'fixed',
            top: 0, left: 0, right: 0, bottom: 0,
            background: 'rgba(248, 230, 238, 0.95)',
            backdropFilter: 'blur(20px)',
            zIndex: 1000,
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            padding: 40,
            animation: 'bloomIn 0.6s cubic-bezier(0.4, 0, 0.2, 1)'
          }}
        >
          {/* Sparkles */}
          {(sparkles || []).map(s => (
            <div key={s.id} style={{
              position: 'absolute',
              left: `${s.x}%`,
              top: `${s.y}%`,
              fontSize: s.size,
              opacity: 0,
              animation: `sparkle 1.5s ease ${s.delay}s forwards`,
              pointerEvents: 'none'
            }}>✨</div>
          ))}

<div style={{
            fontSize: 80,
            marginBottom: 24,
            animation: 'charmPulse 2s ease infinite',
            filter: 'drop-shadow(0 0 20px rgba(212, 160, 176, 0.6))'
          }}>{activeCharm?.emoji ?? '✨'}</div>

<div style={{
            background: 'linear-gradient(135deg, #FFFFFF, #FFF8FA)',
            borderRadius: 24,
            padding: '28px 32px',
            maxWidth: 320,
            textAlign: 'center',
            boxShadow: `0 8px 40px ${activeCharm?.color ?? '#F8C8DC'}66`,
            border: `2px solid ${activeCharm?.color ?? '#F8C8DC'}`,
            animation: 'cardFloat 3s ease infinite'
          }}>
            <h3 style={{
              margin: '0 0 12px',
              fontSize: 22,
              color: '#8B5A6B',
              fontStyle: 'italic',
              fontWeight: 400,
              letterSpacing: 2
            }}>{activeCharm?.label ?? 'Secret'}</h3>
            <p style={{
              margin: 0,
              fontSize: 16,
              lineHeight: 1.7,
              color: '#6B4C5A',
              fontStyle: 'italic'
            }}>{activeCharm?.secret ?? ''}</p>
          </div>

<p style={{
            marginTop: 30,
            fontSize: 13,
            fontStyle: 'italic',
            opacity: 0.5,
            color: '#8B5A6B',
            letterSpacing: 1
          }}>tap anywhere to close 🌸</p>
        </div>
      )}