// CoParent — State variants + extra content screens
// Home state variants share Quiet List language but reflect different contexts.

// ─── HOME · Pre-pair (Jordan hasn't joined yet) ──────────────────────────────
function HomePrePair({ t, base, openStack }) {
  return (
    <div style={{ flex: 1, overflowY: 'auto', padding: '12px 22px 24px',
      display: 'flex', flexDirection: 'column', gap: 26 }}>
      <div>
        <div style={{ fontSize: 28, fontWeight: 800, color: t.text, letterSpacing: -0.6, lineHeight: 1.1 }}>Today</div>
        <div style={{ marginTop: 6, display: 'inline-flex', alignItems: 'center', gap: 7 }}>
          <div style={{ width: 6, height: 6, borderRadius: 3, background: t.subtext }} />
          <span style={{ fontSize: 12, fontWeight: 600, color: t.subtext, letterSpacing: 0.2 }}>Solo for now</span>
        </div>
      </div>

      {/* Big invite card */}
      <div onClick={() => openStack && openStack({ kind: 'pair' })}
        style={{ padding: '20px', borderRadius: 18, background: t.bgSecondary,
        border: `1.5px dashed ${t.divider}`, cursor: 'pointer' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 14 }}>
          <div style={{ width: 44, height: 44, borderRadius: 22, background: base.accent,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: '#fff', fontSize: 16, fontWeight: 800 }}>A</div>
          <div style={{ width: 22, height: 1, background: t.divider }} />
          <div style={{ width: 44, height: 44, borderRadius: 22, background: t.bg,
            border: `2px dashed ${t.divider}`, color: t.subtext,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 16, fontWeight: 800 }}>?</div>
        </div>
        <div style={{ fontSize: 17, fontWeight: 700, color: t.text, lineHeight: 1.35, marginBottom: 6 }}>
          Invite your co-parent so this becomes a shared space.
        </div>
        <div style={{ fontSize: 13, color: t.subtext, lineHeight: 1.5, marginBottom: 14 }}>
          Schedule, expenses, and updates flow between you. Everything you add now will be waiting when they join.
        </div>
        <div style={{ display: 'inline-flex', alignItems: 'center', padding: '8px 14px',
          background: base.primary, color: '#fff', borderRadius: 10,
          fontSize: 13, fontWeight: 700 }}>Send invite →</div>
      </div>

      {/* Solo schedule */}
      <div>
        <CalmSectionLabel label="Your schedule" t={t} />
        <div>
          {TODAY_CONTEXT.moments.filter(m => !m.done).slice(0, 3).map((m, i, arr) => (
            <div key={m.id} style={{ display: 'flex', alignItems: 'center', gap: 18,
              padding: '16px 0', borderBottom: i < arr.length - 1 ? `1px solid ${t.divider}` : 'none' }}>
              <div style={{ width: 64, fontSize: 13, fontWeight: 700, color: t.subtext }}>{m.time}</div>
              <div style={{ flex: 1, fontSize: 16, color: t.text, fontWeight: 500 }}>{m.label}</div>
            </div>
          ))}
        </div>
      </div>

      <div style={{ fontSize: 12, color: t.subtext, textAlign: 'center', lineHeight: 1.6, marginTop: 'auto' }}>
        Everything you log is private until Jordan joins.<br/>Your records are court-ready either way.
      </div>
    </div>
  );
}

// ─── HOME · Their day ─────────────────────────────────────────────────────────
function HomeTheirDay({ t, base, openStack }) {
  return (
    <div style={{ flex: 1, overflowY: 'auto', padding: '12px 22px 24px',
      display: 'flex', flexDirection: 'column', gap: 24 }}>
      <div>
        <div style={{ fontSize: 28, fontWeight: 800, color: t.text, letterSpacing: -0.6, lineHeight: 1.1 }}>Today</div>
        <div style={{ marginTop: 6, display: 'inline-flex', alignItems: 'center', gap: 7 }}>
          <div style={{ width: 6, height: 6, borderRadius: 3, background: base.primary }} />
          <span style={{ fontSize: 12, fontWeight: 600, color: t.subtext, letterSpacing: 0.2 }}>Jordan's day · with Emma & Liam</span>
        </div>
      </div>

      {/* Soft hero: countdown until your next time */}
      <div style={{ padding: '22px', borderRadius: 18, background: base.primaryLight }}>
        <div style={{ fontSize: 12, fontWeight: 700, color: base.primary, letterSpacing: 1.2, textTransform: 'uppercase' }}>You're up next</div>
        <div style={{ fontSize: 28, fontWeight: 800, color: t.text, letterSpacing: -0.6, lineHeight: 1.15, marginTop: 6 }}>
          Pickup Friday<br/>at 3:00 PM
        </div>
        <div style={{ fontSize: 13, color: t.subtext, marginTop: 8 }}>In 2 days · Lincoln Elementary</div>
      </div>

      {/* Soft updates */}
      <div>
        <CalmSectionLabel label="From Jordan" t={t} />
        <div>
          <ListRow t={t}
            onClick={() => openStack && openStack({ kind: 'journal' })}
            primary="Liam used inhaler before bed"
            secondary="Health log · last night" />
          <ListRow t={t} last
            onClick={() => openStack && openStack({ kind: 'journal' })}
            primary="Emma lost her first tooth"
            secondary="Journal · 6:00 PM"
            right={<span style={{ fontSize: 18, color: t.subtext }}>›</span>} />
        </div>
      </div>

      {/* Approvals waiting */}
      <div>
        <AmberBanner t={t} base={base}
          kicker="1 NEEDS YOU"
          title="Jordan submitted an expense — $32.50"
          onClick={() => openStack && openStack({ kind: 'notifications' })} />
      </div>

      <div style={{ fontSize: 13, color: t.subtext, textAlign: 'center', lineHeight: 1.55, marginTop: 'auto' }}>
        Take the day off. We'll keep things flowing.
      </div>
    </div>
  );
}

