{children}

); const BackgroundGlow = () => (

); const Modal = ({ isOpen, onClose, children }) => (

{children}

); const filteredApps = (applications || []).filter(app => filter === 'all' ? true : (getDaysUntil(app.deadline) !== null && getDaysUntil(app.deadline) <= 7) ); return (

{/* 🎊 Confetti Overlay */} {confetti && (

{Array.from({ length: 50 }).map((_, i) => (

))}

)} {/* HEADER */}

InternSeek

{(applications || []).length} active • {(applications || []).filter(a => a.stage === 'offer').length} offers ✨

openProfile(user?.handle)} style={{ width: 44, height: 44, borderRadius: '50%', background: user?.avatarUrl ? `url(${user.avatarUrl}) center/cover` : THEME.gradients.primary, boxShadow: '0 0 15px rgba(139, 92, 246, 0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16, fontWeight: 700 }}> {!user?.avatarUrl && (user?.name?.[0] || 'U')}

{/* TABS */}

{['all', 'upcoming'].map(f => ( ))}

{/* SCROLLABLE LIST */}

{(STAGES || []).map(stage => { const stageApps = (filteredApps || []).filter(a => a.stage === stage.id); if ((stageApps || []).length === 0 && filter === 'upcoming') return null; return (

{stage.icon} {stage.label} {(stageApps || []).length}

{(stageApps || []).map(app => { const daysLeft = getDaysUntil(app.deadline); const isUrgent = daysLeft !== null && daysLeft <= 3 && daysLeft >= 0; const stageStyle = THEME.stages[app.stage]; return ( setActiveCard(app)} style={{ padding: 20, borderLeft: `4px solid ${stageStyle.color}`, boxShadow: app.stage === 'offer' ? stageStyle.glow : '0 8px 32px 0 rgba(0, 0, 0, 0.3)', cursor: 'pointer', transition: 'transform 0.2s, box-shadow 0.2s', background: app.stage === 'offer' ? 'rgba(16, 185, 129, 0.1)' : THEME.glass.base }} >

{app.company}

{app.deadline && (

⏳ {daysLeft < 0 ? 'Late' : daysLeft === 0 ? 'Today' : `${daysLeft}d`}

)}

{app.role}

{app._user?.avatarUrl ?

: 👤 }

{app._user?.displayName || 'You'}

{(STAGES || []).find(s => s.id === app.stage)?.label.toUpperCase()}

); })} {(stageApps || []).length === 0 && filter === 'all' && (

Drop applied jobs here

)}

); })}

{/* FAB - Modified to Square with Curved Corners */} {/* EDIT MODAL */} setActiveCard(null)}> {activeCard && (

{activeCard.company}

{activeCard.role}

{/* Stage Selector */}

{(STAGES || []).map(stage => ( ))}

{/* Salary Section */}

💰

Salary / Rate updateApplication(activeCard.id, { salaryRange: e.target.value })} placeholder="e.g. $45/hr" style={{ width: '100%', border: 'none', fontSize: 16, fontWeight: 600, color: '#34D399', outline: 'none', background: 'transparent', textShadow: '0 0 20px rgba(52, 211, 153, 0.4)' }} />

{/* Culture Vibe */}

🏛️ Vibe Check

{['mission', 'values'].map(field => (

{field}

{
                         const current = activeCard.culture || {};
                         updateApplication(activeCard.id, { culture: { ...current, [field]: e.target.value } });
                      }}
                      placeholder={field === 'mission' ? "What's their goal?" : "Work culture notes..."}
                      style={{
                        width: '100%', minHeight: 60, padding: '12px', borderRadius: 12,
                        border: '1px solid rgba(139, 92, 246, 0.2)', 
                        background: 'rgba(0,0,0,0.2)', 
                        color: '#fff', fontSize: 14, resize: 'none', outline: 'none'
                      }}
                    />
                  </div>
                ))}
              </div>
            </div>

