{d?.eventName ?? 'Untitled Event'}

📅 {d?.eventDate ?? 'TBC'} 📍 {d?.eventVenue ?? 'TBC'}

{/* PROGRESS BAR */}

{completedCount}/{(phases || []).length}

{/* COLLABORATORS */}

{(memberList || []).slice(0, 5).map((m, i) => (

0 ? -8 : 0 }}> {m?.avatarUrl ? '' : (m?.displayName ?? '?')[0]}

))} {(memberList || []).length} collaborator{(memberList || []).length !== 1 ? 's' : ''}

{/* AURA PANEL */} {d?.showAura && (

Aura Editor

{[ { label: 'Spacing', key: 'spacing', min: 0.6, max: 1.6 }, { label: 'Animation Speed', key: 'animSpeed', min: 0.3, max: 2 }, { label: 'Font Weight', key: 'fontWeight', min: 200, max: 600 } ].map(s => (

{s.label} { const val = parseFloat(e.target.value); saveData({ ...d, aura: { ...aura, [s.key]: val } }); }} style={{ flex: 1, accentColor: '#1A1A1A' }} /> {Math.round((aura?.[s.key] ?? 1) * (s.key === 'fontWeight' ? 1 : 10)) / (s.key === 'fontWeight' ? 1 : 10)}

))}

)} {/* PHASES LIST */}

{(phases || []).map((phase, idx) => { if (!phase) return null; const st = getStatus(phase?.status); const isEditing = d?.editingPhase === phase?.id; const isExpanded = phase?.expanded; return (

toggleExpand(phase.id)} style={{ display: 'flex', alignItems: 'flex-start', gap: 12, cursor: 'pointer' }} > {/* Timeline dot */}

{idx < (phases || []).length - 1 && (

)}

{phase?.title ?? 'Untitled'}

›

🕐 {phase?.time ?? 'TBC'} {st.label}

{/* EXPANDED CONTENT */} {isExpanded && (

{!isEditing ? ( <>

Owner: {phase?.owner ?? 'Unassigned'}

{phase?.details ?? 'No details'}

) : (

{['title', 'time', 'owner', 'details'].map(field => (

{field}

{field === 'details' ? (

e.stopPropagation()}
                              onChange={e => setLocal(p => ({ ...p, editForm: { ...p.editForm, [field]: e.target.value } }))}
                              rows={3}
                              style={{
                                width: '100%', padding: 10, border: '1px solid #E0DDD6',
                                borderRadius: 10, fontSize: 14, fontFamily: 'inherit',
                                fontWeight: fw, resize: 'none', background: '#FAFAF8',
                                boxSizing: 'border-box', outline: 'none'
                              }}
                            />
                          ) : (
                            <input
                              value={local.editForm?.[field] ?? ''}
                              onClick={e => e.stopPropagation()}
                              onChange={e => setLocal(p => ({ ...p, editForm: { ...p.editForm, [field]: e.target.value } }))}
                              style={{
                                width: '100%', padding: 10, border: '1px solid #E0DDD6',
                                borderRadius: 10, fontSize: 14, fontFamily: 'inherit',
                                fontWeight: fw, background: '#FAFAF8',
                                boxSizing: 'border-box', outline: 'none'
                              }}
                            />
                          )}
                        </div>
                      ))}
                      <div style={{ display: 'flex', gap: 8, marginTop: 4 }}>
                        <button
                          onClick={(e) => { e.stopPropagation(); saveEdit(); }}
                          style={{
                            background: '#1A1A1A', color: '#fff', border: 'none',
                            borderRadius: 20, padding: '10px 20px', fontSize: 13,
                            fontWeight: 600, cursor: 'pointer', flex: 1, transition: baseTransition
                          }}
                        >
                          Save Changes
                        </button>
                        <button
                          onClick={(e) => { e.stopPropagation(); saveData({ ...d, editingPhase: null }); }}
                          style={{
                            background: '#F0EDE8', color: '#666', border: 'none',
                            borderRadius: 20, padding: '10px 20px', fontSize: 13,
                            fontWeight: 500, cursor: 'pointer', transition: baseTransition
                          }}
                        >
                          Cancel
                        </button>
                      </div>
                    </div>
                  )}
                </div>
              )}
            </div>
          );
        })}