// ─── HOME · Handoff active (mid-handoff state) ───────────────────────────────
function HomeHandoffActive({ t, base, openStack }) {
  const [count, setCount] = React.useState(28);
  React.useEffect(() => {
    const i = setInterval(() => setCount(c => c > 0 ? c - 1 : 0), 60000);
    return () => clearInterval(i);
  }, []);

  return (
    <div style={{ flex: 1, overflowY: 'auto', padding: '12px 22px 24px',
      display: 'flex', flexDirection: 'column', gap: 24 }}>
      <div>
        <div style={{ fontSize: 28, fontWeight: 800, color: t.text, letterSpacing: -0.6, lineHeight: 1.1 }}>Handoff today</div>
        <div style={{ marginTop: 6, display: 'inline-flex', alignItems: 'center', gap: 7 }}>
          <div style={{ width: 6, height: 6, borderRadius: 3, background: base.amber }} />
          <span style={{ fontSize: 12, fontWeight: 600, color: t.subtext, letterSpacing: 0.2 }}>In progress · you pick up</span>
        </div>
      </div>

      {/* Countdown hero */}
      <div style={{ padding: '24px 22px', borderRadius: 18,
        background: `linear-gradient(160deg, ${base.amber} 0%, ${base.primary} 100%)`,
        color: '#fff', textAlign: 'center' }}>
        <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: 1.5, textTransform: 'uppercase', opacity: 0.85 }}>Pickup in</div>
        <div style={{ fontSize: 64, fontWeight: 800, letterSpacing: -3, lineHeight: 1, marginTop: 4 }}>{count}<span style={{ fontSize: 24, fontWeight: 700, opacity: 0.85, marginLeft: 4 }}>min</span></div>
        <div style={{ fontSize: 14, marginTop: 10, opacity: 0.92 }}>Lincoln Elementary · 3:00 PM</div>
      </div>

      {/* Primary action */}
      <PrimaryButton label="I'm on my way" base={base}
        onClick={() => openStack && openStack({ kind: 'pickup' })} />

      {/* Mini checklist */}
      <div>
        <CalmSectionLabel label="Don't forget" t={t} action="Full list"
          onAction={() => openStack && openStack({ kind: 'pickup' })} />
        <div>
          <ListRow t={t} primary="Emma — backpack & water bottle"
            left={<Checkbox base={base} t={t} on={false} />} />
          <ListRow t={t} primary="Liam — inhaler & blanket"
            left={<Checkbox base={base} t={t} on={false} />} />
          <ListRow t={t} last primary="Permission slip signed"
            left={<Checkbox base={base} t={t} on />} />
        </div>
      </div>
    </div>
  );
}
function Checkbox({ base, t, on }) {
  return (
    <div style={{ width: 22, height: 22, borderRadius: 11, flexShrink: 0,
      background: on ? base.primary : 'transparent',
      border: `2px solid ${on ? base.primary : t.divider}`,
      display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      {on && <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>
  );
}

// ─── Swap approval inbox ────────────────────────────────────────────────────
function SwapInboxScreen({ t, base, onBack }) {
  const swaps = COPARENT_DATA.swapInbox;
  const [sheet, setSheet] = React.useState(null);
  const incoming = swaps.filter(s => s.from === 'Jordan' && s.status === 'pending');
  const sent = swaps.filter(s => s.from === 'You' && s.status === 'pending');
  const past = swaps.filter(s => s.status !== 'pending');

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

      {incoming.length > 0 && (
        <div style={{ padding: '20px 22px 0' }}>
          <CalmSectionLabel label="Need your reply" t={t} />
          {incoming.map((s, i, arr) => (
            <SwapCard key={s.id} swap={s} t={t} base={base} last={i === arr.length - 1}
              onTap={() => setSheet(s)} />
          ))}
        </div>
      )}

      {sent.length > 0 && (
        <div style={{ padding: '24px 22px 0' }}>
          <CalmSectionLabel label="Waiting on Jordan" t={t} />
          {sent.map((s, i, arr) => (
            <SwapCard key={s.id} swap={s} t={t} base={base} last={i === arr.length - 1}
              onTap={() => setSheet(s)} />
          ))}
        </div>
      )}

      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Past swaps" t={t} action={`${past.length}`} />
        {past.map((s, i, arr) => (
          <SwapCard key={s.id} swap={s} t={t} base={base} last={i === arr.length - 1}
            onTap={() => setSheet(s)} />
        ))}
      </div>

      <div style={{ padding: '32px 22px 0' }}>
        <PrimaryButton label="Request a swap" base={base}
          onClick={() => setSheet({ propose: true })} />
      </div>

      {sheet && (
        <CalmBottomSheet t={t} onClose={() => setSheet(null)}>
          {sheet.propose ? (
            <>
              <div style={{ fontSize: 22, fontWeight: 800, color: t.text, marginBottom: 4 }}>Propose a swap</div>
              <div style={{ fontSize: 13, color: t.subtext, marginBottom: 22 }}>Send to Jordan for approval</div>
              <div>
                <ListRow t={t} primary="Your day to give up"
                  right={<span style={{ fontSize: 14, color: t.text, fontWeight: 600 }}>Pick</span>} />
                <ListRow t={t} primary="In exchange for"
                  right={<span style={{ fontSize: 14, color: t.text, fontWeight: 600 }}>Pick</span>} />
                <ListRow t={t} last primary="Reason"
                  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 }}>
                {sheet.from === 'Jordan' ? 'From Jordan' : 'You proposed'} · {sheet.sent}
              </div>
              <div style={{ fontSize: 22, fontWeight: 800, color: t.text, marginBottom: 18, letterSpacing: -0.3 }}>
                Swap {sheet.day} ↔ {sheet.for}
              </div>
              <div style={{ padding: 14, background: t.bgSecondary, borderRadius: 12, marginBottom: 22 }}>
                <div style={{ fontSize: 12, color: t.subtext, fontWeight: 700, letterSpacing: 0.5, textTransform: 'uppercase' }}>Reason</div>
                <div style={{ fontSize: 14, color: t.text, marginTop: 4, lineHeight: 1.5 }}>{sheet.reason}</div>
              </div>
              {sheet.status === 'pending' && sheet.from === 'Jordan' ? (
                <div style={{ display: 'flex', gap: 10 }}>
                  <SecondaryButton label="Decline" t={t} onClick={() => setSheet(null)} />
                  <PrimaryButton label="Approve swap" base={base} onClick={() => setSheet(null)} />
                </div>
              ) : sheet.status === 'pending' ? (
                <SecondaryButton label="Cancel request" t={t} onClick={() => setSheet(null)} />
              ) : (
                <div style={{ fontSize: 13, fontWeight: 700, color: base.green, textAlign: 'center', textTransform: 'uppercase', letterSpacing: 0.5 }}>
                  {sheet.status}
                </div>
              )}
            </>
          )}
        </CalmBottomSheet>
      )}
    </div>
  );
}
function SwapCard({ swap, t, base, last, onTap }) {
  return (
    <div onClick={onTap} style={{ padding: '14px 16px', marginBottom: 8,
      background: t.bgSecondary, borderRadius: 14, cursor: 'pointer' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
        <div style={{ fontSize: 12, fontWeight: 700, color: t.subtext, letterSpacing: 0.5, textTransform: 'uppercase' }}>
          {swap.from === 'Jordan' ? 'Incoming' : 'Outgoing'}
        </div>
        <div style={{ flex: 1 }} />
        <div style={{ fontSize: 11, color: t.subtext }}>{swap.sent}</div>
      </div>
      <div style={{ fontSize: 15, fontWeight: 700, color: t.text, marginBottom: 4 }}>
        {swap.day} <span style={{ color: t.subtext }}>↔</span> {swap.for}
      </div>
      <div style={{ fontSize: 13, color: t.subtext, lineHeight: 1.4 }}>{swap.reason}</div>
    </div>
  );
}

// ─── Emergency / Allergy one-tap card ────────────────────────────────────────
function EmergencyCardScreen({ t, base, onBack }) {
  return (
    <div style={{ flex: 1, overflowY: 'auto', padding: '0 0 24px',
      background: '#FFFEF7' }}>
      <BackHeader title="Emergency card" subtitle="Show this to caregivers · 911 · ER"
        t={t} base={base} onBack={onBack} />

      {/* Red banner */}
      <div style={{ padding: '20px 22px 0' }}>
        <div style={{ padding: 18, borderRadius: 14, background: base.redBg }}>
          <div style={{ fontSize: 12, fontWeight: 800, color: base.red, letterSpacing: 1.4, textTransform: 'uppercase' }}>Critical allergies</div>
          <div style={{ fontSize: 22, fontWeight: 800, color: t.text, marginTop: 8, lineHeight: 1.2 }}>
            Emma · Peanuts (severe)
          </div>
          <div style={{ fontSize: 13, color: t.subtext, marginTop: 6, lineHeight: 1.5 }}>
            Reaction: hives, swelling, breathing difficulty. EpiPen in the school nurse's office.
          </div>
        </div>
      </div>

      {/* Big call buttons */}
      <div style={{ padding: '20px 22px 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
        <div style={{ padding: '16px 18px', borderRadius: 14, background: base.red, color: '#fff',
          display: 'flex', alignItems: 'center', gap: 14, cursor: 'pointer' }}>
          <div style={{ width: 38, height: 38, borderRadius: 19, background: 'rgba(255,255,255,0.2)',
            display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18, fontWeight: 800 }}>!</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 16, fontWeight: 800 }}>Call 911</div>
            <div style={{ fontSize: 12, opacity: 0.85 }}>Emergency services</div>
          </div>
        </div>
        <div style={{ padding: '16px 18px', borderRadius: 14, background: base.primary, color: '#fff',
          display: 'flex', alignItems: 'center', gap: 14, cursor: 'pointer' }}>
          <div style={{ width: 38, height: 38, borderRadius: 19, background: 'rgba(255,255,255,0.2)',
            display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18, fontWeight: 800 }}>+</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 16, fontWeight: 800 }}>Call Dr. Chen</div>
            <div style={{ fontSize: 12, opacity: 0.85 }}>Pediatrician · 555-0192</div>
          </div>
        </div>
        <div style={{ padding: '16px 18px', borderRadius: 14, background: base.accent, color: '#fff',
          display: 'flex', alignItems: 'center', gap: 14, cursor: 'pointer' }}>
          <div style={{ width: 38, height: 38, borderRadius: 19, background: 'rgba(255,255,255,0.2)',
            display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16, fontWeight: 800 }}>↗</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 16, fontWeight: 800 }}>Notify Jordan</div>
            <div style={{ fontSize: 12, opacity: 0.85 }}>Send urgent ping</div>
          </div>
        </div>
      </div>

      {/* Per-child quick reference */}
      <div style={{ padding: '28px 22px 0' }}>
        <CalmSectionLabel label="Quick reference" t={t} />
        <div>
          {[
            { name: 'Emma', age: 8, allergies: 'Peanuts (severe)', meds: 'None', blood: 'A+', color: base.accent },
            { name: 'Liam', age: 5, allergies: 'None known', meds: 'Inhaler (PRN)', blood: 'O+', color: base.primary },
          ].map((c, i, arr) => (
            <div key={c.name} style={{ padding: '14px 0',
              borderBottom: i < arr.length - 1 ? `1px solid ${t.divider}` : 'none' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 10 }}>
                <CalmAvatar name={c.name} color={c.color} size={32} />
                <div style={{ fontSize: 16, fontWeight: 700, color: t.text }}>{c.name}</div>
                <div style={{ fontSize: 13, color: t.subtext }}>· Age {c.age} · {c.blood}</div>
              </div>
              <div style={{ paddingLeft: 44 }}>
                {[
                  ['Allergies', c.allergies],
                  ['Medications', c.meds],
                ].map(([k, v]) => (
                  <div key={k} style={{ display: 'flex', gap: 10, marginBottom: 4 }}>
                    <div style={{ fontSize: 12, color: t.subtext, fontWeight: 600, width: 90 }}>{k}</div>
                    <div style={{ fontSize: 13, color: t.text, fontWeight: 500, flex: 1 }}>{v}</div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Lock-screen-ready toggle */}
      <div style={{ padding: '24px 22px 0' }}>
        <ListRow t={t} last primary="Show on lock screen"
          secondary="Accessible without unlocking — for first responders"
          right={<Toggle on={true} onChange={() => {}} t={t} base={base} />} />
      </div>

      <div style={{ padding: '24px 22px 0' }}>
        <SecondaryButton label="Share with caregiver" t={t} onClick={() => {}} />
      </div>
    </div>
  );
}

// ─── School updates feed ─────────────────────────────────────────────────────
function SchoolFeedScreen({ t, base, onBack }) {
  const items = COPARENT_DATA.schoolFeed;
  const [sheet, setSheet] = React.useState(null);
  const [filter, setFilter] = React.useState('all');
  const kindBg = { note: base.primaryLight, grade: base.accentLight, message: base.amberBg, event: '#F0EAFC' };
  const kindColor = { note: base.primary, grade: base.accent, message: base.amber, event: '#7E55C9' };
  const visible = filter === 'all' ? items : items.filter(i => i.child === filter);

  return (
    <div style={{ flex: 1, overflowY: 'auto', padding: '0 0 24px' }}>
      <BackHeader title="School" subtitle={`${items.length} updates · ${items.filter(i => i.kind === 'note').length} need action`}
        t={t} base={base} onBack={onBack} />

      <div style={{ padding: '14px 22px 0', display: 'flex', gap: 8 }}>
        {['all', 'Emma', 'Liam'].map(f => (
          <div key={f} onClick={() => setFilter(f)} style={{
            padding: '7px 14px', borderRadius: 16, fontSize: 13, fontWeight: 600,
            background: filter === f ? t.text : t.bgSecondary,
            color: filter === f ? t.bg : t.subtext, cursor: 'pointer' }}>
            {f === 'all' ? 'Both' : f}
          </div>
        ))}
      </div>

      <div style={{ padding: '20px 22px 0' }}>
        <CalmSectionLabel label="Recent" t={t} />
        <div>
          {visible.map((s, i) => (
            <div key={s.id} onClick={() => setSheet(s)}
              style={{ display: 'flex', gap: 14, padding: '14px 0',
                borderBottom: i < visible.length - 1 ? `1px solid ${t.divider}` : 'none',
                cursor: 'pointer' }}>
              <div style={{ width: 38, height: 38, borderRadius: 10, flexShrink: 0,
                background: kindBg[s.kind], color: kindColor[s.kind],
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 11, fontWeight: 800, letterSpacing: 0.5, textTransform: 'uppercase' }}>
                {s.kind.slice(0, 3)}
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 15, fontWeight: 700, color: t.text, lineHeight: 1.3 }}>{s.subject}</div>
                <div style={{ fontSize: 13, color: t.subtext, marginTop: 3, lineHeight: 1.45,
                  overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box',
                  WebkitLineClamp: 2, WebkitBoxOrient: 'vertical' }}>
                  {s.preview}
                </div>
                <div style={{ fontSize: 11, color: t.subtext, marginTop: 6, fontWeight: 600 }}>
                  {s.from} · {s.child} · {s.date}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Linked portals" t={t} />
        <div>
          <ListRow t={t} primary="Lincoln Elementary (Emma)"
            right={<span style={{ fontSize: 12, fontWeight: 700, color: base.green }}>Connected</span>} />
          <ListRow t={t} last primary="Bright Start Preschool (Liam)"
            right={<span style={{ fontSize: 12, fontWeight: 700, color: t.subtext }}>Connect</span>} />
        </div>
      </div>

      {sheet && (
        <CalmBottomSheet t={t} onClose={() => setSheet(null)}>
          <div style={{ fontSize: 13, color: t.subtext, marginBottom: 8 }}>{sheet.from} · {sheet.date}</div>
          <div style={{ fontSize: 22, fontWeight: 800, color: t.text, marginBottom: 4, letterSpacing: -0.3 }}>{sheet.subject}</div>
          <div style={{ fontSize: 13, color: t.subtext, marginBottom: 18 }}>For {sheet.child}</div>
          <div style={{ fontSize: 15, color: t.text, lineHeight: 1.6, marginBottom: 22 }}>{sheet.preview}</div>
          <div style={{ display: 'flex', gap: 10 }}>
            <SecondaryButton label="Share with Jordan" t={t} onClick={() => setSheet(null)} />
            <PrimaryButton label="Reply" base={base} onClick={() => setSheet(null)} />
          </div>
        </CalmBottomSheet>
      )}
    </div>
  );
}

// ─── Wishlist / gifts ────────────────────────────────────────────────────────
function WishlistScreen({ t, base, onBack }) {
  const items = COPARENT_DATA.wishlist;
  const [sheet, setSheet] = React.useState(null);
  const [filter, setFilter] = React.useState('Emma');
  const visible = items.filter(i => i.child === filter);
  const grouped = visible.reduce((a, x) => { (a[x.occasion] = a[x.occasion] || []).push(x); return a; }, {});

  return (
    <div style={{ flex: 1, overflowY: 'auto', padding: '0 0 24px', position: 'relative' }}>
      <BackHeader title="Wishlist" subtitle="Coordinate gifts · no duplicates"
        t={t} base={base} onBack={onBack} />

      <div style={{ padding: '14px 22px 0', display: 'flex', gap: 8 }}>
        {['Emma', 'Liam'].map(f => (
          <div key={f} onClick={() => setFilter(f)} style={{
            flex: 1, padding: '10px 0', textAlign: 'center', borderRadius: 12,
            background: filter === f ? t.bgSecondary : 'transparent',
            border: `1px solid ${filter === f ? t.text : t.divider}`,
            color: t.text, fontSize: 14, fontWeight: 600, cursor: 'pointer' }}>{f}</div>
        ))}
      </div>

      {Object.entries(grouped).map(([occ, list]) => (
        <div key={occ} style={{ padding: '24px 22px 0' }}>
          <CalmSectionLabel label={occ} t={t} action={`${list.length}`} />
          <div>
            {list.map((it, i, arr) => (
              <div key={it.id} onClick={() => setSheet(it)}
                style={{ display: 'flex', gap: 14, padding: '14px 0',
                  borderBottom: i < arr.length - 1 ? `1px solid ${t.divider}` : 'none',
                  cursor: 'pointer' }}>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 15, fontWeight: 700, color: t.text }}>{it.item}</div>
                  <div style={{ fontSize: 12, color: t.subtext, marginTop: 3 }}>
                    {it.link || 'No link'}{it.urgent && <span style={{ color: base.red, fontWeight: 700 }}> · Needs soon</span>}
                  </div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{ fontSize: 15, fontWeight: 700, color: t.text }}>${it.price}</div>
                  <div style={{ marginTop: 4 }}>
                    {it.claimedBy ? (
                      <span style={{ fontSize: 10, fontWeight: 700, padding: '3px 8px', borderRadius: 10,
                        background: it.claimedBy === 'You' ? base.accentLight : base.primaryLight,
                        color: it.claimedBy === 'You' ? base.accent : base.primary,
                        letterSpacing: 0.5, textTransform: 'uppercase' }}>
                        {it.claimedBy} got it
                      </span>
                    ) : (
                      <span style={{ fontSize: 10, fontWeight: 700, padding: '3px 8px', borderRadius: 10,
                        background: t.bgSecondary, color: t.subtext,
                        letterSpacing: 0.5, textTransform: 'uppercase' }}>Open</span>
                    )}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      ))}

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

      {sheet && (
        <CalmBottomSheet t={t} onClose={() => setSheet(null)}>
          {sheet.add ? (
            <>
              <div style={{ fontSize: 22, fontWeight: 800, color: t.text, marginBottom: 4 }}>Add to wishlist</div>
              <div style={{ fontSize: 13, color: t.subtext, marginBottom: 22 }}>Visible to Jordan and any family with caregiver pass</div>
              <div>
                <ListRow t={t} primary="Item" right={<span style={{ fontSize: 13, color: t.subtext }}>Required</span>} />
                <ListRow t={t} primary="For" right={<span style={{ fontSize: 13, color: t.text, fontWeight: 600 }}>{filter}</span>} />
                <ListRow t={t} primary="Occasion" right={<span style={{ fontSize: 13, color: t.text, fontWeight: 600 }}>Birthday Jun 18</span>} />
                <ListRow t={t} primary="Price" right={<span style={{ fontSize: 13, color: t.subtext }}>Optional</span>} />
                <ListRow t={t} last primary="Link" right={<span style={{ fontSize: 13, color: t.subtext }}>Optional</span>} />
              </div>
              <div style={{ marginTop: 20 }}>
                <PrimaryButton label="Add" base={base} onClick={() => setSheet(null)} />
              </div>
            </>
          ) : (
            <>
              <div style={{ fontSize: 13, color: t.subtext, marginBottom: 8 }}>{sheet.occasion} · {sheet.child}</div>
              <div style={{ fontSize: 22, fontWeight: 800, color: t.text, marginBottom: 4 }}>{sheet.item}</div>
              <div style={{ fontSize: 14, color: t.subtext, marginBottom: 22 }}>${sheet.price}{sheet.link ? ' · ' + sheet.link : ''}</div>
              {sheet.claimedBy ? (
                <div style={{ padding: 14, background: t.bgSecondary, borderRadius: 12, marginBottom: 18,
                  fontSize: 13, color: t.text, lineHeight: 1.5 }}>
                  <b>{sheet.claimedBy}</b> is getting this one. {sheet.claimedBy === 'You' ? "Don't worry — Jordan won't see you claimed it on Emma's view." : ''}
                </div>
              ) : null}
              <div style={{ display: 'flex', gap: 10 }}>
                <SecondaryButton label="Remove" t={t} onClick={() => setSheet(null)} />
                <PrimaryButton label={sheet.claimedBy === 'You' ? 'Unclaim' : "I'll get it"} base={base} onClick={() => setSheet(null)} />
              </div>
            </>
          )}
        </CalmBottomSheet>
      )}
    </div>
  );
}

// ─── Delete account & data download ──────────────────────────────────────────
function DeleteAccountScreen({ t, base, onBack }) {
  const [step, setStep] = React.useState(0); // 0 menu, 1 export, 2 confirm delete
  const [confirm, setConfirm] = React.useState('');

  if (step === 1) return (
    <div style={{ flex: 1, overflowY: 'auto', padding: '0 0 24px' }}>
      <BackHeader title="Download your data" t={t} base={base} onBack={() => setStep(0)} />
      <div style={{ padding: '20px 22px 0' }}>
        <div style={{ fontSize: 15, color: t.text, lineHeight: 1.55, marginBottom: 18 }}>
          We'll prepare a full export of everything you've ever logged — messages, expenses, calendar, documents, journal, and health entries.
        </div>
        <CalmSectionLabel label="Format" t={t} />
        <div>
          {[
            { l: 'PDF — readable, court-ready', sub: 'Best for sharing' },
            { l: 'JSON — machine-readable', sub: 'For importing elsewhere' },
            { l: 'Both', sub: 'PDF + JSON in one zip' },
          ].map((o, i, arr) => (
            <ListRow key={o.l} t={t} last={i === arr.length - 1}
              primary={o.l} secondary={o.sub}
              right={<span style={{ fontSize: 18, color: t.subtext }}>›</span>}
              onClick={() => {}} />
          ))}
        </div>
      </div>
      <div style={{ padding: '32px 22px 0' }}>
        <PrimaryButton label="Generate export" base={base} onClick={() => setStep(0)} />
        <div style={{ fontSize: 12, color: t.subtext, textAlign: 'center', marginTop: 12 }}>
          You'll get an email when it's ready · usually under a minute.
        </div>
      </div>
    </div>
  );

  if (step === 2) return (
    <div style={{ flex: 1, overflowY: 'auto', padding: '0 0 24px' }}>
      <BackHeader title="Delete account" t={t} base={base} onBack={() => setStep(0)} />
      <div style={{ padding: '20px 22px 0' }}>
        <div style={{ padding: 18, background: base.redBg, borderRadius: 14 }}>
          <div style={{ fontSize: 12, fontWeight: 800, color: base.red, letterSpacing: 1.2, textTransform: 'uppercase' }}>Permanent</div>
          <div style={{ fontSize: 18, fontWeight: 700, color: t.text, marginTop: 8, lineHeight: 1.3 }}>
            This deletes your account, your records, and your half of the shared workspace.
          </div>
          <div style={{ fontSize: 13, color: t.subtext, marginTop: 10, lineHeight: 1.5 }}>
            Jordan's account stays. Past message threads remain in Jordan's record for their reference — your name is replaced with "Former co-parent."
          </div>
        </div>
      </div>
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Before you go" t={t} />
        <div>
          <ListRow t={t} primary="Download your data first"
            right={<span style={{ fontSize: 13, color: base.primary, fontWeight: 700 }}>Export</span>}
            onClick={() => setStep(1)} />
          <ListRow t={t} last primary="Cancel your subscription"
            right={<span style={{ fontSize: 13, color: t.subtext }}>Auto-cancels</span>} />
        </div>
      </div>
      <div style={{ padding: '24px 22px 0' }}>
        <div style={{ fontSize: 13, color: t.subtext, marginBottom: 8 }}>Type <b style={{ color: t.text }}>DELETE</b> to confirm</div>
        <input value={confirm} onChange={e => setConfirm(e.target.value)}
          style={{ width: '100%', background: t.bgSecondary, border: 'none', outline: 'none',
            padding: '14px 16px', borderRadius: 12, fontSize: 16, color: t.text, fontFamily: 'inherit', letterSpacing: 2 }} />
      </div>
      <div style={{ padding: '24px 22px 0' }}>
        <div onClick={confirm === 'DELETE' ? onBack : null}
          style={{ padding: '15px 22px', borderRadius: 14,
            background: confirm === 'DELETE' ? base.red : t.divider,
            color: '#fff', textAlign: 'center', fontSize: 15, fontWeight: 700,
            cursor: confirm === 'DELETE' ? 'pointer' : 'default',
            opacity: confirm === 'DELETE' ? 1 : 0.6 }}>
          Delete account
        </div>
      </div>
    </div>
  );

  return (
    <div style={{ flex: 1, overflowY: 'auto', padding: '0 0 24px' }}>
      <BackHeader title="Data & deletion" t={t} base={base} onBack={onBack} />

      <div style={{ padding: '20px 22px 0' }}>
        <div style={{ padding: 18, background: t.bgSecondary, borderRadius: 14 }}>
          <div style={{ fontSize: 17, fontWeight: 700, color: t.text, letterSpacing: -0.2, lineHeight: 1.3 }}>
            You own your data. Period.
          </div>
          <div style={{ fontSize: 13, color: t.subtext, marginTop: 8, lineHeight: 1.5 }}>
            Download everything anytime. Delete your account anytime. We don't gate either behind a paywall or a phone call.
          </div>
        </div>
      </div>

      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Your data" t={t} />
        <div>
          <ListRow t={t} primary="Download all your data"
            secondary="PDF or JSON · full record"
            right={<span style={{ fontSize: 18, color: t.subtext }}>›</span>}
            onClick={() => setStep(1)} />
          <ListRow t={t} last primary="What we store"
            secondary="Read our data inventory"
            right={<span style={{ fontSize: 18, color: t.subtext }}>›</span>}
            onClick={() => {}} />
        </div>
      </div>

      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Account actions" t={t} />
        <div>
          <ListRow t={t} primary="Pause my account"
            secondary="Keep data, stop notifications" />
          <ListRow t={t} last
            primary={<span style={{ color: base.red, fontWeight: 600 }}>Delete account</span>}
            onClick={() => setStep(2)} />
        </div>
      </div>
    </div>
  );
}

// ─── Locale & currency ───────────────────────────────────────────────────────
function LocaleScreen({ t, base, onBack }) {
  const [locale, setLocale] = React.useState('en-US');
  const [currency, setCurrency] = React.useState('USD');
  const [tz, setTz] = React.useState('America/Los_Angeles');
  const [first, setFirst] = React.useState('Sun');

  return (
    <div style={{ flex: 1, overflowY: 'auto', padding: '0 0 24px' }}>
      <BackHeader title="Region & language" t={t} base={base} onBack={onBack} />

      <div style={{ padding: '20px 22px 0' }}>
        <CalmSectionLabel label="Language" t={t} />
        <div>
          {[
            { id: 'en-US', label: 'English (US)' },
            { id: 'en-GB', label: 'English (UK)' },
            { id: 'es-MX', label: 'Español (México)' },
            { id: 'fr-CA', label: 'Français (Canada)' },
          ].map((l, i, arr) => (
            <ListRow key={l.id} t={t} last={i === arr.length - 1}
              onClick={() => setLocale(l.id)}
              primary={l.label}
              right={l.id === locale
                ? <svg width="14" height="14" viewBox="0 0 14 14"><path d="M2 7l3 3 7-7" stroke={base.primary} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" fill="none"/></svg>
                : null} />
          ))}
        </div>
      </div>

      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Currency" t={t} />
        <div>
          {[
            { id: 'USD', label: 'US Dollar', sym: '$' },
            { id: 'EUR', label: 'Euro', sym: '€' },
            { id: 'GBP', label: 'British Pound', sym: '£' },
            { id: 'MXN', label: 'Mexican Peso', sym: 'MX$' },
            { id: 'CAD', label: 'Canadian Dollar', sym: 'C$' },
          ].map((c, i, arr) => (
            <ListRow key={c.id} t={t} last={i === arr.length - 1}
              onClick={() => setCurrency(c.id)}
              primary={c.label}
              right={<span style={{ fontSize: 14, color: c.id === currency ? base.primary : t.subtext, fontWeight: 700 }}>{c.sym}</span>} />
          ))}
        </div>
      </div>

      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Calendar" t={t} />
        <div>
          <ListRow t={t} primary="Time zone"
            right={<span style={{ fontSize: 13, color: t.text, fontWeight: 600 }}>PT</span>} />
          <ListRow t={t} primary="Week starts on">
          </ListRow>
          <div style={{ display: 'flex', gap: 8, padding: '0 0 14px' }}>
            {['Sun', 'Mon'].map(d => (
              <div key={d} onClick={() => setFirst(d)} style={{
                flex: 1, padding: '10px 0', textAlign: 'center', borderRadius: 10,
                background: d === first ? t.bgSecondary : 'transparent',
                border: `1px solid ${d === first ? t.text : t.divider}`,
                fontSize: 13, fontWeight: 600, color: t.text, cursor: 'pointer' }}>{d}day</div>
            ))}
          </div>
          <ListRow t={t} last primary="Date format"
            right={<span style={{ fontSize: 13, color: t.text, fontWeight: 600 }}>MMM D</span>} />
        </div>
      </div>

      <div style={{ padding: '24px 22px 0' }}>
        <div style={{ padding: 14, background: t.bgSecondary, borderRadius: 12 }}>
          <div style={{ fontSize: 12, color: t.subtext, fontWeight: 700, letterSpacing: 0.5, textTransform: 'uppercase' }}>Preview</div>
          <div style={{ fontSize: 14, color: t.text, marginTop: 6 }}>
            Tomorrow's expense · {currency === 'USD' ? '$' : currency === 'EUR' ? '€' : currency === 'GBP' ? '£' : 'MX$'}48.00
          </div>
          <div style={{ fontSize: 13, color: t.subtext, marginTop: 2 }}>{first === 'Sun' ? 'Sun, May 17' : 'Mon, May 18'}, 3:00 PM PT</div>
        </div>
      </div>
    </div>
  );
}

// ─── Uncouple from co-parent ─────────────────────────────────────────────────
function UncoupleScreen({ t, base, onBack }) {
  const [step, setStep] = React.useState(0);
  const [reason, setReason] = React.useState('');

  if (step === 1) return (
    <div style={{ flex: 1, overflowY: 'auto', padding: '0 0 24px' }}>
      <BackHeader title="" t={t} base={base} onBack={() => setStep(0)} />
      <div style={{ padding: '20px 22px 0' }}>
        <div style={{ fontSize: 28, fontWeight: 800, color: t.text, letterSpacing: -0.5, lineHeight: 1.2 }}>What happens when you unlink</div>
        <div style={{ marginTop: 18 }}>
          {[
            { l: 'Your records stay yours', s: 'You keep full access to all your data, forever.' },
            { l: "Jordan's records stay theirs", s: 'They keep their copy of shared events, expenses, and messages.' },
            { l: 'New activity stops syncing', s: "You'll each see your own calendar, expenses, and messages going forward." },
            { l: 'Past shared items become read-only', s: "Court records remain valid and exportable from both sides." },
            { l: 'You can re-link later', s: 'Either of you can send a new invite anytime.' },
          ].map((it, i) => (
            <div key={it.l} style={{ display: 'flex', gap: 14, padding: '14px 0',
              borderBottom: i < 4 ? `1px solid ${t.divider}` : 'none' }}>
              <div style={{ width: 22, height: 22, borderRadius: 11, background: base.accentLight,
                color: base.accent, display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontWeight: 800, fontSize: 12, flexShrink: 0 }}>{i + 1}</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 15, fontWeight: 700, color: t.text }}>{it.l}</div>
                <div style={{ fontSize: 13, color: t.subtext, marginTop: 3, lineHeight: 1.45 }}>{it.s}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <div style={{ padding: '32px 22px 0' }}>
        <PrimaryButton label="Continue" base={base} onClick={() => setStep(2)} />
      </div>
    </div>
  );

  if (step === 2) return (
    <div style={{ flex: 1, overflowY: 'auto', padding: '0 0 24px' }}>
      <BackHeader title="" t={t} base={base} onBack={() => setStep(1)} />
      <div style={{ padding: '20px 22px 0' }}>
        <div style={{ fontSize: 26, fontWeight: 800, color: t.text, letterSpacing: -0.5, lineHeight: 1.2 }}>Care to share why?</div>
        <div style={{ fontSize: 14, color: t.subtext, marginTop: 10, lineHeight: 1.55 }}>Optional. Helps us improve. Jordan never sees this.</div>
        <div style={{ marginTop: 22, display: 'flex', flexDirection: 'column', gap: 8 }}>
          {[
            "We're reconciling — we don't need separate tracking",
            'Custody arrangement is changing',
            "It's not the right fit for us",
            "Other"
          ].map(o => {
            const sel = o === reason;
            return (
              <div key={o} onClick={() => setReason(o)} style={{
                padding: 14, borderRadius: 12, background: sel ? t.bgSecondary : 'transparent',
                border: `1.5px solid ${sel ? t.text : t.divider}`, cursor: 'pointer',
                fontSize: 14, color: t.text, fontWeight: 600 }}>{o}</div>
            );
          })}
        </div>
      </div>
      <div style={{ padding: '32px 22px 0' }}>
        <PrimaryButton label="Unlink from Jordan" base={base} onClick={() => setStep(3)} />
        <div onClick={onBack} style={{ fontSize: 13, color: t.subtext, textAlign: 'center', marginTop: 14, fontWeight: 600, cursor: 'pointer' }}>
          Nevermind, go back
        </div>
      </div>
    </div>
  );

  if (step === 3) return (
    <div style={{ flex: 1, overflowY: 'auto', padding: '0 0 24px', textAlign: 'center' }}>
      <BackHeader title="" t={t} base={base} onBack={onBack} />
      <div style={{ padding: '40px 28px 0' }}>
        <div style={{ width: 72, height: 72, borderRadius: 36, background: t.bgSecondary,
          display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '20px auto 24px' }}>
          <div style={{ fontSize: 28, color: t.subtext }}>·</div>
        </div>
        <div style={{ fontSize: 26, fontWeight: 800, color: t.text, letterSpacing: -0.5, lineHeight: 1.2 }}>You're unlinked</div>
        <div style={{ fontSize: 15, color: t.subtext, marginTop: 14, lineHeight: 1.55 }}>
          We hope this was the right call for your family. Your data is yours — and we're here if you ever come back.
        </div>
      </div>
      <div style={{ padding: '32px 22px 0' }}>
        <PrimaryButton label="Done" base={base} onClick={onBack} />
      </div>
    </div>
  );

  return (
    <div style={{ flex: 1, overflowY: 'auto', padding: '0 0 24px' }}>
      <BackHeader title="Unlink from Jordan" t={t} base={base} onBack={onBack} />
      <div style={{ padding: '20px 22px 0' }}>
        <div style={{ padding: 18, background: base.amberBg, borderRadius: 14 }}>
          <div style={{ fontSize: 18, fontWeight: 700, color: t.text, lineHeight: 1.3 }}>
            Sometimes the kindest thing is to part ways gracefully.
          </div>
          <div style={{ fontSize: 14, color: t.subtext, marginTop: 8, lineHeight: 1.55 }}>
            Whether you've reconciled, the situation changed, or this just isn't the right fit — let's make sure you both walk away with what's yours.
          </div>
        </div>
      </div>

      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Before you continue" t={t} />
        <div>
          <ListRow t={t} primary="Export your shared records"
            secondary="Court-ready PDF, accessible forever"
            right={<span style={{ fontSize: 13, color: base.primary, fontWeight: 700 }}>Export</span>}
            onClick={() => {}} />
          <ListRow t={t} primary="Settle outstanding balances"
            secondary="Net: Jordan owes $177.50"
            right={<span style={{ fontSize: 18, color: t.subtext }}>›</span>}
            onClick={() => {}} />
          <ListRow t={t} last primary="Pause notifications first"
            secondary="Try a cooldown before unlinking"
            right={<span style={{ fontSize: 18, color: t.subtext }}>›</span>}
            onClick={() => {}} />
        </div>
      </div>

      <div style={{ padding: '32px 22px 0' }}>
        <PrimaryButton label="I understand — continue" base={base} onClick={() => setStep(1)} />
        <div onClick={onBack} style={{ fontSize: 13, color: t.subtext, textAlign: 'center', marginTop: 14, fontWeight: 600, cursor: 'pointer' }}>
          Cancel
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  HomePrePair, HomeTheirDay, HomeHandoffActive,
  SwapInboxScreen, EmergencyCardScreen, SchoolFeedScreen,
  WishlistScreen, DeleteAccountScreen, LocaleScreen, UncoupleScreen
});