{/* Notes */}
            <div>
              <label style={{ display: 'block', fontSize: 12, fontWeight: 700, color: THEME.text.secondary, marginBottom: 8 }}>
                NOTES
              </label>
              <textarea
                value={activeCard.notes || ''}
                onChange={(e) => updateApplication(activeCard.id, { notes: e.target.value })}
                placeholder="Interview details, thoughts..."
                style={{
                  width: '100%', minHeight: 100, padding: 16, borderRadius: 16,
                  border: `1px solid ${THEME.glass.border}`, 
                  background: THEME.glass.base, 
                  color: '#fff', fontSize: 15,
                  resize: 'none', outline: 'none'
                }}
              />
            </div>

{/* Deadline */}
            <div>
              <label style={{ display: 'block', fontSize: 12, fontWeight: 700, color: THEME.text.secondary, marginBottom: 8 }}>DEADLINE</label>
              <input
                type="date"
                value={activeCard.deadline ? activeCard.deadline.split('T')[0] : ''}
                onChange={(e) => updateApplication(activeCard.id, { deadline: e.target.value ? new Date(e.target.value).toISOString() : null })}
                style={{
                  width: '100%', height: 50, padding: '0 16px', borderRadius: 14,
                  border: `1px solid ${THEME.glass.border}`, 
                  background: THEME.glass.base,
                  color: '#fff', fontSize: 16, fontFamily: 'inherit'
                }}
              />
            </div>

<button 
              onClick={() => setActiveCard(null)}
              style={{ 
                width: '100%', height: 56, borderRadius: 18, 
                background: '#fff', color: '#000',
                fontSize: 16, fontWeight: 700, border: 'none', marginTop: 12,
                boxShadow: '0 0 20px rgba(255,255,255,0.3)'
              }}
            >
              Done
            </button>
          </div>
        )}
      </Modal>

{/* ADD MODAL */}
      <Modal isOpen={isAdding} onClose={() => setIsAdding(false)}>
        <form 
          onSubmit={(e) => {
            e.preventDefault();
            const formData = new FormData(e.target);
            addApplication({
              company: formData.get('company'),
              role: formData.get('role'),
              deadline: formData.get('deadline') ? new Date(formData.get('deadline')).toISOString() : null
            });
          }}
          style={{ display: 'flex', flexDirection: 'column', gap: 20 }}
        >
          <h2 style={{ fontSize: 28, fontWeight: 800, margin: 0, color: '#fff', textAlign: 'center' }}>New Opportunity ✨</h2>
          
          <div style={{ marginTop: 10 }}>
            <input name="company" placeholder="Company Name" required autoFocus
              style={{ 
                width: '100%', height: 56, background: THEME.glass.base, border: `1px solid ${THEME.glass.border}`, 
                borderRadius: 16, padding: '0 20px', fontSize: 18, color: '#fff', outline: 'none'
              }}
            />
          </div>

<div>
            <label style={{ display: 'block', fontSize: 12, fontWeight: 700, color: THEME.text.tertiary, marginBottom: 8, paddingLeft: 4 }}>DEADLINE (OPTIONAL)</label>
            <input name="deadline" type="date"
              style={{ 
                width: '100%', height: 56, background: THEME.glass.base, border: `1px solid ${THEME.glass.border}`, 
                borderRadius: 16, padding: '0 20px', fontSize: 16, color: '#fff', outline: 'none', fontFamily: 'inherit'
              }}
            />
          </div>

<button type="submit" style={{ 
            width: '100%', height: 60, background: THEME.gradients.primary, 
            color: '#fff', border: 'none', borderRadius: 20, fontSize: 18, fontWeight: 700, marginTop: 12,
            boxShadow: '0 0 30px rgba(236, 72, 153, 0.4)'
          }}>
            Add to Pipeline 🚀
          </button>
        </form>
      </Modal>
    </div>
  );
}</article></body></html>