// CoParent — Final screens: Sign in, Quick Add, Dispute, Attorney share,
// Subscription, Help, Caregiver pass, Provider directory.

// ─── Sign in / Sign up ───────────────────────────────────────────────────────
function SignInScreen({ t, base, onBack }) {
  const [mode, setMode] = React.useState('signin'); // signin | signup | sent
  const [email, setEmail] = React.useState('alex@morgan.example');

  if (mode === 'sent') return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', padding: '0 0 24px' }}>
      <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.primaryLight,
          display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '20px auto 24px' }}>
          <svg width="32" height="32" viewBox="0 0 32 32">
            <rect x="4" y="8" width="24" height="18" rx="2" stroke={base.primary} strokeWidth="2.4" fill="none"/>
            <path d="M4 10l12 8 12-8" stroke={base.primary} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
          </svg>
        </div>
        <div style={{ fontSize: 26, fontWeight: 800, color: t.text, letterSpacing: -0.5 }}>Check your email</div>
        <div style={{ fontSize: 15, color: t.subtext, marginTop: 14, lineHeight: 1.55 }}>
          We sent a magic link to <b style={{ color: t.text }}>{email}</b>. Tap it to sign in — no password needed.
        </div>
      </div>
      <div style={{ padding: '24px 22px' }}>
        <SecondaryButton label="Open mail app" t={t} onClick={onBack} />
        <div onClick={() => setMode('signin')} style={{ fontSize: 13, color: t.subtext, textAlign: 'center', marginTop: 14, fontWeight: 600, cursor: 'pointer' }}>
          Wrong email? Go back
        </div>
      </div>
    </div>
  );

  const isSignup = mode === 'signup';

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

      {/* Logo / wordmark */}
      <div style={{ padding: '20px 28px 0', textAlign: 'center' }}>
        <div style={{ width: 56, height: 56, borderRadius: 14, background: base.primary,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          color: '#fff', fontSize: 22, fontWeight: 800, letterSpacing: -1, marginBottom: 18 }}>cp</div>
        <div style={{ fontSize: 28, fontWeight: 800, color: t.text, letterSpacing: -0.6, lineHeight: 1.15 }}>
          {isSignup ? 'Create your space' : 'Welcome back'}
        </div>
        <div style={{ fontSize: 14, color: t.subtext, marginTop: 10, lineHeight: 1.5 }}>
          {isSignup ? 'Your private hub. Court-recognized records included.' : 'Pick up where you left off.'}
        </div>
      </div>

      {/* Form */}
      <div style={{ padding: '28px 22px 0' }}>
        {isSignup && (
          <input placeholder="Your name"
            style={{ width: '100%', background: t.bgSecondary, border: 'none', outline: 'none',
              padding: '16px 18px', borderRadius: 14, fontSize: 16, color: t.text, marginBottom: 10 }} />
        )}
        <input value={email} onChange={e => setEmail(e.target.value)} placeholder="Email"
          style={{ width: '100%', background: t.bgSecondary, border: 'none', outline: 'none',
            padding: '16px 18px', borderRadius: 14, fontSize: 16, color: t.text }} />
      </div>

      <div style={{ padding: '20px 22px 0' }}>
        <PrimaryButton label={isSignup ? 'Send verification' : 'Send magic link'} base={base}
          onClick={() => setMode('sent')} />
      </div>

      {/* Alt auth */}
      <div style={{ padding: '20px 22px 0' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
          <div style={{ flex: 1, height: 1, background: t.divider }} />
          <div style={{ fontSize: 12, color: t.subtext, fontWeight: 600 }}>or continue with</div>
          <div style={{ flex: 1, height: 1, background: t.divider }} />
        </div>
        <div style={{ display: 'flex', gap: 10 }}>
          {['Apple', 'Google'].map(p => (
            <div key={p} style={{ flex: 1, padding: '14px', textAlign: 'center', borderRadius: 14,
              background: t.bgSecondary, fontSize: 14, fontWeight: 700, color: t.text, cursor: 'pointer' }}>{p}</div>
          ))}
        </div>
      </div>

      {/* Switch */}
      <div style={{ marginTop: 'auto', padding: '20px 22px 0', textAlign: 'center' }}>
        <div style={{ fontSize: 14, color: t.subtext }}>
          {isSignup ? 'Already have an account?' : "New here?"}{' '}
          <span onClick={() => setMode(isSignup ? 'signin' : 'signup')}
            style={{ color: base.primary, fontWeight: 700, cursor: 'pointer' }}>
            {isSignup ? 'Sign in' : 'Create one'}
          </span>
        </div>
        {isSignup && (
          <div style={{ fontSize: 11, color: t.subtext, marginTop: 14, lineHeight: 1.5 }}>
            By signing up you agree to our <u>Terms</u> and <u>Privacy Policy</u>.
          </div>
        )}
      </div>
    </div>
  );
}

