{/* Floating sparkles */} {['✨','🌸','✨','🎀','💗'].map((s, i) => (

{s}

))} {/* Header */}

🎀

ma chérie

· {user?.name || 'mon amour'}'s boudoir ·

{/* Keepsake Vignettes */}

keepsakes ♡

{(vignettes || []).slice(0, 4).map((v, i) => { const isOpen = openId === v.id; return (

handleOpen(v.id)} style={{ position: 'relative', background: isOpen ? 'linear-gradient(135deg, #FFF8F0, #FFE4EC)' : 'linear-gradient(135deg, #FADADD, #FFC0CB)', borderRadius: 24, padding: 14, minHeight: 130, cursor: 'pointer', transition: 'all 0.4s cubic-bezier(0.4,0,0.2,1)', boxShadow: isOpen ? '0 8px 30px rgba(199,21,133,0.35), inset 0 0 0 2px #F7E7CE' : '0 4px 16px rgba(255,182,193,0.5), inset 0 0 0 1px rgba(255,255,255,0.6)', animation: isOpen ? 'pulse 2s ease-in-out infinite' : `float ${4 + i * 0.5}s ease-in-out infinite`, transform: isOpen ? 'scale(1.02)' : 'scale(1)', overflow: 'hidden' }} > {/* pearl corners */} {[0,1,2,3].map(c => (

= 2 ? 6 : 'auto', left: c % 2 === 0 ? 6 : 'auto', right: c % 2 === 1 ? 6 : 'auto' }} /> ))}

{isOpen ? renderVignetteFace(v) : v.emoji}

{v.title}

{isOpen && (

"{v.secret}"

)} {!isOpen && (

tap to unveil

)}

); })}

{/* Whispering Ribbon Gallery */}

album ribbons

{currentPhoto && (

setExpandedPhoto(currentPhoto)} style={{ flex: 1, position: 'relative', background: 'linear-gradient(135deg, #FFF8F0, #FADADD)', borderRadius: '50% 50% 20px 20px / 30px 30px 20px 20px', padding: '20px 16px 16px', cursor: 'pointer', transition: 'all 0.3s', boxShadow: '0 6px 20px rgba(199,21,133,0.25), inset 0 0 0 3px rgba(247,231,206,0.8), inset 0 0 0 5px #fff', textAlign: 'center' }} > {/* Bow on top */}

🎀

{currentPhoto.emoji}

{currentPhoto.caption}

{galleryIdx + 1} / {(gallery || []).length} ✦ tap to bloom

)} {/* Page dots */}

{(gallery || []).map((g, i) => (

))}

{/* Expanded photo overlay */} {expandedPhoto && (

setExpandedPhoto(null)} style={{ position: 'fixed', inset: 0, background: 'rgba(255,228,236,0.85)', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 100, padding: 20, animation: 'openLocket 0.4s ease-out' }} > {['✨','✨','🌸','✨','💗','✨'].map((s, i) => (

{s}

))}

🎀

{expandedPhoto.emoji}

{expandedPhoto.caption}

tap anywhere to close ♡

)}

); }