// CoParent — Extended screens (Vault, Child profile, Notifications, Pickup, Schedule editor)
// All use the same Quiet List language: header, amber-when-needed, divider rows, bottom sheets.
// Reuses: CalmHeader, CalmSectionLabel, AmberBanner, ListRow, CalmBottomSheet,
//         PrimaryButton, SecondaryButton, FloatingPlus, CalmAvatar.

// ─── Document Vault ──────────────────────────────────────────────────────────
function VaultScreen({ t, base, onBack }) {
  const docs = COPARENT_DATA.documents;
  const [sheet, setSheet] = React.useState(null);
  const [filter, setFilter] = React.useState('all');
  const groups = ['all', ...Array.from(new Set(docs.map(d => d.group)))];
  const visible = filter === 'all' ? docs : docs.filter(d => d.group === filter);

  // Group rendering by category
  const byGroup = visible.reduce((a, d) => { (a[d.group] = a[d.group] || []).push(d); return a; }, {});

  return (
    <div style={{ flex: 1, overflowY: 'auto', display: 'flex', flexDirection: 'column',
      padding: '0 0 24px', position: 'relative' }}>
      <BackHeader title="Documents" subtitle="Shared vault · 7 files" t={t} base={base} onBack={onBack} />

      {/* Filter chips */}
      <div style={{ padding: '8px 22px 0', display: 'flex', gap: 8, flexWrap: 'wrap' }}>
        {groups.map(g => (
          <div key={g} onClick={() => setFilter(g)} style={{
            padding: '6px 14px', borderRadius: 16, fontSize: 13, fontWeight: 600,
            background: filter === g ? t.text : t.bgSecondary,
            color: filter === g ? t.bg : t.subtext, cursor: 'pointer' }}>
            {g === 'all' ? 'All' : g}
          </div>
        ))}
      </div>

      {Object.entries(byGroup).map(([group, items]) => (
        <div key={group} style={{ padding: '24px 22px 0' }}>
          <CalmSectionLabel label={group} t={t} action={`${items.length}`} />
          <div>
            {items.map((doc, i) => (
              <ListRow key={doc.id} t={t} last={i === items.length - 1}
                onClick={() => setSheet(doc)}
                left={
                  <div style={{ width: 36, height: 44, borderRadius: 6, background: t.bgSecondary,
                    display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                    fontSize: 9, fontWeight: 800, color: t.subtext, letterSpacing: 0.5 }}>
                    {doc.kind.toUpperCase()}
                  </div>
                }
                primary={doc.name}
                secondary={`Updated ${doc.updated} · ${doc.size}${doc.shared ? ' · Shared' : ''}`}
                right={<span style={{ fontSize: 18, color: t.subtext }}>›</span>}
              />
            ))}
          </div>
        </div>
      ))}

      <FloatingPlus base={base} onClick={() => setSheet({ upload: true })} />

      {sheet && (
        <CalmBottomSheet t={t} onClose={() => setSheet(null)}>
          {sheet.upload ? (
            <>
              <div style={{ fontSize: 22, fontWeight: 800, color: t.text, marginBottom: 4, letterSpacing: -0.3 }}>Add a document</div>
              <div style={{ fontSize: 13, color: t.subtext, marginBottom: 22 }}>Shared with Jordan</div>
              <div>
                <ListRow t={t} primary="Take a photo" secondary="Receipts, IDs, forms" onClick={() => setSheet(null)}
                  right={<span style={{ fontSize: 18, color: t.subtext }}>›</span>} />
                <ListRow t={t} primary="Upload from files" secondary="PDF, image, doc" onClick={() => setSheet(null)}
                  right={<span style={{ fontSize: 18, color: t.subtext }}>›</span>} />
                <ListRow t={t} primary="Scan document" secondary="Auto-crop & enhance" last onClick={() => setSheet(null)}
                  right={<span style={{ fontSize: 18, color: t.subtext }}>›</span>} />
              </div>
            </>
          ) : (
            <>
              <div style={{ fontSize: 13, color: t.subtext, marginBottom: 8 }}>{sheet.group} · {sheet.size}</div>
              <div style={{ fontSize: 22, fontWeight: 800, color: t.text, marginBottom: 6, letterSpacing: -0.3 }}>{sheet.name}</div>
              <div style={{ fontSize: 14, color: t.subtext, marginBottom: 22 }}>Updated {sheet.updated} · Shared with Jordan</div>
              <div style={{ height: 180, background: t.bgSecondary, borderRadius: 14,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: t.subtext, fontSize: 13, marginBottom: 18 }}>Preview</div>
              <div style={{ display: 'flex', gap: 10 }}>
                <SecondaryButton label="Share" t={t} onClick={() => setSheet(null)} />
                <PrimaryButton label="Open" base={base} onClick={() => setSheet(null)} />
              </div>
            </>
          )}
        </CalmBottomSheet>
      )}
    </div>
  );
}

