// Beside — primary screens (part 2)
// Check-in, Trusted Contacts, Map / Safe Spaces, Fake Call Setup, Fake Call Incoming, Settings, Stealth Calculator, Angel web view

// ─── S7. Check-in ────────────────────────────────────────────
const SCheckIn = () => (
  <Screen>
    <div style={{ padding: '6px 22px 18px' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, color: T.text }}>
        <I.ArrowLeft size={22}/>
        <div style={{ fontSize: 18, fontWeight: 600 }}>Check-in</div>
      </div>
    </div>
    <div style={{ padding: '0 18px', display: 'flex', flexDirection: 'column', gap: 14 }}>
      {/* big timer */}
      <div style={{
        background: `radial-gradient(80% 100% at 50% 0%, rgba(123,95,230,0.18), transparent 70%), ${T.bgEl}`,
        borderRadius: 24, padding: '32px 20px 26px',
        border: `1px solid ${T.borderSoft}`,
        textAlign: 'center',
      }}>
        <div style={{ fontSize: 12, color: T.text3, fontWeight: 600, letterSpacing: 2 }}>SOS WILL FIRE AT</div>
        <div style={{ fontSize: 56, fontWeight: 700, letterSpacing: -2, marginTop: 6, fontVariantNumeric: 'tabular-nums' }}>23:35</div>
        <div style={{ color: T.primaryLight, fontSize: 16, fontWeight: 600, marginTop: 2 }}>in 40 minutes</div>
        <div style={{ display: 'flex', gap: 6, justifyContent: 'center', marginTop: 18, flexWrap: 'wrap' }}>
          {['15m','30m','40m','60m','90m','+'].map((t, i) => (
            <div key={t} style={{
              padding: '8px 14px', borderRadius: 999,
              background: i === 2 ? T.primary : T.bgEl2,
              color: i === 2 ? '#fff' : T.text2,
              fontSize: 13, fontWeight: 600,
              border: i === 2 ? 'none' : `1px solid ${T.borderSoft}`,
            }}>{t}</div>
          ))}
        </div>
      </div>

      <Card>
        <div style={{ fontSize: 12, fontWeight: 600, color: T.text3, letterSpacing: 1, marginBottom: 10 }}>NOTE (OPTIONAL)</div>
        <div style={{ fontSize: 15, color: T.text, lineHeight: 1.5 }}>
          Date with Ivan — Cantina, Thonglor.
          <span style={{ color: T.text3 }}> Taxi А123БВ77.</span>
        </div>
      </Card>

      <Card padding={4}>
        <div style={{ padding: '12px 14px 6px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ fontSize: 12, fontWeight: 600, color: T.text3, letterSpacing: 1 }}>NOTIFY</div>
          <div style={{ fontSize: 12, color: T.primaryLight, fontWeight: 600 }}>Edit</div>
        </div>
        <div style={{ padding: '0 4px 4px' }}>
          <AngelRow name="Maria K." sub="Mom · primary" selected/>
        </div>
      </Card>

      <div style={{ marginTop: 4 }}>
        <PrimaryButton icon={<I.Clock size={20}/>}>Start timer</PrimaryButton>
        <div style={{ textAlign: 'center', color: T.text3, fontSize: 12, marginTop: 12, lineHeight: 1.5 }}>
          5 min before timeout you'll get a reminder.<br/>Two minutes after — SOS fires automatically.
        </div>
      </div>
    </div>
  </Screen>
);

// ─── S8. Trusted Contacts ────────────────────────────────────
const SContacts = () => (
  <Screen>
    <div style={{ padding: '6px 22px 14px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
      <div style={{ fontSize: 26, fontWeight: 700, letterSpacing: -0.5 }}>Your circle</div>
      <div style={{
        width: 40, height: 40, borderRadius: 20, background: T.bgEl,
        display: 'flex', alignItems: 'center', justifyContent: 'center', color: T.text2,
        border: `1px solid ${T.borderSoft}`,
      }}><I.Plus size={18}/></div>
    </div>
    <div style={{ padding: '0 22px', color: T.text3, fontSize: 14, marginBottom: 16 }}>
      3 of 5 · all verified · alerted in order of role
    </div>

    <div style={{ padding: '0 18px', display: 'flex', flexDirection: 'column', gap: 10 }}>
      <ContactCard name="Maria Karpova" sub="+7 999 ••• 12-34" role="primary" verified note="Online · last seen now"/>
      <ContactCard name="Alex Sokolov" sub="+66 89 ••• 4521" role="primary" verified note="Online · Bangkok"/>
      <ContactCard name="Olya Lebedeva" sub="+371 27 ••• 88-19" role="secondary" verified note="Sleeping · Riga"/>
      <div style={{
        height: 92, borderRadius: 20, border: `1.5px dashed ${T.border}`,
        display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column',
        color: T.text3, gap: 4,
      }}>
        <I.Plus size={20}/>
        <div style={{ fontSize: 14, fontWeight: 500 }}>Add contact · 2 slots left</div>
      </div>
    </div>

    {/* Education card */}
    <div style={{ padding: '18px 18px 0' }}>
      <Card style={{ background: 'linear-gradient(180deg, rgba(123,95,230,0.16), rgba(123,95,230,0.04))', border: '1px solid rgba(123,95,230,0.28)' }}>
        <div style={{ display: 'flex', gap: 12 }}>
          <div style={{ color: T.primaryLight, marginTop: 2 }}><I.Sparkle size={20}/></div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14, fontWeight: 600 }}>Angels don't need the app.</div>
            <div style={{ fontSize: 13, color: T.text2, marginTop: 4, lineHeight: 1.5 }}>
              They get an SMS with a live link. They can call, see your route, and escalate to police — all from a browser.
            </div>
          </div>
        </div>
      </Card>
    </div>
    <TabBar active="people"/>
  </Screen>
);

const ContactCard = ({ name, sub, role, verified, note }) => (
  <div style={{
    background: T.bgEl, borderRadius: 20, padding: '14px 16px',
    border: `1px solid ${T.borderSoft}`,
    display: 'flex', alignItems: 'center', gap: 12,
  }}>
    <Avatar name={name} size={48}/>
    <div style={{ flex: 1, minWidth: 0 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <div style={{ fontSize: 16, fontWeight: 600 }}>{name}</div>
        {verified && <div style={{ color: T.success }}><I.CheckCircle size={14}/></div>}
      </div>
      <div style={{ fontSize: 13, color: T.text3, marginTop: 1 }}>{sub}</div>
      <div style={{ fontSize: 12, color: T.text3, marginTop: 4, display: 'flex', alignItems: 'center', gap: 5 }}>
        <span style={{
          width: 6, height: 6, borderRadius: 3,
          background: note?.startsWith('Online') ? T.success : T.text4,
        }}/>{note}
      </div>
    </div>
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'flex-end' }}>
      <div style={{
        padding: '3px 8px', borderRadius: 6,
        background: role === 'primary' ? 'rgba(123,95,230,0.16)' : T.bgEl2,
        color: role === 'primary' ? T.primaryLight : T.text2,
        fontSize: 10, fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase',
      }}>{role}</div>
      <div style={{ color: T.text3 }}><I.MoreHorizontal size={18}/></div>
    </div>
  </div>
);

// ─── S9. Map / Safe Spaces ───────────────────────────────────
const SMap = () => (
  <Screen padTop={0}>
    <div style={{
      position: 'absolute', inset: 0,
      background: 'linear-gradient(180deg, #14141B 0%, #1A1B26 50%, #14141B 100%)',
    }}>
      <svg width="100%" height="100%" viewBox="0 0 400 800" preserveAspectRatio="xMidYMid slice">
        <defs>
          <pattern id="dotsM" width="28" height="28" patternUnits="userSpaceOnUse">
            <circle cx="1" cy="1" r="0.5" fill="rgba(255,255,255,0.04)"/>
          </pattern>
        </defs>
        <rect width="400" height="800" fill="url(#dotsM)"/>
        <path d="M 0 380 Q 200 340 400 410" stroke="rgba(80,120,180,0.4)" strokeWidth="22" fill="none"/>
        <path d="M 0 200 L 400 200" stroke="rgba(180,180,200,0.18)" strokeWidth="3"/>
        <path d="M 0 540 L 400 540" stroke="rgba(180,180,200,0.18)" strokeWidth="3"/>
        <path d="M 130 0 L 130 800" stroke="rgba(180,180,200,0.18)" strokeWidth="3"/>
        <path d="M 280 0 L 280 800" stroke="rgba(180,180,200,0.16)" strokeWidth="3"/>
        <path d="M 0 100 L 400 100" stroke="rgba(180,180,200,0.06)" strokeWidth="1.5"/>
        <path d="M 0 660 L 400 660" stroke="rgba(180,180,200,0.06)" strokeWidth="1.5"/>
        <path d="M 60 0 L 60 800" stroke="rgba(180,180,200,0.06)" strokeWidth="1.5"/>
        <path d="M 350 0 L 350 800" stroke="rgba(180,180,200,0.06)" strokeWidth="1.5"/>
      </svg>
      {/* user */}
      <MapMarker x="50%" y="55%" pulse color={T.primaryLight}/>
      {/* markers */}
      <MapMarker x="34%" y="35%" icon={<I.ShieldCheck size={14}/>} bg="#0A84FF"/>
      <MapMarker x="68%" y="42%" icon={<I.Hospital size={14}/>} bg="#FF3B30"/>
      <MapMarker x="74%" y="68%" icon={<I.Coffee size={14}/>} bg="#34C759"/>
      <MapMarker x="22%" y="72%" icon={<I.AlertTriangle size={14}/>} bg="#FF9F0A"/>
      <MapMarker x="48%" y="22%" icon={<I.Coffee size={14}/>} bg="#34C759"/>
    </div>

    {/* top filter row */}
    <div style={{
      position: 'absolute', top: 56, left: 0, right: 0,
      padding: '0 16px',
      display: 'flex', alignItems: 'center', gap: 8,
    }}>
      <div style={{
        width: 40, height: 40, borderRadius: 20,
        background: 'rgba(22,22,29,0.85)', backdropFilter: 'blur(20px)',
        WebkitBackdropFilter: 'blur(20px)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: T.text, border: `1px solid ${T.borderSoft}`,
      }}><I.ArrowLeft size={18}/></div>
      <div style={{ flex: 1, display: 'flex', gap: 6, overflow: 'hidden' }}>
        {[['All', true], ['Police', false], ['Hospital', false], ['24/7', false], ['Reports', false]].map(([l, on]) => (
          <div key={l} style={{
            padding: '8px 14px', borderRadius: 999,
            background: on ? T.text : 'rgba(22,22,29,0.85)',
            color: on ? '#0A0A0F' : T.text,
            fontSize: 13, fontWeight: 600,
            border: on ? 'none' : `1px solid ${T.borderSoft}`,
            backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
            whiteSpace: 'nowrap',
          }}>{l}</div>
        ))}
      </div>
    </div>

    {/* bottom sheet */}
    <div style={{
      position: 'absolute', left: 0, right: 0, bottom: 0,
      background: T.bgEl, borderRadius: '24px 24px 0 0', padding: '12px 18px 36px',
      borderTop: `1px solid ${T.borderSoft}`,
      boxShadow: '0 -10px 40px rgba(0,0,0,0.5)',
    }}>
      <div style={{ width: 40, height: 4, borderRadius: 2, background: T.text4, margin: '0 auto 14px' }}/>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <div style={{ fontSize: 18, fontWeight: 700 }}>Nearest safe places</div>
        <div style={{ fontSize: 12, color: T.text3 }}>5 within 2 km</div>
      </div>
      <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 8 }}>
        <PlaceRow icon={<I.ShieldCheck size={18}/>} bg="#0A84FF" name="Lumpini Police Station"
          sub="Open 24/7 · 240 m" cta="Go"/>
        <PlaceRow icon={<I.Hospital size={18}/>} bg="#FF3B30" name="Bumrungrad Hospital"
          sub="ER open · 580 m"/>
      </div>
    </div>
  </Screen>
);

