// CoParent — More screens: Add Expense, New Message, Add Event, Search,
// Records, Holidays, Profile, Pair co-parent.
// Reuses BackHeader, ListRow, CalmSectionLabel, CalmBottomSheet,
// PrimaryButton, SecondaryButton, CalmAvatar, AmberBanner.

// ─── Add Expense ─────────────────────────────────────────────────────────────
function AddExpenseScreen({ t, base, onBack }) {
  const cats = COPARENT_DATA.expenseCategories;
  const kids = COPARENT_DATA.children;
  const [step, setStep] = React.useState(0); // 0 capture · 1 form
  const [amount, setAmount] = React.useState('48.00');
  const [desc, setDesc] = React.useState('Soccer cleats');
  const [cat, setCat] = React.useState('sports');
  const [child, setChild] = React.useState('Emma');
  const [split, setSplit] = React.useState(50);
  const [sheet, setSheet] = React.useState(null);

  if (step === 0) return (
    <div style={{ flex: 1, overflowY: 'auto', padding: '0 0 24px' }}>
      <BackHeader title="New expense" subtitle="Step 1 of 2 · Capture" t={t} base={base} onBack={onBack} />
      <div style={{ padding: '20px 22px 0' }}>
        {/* Receipt camera placeholder */}
        <div style={{ aspectRatio: '4 / 5', background: t.bgSecondary, borderRadius: 18,
          border: `1px dashed ${t.divider}`, display: 'flex', flexDirection: 'column',
          alignItems: 'center', justifyContent: 'center', gap: 14, color: t.subtext }}>
          <div style={{ width: 64, height: 64, borderRadius: 32, background: t.bg,
            border: `1px solid ${t.divider}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <svg width="26" height="22" viewBox="0 0 26 22" fill="none">
              <rect x="1" y="5" width="24" height="16" rx="3" stroke={t.subtext} strokeWidth="1.6"/>
              <circle cx="13" cy="13" r="4.5" stroke={t.subtext} strokeWidth="1.6"/>
              <path d="M9 5l1.6-3h4.8L17 5" stroke={t.subtext} strokeWidth="1.6" strokeLinejoin="round"/>
            </svg>
          </div>
          <div style={{ fontSize: 15, fontWeight: 600, color: t.text }}>Snap the receipt</div>
          <div style={{ fontSize: 13, lineHeight: 1.5, textAlign: 'center', maxWidth: 220 }}>
            We'll auto-detect amount, date, and merchant.
          </div>
        </div>
        <div style={{ marginTop: 24, display: 'flex', gap: 10 }}>
          <SecondaryButton label="Skip — enter manually" t={t} onClick={() => setStep(1)} />
          <PrimaryButton label="Capture" base={base} onClick={() => setStep(1)} />
        </div>
      </div>
    </div>
  );

  const yourShare = (parseFloat(amount || 0) * split / 100).toFixed(2);
  const theirShare = (parseFloat(amount || 0) * (100 - split) / 100).toFixed(2);

  return (
    <div style={{ flex: 1, overflowY: 'auto', padding: '0 0 24px' }}>
      <BackHeader title="New expense" subtitle="Step 2 of 2 · Details" t={t} base={base} onBack={() => setStep(0)} />

      {/* Amount */}
      <div style={{ padding: '24px 22px 0', textAlign: 'center' }}>
        <div style={{ fontSize: 12, fontWeight: 700, color: t.subtext, letterSpacing: 1.2, textTransform: 'uppercase' }}>Amount</div>
        <div style={{ fontSize: 56, fontWeight: 800, color: t.text, letterSpacing: -2, marginTop: 6 }}>
          $<input value={amount} onChange={e => setAmount(e.target.value)}
            style={{ background: 'transparent', border: 'none', outline: 'none',
              color: t.text, fontSize: 56, fontWeight: 800, letterSpacing: -2,
              width: '4.5ch', textAlign: 'left' }} />
        </div>
      </div>

      {/* Description */}
      <div style={{ padding: '20px 22px 0' }}>
        <input value={desc} onChange={e => setDesc(e.target.value)} placeholder="What was it for?"
          style={{ width: '100%', background: t.bgSecondary, border: 'none', outline: 'none',
            padding: '14px 16px', borderRadius: 12, fontSize: 15, color: t.text }} />
      </div>

      {/* Category chips */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Category" t={t} />
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
          {cats.map(c => {
            const sel = c.id === cat;
            return (
              <div key={c.id} onClick={() => setCat(c.id)} style={{
                padding: '8px 14px', borderRadius: 18,
                background: sel ? t.text : t.bgSecondary,
                color: sel ? t.bg : t.subtext,
                fontSize: 13, fontWeight: 600, cursor: 'pointer',
                display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                <span style={{ opacity: 0.7 }}>{c.glyph}</span>{c.label}
              </div>
            );
          })}
        </div>
      </div>

      {/* Child */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Who is this for?" t={t} />
        <div style={{ display: 'flex', gap: 8 }}>
          {['Both', ...kids.map(k => k.name)].map(n => {
            const sel = n === child;
            return (
              <div key={n} onClick={() => setChild(n)} style={{
                flex: 1, padding: '12px 0', textAlign: 'center', borderRadius: 12,
                background: sel ? t.bgSecondary : 'transparent',
                border: `1px solid ${sel ? t.text : t.divider}`,
                color: t.text, fontSize: 14, fontWeight: 600, cursor: 'pointer' }}>{n}</div>
            );
          })}
        </div>
      </div>

      {/* Split slider */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Split" t={t} action="Reset 50/50" onAction={() => setSplit(50)} />
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
          <div>
            <div style={{ fontSize: 12, color: t.subtext, fontWeight: 600 }}>You</div>
            <div style={{ fontSize: 18, fontWeight: 700, color: t.text }}>${yourShare}</div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontSize: 12, color: t.subtext, fontWeight: 600 }}>Jordan</div>
            <div style={{ fontSize: 18, fontWeight: 700, color: t.text }}>${theirShare}</div>
          </div>
        </div>
        <input type="range" min="0" max="100" value={split} onChange={e => setSplit(+e.target.value)}
          style={{ width: '100%', accentColor: base.primary }} />
        <div style={{ fontSize: 12, color: t.subtext, textAlign: 'center', marginTop: 4 }}>
          {split}% you · {100 - split}% Jordan
        </div>
      </div>

      {/* Submit */}
      <div style={{ padding: '32px 22px 0' }}>
        <PrimaryButton label="Send for review" base={base} onClick={() => setSheet('sent')} />
        <div style={{ fontSize: 12, color: t.subtext, textAlign: 'center', marginTop: 12 }}>
          Jordan reviews. Once approved, the balance updates automatically.
        </div>
      </div>

      {sheet === 'sent' && (
        <CalmBottomSheet t={t} onClose={onBack}>
          <div style={{ fontSize: 22, fontWeight: 800, color: t.text, marginBottom: 4, letterSpacing: -0.3 }}>Sent to Jordan</div>
          <div style={{ fontSize: 14, color: t.subtext, marginBottom: 24, lineHeight: 1.5 }}>
            ${amount} for "{desc}" — Jordan's share is ${theirShare}. You'll get a notification when reviewed.
          </div>
          <PrimaryButton label="Done" base={base} onClick={onBack} />
        </CalmBottomSheet>
      )}
    </div>
  );
}

// ─── New Message Composer ────────────────────────────────────────────────────
function NewMessageScreen({ t, base, onBack }) {
  const tpl = COPARENT_DATA.messageTemplates;
  const [picked, setPicked] = React.useState(null);
  const [body, setBody] = React.useState('');
  const [attach, setAttach] = React.useState([]);
  const [sheet, setSheet] = React.useState(null);

  const draft = picked ? presetBody(picked.kind) : body;

  return (
    <div style={{ flex: 1, overflowY: 'auto', padding: '0 0 24px' }}>
      <BackHeader title="New message" subtitle={`To Jordan`} t={t} base={base} onBack={onBack} />

      {/* Templates */}
      <div style={{ padding: '20px 22px 0' }}>
        <CalmSectionLabel label="Start from a template" t={t} />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          {tpl.map(p => {
            const sel = picked && picked.id === p.id;
            return (
              <div key={p.id} onClick={() => { setPicked(p); setBody(presetBody(p.kind)); }}
                style={{ padding: 14, borderRadius: 14,
                  background: sel ? t.text : t.bgSecondary,
                  cursor: 'pointer', minHeight: 84 }}>
                <div style={{ fontSize: 14, fontWeight: 700,
                  color: sel ? t.bg : t.text, lineHeight: 1.3 }}>{p.title}</div>
                <div style={{ fontSize: 12, fontWeight: 500,
                  color: sel ? t.bg : t.subtext, marginTop: 5, lineHeight: 1.4, opacity: sel ? 0.85 : 1 }}>{p.preview}</div>
              </div>
            );
          })}
        </div>
      </div>

      {/* Body */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Message" t={t} />
        <textarea value={body} onChange={e => { setBody(e.target.value); setPicked(null); }}
          placeholder="Write a calm, clear message…"
          style={{ width: '100%', minHeight: 140, background: t.bgSecondary,
            border: 'none', outline: 'none', padding: 16, borderRadius: 14,
            fontSize: 15, color: t.text, fontFamily: 'inherit', resize: 'none', lineHeight: 1.5 }} />
        <div style={{ fontSize: 11, color: t.subtext, marginTop: 6, textAlign: 'right' }}>
          {body.length}/2000 · Tone-checked before sending
        </div>
      </div>

      {/* Attach */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Attach" t={t} />
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
          {['📎 File', '📷 Photo', '🗓 Event', '💵 Expense'].map(a => (
            <div key={a} onClick={() => setAttach(x => [...x, a])}
              style={{ padding: '10px 14px', borderRadius: 12,
                background: t.bgSecondary, fontSize: 13, fontWeight: 600,
                color: t.text, cursor: 'pointer' }}>{a}</div>
          ))}
        </div>
        {attach.length > 0 && (
          <div style={{ marginTop: 12, fontSize: 13, color: t.subtext }}>
            {attach.length} attachment{attach.length > 1 ? 's' : ''}
          </div>
        )}
      </div>

      {/* Send */}
      <div style={{ padding: '32px 22px 0' }}>
        <PrimaryButton label="Send" base={base} onClick={() => setSheet('sent')} />
        <div style={{ fontSize: 12, color: t.subtext, textAlign: 'center', marginTop: 12 }}>
          Logged in your shared record.
        </div>
      </div>

      {sheet === 'sent' && (
        <CalmBottomSheet t={t} onClose={onBack}>
          <div style={{ fontSize: 22, fontWeight: 800, color: t.text, marginBottom: 4, letterSpacing: -0.3 }}>Message sent</div>
          <div style={{ fontSize: 14, color: t.subtext, marginBottom: 24, lineHeight: 1.5 }}>
            Jordan will be notified. You can review the thread in Messages.
          </div>
          <PrimaryButton label="Done" base={base} onClick={onBack} />
        </CalmBottomSheet>
      )}
    </div>
  );
}
function presetBody(kind) {
  if (kind === 'swap') return "Hi Jordan — could we swap [date] for [date]? I have a conflict. Happy to make up the time the following week.";
  if (kind === 'pickup') return "Confirming pickup at [time, place]. I've got [child]'s [items]. Let me know if anything changes.";
  if (kind === 'expense') return "Heads up — submitting [item] for $[amount]. Receipt attached. Splitting 50/50 unless you'd like to discuss.";
  if (kind === 'medical') return "Quick health update on [child]: [details]. Doctor's notes attached if relevant.";
  if (kind === 'school') return "Forwarding a note from [child]'s teacher. Wanted to make sure we're aligned on [topic].";
  return "";
}

// ─── Add Event ───────────────────────────────────────────────────────────────
function AddEventScreen({ t, base, onBack }) {
  const cats = COPARENT_DATA.eventCategories;
  const kids = COPARENT_DATA.children;
  const [title, setTitle] = React.useState('');
  const [cat, setCat] = React.useState('activity');
  const [date, setDate] = React.useState('Sat May 9');
  const [time, setTime] = React.useState('4:30 PM');
  const [who, setWho] = React.useState(['Emma']);
  const [shared, setShared] = React.useState(true);
  const [reminder, setReminder] = React.useState('1 hour before');
  const [sheet, setSheet] = React.useState(null);

  const toggleKid = (n) => setWho(w => w.includes(n) ? w.filter(x => x !== n) : [...w, n]);

  return (
    <div style={{ flex: 1, overflowY: 'auto', padding: '0 0 24px' }}>
      <BackHeader title="New event" subtitle="Adds to shared calendar" t={t} base={base} onBack={onBack} />

      {/* Title */}
      <div style={{ padding: '20px 22px 0' }}>
        <input value={title} onChange={e => setTitle(e.target.value)} placeholder="Event title"
          style={{ width: '100%', background: 'transparent', border: 'none', outline: 'none',
            padding: '8px 0', fontSize: 24, fontWeight: 700, color: t.text, letterSpacing: -0.4,
            borderBottom: `1px solid ${t.divider}` }} />
      </div>

      {/* Category */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Category" t={t} />
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
          {cats.map(c => {
            const sel = c.id === cat;
            return (
              <div key={c.id} onClick={() => setCat(c.id)} style={{
                padding: '8px 14px', borderRadius: 18,
                background: sel ? t.text : t.bgSecondary,
                color: sel ? t.bg : t.subtext,
                fontSize: 13, fontWeight: 600, cursor: 'pointer' }}>{c.label}</div>
            );
          })}
        </div>
      </div>

      {/* When */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="When" t={t} />
        <div>
          <ListRow t={t} primary="Date" onClick={() => setSheet({ kind: 'date' })}
            right={<span style={{ fontSize: 14, color: t.text, fontWeight: 600 }}>{date}</span>} />
          <ListRow t={t} primary="Time" onClick={() => setSheet({ kind: 'time' })}
            right={<span style={{ fontSize: 14, color: t.text, fontWeight: 600 }}>{time}</span>} />
          <ListRow t={t} last primary="Reminder" onClick={() => setSheet({ kind: 'remind' })}
            right={<span style={{ fontSize: 14, color: t.text, fontWeight: 600 }}>{reminder}</span>} />
        </div>
      </div>

      {/* Who */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Who" t={t} />
        <div style={{ display: 'flex', gap: 8 }}>
          {kids.map(k => {
            const sel = who.includes(k.name);
            return (
              <div key={k.id} onClick={() => toggleKid(k.name)} style={{
                flex: 1, padding: '12px 0', textAlign: 'center', borderRadius: 12,
                background: sel ? t.bgSecondary : 'transparent',
                border: `1px solid ${sel ? t.text : t.divider}`,
                color: t.text, fontSize: 14, fontWeight: 600, cursor: 'pointer' }}>{k.name}</div>
            );
          })}
        </div>
      </div>

      {/* Sharing */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Sharing" t={t} />
        <div>
          <ListRow t={t} last primary="Share with Jordan"
            secondary={shared ? 'Visible on shared calendar' : 'Private — only you see this'}
            right={<Toggle on={shared} onChange={() => setShared(s => !s)} t={t} base={base} />} />
        </div>
      </div>

      {/* Save */}
      <div style={{ padding: '32px 22px 0' }}>
        <PrimaryButton label="Add to calendar" base={base} onClick={onBack} />
      </div>

      {sheet && (
        <CalmBottomSheet t={t} onClose={() => setSheet(null)}>
          <div style={{ fontSize: 22, fontWeight: 800, color: t.text, marginBottom: 16 }}>
            {sheet.kind === 'date' ? 'Pick a date' : sheet.kind === 'time' ? 'Pick a time' : 'Reminder'}
          </div>
          <div>
            {(sheet.kind === 'date' ? ['Sat May 9', 'Sun May 10', 'Mon May 11', 'Tue May 12']
             : sheet.kind === 'time' ? ['9:00 AM', '12:00 PM', '4:30 PM', '6:00 PM']
             : ['None', '15 min before', '1 hour before', '1 day before']).map((opt, i, arr) => (
              <ListRow key={opt} t={t} last={i === arr.length - 1}
                onClick={() => { sheet.kind === 'date' ? setDate(opt) : sheet.kind === 'time' ? setTime(opt) : setReminder(opt); setSheet(null); }}
                primary={opt} right={<span style={{ fontSize: 18, color: t.subtext }}>›</span>} />
            ))}
          </div>
        </CalmBottomSheet>
      )}
    </div>
  );
}

// Tiny toggle reused
function Toggle({ on, onChange, t, base }) {
  return (
    <div onClick={onChange} style={{ width: 44, height: 26, borderRadius: 13,
      background: on ? base.primary : t.divider, position: 'relative', cursor: 'pointer',
      transition: 'background 0.2s', flexShrink: 0 }}>
      <div style={{ width: 22, height: 22, borderRadius: 11, background: '#fff',
        position: 'absolute', top: 2, left: on ? 20 : 2, transition: 'left 0.2s',
        boxShadow: '0 1px 3px rgba(0,0,0,0.2)' }} />
    </div>
  );
}

// ─── Search ──────────────────────────────────────────────────────────────────
function SearchScreen({ t, base, onBack }) {
  const seed = COPARENT_DATA.searchSeed;
  const [q, setQ] = React.useState('');
  const [filter, setFilter] = React.useState('all');
  const recents = ['Soccer', 'May 10', 'Dr. Chen', 'Receipts April'];
  const filtered = q
    ? seed.filter(x => (x.primary + ' ' + x.secondary).toLowerCase().includes(q.toLowerCase()))
    : [];
  const visible = filter === 'all' ? filtered : filtered.filter(x => x.kind === filter);

  const filters = [
    { id: 'all', label: 'All' },
    { id: 'event', label: 'Events' },
    { id: 'expense', label: 'Expenses' },
    { id: 'message', label: 'Messages' },
    { id: 'doc', label: 'Documents' },
    { id: 'contact', label: 'Contacts' },
  ];
  const kindLabel = { event: 'Event', expense: 'Expense', message: 'Message', doc: 'Document', child: 'Child', contact: 'Contact' };

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

      {/* Input */}
      <div style={{ padding: '12px 22px 0' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 16px',
          background: t.bgSecondary, borderRadius: 14 }}>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
            <circle cx="7" cy="7" r="5" stroke={t.subtext} strokeWidth="1.6"/>
            <path d="M11 11l3 3" stroke={t.subtext} strokeWidth="1.6" strokeLinecap="round"/>
          </svg>
          <input autoFocus value={q} onChange={e => setQ(e.target.value)}
            placeholder="Search across everything…"
            style={{ flex: 1, background: 'transparent', border: 'none', outline: 'none',
              fontSize: 15, color: t.text }} />
          {q && (
            <span onClick={() => setQ('')}
              style={{ fontSize: 12, color: t.subtext, cursor: 'pointer', fontWeight: 700 }}>Clear</span>
          )}
        </div>
      </div>

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

      {/* Results / recents */}
      {!q ? (
        <>
          <div style={{ padding: '28px 22px 0' }}>
            <CalmSectionLabel label="Recent" t={t} />
            <div>
              {recents.map((r, i) => (
                <ListRow key={r} t={t} last={i === recents.length - 1}
                  onClick={() => setQ(r)}
                  primary={r}
                  right={<span style={{ fontSize: 18, color: t.subtext }}>↗</span>} />
              ))}
            </div>
          </div>
          <div style={{ padding: '24px 22px 0' }}>
            <CalmSectionLabel label="Quick jumps" t={t} />
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
              {['Receipts', 'Schedule changes', 'School notes', 'Health log'].map(s => (
                <div key={s} style={{ padding: 14, borderRadius: 12, background: t.bgSecondary,
                  fontSize: 14, fontWeight: 600, color: t.text, cursor: 'pointer' }}>{s}</div>
              ))}
            </div>
          </div>
        </>
      ) : visible.length === 0 ? (
        <div style={{ padding: '60px 22px', textAlign: 'center', color: t.subtext, fontSize: 14 }}>
          No results for "{q}"
        </div>
      ) : (
        <div style={{ padding: '20px 22px 0' }}>
          <CalmSectionLabel label={`${visible.length} result${visible.length > 1 ? 's' : ''}`} t={t} />
          <div>
            {visible.map((r, i, arr) => (
              <ListRow key={i} t={t} last={i === arr.length - 1}
                primary={r.primary} secondary={`${kindLabel[r.kind]} · ${r.secondary}`}
                right={<span style={{ fontSize: 18, color: t.subtext }}>›</span>} onClick={() => {}} />
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

// ─── Records & Export ────────────────────────────────────────────────────────
function RecordsScreen({ t, base, onBack }) {
  const r = COPARENT_DATA.records;
  const [sheet, setSheet] = React.useState(null);

  return (
    <div style={{ flex: 1, overflowY: 'auto', padding: '0 0 24px' }}>
      <BackHeader title="Records" subtitle="Court-ready archive" t={t} base={base} onBack={onBack} />

      {/* Hero card */}
      <div style={{ padding: '20px 22px 0' }}>
        <div style={{ background: t.bgSecondary, borderRadius: 18, padding: 22 }}>
          <div style={{ fontSize: 12, fontWeight: 700, color: t.subtext, letterSpacing: 1.2, textTransform: 'uppercase' }}>Verified log</div>
          <div style={{ fontSize: 22, fontWeight: 800, color: t.text, letterSpacing: -0.4, marginTop: 6, lineHeight: 1.25 }}>
            Every message, expense, and handoff — timestamped and tamper-proof.
          </div>
          <div style={{ fontSize: 13, color: t.subtext, marginTop: 10, lineHeight: 1.5 }}>
            Generate a PDF for your attorney or the court. Always free, always available.
          </div>
        </div>
      </div>

      {/* Year summaries */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="By year" t={t} />
        <div>
          {r.years.map((y, i) => (
            <ListRow key={y.id} t={t} last={i === r.years.length - 1}
              onClick={() => setSheet({ kind: 'year', data: y })}
              primary={y.label}
              secondary={`${y.expenses} · ${y.messages} messages · ${y.handoffs} handoffs`}
              right={<span style={{ fontSize: 18, color: t.subtext }}>›</span>} />
          ))}
        </div>
      </div>

      {/* By month */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="By month" t={t} action="See all" />
        <div>
          {r.months.map((m, i) => (
            <ListRow key={m.id} t={t} last={i === r.months.length - 1}
              onClick={() => setSheet({ kind: 'month', data: m })}
              primary={m.label}
              secondary={`${m.expenses} expenses · ${m.messages} messages · ${m.handoffs} handoffs`}
              right={<span style={{ fontSize: 18, color: t.subtext }}>›</span>} />
          ))}
        </div>
      </div>

      {/* Export */}
      <div style={{ padding: '32px 22px 0' }}>
        <PrimaryButton label="Generate court-ready PDF" base={base} onClick={() => setSheet({ kind: 'export' })} />
        <div style={{ fontSize: 12, color: t.subtext, textAlign: 'center', marginTop: 12 }}>
          Includes Jordan's records too. Both signatures verified.
        </div>
      </div>

      {sheet && (
        <CalmBottomSheet t={t} onClose={() => setSheet(null)}>
          {sheet.kind === 'export' ? (
            <>
              <div style={{ fontSize: 22, fontWeight: 800, color: t.text, marginBottom: 4, letterSpacing: -0.3 }}>Export records</div>
              <div style={{ fontSize: 14, color: t.subtext, marginBottom: 22, lineHeight: 1.5 }}>What should the PDF include?</div>
              <div>
                {['All-time complete record', '2026 to date', 'Last 90 days', 'Custom range'].map((opt, i, arr) => (
                  <ListRow key={opt} t={t} last={i === arr.length - 1}
                    onClick={() => setSheet({ kind: 'exporting', label: opt })}
                    primary={opt}
                    right={<span style={{ fontSize: 18, color: t.subtext }}>›</span>} />
                ))}
              </div>
            </>
          ) : sheet.kind === 'exporting' ? (
            <>
              <div style={{ fontSize: 22, fontWeight: 800, color: t.text, marginBottom: 4, letterSpacing: -0.3 }}>Generating…</div>
              <div style={{ fontSize: 14, color: t.subtext, marginBottom: 22 }}>{sheet.label}</div>
              <div style={{ height: 6, background: t.divider, borderRadius: 3, overflow: 'hidden', marginBottom: 18 }}>
                <div style={{ width: '64%', height: '100%', background: base.primary }} />
              </div>
              <div style={{ fontSize: 12, color: t.subtext, lineHeight: 1.5 }}>
                We'll email the PDF to you when it's ready (about 30 seconds). Includes hash-verified signatures from both parents.
              </div>
            </>
          ) : (
            <>
              <div style={{ fontSize: 13, color: t.subtext, marginBottom: 8 }}>{sheet.kind === 'year' ? 'Year' : 'Month'} summary</div>
              <div style={{ fontSize: 22, fontWeight: 800, color: t.text, marginBottom: 16, letterSpacing: -0.3 }}>{sheet.data.label}</div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10, marginBottom: 22 }}>
                {[
                  { l: 'Expenses', v: sheet.data.expenses },
                  { l: 'Messages', v: sheet.data.messages },
                  { l: 'Handoffs', v: sheet.data.handoffs },
                ].map(s => (
                  <div key={s.l} style={{ background: t.bgSecondary, borderRadius: 12, padding: 14 }}>
                    <div style={{ fontSize: 11, color: t.subtext, fontWeight: 700, letterSpacing: 0.5, textTransform: 'uppercase' }}>{s.l}</div>
                    <div style={{ fontSize: 22, fontWeight: 800, color: t.text, marginTop: 4 }}>{s.v}</div>
                  </div>
                ))}
              </div>
              <PrimaryButton label="Export as PDF" base={base} onClick={() => setSheet({ kind: 'exporting', label: sheet.data.label })} />
            </>
          )}
        </CalmBottomSheet>
      )}
    </div>
  );
}

// ─── Holiday & vacation planner ──────────────────────────────────────────────
function HolidaysScreen({ t, base, onBack }) {
  const items = COPARENT_DATA.holidays;
  const [sheet, setSheet] = React.useState(null);
  const pending = items.filter(h => !h.confirmed);

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

      {pending.length > 0 && (
        <div style={{ padding: '14px 22px 0' }}>
          <AmberBanner kicker="Needs agreement"
            title={`${pending.length} upcoming holiday${pending.length > 1 ? 's' : ''} aren't confirmed yet`}
            t={t} base={base} onClick={() => setSheet(pending[0])} />
        </div>
      )}

      {/* Year overview */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="2026" t={t} action="Year view" />
        <div>
          {items.map((h, i) => {
            const tint = h.assigned === 'You' ? base.accent : h.assigned === 'Jordan' ? base.primary : t.subtext;
            return (
              <ListRow key={h.id} t={t} last={i === items.length - 1}
                onClick={() => setSheet(h)}
                left={
                  <div style={{ width: 38, height: 44, borderRadius: 10,
                    background: tint + '22', color: tint,
                    display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
                    fontSize: 10, fontWeight: 700, letterSpacing: 0.5 }}>
                    <div style={{ fontSize: 9, opacity: 0.8 }}>{h.date.split(' ')[1]?.toUpperCase() || ''}</div>
                    <div style={{ fontSize: 15, fontWeight: 800, lineHeight: 1, marginTop: 1 }}>{h.date.match(/\d+/)?.[0] || ''}</div>
                  </div>
                }
                primary={h.name}
                secondary={`${h.date} · ${h.assigned}${h.note ? ' · ' + h.note : ''}`}
                right={
                  h.confirmed
                    ? <span style={{ fontSize: 11, fontWeight: 700, color: base.green, letterSpacing: 0.5, textTransform: 'uppercase' }}>Confirmed</span>
                    : <span style={{ fontSize: 11, fontWeight: 700, color: base.amber, letterSpacing: 0.5, textTransform: 'uppercase' }}>Pending</span>
                }
              />
            );
          })}
        </div>
      </div>

      <div style={{ padding: '32px 22px 0' }}>
        <SecondaryButton label="Add custom date" t={t} onClick={() => {}} />
      </div>

      {sheet && (
        <CalmBottomSheet t={t} onClose={() => setSheet(null)}>
          <div style={{ fontSize: 13, color: t.subtext, marginBottom: 8 }}>{sheet.date}</div>
          <div style={{ fontSize: 22, fontWeight: 800, color: t.text, marginBottom: 6, letterSpacing: -0.3 }}>{sheet.name}</div>
          {sheet.note && <div style={{ fontSize: 14, color: t.subtext, marginBottom: 18, lineHeight: 1.5 }}>{sheet.note}</div>}
          <CalmSectionLabel label="Assigned to" t={t} />
          <div style={{ display: 'flex', gap: 8, marginBottom: 22 }}>
            {['You', 'Jordan', 'Split'].map(a => {
              const sel = sheet.assigned === a;
              return (
                <div key={a} style={{ flex: 1, padding: '12px 0', textAlign: 'center', borderRadius: 12,
                  background: sel ? t.bgSecondary : 'transparent',
                  border: `1px solid ${sel ? t.text : t.divider}`,
                  color: t.text, fontSize: 14, fontWeight: 600, cursor: 'pointer' }}>{a}</div>
              );
            })}
          </div>
          {sheet.confirmed ? (
            <SecondaryButton label="Open in calendar" t={t} onClick={() => setSheet(null)} />
          ) : (
            <div style={{ display: 'flex', gap: 10 }}>
              <SecondaryButton label="Counter" t={t} onClick={() => setSheet(null)} />
              <PrimaryButton label="Confirm with Jordan" base={base} onClick={() => setSheet(null)} />
            </div>
          )}
        </CalmBottomSheet>
      )}
    </div>
  );
}

// ─── Profile / Account ───────────────────────────────────────────────────────
function ProfileScreen({ t, base, onBack }) {
  const p = COPARENT_DATA.profile;
  const [push, setPush] = React.useState(p.notifications.push);
  const [email, setEmail] = React.useState(p.notifications.email);
  const [sms, setSms] = React.useState(p.notifications.sms);
  const [redact, setRedact] = React.useState(p.privacy.redactDocs);

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

      {/* Identity */}
      <div style={{ padding: '20px 22px 0', display: 'flex', alignItems: 'center', gap: 16 }}>
        <CalmAvatar name={p.name} color={base.primary} size={64} />
        <div style={{ minWidth: 0 }}>
          <div style={{ fontSize: 20, fontWeight: 800, color: t.text, letterSpacing: -0.3 }}>{p.name}</div>
          <div style={{ fontSize: 13, color: t.subtext, marginTop: 2 }}>{p.role} · {p.joined}</div>
        </div>
      </div>

      {/* Contact */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Contact" t={t} action="Edit" />
        <div>
          <ListRow t={t} primary="Email" right={<span style={{ fontSize: 13, color: t.subtext }}>{p.email}</span>} />
          <ListRow t={t} primary="Phone" last right={<span style={{ fontSize: 13, color: t.subtext }}>{p.phone}</span>} />
        </div>
      </div>

      {/* Notifications */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Notifications" t={t} />
        <div>
          <ListRow t={t} primary="Push" secondary="Real-time on your phone"
            right={<Toggle on={push} onChange={() => setPush(v => !v)} t={t} base={base} />} />
          <ListRow t={t} primary="Email" secondary="Daily digest"
            right={<Toggle on={email} onChange={() => setEmail(v => !v)} t={t} base={base} />} />
          <ListRow t={t} last primary="SMS" secondary="Urgent only"
            right={<Toggle on={sms} onChange={() => setSms(v => !v)} t={t} base={base} />} />
        </div>
      </div>

      {/* Privacy */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Privacy & security" t={t} />
        <div>
          <ListRow t={t} primary="App lock" secondary="Face ID required"
            right={<span style={{ fontSize: 13, color: base.green, fontWeight: 700 }}>{p.pin}</span>} />
          <ListRow t={t} primary="Redact PII in shared docs"
            secondary="Hide SSNs, addresses by default"
            right={<Toggle on={redact} onChange={() => setRedact(v => !v)} t={t} base={base} />} />
          <ListRow t={t} last primary="Two-factor auth"
            right={<span style={{ fontSize: 13, color: base.green, fontWeight: 700 }}>On</span>} />
        </div>
      </div>

      {/* Linked */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Linked accounts" t={t} />
        <div>
          <ListRow t={t} primary="Apple Calendar" right={<span style={{ fontSize: 13, color: base.green, fontWeight: 700 }}>Synced</span>} />
          <ListRow t={t} primary="Google Calendar" right={<span style={{ fontSize: 13, color: t.subtext }}>Connect</span>} />
          <ListRow t={t} last primary="Bank (Plaid)" secondary="For automatic expense reimbursement"
            right={<span style={{ fontSize: 13, color: t.subtext }}>Connect</span>} />
        </div>
      </div>

      {/* Danger */}
      <div style={{ padding: '32px 22px 0' }}>
        <SecondaryButton label="Sign out" t={t} onClick={() => {}} />
      </div>
    </div>
  );
}

// ─── Pair Co-parent (invite) ─────────────────────────────────────────────────
function PairCoparentScreen({ t, base, onBack }) {
  const [step, setStep] = React.useState(0);
  // 0 intro · 1 method · 2 send · 3 success
  const [method, setMethod] = React.useState('email');

  if (step === 0) return (
    <div style={{ flex: 1, overflowY: 'auto', padding: '0 0 24px', display: 'flex', flexDirection: 'column' }}>
      <BackHeader title="Invite co-parent" t={t} base={base} onBack={onBack} />
      <div style={{ flex: 1, padding: '40px 28px 0' }}>
        {/* Hero illustration */}
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 32 }}>
          <div style={{ position: 'relative', width: 200, height: 100 }}>
            <div style={{ position: 'absolute', left: 0, top: 18, width: 64, height: 64, borderRadius: 32,
              background: base.accent, display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: '#fff', fontWeight: 800, fontSize: 24, boxShadow: t.shadow }}>A</div>
            <div style={{ position: 'absolute', right: 0, top: 18, width: 64, height: 64, borderRadius: 32,
              background: t.bgSecondary, border: `2px dashed ${t.divider}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: t.subtext, fontWeight: 800, fontSize: 24 }}>?</div>
            <div style={{ position: 'absolute', left: 60, top: 38, right: 60, height: 24,
              borderTop: `2px dashed ${t.divider}` }} />
          </div>
        </div>
        <div style={{ fontSize: 26, fontWeight: 800, color: t.text, letterSpacing: -0.5, lineHeight: 1.2, textAlign: 'center' }}>
          Co-parenting works best when you're both here.
        </div>
        <div style={{ fontSize: 15, color: t.subtext, marginTop: 14, textAlign: 'center', lineHeight: 1.55, padding: '0 8px' }}>
          Invite your co-parent so schedule changes, expenses, and messages flow between you. Until then, it's just your side of the record.
        </div>
      </div>
      <div style={{ padding: '24px 22px' }}>
        <PrimaryButton label="Send invite" base={base} onClick={() => setStep(1)} />
        <div onClick={onBack} style={{ fontSize: 13, color: t.subtext, textAlign: 'center', marginTop: 14, fontWeight: 600, cursor: 'pointer' }}>
          I'll do this later
        </div>
      </div>
    </div>
  );

  if (step === 1) return (
    <div style={{ flex: 1, overflowY: 'auto', padding: '0 0 24px' }}>
      <BackHeader title="How should we invite them?" t={t} base={base} onBack={() => setStep(0)} />
      <div style={{ padding: '20px 22px 0' }}>
        {[
          { id: 'email', label: 'Email', sub: 'Most common — they get a link' },
          { id: 'sms', label: 'Text message', sub: 'Send to their phone' },
          { id: 'link', label: 'Copy invite link', sub: 'Share however you like' },
          { id: 'qr', label: 'Show QR code', sub: 'They scan in person' },
        ].map((m, i, arr) => {
          const sel = method === m.id;
          return (
            <div key={m.id} onClick={() => setMethod(m.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 ${sel ? base.primary : t.divider}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                {sel && <div style={{ width: 10, height: 10, borderRadius: 5, background: base.primary }} />}
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 16, fontWeight: 600, color: t.text }}>{m.label}</div>
                <div style={{ fontSize: 13, color: t.subtext, marginTop: 2 }}>{m.sub}</div>
              </div>
            </div>
          );
        })}
      </div>
      <div style={{ padding: '32px 22px 0' }}>
        <PrimaryButton label="Next" base={base} onClick={() => setStep(2)} />
      </div>
    </div>
  );

  if (step === 2) return (
    <div style={{ flex: 1, overflowY: 'auto', padding: '0 0 24px' }}>
      <BackHeader title={method === 'email' ? 'Their email' : method === 'sms' ? 'Their phone' : method === 'link' ? 'Invite link' : 'QR code'}
        t={t} base={base} onBack={() => setStep(1)} />
      <div style={{ padding: '20px 22px 0' }}>
        {method === 'email' || method === 'sms' ? (
          <>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 22 }}>
              <CalmAvatar name="J" color={base.primary} size={44} />
              <div>
                <div style={{ fontSize: 14, fontWeight: 700, color: t.text }}>Co-parent</div>
                <div style={{ fontSize: 12, color: t.subtext, marginTop: 2 }}>Their info stays private</div>
              </div>
            </div>
            <input placeholder={method === 'email' ? 'jordan@example.com' : '555-0199'}
              defaultValue={method === 'email' ? 'jordan@example.com' : ''}
              style={{ width: '100%', background: t.bgSecondary, border: 'none', outline: 'none',
                padding: '16px 18px', borderRadius: 14, fontSize: 16, color: t.text }} />
          </>
        ) : method === 'link' ? (
          <>
            <div style={{ padding: '18px 18px', background: t.bgSecondary, borderRadius: 14,
              fontSize: 13, color: t.text, fontFamily: 'monospace', wordBreak: 'break-all', lineHeight: 1.5 }}>
              coparent.app/i/4F8X-92KQ-LNRP
            </div>
            <SecondaryButton label="Copy link" t={t} onClick={() => {}} />
          </>
        ) : (
          <div style={{ background: t.bgSecondary, borderRadius: 18, padding: 24,
            display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: 280 }}>
            <div style={{ width: 200, height: 200, background: t.text, borderRadius: 6, position: 'relative', overflow: 'hidden' }}>
              {/* QR placeholder */}
              {Array.from({ length: 100 }).map((_, i) => (
                <div key={i} style={{ position: 'absolute',
                  left: (i % 10) * 20, top: Math.floor(i / 10) * 20,
                  width: 18, height: 18,
                  background: Math.random() > 0.5 ? t.bg : 'transparent' }} />
              ))}
            </div>
          </div>
        )}
      </div>
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="What they'll see" t={t} />
        <div style={{ padding: '16px 18px', background: t.bgSecondary, borderRadius: 14 }}>
          <div style={{ fontSize: 14, fontWeight: 700, color: t.text, marginBottom: 6 }}>"{COPARENT_DATA.profile.name.split(' ')[0]} invited you to CoParent"</div>
          <div style={{ fontSize: 13, color: t.subtext, lineHeight: 1.5 }}>
            A calm, court-recognized way to coordinate kids, schedules, and expenses. Free for both of you.
          </div>
        </div>
      </div>
      <div style={{ padding: '32px 22px 0' }}>
        <PrimaryButton label={method === 'qr' ? 'Done' : 'Send invite'} base={base} onClick={() => setStep(3)} />
      </div>
    </div>
  );

  return (
    <div style={{ flex: 1, overflowY: 'auto', padding: '0 0 24px', display: 'flex', flexDirection: 'column' }}>
      <BackHeader title="" t={t} base={base} onBack={onBack} />
      <div style={{ flex: 1, padding: '40px 28px 0', textAlign: 'center' }}>
        <div style={{ width: 72, height: 72, borderRadius: 36, background: base.greenBg,
          display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '20px auto 24px' }}>
          <svg width="32" height="32" viewBox="0 0 32 32"><path d="M8 16l5 5 11-11" stroke={base.green} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" fill="none"/></svg>
        </div>
        <div style={{ fontSize: 26, fontWeight: 800, color: t.text, letterSpacing: -0.5, lineHeight: 1.2 }}>
          Invite sent
        </div>
        <div style={{ fontSize: 15, color: t.subtext, marginTop: 14, lineHeight: 1.55 }}>
          We'll let you know when Jordan joins. In the meantime, you can keep adding events, expenses, and notes — they'll all sync once they're here.
        </div>
      </div>
      <div style={{ padding: '24px 22px' }}>
        <PrimaryButton label="Done" base={base} onClick={onBack} />
      </div>
    </div>
  );
}

Object.assign(window, {
  AddExpenseScreen, NewMessageScreen, AddEventScreen, SearchScreen,
  RecordsScreen, HolidaysScreen, ProfileScreen, PairCoparentScreen
});