{/* ADD NEW PHASE */}
        {local.addingNew ? (
          <div style={{
            background: '#fff', borderRadius: 14, padding: basePad,
            border: '1px solid #D5D0C8', marginBottom: basePad
          }}>
            <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: 2, color: '#999', textTransform: 'uppercase', marginBottom: 12 }}>New Phase</div>
            {['title', 'time', 'owner', 'details'].map(field => (
              <div key={field} style={{ marginBottom: 10 }}>
                <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: 1.5, color: '#BBB', textTransform: 'uppercase', marginBottom: 4 }}>{field}</div>
                <input
                  placeholder={field === 'title' ? 'e.g. Coffee Break' : field === 'time' ? 'e.g. 14:00 – 14:30' : field === 'owner' ? 'e.g. Ops Team' : 'Brief description...'}
                  value={local.newForm?.[field] ?? ''}
                  onChange={e => setLocal(p => ({ ...p, newForm: { ...p.newForm, [field]: e.target.value } }))}
                  style={{
                    width: '100%', padding: 10, border: '1px solid #E0DDD6',
                    borderRadius: 10, fontSize: 14, fontFamily: 'inherit',
                    fontWeight: fw, background: '#FAFAF8',
                    boxSizing: 'border-box', outline: 'none'
                  }}
                />
              </div>
            ))}
            <div style={{ display: 'flex', gap: 8, marginTop: 4 }}>
              <button
                onClick={addPhase}
                style={{
                  background: '#1A1A1A', color: '#fff', border: 'none',
                  borderRadius: 20, padding: '10px 20px', fontSize: 13,
                  fontWeight: 600, cursor: 'pointer', flex: 1, transition: baseTransition
                }}
              >
                Add to Runsheet
              </button>
              <button
                onClick={() => setLocal(p => ({ ...p, addingNew: false }))}
                style={{
                  background: '#F0EDE8', color: '#666', border: 'none',
                  borderRadius: 20, padding: '10px 20px', fontSize: 13,
                  fontWeight: 500, cursor: 'pointer', transition: baseTransition
                }}
              >
                Cancel
              </button>
            </div>
          </div>
        ) : (
          <button
            onClick={() => setLocal(p => ({ ...p, addingNew: true }))}
            style={{
              width: '100%', padding: 14, background: 'transparent',
              border: '2px dashed #DDD8CF', borderRadius: 14,
              fontSize: 14, color: '#AAA', cursor: 'pointer',
              fontWeight: 500, fontFamily: 'inherit',
              transition: baseTransition, marginBottom: basePad
            }}
          >
            + Add Phase
          </button>
        )}
      </div>

{/* BOTTOM BAR */}
      <div style={{
        position: 'fixed', bottom: 0, left: 0, right: 0,
        background: 'rgba(250, 250, 248, 0.9)',
        backdropFilter: 'blur(20px)',
        WebkitBackdropFilter: 'blur(20px)',
        borderTop: '1px solid #EAE7E1',
        padding: '12px 20px',
        paddingBottom: 'env(safe-area-inset-bottom, 12px)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center'
      }}>
        <div style={{ fontSize: 12, color: '#AAA', fontWeight: fw }}>
          {(phases || []).length} phases · {completedCount} complete
        </div>
        <div style={{
          fontSize: 11, fontWeight: 600, letterSpacing: 1,
          color: progress >= 100 ? '#2D8B4E' : '#999',
          textTransform: 'uppercase'
        }}>
          {progress >= 100 ? '✅ Event Ready' : `${Math.round(progress)}% Complete`}
        </div>
      </div>

</div>
  );
}</article></body></html>