const MapMarker = ({ x, y, icon, bg, pulse, color }) => (
  <div style={{ position: 'absolute', left: x, top: y, transform: 'translate(-50%,-50%)' }}>
    {pulse && <div style={{
      position: 'absolute', inset: -14, borderRadius: '50%',
      background: 'rgba(123,95,230,0.3)', animation: 'pulse 2s ease-out infinite',
    }} />}
    {icon ? (
      <div style={{
        width: 30, height: 30, borderRadius: 15, background: bg, color: '#fff',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        border: '2px solid rgba(0,0,0,0.5)', boxShadow: '0 4px 12px rgba(0,0,0,0.4)',
      }}>{icon}</div>
    ) : (
      <div style={{
        width: 18, height: 18, borderRadius: 9, background: color || T.primaryLight,
        border: '3px solid #fff',
      }}/>
    )}
  </div>
);
const PlaceRow = ({ icon, bg, name, sub, cta }) => (
  <div style={{
    display: 'flex', alignItems: 'center', gap: 12,
    padding: '10px 12px', borderRadius: 14, background: T.bgEl2,
  }}>
    <div style={{
      width: 36, height: 36, borderRadius: 10, background: bg, color: '#fff',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>{icon}</div>
    <div style={{ flex: 1, minWidth: 0 }}>
      <div style={{ fontSize: 15, fontWeight: 600 }}>{name}</div>
      <div style={{ fontSize: 12, color: T.text3 }}>{sub}</div>
    </div>
    {cta && <div style={{
      padding: '7px 14px', borderRadius: 10, background: T.primary, color: '#fff',
      fontSize: 13, fontWeight: 600,
    }}>{cta}</div>}
  </div>
);

// ─── S10. Fake Call — Setup ──────────────────────────────────
const SFakeSetup = () => (
  <Screen>
    <div style={{ padding: '6px 22px 18px' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, color: T.text }}>
        <I.ArrowLeft size={22}/>
        <div style={{ fontSize: 18, fontWeight: 600 }}>Fake call</div>
      </div>
    </div>
    <div style={{ padding: '0 18px', display: 'flex', flexDirection: 'column', gap: 12 }}>
      <Card>
        <div style={{ fontSize: 12, fontWeight: 600, color: T.text3, letterSpacing: 1, marginBottom: 12 }}>CALLER</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
          {[['Mom','MK',true], ['Boss','VR'], ['Ivan','IS']].map(([n, ini, sel]) => (
            <div key={n} style={{
              borderRadius: 14, padding: '14px 8px', textAlign: 'center',
              background: sel ? 'rgba(123,95,230,0.16)' : T.bgEl2,
              border: sel ? '1px solid rgba(123,95,230,0.4)' : `1px solid transparent`,
            }}>
              <div style={{ display: 'flex', justifyContent: 'center' }}><Avatar name={n} size={48}/></div>
              <div style={{ fontSize: 14, fontWeight: 600, marginTop: 8 }}>{n}</div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 10, padding: '12px 12px', borderRadius: 12, background: T.bgEl2,
          display: 'flex', alignItems: 'center', gap: 10, color: T.text2 }}>
          <I.Plus size={16}/><span style={{ fontSize: 14 }}>Custom contact</span>
        </div>
      </Card>

      <Card>
        <div style={{ fontSize: 12, fontWeight: 600, color: T.text3, letterSpacing: 1, marginBottom: 10 }}>RING IN</div>
        <div style={{ display: 'flex', gap: 6 }}>
          {[['Now', false], ['30s', true], ['1m', false], ['3m', false]].map(([l, on]) => (
            <div key={l} style={{
              flex: 1, padding: '11px 0', borderRadius: 10, textAlign: 'center',
              background: on ? T.text : T.bgEl2,
              color: on ? '#0A0A0F' : T.text,
              fontSize: 14, fontWeight: 600,
            }}>{l}</div>
          ))}
        </div>
      </Card>

      <Card>
        <div style={{ fontSize: 12, fontWeight: 600, color: T.text3, letterSpacing: 1, marginBottom: 10 }}>VOICE LINE</div>
        <RadioRow label="“I'll be right there”" sub="6 sec · female voice" sel/>
        <Divider/>
        <RadioRow label="“I'm already on my way”" sub="4 sec · female voice"/>
        <Divider/>
        <RadioRow label="“Where are you?”" sub="2 sec · short · loops"/>
        <Divider/>
        <RadioRow label="Record your own" sub="Tap to record"/>
      </Card>

      <PrimaryButton icon={<I.PhoneIncoming size={18}/>}>Ring in 30 seconds</PrimaryButton>
    </div>
  </Screen>
);
const RadioRow = ({ label, sub, sel }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 0' }}>
    <div style={{
      width: 22, height: 22, borderRadius: 11,
      border: `2px solid ${sel ? T.primary : T.border}`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>{sel && <div style={{ width: 10, height: 10, borderRadius: 5, background: T.primary }}/>}</div>
    <div style={{ flex: 1 }}>
      <div style={{ fontSize: 14, fontWeight: 500 }}>{label}</div>
      <div style={{ fontSize: 12, color: T.text3, marginTop: 1 }}>{sub}</div>
    </div>
  </div>
);

// ─── S11. Fake Call — Incoming ───────────────────────────────
const SFakeIncoming = () => (
  <Screen padTop={0} bg="#000">
    <div style={{
      flex: 1, padding: '90px 0 36px', display: 'flex', flexDirection: 'column',
      alignItems: 'center', color: '#fff',
      background: 'linear-gradient(180deg, #1a1a1a 0%, #000 80%)',
    }}>
      <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.7)' }}>mobile</div>
      <div style={{ fontSize: 38, fontWeight: 400, marginTop: 6, letterSpacing: -0.5 }}>Mom</div>

      <div style={{ marginTop: 38, position: 'relative' }}>
        <Avatar name="Maria K" size={132}/>
      </div>

      <div style={{ flex: 1 }}/>

      {/* quick replies */}
      <div style={{ display: 'flex', gap: 38, marginBottom: 26, color: '#fff' }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
          <div style={{
            width: 50, height: 50, borderRadius: 25,
            background: 'rgba(255,255,255,0.18)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="1.6"
              strokeLinecap="round" strokeLinejoin="round">
              <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
            </svg>
          </div>
          <div style={{ fontSize: 11, opacity: 0.7 }}>Message</div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
          <div style={{
            width: 50, height: 50, borderRadius: 25,
            background: 'rgba(255,255,255,0.18)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}><I.Bell size={22}/></div>
          <div style={{ fontSize: 11, opacity: 0.7 }}>Remind me</div>
        </div>
      </div>

      {/* accept/decline */}
      <div style={{ display: 'flex', gap: 90, padding: '0 36px' }}>
        <div style={{
          width: 72, height: 72, borderRadius: 36, background: '#FF3B30',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: '0 6px 20px rgba(255,59,48,0.5)',
        }}>
          <div style={{ transform: 'rotate(135deg)' }}><I.Phone size={28}/></div>
        </div>
        <div style={{
          width: 72, height: 72, borderRadius: 36, background: '#34C759',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: '0 6px 20px rgba(52,199,89,0.5)',
          position: 'relative',
        }}>
          <div style={{
            position: 'absolute', inset: -8, borderRadius: 40,
            border: '2px solid rgba(52,199,89,0.5)',
            animation: 'pulse 1.6s ease-out infinite',
          }}/>
          <I.Phone size={28}/>
        </div>
      </div>
    </div>
  </Screen>
);

// ─── S12. Settings ───────────────────────────────────────────
const SSettings = () => (
  <Screen>
    <div style={{ padding: '6px 22px 14px' }}>
      <div style={{ fontSize: 26, fontWeight: 700, letterSpacing: -0.5 }}>Settings</div>
    </div>
    <div style={{ padding: '0 18px', display: 'flex', flexDirection: 'column', gap: 14 }}>
      {/* profile */}
      <Card>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <Avatar name="Anna Petrova" size={52}/>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 17, fontWeight: 600 }}>Anna Petrova</div>
            <div style={{ fontSize: 13, color: T.text3 }}>+7 999 ••• 12-34 · English</div>
          </div>
          <div style={{ color: T.text3 }}><I.ChevronRight size={18}/></div>
        </div>
      </Card>

      <SectionGroup title="SAFETY">
        <Row icon={<I.Lock size={18}/>} bg="rgba(123,95,230,0.16)" fg={T.primaryLight} title="PIN code" right="Set"/>
        <Row icon={<I.Eye size={18}/>} bg="rgba(255,159,10,0.16)" fg={T.warning} title="Duress PIN" right="Off"/>
        <Row icon={<I.ShieldCheck size={18}/>} bg="rgba(52,199,89,0.16)" fg={T.success} title="Face ID for unlock" toggle/>
      </SectionGroup>

      <SectionGroup title="SOS TRIGGERS">
        <Row icon={<I.Phone size={18}/>} bg={T.bgEl2} fg={T.text2} title="Triple-press power" toggle on/>
        <Row icon={<I.Vibrate size={18}/>} bg={T.bgEl2} fg={T.text2} title="Shake to record" sub="Sensitivity · medium" toggle on/>
        <Row icon={<I.Volume size={18}/>} bg={T.bgEl2} fg={T.text2} title="Volume buttons (3×)" toggle/>
        <Row icon={<I.Sparkle size={18}/>} bg={T.bgEl2} fg={T.text2} title="Home screen widget"/>
      </SectionGroup>

      <SectionGroup title="STEALTH MODE">
        <Row icon={<I.Calculator size={18}/>} bg="rgba(157,133,242,0.18)" fg={T.primaryLight}
          title="Disguise as calculator" sub="Unlock code · 9110=" toggle on/>
      </SectionGroup>
    </div>
    <div style={{ height: 110 }}/>
    <TabBar active="settings"/>
  </Screen>
);

const SectionGroup = ({ title, children }) => (
  <div>
    <div style={{ fontSize: 11, fontWeight: 700, color: T.text3, letterSpacing: 1.5, padding: '0 4px 8px' }}>
      {title}
    </div>
    <div style={{ background: T.bgEl, borderRadius: 18, border: `1px solid ${T.borderSoft}`, overflow: 'hidden' }}>
      {children}
    </div>
  </div>
);
const Row = ({ icon, bg, fg, title, sub, right, toggle, on }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px',
    borderTop: `1px solid ${T.borderSoft}`, ...(({}))
  }}>
    <div style={{
      width: 32, height: 32, borderRadius: 9, background: bg, color: fg,
      display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
    }}>{icon}</div>
    <div style={{ flex: 1, minWidth: 0 }}>
      <div style={{ fontSize: 15, fontWeight: 500 }}>{title}</div>
      {sub && <div style={{ fontSize: 12, color: T.text3, marginTop: 1 }}>{sub}</div>}
    </div>
    {toggle ? (
      <div style={{
        width: 44, height: 26, borderRadius: 13,
        background: on ? T.success : T.bgEl3,
        padding: 2, display: 'flex', flexDirection: on ? 'row-reverse' : 'row',
      }}>
        <div style={{ width: 22, height: 22, borderRadius: 11, background: '#fff' }}/>
      </div>
    ) : right ? (
      <div style={{ fontSize: 14, color: T.text3 }}>{right}</div>
    ) : (
      <div style={{ color: T.text3 }}><I.ChevronRight size={16}/></div>
    )}
  </div>
);

// ─── S13. Stealth Calculator ─────────────────────────────────
const SCalc = () => {
  const Btn = ({ children, bg, fg, wide }) => (
    <div style={{
      gridColumn: wide ? 'span 2' : 'auto',
      height: 80, borderRadius: 40, background: bg, color: fg,
      display: 'flex', alignItems: 'center', justifyContent: wide ? 'flex-start' : 'center',
      paddingLeft: wide ? 30 : 0,
      fontSize: 36, fontWeight: 400, fontFamily: T.font,
    }}>{children}</div>
  );
  return (
    <Screen padTop={0} bg="#000">
      <div style={{ flex: 1, padding: '60px 14px 36px', display: 'flex', flexDirection: 'column' }}>
        <div style={{
          flex: 1, display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-end',
          padding: '0 16px 16px', color: '#fff', fontSize: 88, fontWeight: 200,
          letterSpacing: -2, fontVariantNumeric: 'tabular-nums', lineHeight: 1,
        }}>9110</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
          <Btn bg="#A5A5A5" fg="#000">AC</Btn>
          <Btn bg="#A5A5A5" fg="#000">±</Btn>
          <Btn bg="#A5A5A5" fg="#000">%</Btn>
          <Btn bg="#FF9F0A" fg="#fff">÷</Btn>
          <Btn bg="#333" fg="#fff">7</Btn>
          <Btn bg="#333" fg="#fff">8</Btn>
          <Btn bg="#333" fg="#fff">9</Btn>
          <Btn bg="#FF9F0A" fg="#fff">×</Btn>
          <Btn bg="#333" fg="#fff">4</Btn>
          <Btn bg="#333" fg="#fff">5</Btn>
          <Btn bg="#333" fg="#fff">6</Btn>
          <Btn bg="#FF9F0A" fg="#fff">−</Btn>
          <Btn bg="#333" fg="#fff">1</Btn>
          <Btn bg="#333" fg="#fff">2</Btn>
          <Btn bg="#333" fg="#fff">3</Btn>
          <Btn bg="#FF9F0A" fg="#fff">+</Btn>
          <Btn bg="#333" fg="#fff" wide>0</Btn>
          <Btn bg="#333" fg="#fff">,</Btn>
          <Btn bg="#FF9F0A" fg="#fff">=</Btn>
        </div>
      </div>
    </Screen>
  );
};

// ─── S14. Angel Web View (light) ─────────────────────────────
const SAngelWeb = () => (
  <Screen padTop={0} bg="#F5F5F7">
    {/* fake browser chrome */}
    <div style={{
      paddingTop: 56,
      background: '#F5F5F7',
      borderBottom: '1px solid rgba(0,0,0,0.08)',
    }}>
      <div style={{
        margin: '8px 14px', height: 36, borderRadius: 10,
        background: 'rgba(0,0,0,0.06)',
        display: 'flex', alignItems: 'center', padding: '0 12px', gap: 8,
        color: 'rgba(0,0,0,0.6)', fontSize: 13,
      }}>
        <I.Lock size={13}/> beside.app/i/k7s39d
      </div>
    </div>

    <div style={{ padding: '14px 18px 0', color: '#0A0A0F' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <Avatar name="Anna Petrova" size={40}/>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 16, fontWeight: 600 }}>Anna is on her way home</div>
          <div style={{ fontSize: 12, color: '#6E6E7A', display: 'flex', alignItems: 'center', gap: 5 }}>
            <span style={{ width: 6, height: 6, borderRadius: 3, background: '#34C759' }}/>
            Updated just now · battery 92%
          </div>
        </div>
        <div style={{
          padding: '4px 8px', borderRadius: 8, background: '#FFEAE9', color: '#C92A22',
          fontSize: 10, fontWeight: 700, letterSpacing: 0.5,
        }}>LIVE</div>
      </div>

      {/* light map */}
      <div style={{
        marginTop: 14, height: 280, borderRadius: 18, overflow: 'hidden',
        border: '1px solid rgba(0,0,0,0.08)',
        background: '#E8ECF3',
        position: 'relative',
      }}>
        <svg width="100%" height="100%" viewBox="0 0 400 400" preserveAspectRatio="xMidYMid slice">
          <rect width="400" height="400" fill="#E8ECF3"/>
          <path d="M 0 280 Q 200 250 400 290" stroke="#B7CDE8" strokeWidth="22" fill="none"/>
          <path d="M 0 150 L 400 150" stroke="#fff" strokeWidth="7"/>
          <path d="M 0 230 L 400 230" stroke="#fff" strokeWidth="5"/>
          <path d="M 100 0 L 100 400" stroke="#fff" strokeWidth="6"/>
          <path d="M 290 0 L 290 400" stroke="#fff" strokeWidth="5"/>
          <path d="M 60 380 L 60 230 L 290 230 L 290 80 L 360 80" stroke="#9D85F2" strokeWidth="4"
            fill="none" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="4 8"/>
          <path d="M 60 380 L 60 300" stroke="#7B5FE6" strokeWidth="4"
            fill="none" strokeLinecap="round" strokeLinejoin="round"/>
          <rect x="170" y="240" width="50" height="34" rx="2" fill="rgba(0,0,0,0.06)"/>
          <rect x="300" y="160" width="40" height="60" rx="2" fill="rgba(0,0,0,0.06)"/>
        </svg>
        <div style={{ position: 'absolute', left: '15%', top: '75%', transform: 'translate(-50%,-50%)' }}>
          <div style={{ position: 'absolute', inset: -10, borderRadius: '50%',
            background: 'rgba(123,95,230,0.25)', animation: 'pulse 2s ease-out infinite' }}/>
          <div style={{ width: 16, height: 16, borderRadius: 8, background: '#7B5FE6',
            border: '3px solid #fff', boxShadow: '0 2px 6px rgba(0,0,0,0.2)' }}/>
        </div>
        <div style={{ position: 'absolute', left: '90%', top: '20%', transform: 'translate(-50%,-100%)', color: '#7B5FE6' }}>
          <I.MapPin size={28}/>
        </div>
      </div>

      <div style={{ marginTop: 14, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        <div style={{ background: '#fff', borderRadius: 14, padding: '12px 14px', border: '1px solid rgba(0,0,0,0.06)' }}>
          <div style={{ fontSize: 11, color: '#6E6E7A', fontWeight: 600 }}>ETA</div>
          <div style={{ fontSize: 18, fontWeight: 700, marginTop: 2 }}>22:32</div>
          <div style={{ fontSize: 12, color: '#6E6E7A' }}>14 min · 1.1 km</div>
        </div>
        <div style={{ background: '#fff', borderRadius: 14, padding: '12px 14px', border: '1px solid rgba(0,0,0,0.06)' }}>
          <div style={{ fontSize: 11, color: '#6E6E7A', fontWeight: 600 }}>STATUS</div>
          <div style={{ fontSize: 18, fontWeight: 700, marginTop: 2, color: '#34C759' }}>On route</div>
          <div style={{ fontSize: 12, color: '#6E6E7A' }}>Walking · 4 km/h</div>
        </div>
      </div>

      <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 8 }}>
        <div style={{
          height: 50, borderRadius: 14, background: '#0A0A0F', color: '#fff',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          fontSize: 15, fontWeight: 600,
        }}><I.Phone size={16}/> Call Anna</div>
        <div style={{
          height: 50, borderRadius: 14, background: 'transparent',
          border: '1.5px solid #FF3B30', color: '#FF3B30',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          fontSize: 15, fontWeight: 600,
        }}><I.AlertTriangle size={16}/> Escalate to SOS</div>
      </div>
    </div>
  </Screen>
);

window.SCheckIn = SCheckIn;
window.SContacts = SContacts;
window.SMap = SMap;
window.SFakeSetup = SFakeSetup;
window.SFakeIncoming = SFakeIncoming;
window.SSettings = SSettings;
window.SCalc = SCalc;
window.SAngelWeb = SAngelWeb;