// ─── Quick Add (universal compose) ───────────────────────────────────────────
function QuickAddScreen({ t, base, onBack }) {
  // Shown as a full screen — but designed to feel like a centered hub
  const actions = [
    { k: 'addExpense', label: 'Expense', sub: 'Split with Jordan', tint: base.accent, big: true,
      glyph: '$' },
    { k: 'newMessage', label: 'Message', sub: 'Send a note', tint: base.primary,
      glyph: '✉' },
    { k: 'addEvent', label: 'Event', sub: 'Add to calendar', tint: base.amber,
      glyph: '◷' },
    { k: 'journal', label: 'Journal', sub: 'Capture a moment', tint: '#9B6FB8',
      glyph: '◐' },
    { k: 'health', label: 'Health', sub: 'Log meds or symptom', tint: base.red,
      glyph: '+' },
    { k: 'vault', label: 'Document', sub: 'Scan or upload', tint: '#6F8FB8',
      glyph: '▤' },
  ];

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', padding: '0 0 24px' }}>
      <BackHeader title="Quick add" subtitle="What would you like to add?" t={t} base={base} onBack={onBack} />

      {/* Grid */}
      <div style={{ padding: '20px 22px 0', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        {actions.map((a, i) => (
          <div key={a.k} onClick={onBack}
            style={{ gridColumn: i === 0 ? 'span 2' : 'span 1',
              padding: 18, borderRadius: 18,
              background: i === 0 ? a.tint : t.bgSecondary,
              cursor: 'pointer', minHeight: i === 0 ? 120 : 116,
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            <div style={{ width: 38, height: 38, borderRadius: 12,
              background: i === 0 ? 'rgba(255,255,255,0.2)' : a.tint + '22',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 18, fontWeight: 800,
              color: i === 0 ? '#fff' : a.tint }}>{a.glyph}</div>
            <div>
              <div style={{ fontSize: i === 0 ? 22 : 17, fontWeight: 800,
                color: i === 0 ? '#fff' : t.text, letterSpacing: -0.3 }}>{a.label}</div>
              <div style={{ fontSize: 12, fontWeight: 500, marginTop: 3,
                color: i === 0 ? 'rgba(255,255,255,0.8)' : t.subtext }}>{a.sub}</div>
            </div>
          </div>
        ))}
      </div>

      {/* Recents */}
      <div style={{ padding: '28px 22px 0' }}>
        <CalmSectionLabel label="Recent quick adds" t={t} />
        <div>
          {[
            { label: 'After-school program', sub: 'Expense · $240' },
            { label: 'Pickup at school', sub: 'Event · Tomorrow' },
            { label: "Liam's inhaler", sub: 'Health · Yesterday' },
          ].map((r, i, arr) => (
            <ListRow key={r.label} t={t} last={i === arr.length - 1}
              onClick={onBack}
              primary={r.label} secondary={r.sub}
              right={<span style={{ fontSize: 18, color: t.subtext }}>›</span>}
            />
          ))}
        </div>
      </div>
    </div>
  );
}

// ─── Dispute / Mediation ─────────────────────────────────────────────────────
function DisputeScreen({ t, base, onBack }) {
  const items = COPARENT_DATA.disputes;
  const [sheet, setSheet] = React.useState(null);
  const stageColor = (s) => s === 'mediation' ? base.amber : s === 'resolved' ? base.green : base.primary;

  return (
    <div style={{ flex: 1, overflowY: 'auto', padding: '0 0 24px', position: 'relative' }}>
      <BackHeader title="Disputes" subtitle="Work it out · together" t={t} base={base} onBack={onBack} />

      {/* Hero card */}
      <div style={{ padding: '20px 22px 0' }}>
        <div style={{ background: t.bgSecondary, borderRadius: 18, padding: 20 }}>
          <div style={{ fontSize: 12, fontWeight: 700, color: t.subtext, letterSpacing: 1.2, textTransform: 'uppercase' }}>Calm guided process</div>
          <div style={{ fontSize: 18, fontWeight: 700, color: t.text, marginTop: 8, lineHeight: 1.35 }}>
            Disputes happen. We'll guide you through structured back-and-forth before things escalate.
          </div>
          <div style={{ fontSize: 13, color: t.subtext, marginTop: 10, lineHeight: 1.5 }}>
            Each side gets a turn. No interruptions. AI mediation if you want it. Logged for the record either way.
          </div>
        </div>
      </div>

      {/* Open disputes */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Open" t={t} />
        <div>
          {items.map((d, i) => (
            <ListRow key={d.id} t={t} last={i === items.length - 1}
              onClick={() => setSheet(d)}
              primary={d.topic}
              secondary={`${d.kind === 'expense' ? 'Expense' : 'Schedule'} · Opened ${d.opened}`}
              right={
                <span style={{ fontSize: 11, fontWeight: 700, color: stageColor(d.stage),
                  letterSpacing: 0.5, textTransform: 'uppercase' }}>{d.stage}</span>
              }
            />
          ))}
        </div>
      </div>

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

      {sheet && (
        <CalmBottomSheet t={t} onClose={() => setSheet(null)}>
          {sheet.open ? (
            <>
              <div style={{ fontSize: 22, fontWeight: 800, color: t.text, marginBottom: 4, letterSpacing: -0.3 }}>What's the disagreement about?</div>
              <div style={{ fontSize: 13, color: t.subtext, marginBottom: 22 }}>Jordan will be notified and gets to respond first</div>
              <div>
                {[
                  { l: 'A shared expense', s: 'Disagree about who pays or amount' },
                  { l: 'A schedule change', s: "Don't agree on a swap or holiday" },
                  { l: 'A rule or decision', s: 'Bedtime, screen time, activities' },
                  { l: 'Something else', s: 'Custom topic' },
                ].map((o, i, arr) => (
                  <ListRow key={o.l} t={t} last={i === arr.length - 1}
                    primary={o.l} secondary={o.s}
                    right={<span style={{ fontSize: 18, color: t.subtext }}>›</span>}
                    onClick={() => setSheet(null)} />
                ))}
              </div>
            </>
          ) : (
            <>
              <div style={{ fontSize: 13, color: t.subtext, marginBottom: 8 }}>
                {sheet.kind === 'expense' ? 'Expense dispute' : 'Schedule dispute'} · {sheet.stage}
              </div>
              <div style={{ fontSize: 22, fontWeight: 800, color: t.text, marginBottom: 6, letterSpacing: -0.3 }}>{sheet.topic}</div>
              <div style={{ fontSize: 14, color: t.subtext, lineHeight: 1.55, marginBottom: 22 }}>{sheet.summary}</div>

              {/* Two-sided positions */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 22 }}>
                {[
                  { who: 'You', tint: base.accent, body: 'I think this is shared because the coach made it mandatory.' },
                  { who: 'Jordan', tint: base.primary, body: "I view it as optional — Emma has gear already." },
                ].map(p => (
                  <div key={p.who} style={{ padding: 14, borderRadius: 12, background: t.bgSecondary }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
                      <div style={{ width: 18, height: 18, borderRadius: 9, background: p.tint,
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                        fontSize: 10, fontWeight: 800, color: '#fff' }}>{p.who[0]}</div>
                      <div style={{ fontSize: 12, fontWeight: 700, color: t.text }}>{p.who}</div>
                    </div>
                    <div style={{ fontSize: 14, color: t.text, lineHeight: 1.5 }}>{p.body}</div>
                  </div>
                ))}
              </div>

              {sheet.stage === 'mediation' && (
                <div style={{ padding: 14, background: base.amberBg, borderRadius: 12, marginBottom: 18 }}>
                  <div style={{ fontSize: 11, fontWeight: 700, color: base.amber, letterSpacing: 0.6, textTransform: 'uppercase' }}>AI Suggestion</div>
                  <div style={{ fontSize: 13, color: t.text, marginTop: 6, lineHeight: 1.5 }}>
                    Split the cost 70/30 based on each parent's typical share, or defer to Coach for confirmation.
                  </div>
                </div>
              )}

              <div style={{ display: 'flex', gap: 10 }}>
                <SecondaryButton label="Add note" t={t} onClick={() => setSheet(null)} />
                <PrimaryButton label="Propose resolution" base={base} onClick={() => setSheet(null)} />
              </div>
            </>
          )}
        </CalmBottomSheet>
      )}
    </div>
  );
}

// ─── Attorney / Advisor read-only share ──────────────────────────────────────
function AttorneyShareScreen({ t, base, onBack }) {
  const [scope, setScope] = React.useState({ messages: true, expenses: true, calendar: true, journal: false, health: false });
  const [duration, setDuration] = React.useState('30d');
  const [sheet, setSheet] = React.useState(null);
  const toggle = (k) => setScope(s => ({ ...s, [k]: !s[k] }));

  return (
    <div style={{ flex: 1, overflowY: 'auto', padding: '0 0 24px' }}>
      <BackHeader title="Share with attorney" subtitle="Read-only · time-bound" t={t} base={base} onBack={onBack} />

      {/* Hero */}
      <div style={{ padding: '20px 22px 0' }}>
        <div style={{ background: t.bgSecondary, borderRadius: 18, padding: 20 }}>
          <div style={{ fontSize: 18, fontWeight: 700, color: t.text, letterSpacing: -0.3, lineHeight: 1.3 }}>
            Give a lawyer, mediator, or family member view-only access to your records.
          </div>
          <div style={{ fontSize: 13, color: t.subtext, marginTop: 10, lineHeight: 1.5 }}>
            They get a secure link. You control what they see and for how long. Revoke anytime.
          </div>
        </div>
      </div>

      {/* Who */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Share with" t={t} />
        <input placeholder="Their email"
          style={{ width: '100%', background: t.bgSecondary, border: 'none', outline: 'none',
            padding: '14px 16px', borderRadius: 12, fontSize: 15, color: t.text }} />
        <div style={{ marginTop: 8, fontSize: 12, color: t.subtext }}>
          They'll receive an invite link with view-only credentials.
        </div>
      </div>

      {/* What */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="What can they see" t={t} />
        <div>
          {[
            { k: 'messages', label: 'Messages', sub: 'All conversation threads' },
            { k: 'expenses', label: 'Expenses', sub: 'All entries with receipts' },
            { k: 'calendar', label: 'Calendar & handoffs', sub: 'Custody days, handoffs, log' },
            { k: 'journal', label: 'Journal', sub: 'Shared moments per child' },
            { k: 'health', label: 'Health log', sub: 'Med events and visits' },
          ].map((s, i, arr) => (
            <ListRow key={s.k} t={t} last={i === arr.length - 1}
              primary={s.label} secondary={s.sub}
              right={<Toggle on={scope[s.k]} onChange={() => toggle(s.k)} t={t} base={base} />}
            />
          ))}
        </div>
      </div>

      {/* Duration */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Duration" t={t} />
        <div style={{ display: 'flex', gap: 8 }}>
          {[
            { id: '7d', label: '7 days' },
            { id: '30d', label: '30 days' },
            { id: '90d', label: '90 days' },
            { id: 'until', label: 'Until revoked' },
          ].map(d => {
            const sel = d.id === duration;
            return (
              <div key={d.id} onClick={() => setDuration(d.id)} 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: 13, fontWeight: 600, cursor: 'pointer' }}>{d.label}</div>
            );
          })}
        </div>
      </div>

      <div style={{ padding: '32px 22px 0' }}>
        <PrimaryButton label="Generate secure link" base={base} onClick={() => setSheet('link')} />
        <div style={{ fontSize: 12, color: t.subtext, textAlign: 'center', marginTop: 12 }}>
          Jordan is notified for transparency. They can also revoke.
        </div>
      </div>

      {/* Active shares */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Active shares" t={t} />
        <ListRow t={t} last
          primary="Jen Whitaker, Esq."
          secondary="Expenses · Calendar · expires Jun 2"
          right={<span style={{ fontSize: 12, fontWeight: 700, color: base.red, cursor: 'pointer' }}>Revoke</span>}
        />
      </div>

      {sheet === 'link' && (
        <CalmBottomSheet t={t} onClose={onBack}>
          <div style={{ fontSize: 22, fontWeight: 800, color: t.text, marginBottom: 4 }}>Link generated</div>
          <div style={{ fontSize: 13, color: t.subtext, marginBottom: 18 }}>Sent to the email you entered. Active immediately.</div>
          <div style={{ padding: 14, background: t.bgSecondary, borderRadius: 12,
            fontSize: 13, color: t.text, fontFamily: 'monospace', wordBreak: 'break-all', lineHeight: 1.5,
            marginBottom: 14 }}>
            coparent.app/share/2P4M-9XQR-7CSB
          </div>
          <SecondaryButton label="Copy link" t={t} onClick={onBack} />
        </CalmBottomSheet>
      )}
    </div>
  );
}

// ─── Subscription / paywall ──────────────────────────────────────────────────
function SubscriptionScreen({ t, base, onBack }) {
  const s = COPARENT_DATA.subscription;
  const [billing, setBilling] = React.useState('annual');
  const [sheet, setSheet] = React.useState(null);

  return (
    <div style={{ flex: 1, overflowY: 'auto', padding: '0 0 24px' }}>
      <BackHeader title="CoParent Pro" subtitle={`Trial · ${s.trialDaysLeft} days left`} t={t} base={base} onBack={onBack} />

      {/* Hero */}
      <div style={{ padding: '20px 22px 0' }}>
        <div style={{ background: `linear-gradient(160deg, ${base.primary} 0%, ${base.accent} 100%)`,
          borderRadius: 22, padding: '28px 24px', color: '#fff', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', top: -40, right: -40, width: 160, height: 160,
            borderRadius: 80, background: 'rgba(255,255,255,0.10)' }} />
          <div style={{ position: 'relative' }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: 1.4, textTransform: 'uppercase', opacity: 0.85 }}>Pro</div>
            <div style={{ fontSize: 28, fontWeight: 800, letterSpacing: -0.7, marginTop: 8, lineHeight: 1.15 }}>
              Everything calm,<br/>nothing held back.
            </div>
            <div style={{ fontSize: 14, opacity: 0.85, marginTop: 12, lineHeight: 1.5 }}>
              Court-ready exports, AI mediation, unlimited docs, priority support — for both parents.
            </div>
          </div>
        </div>
      </div>

      {/* Features */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="What you get" t={t} />
        <div>
          {s.proFeatures.map((f, i) => (
            <div key={f} style={{ display: 'flex', alignItems: 'center', gap: 14,
              padding: '14px 0', borderBottom: i < s.proFeatures.length - 1 ? `1px solid ${t.divider}` : 'none' }}>
              <div style={{ width: 22, height: 22, borderRadius: 11, background: base.greenBg,
                display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <svg width="11" height="11" viewBox="0 0 11 11">
                  <path d="M2 5.5l2 2L9 3" stroke={base.green} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
                </svg>
              </div>
              <div style={{ fontSize: 15, color: t.text }}>{f}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Billing toggle */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Plan" t={t} />
        <div style={{ display: 'flex', gap: 10 }}>
          {[
            { id: 'monthly', label: 'Monthly', price: '$14.99', sub: 'per month after trial' },
            { id: 'annual', label: 'Annual', price: '$149', sub: 'per year · save $30' },
          ].map(p => {
            const sel = p.id === billing;
            return (
              <div key={p.id} onClick={() => setBilling(p.id)} style={{
                flex: 1, padding: 16, borderRadius: 16,
                background: sel ? t.bgSecondary : 'transparent',
                border: `1.5px solid ${sel ? t.text : t.divider}`, cursor: 'pointer' }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: t.text }}>{p.label}</div>
                <div style={{ fontSize: 24, fontWeight: 800, color: t.text, marginTop: 6, letterSpacing: -0.5 }}>{p.price}</div>
                <div style={{ fontSize: 12, color: t.subtext, marginTop: 2 }}>{p.sub}</div>
              </div>
            );
          })}
        </div>
        <div style={{ marginTop: 10, fontSize: 12, color: t.subtext, textAlign: 'center' }}>
          One subscription covers both parents.
        </div>
      </div>

      <div style={{ padding: '32px 22px 0' }}>
        <PrimaryButton label={`Continue trial · ${billing === 'annual' ? '$149/yr' : '$14.99/mo'} after`} base={base}
          onClick={() => setSheet('confirm')} />
        <div onClick={onBack} style={{ fontSize: 13, color: t.subtext, textAlign: 'center', marginTop: 14, fontWeight: 600, cursor: 'pointer' }}>
          Stay on Free
        </div>
      </div>

      {/* Always free */}
      <div style={{ padding: '24px 22px 0' }}>
        <div style={{ padding: 14, background: t.bgSecondary, borderRadius: 12 }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: t.text, marginBottom: 6 }}>Always free</div>
          <div style={{ fontSize: 13, color: t.subtext, lineHeight: 1.5 }}>
            Your 30-day trial is full-feature and requires no credit card. Standard is $14.99/month or $149/year after trial. Pro is optional.
          </div>
        </div>
      </div>

      {sheet === 'confirm' && (
        <CalmBottomSheet t={t} onClose={onBack}>
          <div style={{ fontSize: 22, fontWeight: 800, color: t.text, marginBottom: 4 }}>You're on Pro</div>
          <div style={{ fontSize: 14, color: t.subtext, marginBottom: 22, lineHeight: 1.5 }}>
            Trial extended through Jun 14. We'll remind you 3 days before billing kicks in.
          </div>
          <PrimaryButton label="Done" base={base} onClick={onBack} />
        </CalmBottomSheet>
      )}
    </div>
  );
}

// ─── Help & support ──────────────────────────────────────────────────────────
function HelpScreen({ t, base, onBack }) {
  const topics = COPARENT_DATA.helpTopics;
  const [q, setQ] = React.useState('');
  const cats = Array.from(new Set(topics.map(x => x.cat)));
  const visible = q ? topics.filter(x => x.q.toLowerCase().includes(q.toLowerCase())) : topics;
  const byCat = cats.map(c => ({ cat: c, items: visible.filter(x => x.cat === c) })).filter(g => g.items.length);

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

      {/* Search */}
      <div style={{ padding: '14px 22px 0' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 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 value={q} onChange={e => setQ(e.target.value)} placeholder="Search help"
            style={{ flex: 1, background: 'transparent', border: 'none', outline: 'none',
              fontSize: 15, color: t.text }} />
        </div>
      </div>

      {/* Quick contact */}
      <div style={{ padding: '20px 22px 0', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        {[
          { label: 'Live chat', sub: 'Avg reply 5 min', tint: base.primary, glyph: '◐' },
          { label: 'Email us', sub: 'help@coparent.app', tint: base.accent, glyph: '✉' },
        ].map(c => (
          <div key={c.label} style={{ padding: 16, borderRadius: 14, background: t.bgSecondary, cursor: 'pointer' }}>
            <div style={{ width: 32, height: 32, borderRadius: 10, background: c.tint + '22',
              color: c.tint, display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 15, fontWeight: 800, marginBottom: 10 }}>{c.glyph}</div>
            <div style={{ fontSize: 15, fontWeight: 700, color: t.text }}>{c.label}</div>
            <div style={{ fontSize: 12, color: t.subtext, marginTop: 2 }}>{c.sub}</div>
          </div>
        ))}
      </div>

      {/* FAQ grouped */}
      {byCat.map(g => (
        <div key={g.cat} style={{ padding: '24px 22px 0' }}>
          <CalmSectionLabel label={g.cat} t={t} />
          <div>
            {g.items.map((it, i) => (
              <ListRow key={it.id} t={t} last={i === g.items.length - 1}
                onClick={() => {}}
                primary={it.q}
                right={<span style={{ fontSize: 18, color: t.subtext }}>›</span>}
              />
            ))}
          </div>
        </div>
      ))}

      {/* Footer */}
      <div style={{ padding: '32px 22px 0' }}>
        <CalmSectionLabel label="About" t={t} />
        <div>
          <ListRow t={t} primary="Terms of service" right={<span style={{ fontSize: 18, color: t.subtext }}>›</span>} onClick={() => {}} />
          <ListRow t={t} primary="Privacy policy" right={<span style={{ fontSize: 18, color: t.subtext }}>›</span>} onClick={() => {}} />
          <ListRow t={t} last primary="App version" right={<span style={{ fontSize: 13, color: t.subtext }}>2.4.1</span>} />
        </div>
      </div>
    </div>
  );
}

// ─── Caregiver pass (sitter / family temporary access) ───────────────────────
function CaregiverPassScreen({ t, base, onBack }) {
  const items = COPARENT_DATA.caregivers;
  const [sheet, setSheet] = React.useState(null);

  return (
    <div style={{ flex: 1, overflowY: 'auto', padding: '0 0 24px', position: 'relative' }}>
      <BackHeader title="Caregiver pass" subtitle="Temporary view for sitters & family" t={t} base={base} onBack={onBack} />

      {/* Hero */}
      <div style={{ padding: '20px 22px 0' }}>
        <div style={{ background: t.bgSecondary, borderRadius: 18, padding: 20 }}>
          <div style={{ fontSize: 17, fontWeight: 700, color: t.text, letterSpacing: -0.3, lineHeight: 1.3 }}>
            Share what a caregiver needs — and nothing more.
          </div>
          <div style={{ fontSize: 13, color: t.subtext, marginTop: 8, lineHeight: 1.5 }}>
            Pickup info, allergies, emergency contacts, today's schedule. Time-bound. Revoke anytime.
          </div>
        </div>
      </div>

      {/* Active */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Active passes" t={t} />
        <div>
          {items.map((c, i) => (
            <ListRow key={c.id} t={t} last={i === items.length - 1}
              onClick={() => setSheet(c)}
              left={<CalmAvatar name={c.name} color={base.accent} size={36} />}
              primary={c.name}
              secondary={`${c.role} · ${c.access}`}
              right={<span style={{ fontSize: 18, color: t.subtext }}>›</span>}
            />
          ))}
        </div>
      </div>

      {/* Preview of what they see */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="What they see" t={t} />
        <div style={{ background: t.bgSecondary, borderRadius: 16, padding: 18 }}>
          <div style={{ fontSize: 13, color: t.subtext, fontWeight: 700, letterSpacing: 0.5, textTransform: 'uppercase' }}>Caregiver view</div>
          <div style={{ fontSize: 20, fontWeight: 800, color: t.text, marginTop: 8, letterSpacing: -0.3 }}>Emma & Liam · Tonight</div>
          <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 6 }}>
            {[
              { l: 'Bedtime', v: '8:30 PM / 7:30 PM' },
              { l: 'Allergies', v: 'Emma — peanuts', tint: base.red },
              { l: 'Meds', v: 'Liam — inhaler if needed' },
              { l: 'Emergency', v: 'Jordan · 555-0102' },
            ].map(r => (
              <div key={r.l} style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
                <div style={{ fontSize: 12, color: t.subtext, fontWeight: 600, width: 80 }}>{r.l}</div>
                <div style={{ fontSize: 14, color: r.tint || t.text, fontWeight: 600 }}>{r.v}</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 }}>New caregiver pass</div>
              <div style={{ fontSize: 13, color: t.subtext, marginBottom: 22 }}>They get a link — no app install needed</div>
              <div>
                <ListRow t={t} primary="Name" right={<span style={{ fontSize: 13, color: t.subtext }}>Required</span>} />
                <ListRow t={t} primary="Role" right={<span style={{ fontSize: 13, color: t.text, fontWeight: 600 }}>Babysitter</span>} />
                <ListRow t={t} primary="Active window" right={<span style={{ fontSize: 13, color: t.text, fontWeight: 600 }}>Tonight 6–10 PM</span>} />
                <ListRow t={t} last primary="Send via" right={<span style={{ fontSize: 13, color: t.text, fontWeight: 600 }}>Text message</span>} />
              </div>
              <div style={{ marginTop: 20 }}>
                <PrimaryButton label="Generate pass" base={base} onClick={() => setSheet(null)} />
              </div>
            </>
          ) : (
            <>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
                <CalmAvatar name={sheet.name} color={base.accent} size={44} />
                <div>
                  <div style={{ fontSize: 20, fontWeight: 800, color: t.text }}>{sheet.name}</div>
                  <div style={{ fontSize: 13, color: t.subtext, marginTop: 2 }}>{sheet.role}</div>
                </div>
              </div>
              <div style={{ fontSize: 14, color: t.subtext, marginBottom: 22 }}>{sheet.access}</div>
              <div style={{ display: 'flex', gap: 10 }}>
                <SecondaryButton label="Resend link" t={t} onClick={() => setSheet(null)} />
                <PrimaryButton label="Revoke pass" base={base} onClick={() => setSheet(null)} />
              </div>
            </>
          )}
        </CalmBottomSheet>
      )}
    </div>
  );
}

// ─── Provider directory ──────────────────────────────────────────────────────
function ProvidersScreen({ t, base, onBack }) {
  const items = COPARENT_DATA.providers;
  const [sheet, setSheet] = React.useState(null);
  const [filter, setFilter] = React.useState('all');

  const byRole = items.reduce((a, p) => { (a[p.role] = a[p.role] || []).push(p); return a; }, {});
  const filters = ['all', 'Emma', 'Liam'];
  const visible = filter === 'all' ? items : items.filter(p => p.for === filter || p.for === 'Both');

  return (
    <div style={{ flex: 1, overflowY: 'auto', padding: '0 0 24px', position: 'relative' }}>
      <BackHeader title="Providers" subtitle={`${items.length} contacts`} t={t} base={base} onBack={onBack} />

      {/* Filter */}
      <div style={{ padding: '14px 22px 0', display: 'flex', gap: 8 }}>
        {filters.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' ? 'All' : f}
          </div>
        ))}
      </div>

      {/* Emergency-call shortcut */}
      <div style={{ padding: '20px 22px 0' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: 14,
          background: base.redBg, borderRadius: 14, cursor: 'pointer' }}
          onClick={() => setSheet(items.find(x => x.emerg))}>
          <div style={{ width: 38, height: 38, borderRadius: 12, background: base.red,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: '#fff', fontSize: 18, fontWeight: 800 }}>+</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 11, fontWeight: 700, color: base.red, letterSpacing: 0.5, textTransform: 'uppercase' }}>Emergency contact</div>
            <div style={{ fontSize: 15, fontWeight: 700, color: t.text, marginTop: 2 }}>Dr. Chen · Pediatrician</div>
          </div>
          <span style={{ fontSize: 13, fontWeight: 700, color: base.red }}>Call</span>
        </div>
      </div>

      {/* Groups */}
      {Object.entries(visible.reduce((a, p) => { (a[p.role] = a[p.role] || []).push(p); return a; }, {})).map(([role, list]) => (
        <div key={role} style={{ padding: '24px 22px 0' }}>
          <CalmSectionLabel label={role} t={t} />
          <div>
            {list.map((p, i) => (
              <ListRow key={p.id} t={t} last={i === list.length - 1}
                onClick={() => setSheet(p)}
                primary={p.name}
                secondary={p.for === 'Both' ? 'Both kids' : `For ${p.for}`}
                right={<span style={{ fontSize: 13, color: t.subtext }}>{p.phone}</span>}
              />
            ))}
          </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 a provider</div>
              <div style={{ fontSize: 13, color: t.subtext, marginBottom: 22 }}>Shared with Jordan</div>
              <div>
                <ListRow t={t} primary="Name" right={<span style={{ fontSize: 13, color: t.subtext }}>Required</span>} />
                <ListRow t={t} primary="Role" right={<span style={{ fontSize: 13, color: t.text, fontWeight: 600 }}>Pediatrician</span>} />
                <ListRow t={t} primary="Phone" right={<span style={{ fontSize: 13, color: t.subtext }}>Optional</span>} />
                <ListRow t={t} last primary="For" right={<span style={{ fontSize: 13, color: t.text, fontWeight: 600 }}>Both</span>} />
              </div>
              <div style={{ marginTop: 20 }}>
                <PrimaryButton label="Save" base={base} onClick={() => setSheet(null)} />
              </div>
            </>
          ) : (
            <>
              <div style={{ fontSize: 13, color: t.subtext, marginBottom: 8 }}>{sheet.role}</div>
              <div style={{ fontSize: 22, fontWeight: 800, color: t.text, marginBottom: 4 }}>{sheet.name}</div>
              <div style={{ fontSize: 14, color: t.subtext, marginBottom: 22 }}>
                For {sheet.for === 'Both' ? 'both kids' : sheet.for} · {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>
  );
}

Object.assign(window, {
  SignInScreen, QuickAddScreen, DisputeScreen, AttorneyShareScreen,
  SubscriptionScreen, HelpScreen, CaregiverPassScreen, ProvidersScreen
});