// ─── Child Profile ───────────────────────────────────────────────────────────
function ChildProfileScreen({ t, base, child, onBack }) {
  const profile = COPARENT_DATA.childProfiles[child.id];
  const [sheet, setSheet] = React.useState(null);

  return (
    <div style={{ flex: 1, overflowY: 'auto', padding: '0 0 24px' }}>
      <BackHeader title={child.name} subtitle={`Age ${child.age} · ${profile.school.grade}`}
        t={t} base={base} onBack={onBack} />

      {/* Avatar + meta hero */}
      <div style={{ padding: '20px 22px 0', display: 'flex', alignItems: 'center', gap: 16 }}>
        <CalmAvatar name={child.name} color={child.color} size={64} />
        <div>
          <div style={{ fontSize: 13, color: t.subtext, fontWeight: 600 }}>{profile.school.name}</div>
          <div style={{ fontSize: 13, color: t.subtext, marginTop: 2 }}>Teacher · {profile.school.teacher}</div>
        </div>
      </div>

      {/* Notes (parent voice) */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Care notes" t={t} action="Edit" />
        <div style={{ fontSize: 15, color: t.text, lineHeight: 1.55, padding: '4px 0' }}>{profile.notes}</div>
      </div>

      {/* Medical */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Medical" t={t} />
        <div>
          <ListRow t={t} primary="Doctor" right={<span style={{ fontSize: 13, color: t.text, fontWeight: 600 }}>{profile.medical.doctor}</span>} />
          <ListRow t={t} primary="Allergies"
            right={<span style={{ fontSize: 13, color: profile.medical.allergies.length ? base.red : t.subtext, fontWeight: 600 }}>
              {profile.medical.allergies.length ? profile.medical.allergies.join(', ') : 'None'}
            </span>} />
          <ListRow t={t} primary="Medications" last
            right={<span style={{ fontSize: 13, color: t.text, fontWeight: 600 }}>
              {profile.medical.meds.length ? profile.medical.meds.join(', ') : 'None'}
            </span>} />
        </div>
      </div>

      {/* Activities */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Activities" t={t} action="Add" />
        <div>
          {profile.activities.map((a, i) => (
            <ListRow key={a} t={t} last={i === profile.activities.length - 1}
              primary={a} right={<span style={{ fontSize: 18, color: t.subtext }}>›</span>} onClick={() => {}} />
          ))}
        </div>
      </div>

      {/* Contacts */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Key contacts" t={t} />
        <div>
          {profile.contacts.map((c, i) => (
            <ListRow key={c.name} t={t} last={i === profile.contacts.length - 1}
              onClick={() => setSheet(c)}
              primary={c.name} secondary={c.role}
              right={<span style={{ fontSize: 13, color: t.subtext }}>{c.phone}</span>}
            />
          ))}
        </div>
      </div>

      {/* Documents tied to child */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Documents" t={t} action="View all" />
        <div>
          {COPARENT_DATA.documents.filter(d => d.name.toLowerCase().includes(child.name.toLowerCase())).map((doc, i, arr) => (
            <ListRow key={doc.id} t={t} last={i === arr.length - 1}
              onClick={() => {}}
              primary={doc.name}
              secondary={`${doc.group} · Updated ${doc.updated}`}
              right={<span style={{ fontSize: 18, color: t.subtext }}>›</span>}
            />
          ))}
        </div>
      </div>

      {sheet && (
        <CalmBottomSheet t={t} onClose={() => setSheet(null)}>
          <div style={{ fontSize: 13, color: t.subtext, marginBottom: 8 }}>{sheet.role}</div>
          <div style={{ fontSize: 22, fontWeight: 800, color: t.text, marginBottom: 4, letterSpacing: -0.3 }}>{sheet.name}</div>
          <div style={{ fontSize: 15, color: t.subtext, marginBottom: 24 }}>{sheet.phone}</div>
          <div style={{ display: 'flex', gap: 10 }}>
            <SecondaryButton label="Message" t={t} onClick={() => setSheet(null)} />
            <PrimaryButton label="Call" base={base} onClick={() => setSheet(null)} />
          </div>
        </CalmBottomSheet>
      )}
    </div>
  );
}

// ─── Notifications Inbox ─────────────────────────────────────────────────────
function NotificationsScreen({ t, base, onBack }) {
  const [items, setItems] = React.useState(COPARENT_DATA.notifications);
  const [sheet, setSheet] = React.useState(null);
  const [swipingId, setSwipingId] = React.useState(null);

  const archive = (id) => setItems(items.filter(i => i.id !== id));
  const urgent = items.filter(i => i.urgent);
  const others = items.filter(i => !i.urgent);

  return (
    <div style={{ flex: 1, overflowY: 'auto', padding: '0 0 24px' }}>
      <BackHeader title="Activity" subtitle={`${urgent.length} need attention`}
        t={t} base={base} onBack={onBack} />

      {urgent.length > 0 && (
        <div style={{ padding: '20px 22px 0' }}>
          <CalmSectionLabel label="Needs attention" t={t} />
          <div>
            {urgent.map((n, i) => (
              <NotifRow key={n.id} n={n} t={t} base={base} last={i === urgent.length - 1}
                isSwiping={swipingId === n.id}
                onSwipe={() => setSwipingId(swipingId === n.id ? null : n.id)}
                onArchive={() => archive(n.id)}
                onTap={() => setSheet(n)}
              />
            ))}
          </div>
        </div>
      )}

      {others.length > 0 && (
        <div style={{ padding: '24px 22px 0' }}>
          <CalmSectionLabel label="Earlier" t={t} action="Mark all read" />
          <div>
            {others.map((n, i) => (
              <NotifRow key={n.id} n={n} t={t} base={base} last={i === others.length - 1}
                isSwiping={swipingId === n.id}
                onSwipe={() => setSwipingId(swipingId === n.id ? null : n.id)}
                onArchive={() => archive(n.id)}
                onTap={() => setSheet(n)}
              />
            ))}
          </div>
        </div>
      )}

      {items.length === 0 && (
        <div style={{ padding: '60px 22px', textAlign: 'center', color: t.subtext, fontSize: 14 }}>
          All clear.
        </div>
      )}

      {sheet && (
        <CalmBottomSheet t={t} onClose={() => setSheet(null)}>
          <div style={{ fontSize: 13, color: t.subtext, marginBottom: 8 }}>
            {sheet.type.charAt(0).toUpperCase() + sheet.type.slice(1)} · {sheet.time}
          </div>
          <div style={{ fontSize: 22, fontWeight: 800, color: t.text, marginBottom: 4, letterSpacing: -0.3 }}>
            {sheet.title}
          </div>
          <div style={{ fontSize: 15, color: t.subtext, lineHeight: 1.5, marginBottom: 24 }}>
            {sheet.desc}
          </div>
          {sheet.actions ? (
            <div style={{ display: 'flex', gap: 10 }}>
              <SecondaryButton label={sheet.actions[1]} t={t} onClick={() => { archive(sheet.id); setSheet(null); }} />
              <PrimaryButton label={sheet.actions[0]} base={base} onClick={() => { archive(sheet.id); setSheet(null); }} />
            </div>
          ) : (
            <PrimaryButton label="Got it" base={base} onClick={() => setSheet(null)} />
          )}
        </CalmBottomSheet>
      )}
    </div>
  );
}

function NotifRow({ n, t, base, last, isSwiping, onSwipe, onArchive, onTap }) {
  const dotColor = n.type === 'request' ? base.amber
    : n.type === 'expense' ? base.accent
    : n.type === 'reminder' ? base.primary : t.subtext;
  return (
    <div style={{ position: 'relative', borderBottom: last ? 'none' : `1px solid ${t.divider}`,
      overflow: 'hidden' }}>
      {/* Reveal-on-swipe archive button */}
      <div onClick={onArchive} style={{ position: 'absolute', right: 0, top: 0, bottom: 0,
        width: 90, background: base.red, color: '#fff', display: 'flex',
        alignItems: 'center', justifyContent: 'center', fontSize: 13, fontWeight: 700, cursor: 'pointer' }}>
        Archive
      </div>
      <div onClick={onTap} style={{
        display: 'flex', alignItems: 'center', gap: 14, padding: '16px 0',
        background: t.bg, position: 'relative',
        transform: isSwiping ? 'translateX(-90px)' : 'translateX(0)',
        transition: 'transform 0.2s', cursor: 'pointer' }}>
        <div style={{ width: 8, height: 8, borderRadius: 4, background: dotColor, flexShrink: 0 }} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 15, fontWeight: 600, color: t.text, lineHeight: 1.3 }}>{n.title}</div>
          <div style={{ fontSize: 13, color: t.subtext, marginTop: 3 }}>{n.desc} · {n.time}</div>
        </div>
        {n.actions ? (
          <div style={{ display: 'flex', gap: 6 }}>
            <div onClick={(e) => { e.stopPropagation(); onArchive(); }}
              style={{ padding: '7px 12px', borderRadius: 10, background: t.bgSecondary,
                fontSize: 12, fontWeight: 700, color: t.subtext, cursor: 'pointer' }}>
              {n.actions[1]}
            </div>
            <div onClick={(e) => { e.stopPropagation(); onArchive(); }}
              style={{ padding: '7px 12px', borderRadius: 10, background: base.primary,
                fontSize: 12, fontWeight: 700, color: '#fff', cursor: 'pointer' }}>
              {n.actions[0]}
            </div>
          </div>
        ) : (
          <span onClick={(e) => { e.stopPropagation(); onSwipe(); }}
            style={{ fontSize: 18, color: t.subtext, padding: '0 6px', cursor: 'pointer' }}>···</span>
        )}
      </div>
    </div>
  );
}

// ─── Pickup Check-in ─────────────────────────────────────────────────────────
function PickupScreen({ t, base, onBack }) {
  const h = COPARENT_DATA.handoff;
  const [step, setStep] = React.useState(0); // index of current step
  const [checks, setChecks] = React.useState(h.checklist.map(c => c.done));
  const advance = () => setStep(s => Math.min(s + 1, h.steps.length - 1));

  return (
    <div style={{ flex: 1, overflowY: 'auto', padding: '0 0 24px' }}>
      <BackHeader title="Pickup" subtitle={h.who} t={t} base={base} onBack={onBack} />

      {/* Hero status */}
      <div style={{ padding: '28px 22px 12px' }}>
        <div style={{ fontSize: 12, fontWeight: 700, color: t.subtext, letterSpacing: 1.2,
          textTransform: 'uppercase', marginBottom: 8 }}>{step === 0 ? 'In 2 hours' : 'In progress'}</div>
        <div style={{ fontSize: 30, fontWeight: 800, color: t.text, letterSpacing: -0.8, lineHeight: 1.1 }}>
          {h.location}
        </div>
        <div style={{ fontSize: 16, color: t.subtext, fontWeight: 500, marginTop: 8 }}>{h.time}</div>
      </div>

      {/* Vertical stepper */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Status" t={t} />
        <div style={{ position: 'relative', paddingLeft: 22 }}>
          {/* Spine */}
          <div style={{ position: 'absolute', left: 7, top: 12, bottom: 12, width: 2,
            background: t.divider }} />
          <div style={{ position: 'absolute', left: 7, top: 12, width: 2,
            height: `${(step / (h.steps.length - 1)) * 100}%`, background: base.primary, transition: 'height 0.3s' }} />
          {h.steps.map((s, i) => {
            const isDone = i < step;
            const isCurrent = i === step;
            return (
              <div key={s.k} style={{ position: 'relative', padding: '8px 0 18px' }}>
                <div style={{ position: 'absolute', left: -22, top: 10,
                  width: 16, height: 16, borderRadius: 8,
                  background: isDone || isCurrent ? base.primary : t.bg,
                  border: `2px solid ${isDone || isCurrent ? base.primary : t.divider}`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  {isDone && <svg width="9" height="9" viewBox="0 0 9 9"><path d="M2 4.5l1.8 2L7 2.5" stroke="#fff" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" fill="none"/></svg>}
                </div>
                <div style={{ fontSize: 15, fontWeight: isCurrent ? 700 : 600,
                  color: isCurrent ? t.text : isDone ? t.subtext : t.text,
                  opacity: isDone ? 0.6 : 1 }}>{s.label}</div>
                <div style={{ fontSize: 13, color: t.subtext, marginTop: 3 }}>{s.sub}</div>
              </div>
            );
          })}
        </div>
      </div>

      {/* Checklist */}
      <div style={{ padding: '8px 22px 0' }}>
        <CalmSectionLabel label="Bring with kids" t={t} />
        <div>
          {h.checklist.map((c, i) => (
            <div key={c.id} onClick={() => setChecks(cs => cs.map((v, j) => i === j ? !v : v))}
              style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '14px 0',
                borderBottom: i < h.checklist.length - 1 ? `1px solid ${t.divider}` : 'none',
                cursor: 'pointer' }}>
              <div style={{ width: 20, height: 20, borderRadius: 10,
                background: checks[i] ? base.primary : 'transparent',
                border: `2px solid ${checks[i] ? base.primary : t.divider}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                {checks[i] && <svg width="11" height="11" viewBox="0 0 11 11"><path d="M2 5.5l2 2L9 3" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/></svg>}
              </div>
              <div style={{ flex: 1, fontSize: 15, color: t.text,
                textDecoration: checks[i] ? 'line-through' : 'none',
                opacity: checks[i] ? 0.55 : 1 }}>{c.label}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Primary action */}
      <div style={{ padding: '24px 22px 0' }}>
        <PrimaryButton
          label={step === 0 ? "I'm on my way" : step === 1 ? "I've arrived" : step === 2 ? 'Confirm handoff complete' : 'Done — view log'}
          base={base} onClick={advance}
        />
        <div style={{ fontSize: 12, color: t.subtext, textAlign: 'center', marginTop: 12 }}>
          Jordan will see your status update in real time.
        </div>
      </div>
    </div>
  );
}

// ─── Custody Schedule Editor ─────────────────────────────────────────────────
function ScheduleEditorScreen({ t, base, onBack }) {
  const r = COPARENT_DATA.scheduleRules;
  const [active, setActive] = React.useState(r.active);
  const [sheet, setSheet] = React.useState(null);

  return (
    <div style={{ flex: 1, overflowY: 'auto', padding: '0 0 24px' }}>
      <BackHeader title="Custody schedule" subtitle="Active rotation · 2-2-3"
        t={t} base={base} onBack={onBack} />

      {/* Visual preview row — 14 days */}
      <div style={{ padding: '20px 22px 0' }}>
        <CalmSectionLabel label="Next 2 weeks" t={t} />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4 }}>
          {Array.from({ length: 14 }, (_, i) => {
            // 2-2-3 demo
            const map = ['A','A','J','J','A','A','A','J','J','A','A','J','J','J'];
            const c = map[i];
            const color = c === 'A' ? base.accent : base.primary;
            return (
              <div key={i} style={{ aspectRatio: '1', background: color + '22', borderRadius: 10,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 12, fontWeight: 700, color }}>
                {c === 'A' ? 'You' : 'J'}
              </div>
            );
          })}
        </div>
      </div>

      {/* Rotation options */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Rotation pattern" t={t} />
        <div>
          {r.options.map((opt, i, arr) => {
            const selected = active === opt.id;
            return (
              <div key={opt.id} onClick={() => setActive(opt.id)}
                style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '16px 0',
                  borderBottom: i < arr.length - 1 ? `1px solid ${t.divider}` : 'none', cursor: 'pointer' }}>
                <div style={{ width: 22, height: 22, borderRadius: 11,
                  border: `2px solid ${selected ? base.primary : t.divider}`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  {selected && <div style={{ width: 10, height: 10, borderRadius: 5, background: base.primary }} />}
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 15, fontWeight: 600, color: t.text }}>{opt.label}</div>
                  <div style={{ fontSize: 13, color: t.subtext, marginTop: 2 }}>{opt.sub}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* Exceptions */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Exceptions" t={t} action="Add" onAction={() => setSheet({ add: true })} />
        <div>
          {r.exceptions.map((ex, i, arr) => (
            <ListRow key={ex.id} t={t} last={i === arr.length - 1}
              onClick={() => setSheet(ex)}
              primary={ex.date}
              secondary={ex.reason}
              right={
                <span style={{ fontSize: 12, fontWeight: 700,
                  color: ex.status === 'pending' ? base.amber : base.green,
                  textTransform: 'uppercase', letterSpacing: 0.5 }}>
                  {ex.status}
                </span>
              }
            />
          ))}
        </div>
      </div>

      {/* Save */}
      <div style={{ padding: '32px 22px 0' }}>
        <PrimaryButton label="Save & sync with Jordan" base={base} onClick={onBack} />
        <div style={{ fontSize: 12, color: t.subtext, textAlign: 'center', marginTop: 12 }}>
          Changes require Jordan's approval before they take effect.
        </div>
      </div>

      {sheet && (
        <CalmBottomSheet t={t} onClose={() => setSheet(null)}>
          {sheet.add ? (
            <>
              <div style={{ fontSize: 22, fontWeight: 800, color: t.text, marginBottom: 4, letterSpacing: -0.3 }}>Add exception</div>
              <div style={{ fontSize: 13, color: t.subtext, marginBottom: 22 }}>One-off override to your rotation</div>
              <div>
                <ListRow t={t} primary="Date(s)" right={<span style={{ fontSize: 13, color: t.subtext }}>Pick</span>} />
                <ListRow t={t} primary="Whose day" right={<span style={{ fontSize: 13, color: t.text, fontWeight: 600 }}>You</span>} />
                <ListRow t={t} primary="Reason" last right={<span style={{ fontSize: 13, color: t.subtext }}>Optional</span>} />
              </div>
              <div style={{ marginTop: 20 }}>
                <PrimaryButton label="Send to Jordan" base={base} onClick={() => setSheet(null)} />
              </div>
            </>
          ) : (
            <>
              <div style={{ fontSize: 13, color: t.subtext, marginBottom: 8 }}>Exception · {sheet.status}</div>
              <div style={{ fontSize: 22, fontWeight: 800, color: t.text, marginBottom: 4, letterSpacing: -0.3 }}>{sheet.date}</div>
              <div style={{ fontSize: 15, color: t.subtext, marginBottom: 24, lineHeight: 1.5 }}>{sheet.reason}</div>
              <div style={{ display: 'flex', gap: 10 }}>
                <SecondaryButton label="Remove" t={t} onClick={() => setSheet(null)} />
                <PrimaryButton label="Edit" base={base} onClick={() => setSheet(null)} />
              </div>
            </>
          )}
        </CalmBottomSheet>
      )}
    </div>
  );
}

// ─── Reusable back-header ────────────────────────────────────────────────────
function BackHeader({ title, subtitle, t, base, onBack }) {
  return (
    <div style={{ padding: '12px 22px 8px', flexShrink: 0,
      display: 'flex', alignItems: 'center', gap: 14 }}>
      <div onClick={onBack} style={{ width: 36, height: 36, borderRadius: 12,
        background: t.bgSecondary, display: 'flex', alignItems: 'center', justifyContent: 'center',
        cursor: 'pointer', flexShrink: 0 }}>
        <svg width="11" height="20" viewBox="0 0 11 20" fill="none">
          <path d="M9 2L2 10l7 8" stroke={t.text} strokeWidth="2.3" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </div>
      <div style={{ minWidth: 0, flex: 1 }}>
        <div style={{ fontSize: 22, fontWeight: 800, color: t.text, letterSpacing: -0.4, lineHeight: 1.1 }}>{title}</div>
        {subtitle && (
          <div style={{ marginTop: 4, display: 'inline-flex', alignItems: 'center', gap: 7 }}>
            <div style={{ width: 6, height: 6, borderRadius: 3, background: base.accent }} />
            <span style={{ fontSize: 12, fontWeight: 600, color: t.subtext, letterSpacing: 0.2 }}>{subtitle}</span>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, {
  VaultScreen, ChildProfileScreen, NotificationsScreen, PickupScreen,
  ScheduleEditorScreen, BackHeader
});