// Vault — Tier 1 additional screens (dark-only for showcase)
// Receipt · TransactionDetail · KYCCapture · Onboarding

// ─────────────────────────────────────────────────────────────
// 4) RECEIPT — send success
// ─────────────────────────────────────────────────────────────
function Receipt({ t }) {
  return (
    <div style={{ background: t.bg, color: t.text1, minHeight: '100%', fontFamily: sans, paddingBottom: 28 }}>
      {/* header */}
      <div style={{ padding: '60px 18px 8px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ width: 36, height: 36 }}/>
        <div style={{ fontSize: 12, color: t.text3, letterSpacing: 0.4, textTransform: 'uppercase', fontFamily: mono }}>Sent · 14:22</div>
        <div style={{ width: 36, height: 36, borderRadius: 12, background: t.surface1, border: `1px solid ${t.hairline}`, color: t.text2, display: 'grid', placeItems: 'center' }}>{Icon.more(18)}</div>
      </div>

      {/* check moment — calm, no confetti */}
      <div style={{ marginTop: 30, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <div style={{
          width: 76, height: 76, borderRadius: 38,
          background: t.accentMuted, border: `1px solid ${t.accent.replace(')', ' / 0.30)')}`,
          display: 'grid', placeItems: 'center', color: t.accent,
        }}>
          <svg width="34" height="34" viewBox="0 0 24 24" fill="none">
            <path d="M5 12.5l4.5 4.5L19 7.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>
        <div style={{ marginTop: 18, fontSize: 12, color: t.text3, letterSpacing: 0.6, textTransform: 'uppercase', fontFamily: mono }}>Transfer complete</div>
        <div style={{ marginTop: 10, display: 'flex', alignItems: 'baseline', gap: 3, fontFamily: mono, fontFeatureSettings: '"tnum" 1, "lnum" 1' }}>
          <span style={{ fontSize: 18, color: t.text2, fontWeight: 500 }}>−₦</span>
          <span style={{ fontSize: 44, color: t.text1, fontWeight: 500, letterSpacing: -1.2, lineHeight: 1 }}>45,000</span>
          <span style={{ fontSize: 22, color: t.text3, fontWeight: 400, letterSpacing: -0.5 }}>.00</span>
        </div>
        <div style={{ marginTop: 6, fontSize: 12.5, color: t.text2 }}>to <span style={{ color: t.text1, fontWeight: 500 }}>Adaeze Okonkwo</span></div>
      </div>

      {/* receipt block */}
      <div style={{ margin: '26px 18px 0', borderRadius: 18, background: t.surface1, border: `1px solid ${t.hairline}`, overflow: 'hidden' }}>
        {[
          ['Reference', 'VLT‑8K2L‑9M4P', true],
          ['Bank', 'GTBank · 0123456789'],
          ['Channel', 'Instant · NIP'],
          ['Total debited', '₦45,050.00'],
          ['Date', 'Apr 30, 2026'],
        ].map(([k, v, copy], i) => (
          <div key={k} style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            padding: '13px 16px', borderTop: i === 0 ? 'none' : `1px solid ${t.hairline}`,
            fontSize: 13,
          }}>
            <div style={{ color: t.text3 }}>{k}</div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: t.text1, fontFamily: mono, fontFeatureSettings: '"tnum" 1' }}>
              <span>{v}</span>
              {copy && <span style={{ color: t.text3 }}>{Icon.copy(12)}</span>}
            </div>
          </div>
        ))}
      </div>

      {/* status pill */}
      <div style={{ margin: '14px 18px 0', display: 'flex', justifyContent: 'center' }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '8px 14px', borderRadius: 999,
          background: t.pos.replace(')', ' / 0.12)'), color: t.pos,
          fontSize: 11.5, fontWeight: 600, letterSpacing: 0.3, fontFamily: mono,
        }}>
          <span style={{ width: 6, height: 6, borderRadius: 3, background: t.pos }}/>
          SETTLED · NIP REF 8K2L9M4P
        </div>
      </div>

      {/* actions */}
      <div style={{ margin: '22px 18px 0', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
        <div style={{
          padding: '14px 0', borderRadius: 14, textAlign: 'center',
          background: t.surface1, border: `1px solid ${t.hairline}`, color: t.text1,
          fontSize: 13, fontWeight: 500,
        }}>Share receipt</div>
        <div style={{
          padding: '14px 0', borderRadius: 14, textAlign: 'center',
          background: t.surface1, border: `1px solid ${t.hairline}`, color: t.text1,
          fontSize: 13, fontWeight: 500,
        }}>Download PDF</div>
      </div>

      <div style={{ margin: '14px 18px 0', textAlign: 'center', fontSize: 13, color: t.accent, fontWeight: 500 }}>Send another transfer</div>

      <div style={{ marginTop: 22, padding: '0 22px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, fontSize: 11, color: t.text3, lineHeight: 1.4, textAlign: 'center' }}>
        {Icon.lock(11)} <span>Settled via NIBSS · Acme Financial Services Ltd · CBN licensed</span>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 5) TRANSACTION DETAIL — vertical status timeline
// ─────────────────────────────────────────────────────────────
function TransactionDetail({ t }) {
  const steps = [
    { id: 1, label: 'Initiated', sub: 'You authorized the transfer', time: '14:22:04', state: 'done' },
    { id: 2, label: 'Authenticated', sub: 'Face ID + hardware key passed', time: '14:22:06', state: 'done' },
    { id: 3, label: 'Sent to bank', sub: 'NIBSS instant pay channel', time: '14:22:08', state: 'done' },
    { id: 4, label: 'Settled at recipient', sub: 'Funds available in GTBank account', time: '14:22:11', state: 'active' },
  ];

  return (
    <div style={{ background: t.bg, color: t.text1, minHeight: '100%', fontFamily: sans, paddingBottom: 40 }}>
      {/* header */}
      <div style={{ padding: '60px 18px 8px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ width: 36, height: 36, borderRadius: 12, background: t.surface1, border: `1px solid ${t.hairline}`, color: t.text1, display: 'grid', placeItems: 'center' }}>{Icon.back(20)}</div>
        <div style={{ fontSize: 14, color: t.text1, fontWeight: 500 }}>Transaction</div>
        <div style={{ width: 36, height: 36, borderRadius: 12, background: t.surface1, border: `1px solid ${t.hairline}`, color: t.text2, display: 'grid', placeItems: 'center' }}>{Icon.more(18)}</div>
      </div>

      {/* status banner */}
      <div style={{ margin: '14px 18px 0', padding: '14px 16px', borderRadius: 16,
        background: t.pos.replace(')', ' / 0.10)'),
        border: `1px solid ${t.pos.replace(')', ' / 0.25)')}`,
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <div style={{ width: 28, height: 28, borderRadius: 14, background: t.pos, color: t.bg, display: 'grid', placeItems: 'center' }}>{Icon.check(14)}</div>
        <div style={{ flex: 1, lineHeight: 1.25 }}>
          <div style={{ fontSize: 13, color: t.text1, fontWeight: 600 }}>Settled</div>
          <div style={{ fontSize: 11.5, color: t.text2 }}>Apr 30, 2026 · 14:22:11 WAT</div>
        </div>
        <div style={{ fontFamily: mono, fontSize: 11, color: t.text3 }}>3.2s</div>
      </div>

      {/* amount */}
      <div style={{ padding: '24px 22px 8px', textAlign: 'center' }}>
        <div style={{ fontSize: 11, color: t.text3, letterSpacing: 0.5, textTransform: 'uppercase', fontFamily: mono }}>Outgoing</div>
        <div style={{ marginTop: 6, display: 'flex', alignItems: 'baseline', justifyContent: 'center', gap: 3, fontFamily: mono, fontFeatureSettings: '"tnum" 1, "lnum" 1' }}>
          <span style={{ fontSize: 18, color: t.text2, fontWeight: 500 }}>−₦</span>
          <span style={{ fontSize: 40, color: t.text1, fontWeight: 500, letterSpacing: -1, lineHeight: 1 }}>45,000</span>
          <span style={{ fontSize: 20, color: t.text3, letterSpacing: -0.4 }}>.00</span>
        </div>
        <div style={{ marginTop: 4, fontSize: 12, color: t.text3 }}>to Adaeze Okonkwo · GTBank</div>
      </div>

      {/* timeline */}
      <div style={{ margin: '14px 22px 0', padding: '18px 18px 8px', borderRadius: 18,
        background: t.surface1, border: `1px solid ${t.hairline}`,
      }}>
        <div style={{ fontSize: 11, color: t.text3, letterSpacing: 0.5, textTransform: 'uppercase', fontFamily: mono, marginBottom: 14 }}>Status timeline</div>
        {steps.map((s, i) => {
          const last = i === steps.length - 1;
          const done = s.state === 'done';
          const active = s.state === 'active';
          return (
            <div key={s.id} style={{ display: 'flex', gap: 12, position: 'relative', paddingBottom: last ? 0 : 16 }}>
              {/* rail */}
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: 14 }}>
                <div style={{
                  width: 14, height: 14, borderRadius: 7,
                  background: done ? t.pos : (active ? t.accent : t.surface3),
                  border: active ? `2px solid ${t.accent.replace(')', ' / 0.35)')}` : 'none',
                  boxShadow: active ? `0 0 0 4px ${t.accent.replace(')', ' / 0.15)')}` : 'none',
                  display: 'grid', placeItems: 'center', color: t.bg, flexShrink: 0,
                }}>
                  {done && <svg width="8" height="8" viewBox="0 0 24 24" fill="none"><path d="M5 12.5l4.5 4.5L19 7.5" stroke="currentColor" strokeWidth="3" strokeLinecap="round"/></svg>}
                </div>
                {!last && <div style={{ flex: 1, width: 2, background: done ? t.pos.replace(')', ' / 0.35)') : t.hairline, marginTop: 2 }}/>}
              </div>
              <div style={{ flex: 1, paddingTop: -2 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <div style={{ fontSize: 13, color: t.text1, fontWeight: 500 }}>{s.label}</div>
                  <div style={{ fontFamily: mono, fontSize: 11, color: t.text3 }}>{s.time}</div>
                </div>
                <div style={{ fontSize: 11.5, color: t.text3, marginTop: 2, lineHeight: 1.3 }}>{s.sub}</div>
              </div>
            </div>
          );
        })}
      </div>

      {/* breakdown */}
      <div style={{ margin: '12px 22px 0', borderRadius: 14, background: t.surface1, border: `1px solid ${t.hairline}`, overflow: 'hidden' }}>
        {[
          ['Reference', 'VLT‑8K2L‑9M4P'],
          ['Fee', '₦0.00'],
          ['Stamp duty', '₦50.00'],
          ['Total debit', '₦45,050.00'],
        ].map(([k, v], i) => (
          <div key={k} style={{
            display: 'flex', justifyContent: 'space-between', padding: '12px 16px',
            borderTop: i === 0 ? 'none' : `1px solid ${t.hairline}`,
            fontSize: 12.5,
          }}>
            <div style={{ color: t.text3 }}>{k}</div>
            <div style={{ color: t.text1, fontFamily: mono, fontFeatureSettings: '"tnum" 1' }}>{v}</div>
          </div>
        ))}
      </div>

      {/* support row */}
      <div style={{ margin: '14px 22px 0', padding: '12px 14px', borderRadius: 12,
        background: t.surface1, border: `1px solid ${t.hairline}`,
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <div style={{ width: 30, height: 30, borderRadius: 9, background: t.surface2, color: t.text2, display: 'grid', placeItems: 'center' }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.6"/><path d="M9.5 9.5a2.5 2.5 0 015 0c0 1.5-2.5 2-2.5 3.5M12 17h.01" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>
        </div>
        <div style={{ flex: 1, lineHeight: 1.25 }}>
          <div style={{ fontSize: 12.5, color: t.text1, fontWeight: 500 }}>Something wrong with this transfer?</div>
          <div style={{ fontSize: 11, color: t.text3 }}>Open a dispute · response within 24h</div>
        </div>
        <div style={{ fontSize: 11, color: t.text2, fontFamily: mono }}>→</div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 6) KYC CAPTURE — document frame
// ─────────────────────────────────────────────────────────────
function KYCCapture({ t }) {
  return (
    <div style={{ background: t.bg, color: t.text1, minHeight: '100%', fontFamily: sans, paddingBottom: 28 }}>
      {/* header */}
      <div style={{ padding: '60px 18px 8px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ width: 36, height: 36, borderRadius: 12, background: t.surface1, border: `1px solid ${t.hairline}`, color: t.text1, display: 'grid', placeItems: 'center' }}>{Icon.back(20)}</div>
        <div style={{ fontSize: 12, color: t.text3, letterSpacing: 0.4, textTransform: 'uppercase', fontFamily: mono }}>Step 2 of 3</div>
        <div style={{ width: 36, height: 36, borderRadius: 12, background: 'transparent', color: t.text2, display: 'grid', placeItems: 'center', fontSize: 12, fontFamily: mono }}>Skip</div>
      </div>

      {/* progress */}
      <div style={{ margin: '0 18px', display: 'flex', gap: 4 }}>
        {[1, 2, 3].map(n => (
          <div key={n} style={{ flex: 1, height: 3, borderRadius: 2, background: n <= 2 ? t.accent : t.hairlineStrong }}/>
        ))}
      </div>

      <div style={{ padding: '20px 22px 0' }}>
        <div style={{ fontSize: 11, color: t.text3, letterSpacing: 0.6, textTransform: 'uppercase', fontFamily: mono }}>Identity verification</div>
        <div style={{ fontSize: 22, color: t.text1, marginTop: 6, fontWeight: 500, letterSpacing: -0.4, lineHeight: 1.2 }}>
          Capture the front of<br/>your NIN slip.
        </div>
        <div style={{ fontSize: 12.5, color: t.text3, marginTop: 8, lineHeight: 1.45 }}>
          Place the document inside the frame. Hold steady — Vault auto‑captures when readable.
        </div>
      </div>

      {/* camera viewport */}
      <div style={{ margin: '20px 22px 0', position: 'relative', aspectRatio: '0.86 / 1', borderRadius: 22, overflow: 'hidden',
        background: 'oklch(0.10 0.005 250)',
        boxShadow: 'inset 0 0 0 1px oklch(1 0 0 / 0.05)',
      }}>
        {/* darkened backdrop */}
        <div style={{ position: 'absolute', inset: 0,
          background: 'radial-gradient(ellipse at center, oklch(0.18 0.005 250) 0%, oklch(0.08 0.003 250) 100%)',
        }}/>

        {/* mock id card preview */}
        <div style={{
          position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%,-50%) rotate(-1.5deg)',
          width: '78%', aspectRatio: '1.586 / 1', borderRadius: 10,
          background: 'linear-gradient(135deg, oklch(0.40 0.04 80), oklch(0.32 0.03 80))',
          border: '1px solid oklch(1 0 0 / 0.10)',
          padding: '12px 14px', color: 'oklch(0.92 0.005 80)',
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
          boxShadow: '0 10px 30px oklch(0 0 0 / 0.4)',
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
            <div>
              <div style={{ fontSize: 7, letterSpacing: 1.4, opacity: 0.6, fontFamily: mono }}>FEDERAL REPUBLIC</div>
              <div style={{ fontSize: 9, fontWeight: 600, marginTop: 1 }}>NATIONAL ID</div>
            </div>
            <div style={{ width: 26, height: 32, borderRadius: 3, background: 'oklch(0.55 0.02 80)' }}/>
          </div>
          <div style={{ fontFamily: mono, letterSpacing: 1.5, fontSize: 11, fontWeight: 600 }}>1234 5678 9012</div>
          <div>
            <div style={{ fontSize: 7, opacity: 0.6, letterSpacing: 0.8 }}>NAME</div>
            <div style={{ fontSize: 8, fontWeight: 600, marginTop: 1 }}>OLUMIDE ADELEKE</div>
          </div>
        </div>

        {/* corner brackets */}
        {[
          { top: 24, left: 24, b: ['top', 'left'] },
          { top: 24, right: 24, b: ['top', 'right'] },
          { bottom: 80, left: 24, b: ['bottom', 'left'] },
          { bottom: 80, right: 24, b: ['bottom', 'right'] },
        ].map((p, i) => (
          <div key={i} style={{
            position: 'absolute', ...p, width: 28, height: 28,
            borderTop: p.b.includes('top') ? `2.5px solid ${t.accent}` : 'none',
            borderBottom: p.b.includes('bottom') ? `2.5px solid ${t.accent}` : 'none',
            borderLeft: p.b.includes('left') ? `2.5px solid ${t.accent}` : 'none',
            borderRight: p.b.includes('right') ? `2.5px solid ${t.accent}` : 'none',
            borderRadius: p.b.join('-').includes('top-left') ? '6px 0 0 0' :
                          p.b.join('-').includes('top-right') ? '0 6px 0 0' :
                          p.b.join('-').includes('bottom-left') ? '0 0 0 6px' : '0 0 6px 0',
          }}/>
        ))}

        {/* scan hint */}
        <div style={{
          position: 'absolute', left: '50%', bottom: 28, transform: 'translateX(-50%)',
          padding: '6px 12px', borderRadius: 999,
          background: 'oklch(0 0 0 / 0.55)', backdropFilter: 'blur(8px)',
          border: '1px solid oklch(1 0 0 / 0.08)',
          fontSize: 10.5, color: 'oklch(0.92 0.005 80)', letterSpacing: 0.3,
          fontFamily: mono, display: 'inline-flex', alignItems: 'center', gap: 6,
        }}>
          <span style={{ width: 6, height: 6, borderRadius: 3, background: t.accent }}/>
          DETECTING DOCUMENT…
        </div>
      </div>

      {/* checklist */}
      <div style={{ margin: '14px 22px 0', padding: '12px 14px', borderRadius: 14,
        background: t.surface1, border: `1px solid ${t.hairline}`,
      }}>
        {[
          { ok: true, l: 'Good lighting' },
          { ok: true, l: 'All four corners visible' },
          { ok: false, l: 'Reduce glare on top edge' },
        ].map((c, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '6px 0', fontSize: 12.5 }}>
            <div style={{
              width: 18, height: 18, borderRadius: 9,
              background: c.ok ? t.pos.replace(')', ' / 0.18)') : t.warn.replace(')', ' / 0.18)'),
              color: c.ok ? t.pos : t.warn,
              display: 'grid', placeItems: 'center',
            }}>
              {c.ok ? Icon.check(11) : <span style={{ fontFamily: mono, fontSize: 11, fontWeight: 700 }}>!</span>}
            </div>
            <span style={{ color: c.ok ? t.text2 : t.text1 }}>{c.l}</span>
          </div>
        ))}
      </div>

      {/* shutter */}
      <div style={{ margin: '20px 22px 0', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 11, color: t.text3 }}>
          {Icon.shield(11)} Encrypted upload
        </div>
        <div style={{
          width: 60, height: 60, borderRadius: 30,
          background: t.accent, color: t.accentInk,
          display: 'grid', placeItems: 'center',
          boxShadow: `0 0 0 4px ${t.bg}, 0 0 0 5px ${t.hairlineStrong}`,
        }}>
          <div style={{ width: 24, height: 24, borderRadius: 6, background: t.accentInk }}/>
        </div>
        <div style={{ fontSize: 11, color: t.text2, fontFamily: mono }}>Manual</div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 7) ONBOARDING — first-run, security-forward
// ─────────────────────────────────────────────────────────────
function Onboarding({ t }) {
  return (
    <div style={{ background: t.bg, color: t.text1, minHeight: '100%', fontFamily: sans, position: 'relative' }}>
      {/* skip */}
      <div style={{ padding: '60px 22px 0', display: 'flex', justifyContent: 'flex-end' }}>
        <div style={{ fontSize: 12, color: t.text3, fontFamily: mono, letterSpacing: 0.3 }}>Skip</div>
      </div>

      {/* hero illustration: layered safe-deposit slabs (geometric, no SVG illustration) */}
      <div style={{ margin: '24px 22px 0', height: 280, position: 'relative' }}>
        {/* slab 1 */}
        <div style={{
          position: 'absolute', left: 30, top: 50, right: 30, height: 180,
          borderRadius: 20, transform: 'rotate(-6deg)',
          background: `linear-gradient(160deg, ${t.surface3} 0%, ${t.surface1} 100%)`,
          border: `1px solid ${t.hairline}`,
        }}/>
        {/* slab 2 */}
        <div style={{
          position: 'absolute', left: 50, top: 30, right: 10, height: 180,
          borderRadius: 20, transform: 'rotate(3deg)',
          background: `linear-gradient(160deg, oklch(0.26 0.008 250) 0%, oklch(0.20 0.006 250) 100%)`,
          border: `1px solid ${t.hairlineStrong}`,
          boxShadow: '0 18px 40px oklch(0 0 0 / 0.4)',
        }}/>
        {/* main card with monogram + balance teaser */}
        <div style={{
          position: 'absolute', left: 20, top: 60, right: 20, padding: '20px 22px',
          borderRadius: 22, background: `linear-gradient(135deg, ${t.cardA}, ${t.cardB})`,
          border: `1px solid ${t.cardEdge}`,
          boxShadow: '0 20px 50px oklch(0 0 0 / 0.55), inset 0 1px 0 oklch(1 0 0 / 0.08)',
          color: 'oklch(0.95 0.005 80)',
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div style={{
              width: 32, height: 32, borderRadius: 8,
              background: t.accent, color: t.accentInk,
              display: 'grid', placeItems: 'center',
              fontFamily: mono, fontWeight: 700, fontSize: 15,
            }}>V</div>
            <div style={{ fontSize: 10, letterSpacing: 1.4, opacity: 0.6, textTransform: 'uppercase', fontFamily: mono }}>Vault Black</div>
          </div>
          <div style={{ marginTop: 30, fontFamily: mono, fontSize: 11, opacity: 0.5, letterSpacing: 1.5 }}>4192  ••••  ••••  7042</div>
          <div style={{ marginTop: 4, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
            <div style={{ fontSize: 11, fontFamily: mono, fontWeight: 500 }}>OLUMIDE ADELEKE</div>
            <div style={{ fontSize: 11, fontFamily: mono }}>09 / 28</div>
          </div>
        </div>
        {/* shield mark floating */}
        <div style={{
          position: 'absolute', right: 30, top: 18,
          width: 44, height: 44, borderRadius: 22,
          background: t.surface1, border: `1px solid ${t.hairlineStrong}`,
          display: 'grid', placeItems: 'center', color: t.accent,
          boxShadow: '0 8px 20px oklch(0 0 0 / 0.35)',
        }}>{Icon.shield(20)}</div>
      </div>

      {/* copy */}
      <div style={{ padding: '24px 28px 0', textAlign: 'center' }}>
        <div style={{ fontSize: 11, color: t.accent, letterSpacing: 0.8, textTransform: 'uppercase', fontFamily: mono, fontWeight: 600 }}>02 · Security</div>
        <div style={{ fontSize: 26, color: t.text1, fontWeight: 500, letterSpacing: -0.6, lineHeight: 1.2, marginTop: 12 }}>
          Your money is held<br/>under bank‑grade lock.
        </div>
        <div style={{ fontSize: 13.5, color: t.text3, marginTop: 12, lineHeight: 1.5 }}>
          Funds custodied with a CBN‑licensed partner. Transfers gated by Face&nbsp;ID and a hardware key — even if your phone is lost, your money isn't.
        </div>
      </div>

      {/* dots */}
      <div style={{ marginTop: 28, display: 'flex', justifyContent: 'center', gap: 6 }}>
        {[0, 1, 2].map(i => (
          <div key={i} style={{
            width: i === 1 ? 22 : 6, height: 6, borderRadius: 3,
            background: i === 1 ? t.accent : t.hairlineStrong,
            transition: 'all 0.3s',
          }}/>
        ))}
      </div>

      {/* CTA */}
      <div style={{ position: 'absolute', left: 22, right: 22, bottom: 40 }}>
        <div style={{
          padding: '16px 0', borderRadius: 16, textAlign: 'center',
          background: t.accent, color: t.accentInk,
          fontSize: 14.5, fontWeight: 600, letterSpacing: 0.2,
        }}>Continue</div>
        <div style={{ marginTop: 14, textAlign: 'center', fontSize: 11, color: t.text3, lineHeight: 1.4, display: 'inline-flex', justifyContent: 'center', alignItems: 'center', gap: 6, width: '100%' }}>
          {Icon.lock(11)} Licensed by the Central Bank of Nigeria
        </div>
      </div>
    </div>
  );
}

// Expose
Object.assign(window, { Receipt, TransactionDetail, KYCCapture, Onboarding });