{/* Header */}

✨ Rate My Offer

{/* Main Content List */}

{(offers || []).map((offer, index) => { const isExpanded = expandedId === offer.id; const isNew = newlyAddedId === offer.id; const typeColors = getJobTypeColor(offer.jobType); const isPressed = pressedCard === offer.id; return (

setPressedCard(offer.id)} onPointerUp={() => setPressedCard(null)} onPointerCancel={() => setPressedCard(null)} onClick={() => handleExpand(offer)} style={{ backgroundColor: '#FFFFFF', borderRadius: 20, padding: 20, marginBottom: 16, boxShadow: '0 4px 24px rgba(0,0,0,0.03)', border: '1px solid rgba(0,0,0,0.02)', transition: 'all 0.3s cubic-bezier(0.25, 1, 0.5, 1)', transform: isPressed ? 'scale(0.98)' : 'scale(1)', animation: isNew ? 'popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275)' : 'none', position: 'relative', cursor: 'pointer' }} > {/* NEW Tag */} {isNew && (

NEW ✨

)} {/* Demo Tag */} {offer.isDemo && (

Demo

)}

{offer.company}

📍 {offer.city}

{offer.jobType}

{formatCurrency(offer.monthlyPay)} /mo

{/* Expanded Details */}

🏠 {offer.housing ? 'Housing Provided' : 'No Housing'}

✈️ {offer.travel ? 'Travel Covered' : 'No Travel'}

{/* AI Commentary Area */}

{isGenerating[offer.id] && !aiComments[offer.id] ? (

✨ reading the tea leaves...

) : (

{aiComments[offer.id] || "Tap to see what our AI career bestie thinks!"}

)}

{/* Footer row */}

{ e.stopPropagation(); if (offer._user?.handle && typeof openProfile === 'function') { openProfile(offer._user.handle); } }} style={{ display: 'flex', alignItems: 'center', gap: 8, opacity: 0.8 }} >

{!offer._user?.profileImageUrl && "👤"}

{offer._user?.displayName || 'Anonymous'}

{timeAgo(offer._timestamp)}

); })} {(offers || []).length === 0 && (

✨

No offers yet. Be the first to share your win!

)}

{/* Floating Action Button */} {/* Bottom Sheet Form Overlay */} {isFormOpen && (

setIsFormOpen(false)} style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.2)', backdropFilter: 'blur(4px)', WebkitBackdropFilter: 'blur(4px)', zIndex: 100, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }} >

e.stopPropagation()} style={{ backgroundColor: '#FFFFFF', borderTopLeftRadius: 32, borderTopRightRadius: 32, padding: '24px 24px calc(env(safe-area-inset-bottom, 20px) + 24px) 24px', boxShadow: '0 -10px 40px rgba(0,0,0,0.1)', animation: 'slideUp 0.3s cubic-bezier(0.25, 1, 0.5, 1)' }} >

Share Your Win ✨

setForm({...form, company: e.target.value})} style={{ flex: 1, height: 48, border: '1px solid #EAEAEA', borderRadius: 12, padding: '0 16px', fontSize: 16, backgroundColor: '#FAFAFA' }} /> setForm({...form, city: e.target.value})} style={{ flex: 1, height: 48, border: '1px solid #EAEAEA', borderRadius: 12, padding: '0 16px', fontSize: 16, backgroundColor: '#FAFAFA' }} />

$ setForm({...form, monthlyPay: e.target.value})} style={{ width: '100%', height: 48, border: '1px solid #EAEAEA', borderRadius: 12, padding: '0 16px 0 32px', fontSize: 16, backgroundColor: '#FAFAFA', boxSizing: 'border-box' }} />

)} {/* Confetti Overlay */} {showConfetti && (

{[...Array(20)].map((_, i) => (

0.5 ? 24 : 32, animation: `fall ${2 + Math.random() * 2}s linear ${Math.random() * 0.5}s forwards` }}> {['✨', '💰', '🎉', '🥂', '💸'][Math.floor(Math.random() * 5)]}

))}

)}

); }