// Beside — onboarding flow

// ─── O1. Phone OTP ───────────────────────────────────────────
const OPhone = () => (
  <Screen padTop={0}>
    <div style={{
      flex: 1, padding: '70px 24px 36px',
      display: 'flex', flexDirection: 'column',
      background: `radial-gradient(120% 50% at 50% 0%, rgba(123,95,230,0.15) 0%, transparent 60%), ${T.bg}`,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, color: T.text }}>
        <I.ArrowLeft size={22}/>
        <div style={{ flex: 1, height: 4, borderRadius: 2, background: T.bgEl2, overflow: 'hidden' }}>
          <div style={{ width: '20%', height: '100%', background: T.primary, borderRadius: 2 }}/>
        </div>
        <div style={{ fontSize: 12, color: T.text3 }}>1/5</div>
      </div>

      <div style={{ marginTop: 36 }}>
        <div style={{ fontSize: 28, fontWeight: 700, letterSpacing: -0.5, lineHeight: 1.2 }}>
          What's your<br/>number?
        </div>
        <div style={{ color: T.text2, fontSize: 15, marginTop: 10, lineHeight: 1.5 }}>
          We'll send a 6-digit code. No email, no password.
        </div>
      </div>

      <div style={{ marginTop: 30, display: 'flex', gap: 10 }}>
        <div style={{
          width: 84, height: 60, borderRadius: 14, background: T.bgEl,
          border: `1.5px solid ${T.border}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
          fontSize: 17, fontWeight: 500,
        }}>🇹🇭 +66 <I.ChevronDown size={14}/></div>
        <div style={{
          flex: 1, height: 60, borderRadius: 14, background: T.bgEl,
          border: `2px solid ${T.primary}`,
          display: 'flex', alignItems: 'center', padding: '0 18px',
          fontSize: 20, fontWeight: 500, fontVariantNumeric: 'tabular-nums',
          letterSpacing: 1,
        }}>89 248 5621<span style={{
          marginLeft: 2, width: 2, height: 24, background: T.primary,
          animation: 'pulse 1s ease-in-out infinite alternate',
        }}/></div>
      </div>

      <div style={{ flex: 1 }}/>
      <PrimaryButton>Send code</PrimaryButton>
      <div style={{ textAlign: 'center', color: T.text3, fontSize: 12, marginTop: 12, lineHeight: 1.5 }}>
        Standard SMS rates apply. We never share your number.
      </div>
    </div>
  </Screen>
);

// ─── O2. OTP code ────────────────────────────────────────────
const OOtp = () => (
  <Screen padTop={0}>
    <div style={{
      flex: 1, padding: '70px 24px 36px',
      display: 'flex', flexDirection: 'column',
      background: `radial-gradient(120% 50% at 50% 0%, rgba(123,95,230,0.15) 0%, transparent 60%), ${T.bg}`,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, color: T.text }}>
        <I.ArrowLeft size={22}/>
        <div style={{ flex: 1, height: 4, borderRadius: 2, background: T.bgEl2, overflow: 'hidden' }}>
          <div style={{ width: '40%', height: '100%', background: T.primary, borderRadius: 2 }}/>
        </div>
        <div style={{ fontSize: 12, color: T.text3 }}>2/5</div>
      </div>

      <div style={{ marginTop: 36 }}>
        <div style={{ fontSize: 28, fontWeight: 700, letterSpacing: -0.5, lineHeight: 1.2 }}>
          Enter the code
        </div>
        <div style={{ color: T.text2, fontSize: 15, marginTop: 10, lineHeight: 1.5 }}>
          Sent to +66 89 248 5621 ·{' '}
          <span style={{ color: T.primaryLight, fontWeight: 500 }}>edit</span>
        </div>
      </div>

      <div style={{ marginTop: 36, display: 'flex', gap: 10, justifyContent: 'space-between' }}>
        {['4','8','3','9','',''].map((d, i) => (
          <div key={i} style={{
            width: 50, height: 64, borderRadius: 14,
            background: T.bgEl,
            border: `2px solid ${i === 4 ? T.primary : T.border}`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 28, fontWeight: 600,
          }}>{d}</div>
        ))}
      </div>

      <div style={{ display: 'flex', justifyContent: 'center', marginTop: 28, gap: 6 }}>
        <span style={{ color: T.text3, fontSize: 14 }}>Resend in</span>
        <span style={{ color: T.text, fontSize: 14, fontWeight: 600 }}>0:47</span>
      </div>

      <div style={{ flex: 1 }}/>
    </div>
  </Screen>
);

// ─── O3. PIN setup ───────────────────────────────────────────
const OPin = () => (
  <Screen padTop={0}>
    <div style={{
      flex: 1, padding: '70px 24px 36px',
      display: 'flex', flexDirection: 'column',
      background: `radial-gradient(120% 50% at 50% 0%, rgba(123,95,230,0.15) 0%, transparent 60%), ${T.bg}`,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, color: T.text }}>
        <I.ArrowLeft size={22}/>
        <div style={{ flex: 1, height: 4, borderRadius: 2, background: T.bgEl2, overflow: 'hidden' }}>
          <div style={{ width: '60%', height: '100%', background: T.primary, borderRadius: 2 }}/>
        </div>
        <div style={{ fontSize: 12, color: T.text3 }}>3/5</div>
      </div>

      <div style={{ marginTop: 28 }}>
        <div style={{ fontSize: 28, fontWeight: 700, letterSpacing: -0.5, lineHeight: 1.2 }}>
          Pick a PIN
        </div>
        <div style={{ color: T.text2, fontSize: 15, marginTop: 10, lineHeight: 1.5 }}>
          You'll type it to cancel an SOS. Pick something you can dial in 2 seconds, even shaking.
        </div>
      </div>

      <div style={{ marginTop: 28, display: 'flex', justifyContent: 'center', gap: 14 }}>
        {[1,1,1,1].map((_, i) => (
          <div key={i} style={{
            width: 16, height: 16, borderRadius: 8,
            background: i < 4 ? T.primary : 'transparent',
            border: i < 4 ? 'none' : `1.5px solid ${T.border}`,
          }}/>
        ))}
      </div>

      <div style={{
        marginTop: 18, padding: '14px 14px', borderRadius: 14,
        background: 'rgba(255,159,10,0.10)',
        border: '1px solid rgba(255,159,10,0.28)',
        display: 'flex', gap: 10,
      }}>
        <div style={{ color: T.warning, marginTop: 1 }}><I.AlertTriangle size={18}/></div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 13, fontWeight: 600, color: T.text }}>Set a duress PIN next.</div>
          <div style={{ fontSize: 12, color: T.text2, marginTop: 3, lineHeight: 1.5 }}>
            If someone forces you to cancel, type that one. SOS keeps going silently. Different from your real PIN.
          </div>
        </div>
      </div>

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

      <Keypad/>
    </div>
  </Screen>
);

const Keypad = () => {
  const Key = ({ children, sub, action }) => (
    <div style={{
      height: 60, borderRadius: 16, background: action ? 'transparent' : T.bgEl,
      border: action ? 'none' : `1px solid ${T.borderSoft}`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      flexDirection: 'column', color: T.text,
      fontSize: 26, fontWeight: 500,
    }}>{children}{sub && <div style={{ fontSize: 9, marginTop: -2, color: T.text3, letterSpacing: 1 }}>{sub}</div>}</div>
  );
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
      <Key>1</Key><Key sub="ABC">2</Key><Key sub="DEF">3</Key>
      <Key sub="GHI">4</Key><Key sub="JKL">5</Key><Key sub="MNO">6</Key>
      <Key sub="PQRS">7</Key><Key sub="TUV">8</Key><Key sub="WXYZ">9</Key>
      <Key action></Key><Key>0</Key><Key action><I.ArrowLeft size={20}/></Key>
    </div>
  );
};

// ─── O4. Add trusted contact (blocking) ──────────────────────
const OAddContact = () => (
  <Screen padTop={0}>
    <div style={{
      flex: 1, padding: '70px 24px 36px',
      display: 'flex', flexDirection: 'column',
      background: `radial-gradient(120% 50% at 50% 0%, rgba(123,95,230,0.15) 0%, transparent 60%), ${T.bg}`,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, color: T.text }}>
        <I.ArrowLeft size={22} style={{ opacity: 0.3 }}/>
        <div style={{ flex: 1, height: 4, borderRadius: 2, background: T.bgEl2, overflow: 'hidden' }}>
          <div style={{ width: '80%', height: '100%', background: T.primary, borderRadius: 2 }}/>
        </div>
        <div style={{ fontSize: 12, color: T.text3 }}>4/5</div>
      </div>

      <div style={{ marginTop: 28 }}>
        <div style={{ fontSize: 28, fontWeight: 700, letterSpacing: -0.5, lineHeight: 1.2 }}>
          One person.
        </div>
        <div style={{ color: T.text2, fontSize: 15, marginTop: 10, lineHeight: 1.5 }}>
          Beside is useless without someone on the other end. Add one person you trust — they get notified the moment you press SOS.
        </div>
      </div>

      <div style={{ marginTop: 22, display: 'flex', flexDirection: 'column', gap: 12 }}>
        <Field label="Name" value="Maria Karpova"/>
        <Field label="Phone" value="+7 999 124 56 78" icon={<I.Users size={18}/>} iconLabel="From contacts"/>
        <div>
          <div style={{ fontSize: 12, color: T.text3, fontWeight: 600, letterSpacing: 0.5, marginBottom: 8 }}>ROLE</div>
          <div style={{ display: 'flex', gap: 8 }}>
            {[['Primary', true, 'Alerted first'], ['Secondary', false, '60s later'], ['Silent', false, 'No push']].map(([l, on, sub]) => (
              <div key={l} style={{
                flex: 1, padding: '10px 10px', borderRadius: 12,
                background: on ? 'rgba(123,95,230,0.16)' : T.bgEl,
                border: on ? '1px solid rgba(123,95,230,0.4)' : `1px solid ${T.borderSoft}`,
                textAlign: 'center',
              }}>
                <div style={{ fontSize: 13, fontWeight: 600, color: on ? T.primaryLight : T.text }}>{l}</div>
                <div style={{ fontSize: 10, color: T.text3, marginTop: 2 }}>{sub}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div style={{
        marginTop: 16, padding: '12px 14px', borderRadius: 12,
        background: T.bgEl2, color: T.text2, fontSize: 12, lineHeight: 1.5,
        display: 'flex', gap: 10,
      }}>
        <div style={{ color: T.text3, marginTop: 1 }}><I.Sparkle size={14}/></div>
        Maria will get an SMS with a one-tap "I'll be your angel" link. She doesn't need to install anything.
      </div>

      <div style={{ flex: 1 }}/>
      <PrimaryButton>Send invitation</PrimaryButton>
    </div>
  </Screen>
);

const Field = ({ label, value, icon, iconLabel }) => (
  <div>
    <div style={{ fontSize: 12, color: T.text3, fontWeight: 600, letterSpacing: 0.5, marginBottom: 6 }}>{label.toUpperCase()}</div>
    <div style={{
      height: 56, borderRadius: 14, background: T.bgEl,
      border: `1.5px solid ${T.border}`,
      display: 'flex', alignItems: 'center', padding: '0 16px',
      fontSize: 16, color: T.text, fontWeight: 500,
    }}>
      <span style={{ flex: 1 }}>{value}</span>
      {icon && <div style={{
        display: 'flex', alignItems: 'center', gap: 6,
        color: T.primaryLight, fontSize: 12, fontWeight: 600,
      }}>{icon}{iconLabel}</div>}
    </div>
  </div>
);

// ─── O5. Permission — Location ───────────────────────────────
const OPermission = () => (
  <Screen padTop={0}>
    <div style={{
      flex: 1, padding: '70px 28px 36px',
      display: 'flex', flexDirection: 'column',
      background: `radial-gradient(120% 50% at 50% 5%, rgba(123,95,230,0.22) 0%, transparent 60%), ${T.bg}`,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, color: T.text }}>
        <I.ArrowLeft size={22}/>
        <div style={{ flex: 1, height: 4, borderRadius: 2, background: T.bgEl2, overflow: 'hidden' }}>
          <div style={{ width: '100%', height: '100%', background: T.primary, borderRadius: 2 }}/>
        </div>
        <div style={{ fontSize: 12, color: T.text3 }}>5/5</div>
      </div>

      <div style={{
        marginTop: 22, display: 'flex', justifyContent: 'center',
      }}>
        <div style={{
          width: 88, height: 88, borderRadius: 26,
          background: 'rgba(123,95,230,0.18)',
          border: '1px solid rgba(123,95,230,0.3)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: T.primaryLight,
        }}><I.MapPin size={38} stroke={1.4}/></div>
      </div>

      <div style={{ textAlign: 'center', marginTop: 18 }}>
        <div style={{ fontSize: 26, fontWeight: 700, letterSpacing: -0.5 }}>Location · always</div>
        <div style={{ color: T.text2, fontSize: 15, marginTop: 8, lineHeight: 1.5 }}>
          Without it, your angels won't know where to come.
        </div>
      </div>

      <div style={{ marginTop: 22, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {[
          ['Live location during SOS', 'Updated every 5 seconds'],
          ['Safe Walk tracking', 'Angels see your route, not your history'],
          ['Nearest safe spaces', 'Police, hospitals, 24/7 cafés'],
        ].map(([t, s]) => (
          <div key={t} style={{
            display: 'flex', gap: 12, padding: '12px 14px',
            background: T.bgEl, borderRadius: 14, border: `1px solid ${T.borderSoft}`,
          }}>
            <div style={{
              width: 28, height: 28, borderRadius: 14, background: 'rgba(52,199,89,0.18)',
              color: T.success, flexShrink: 0,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}><I.Check size={16} stroke={3}/></div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 600 }}>{t}</div>
              <div style={{ fontSize: 12, color: T.text3, marginTop: 1 }}>{s}</div>
            </div>
          </div>
        ))}
      </div>

      <div style={{
        marginTop: 14, padding: '12px 14px', borderRadius: 12,
        background: 'rgba(255,159,10,0.10)',
        border: '1px solid rgba(255,159,10,0.28)',
        display: 'flex', gap: 10,
      }}>
        <div style={{ color: T.warning, marginTop: 1 }}><I.AlertTriangle size={16}/></div>
        <div style={{ flex: 1, fontSize: 12, color: T.text2, lineHeight: 1.5 }}>
          Choose <b style={{ color: T.text }}>Allow always</b> — "Only while using" means SOS won't work when your screen is off.
        </div>
      </div>

      <div style={{ flex: 1 }}/>
      <PrimaryButton>Allow location</PrimaryButton>
      <div style={{ textAlign: 'center', color: T.text3, fontSize: 12, marginTop: 12 }}>
        Not now — SOS will work only with screen on
      </div>
    </div>
  </Screen>
);

// ─── O6. Test SOS ────────────────────────────────────────────
const OTest = () => (
  <Screen padTop={0}>
    <div style={{
      flex: 1, padding: '70px 24px 36px',
      display: 'flex', flexDirection: 'column',
      background: T.bg,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, color: T.text }}>
        <I.ArrowLeft size={22}/>
        <div style={{ fontSize: 18, fontWeight: 600 }}>Test run</div>
      </div>

      <div style={{ marginTop: 20 }}>
        <div style={{ fontSize: 24, fontWeight: 700, letterSpacing: -0.5, lineHeight: 1.25 }}>
          Let's rehearse,<br/>so it's muscle memory.
        </div>
        <div style={{ color: T.text2, fontSize: 14, marginTop: 10, lineHeight: 1.5 }}>
          Press the SOS button. Nothing is sent — this is just for practice.
        </div>
      </div>

      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <div style={{ position: 'relative', width: 200, height: 200 }}>
          <div style={{
            position: 'absolute', inset: -6, borderRadius: '50%',
            background: 'radial-gradient(circle, rgba(255,59,48,0.3) 0%, transparent 65%)',
            filter: 'blur(6px)',
          }}/>
          <div style={{
            position: 'absolute', inset: -16, borderRadius: '50%',
            border: '1.5px dashed rgba(255,59,48,0.4)',
            animation: 'pulse 2.5s ease-out infinite',
          }}/>
          <div style={{
            position: 'absolute', inset: 0, borderRadius: '50%',
            background: 'radial-gradient(circle at 35% 30%, #FF6B62 0%, #FF3B30 45%, #C92A22 100%)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            flexDirection: 'column', color: '#fff',
            boxShadow: '0 16px 40px rgba(255,59,48,0.3)',
          }}>
            <div style={{ fontSize: 46, fontWeight: 800, letterSpacing: 4 }}>SOS</div>
            <div style={{ fontSize: 10, opacity: 0.9, letterSpacing: 2 }}>PRACTICE</div>
          </div>
        </div>
      </div>

      <Card style={{ background: T.bgEl }}>
        <div style={{ fontSize: 12, fontWeight: 700, color: T.text3, letterSpacing: 1, marginBottom: 10 }}>
          IN A REAL SOS, MARIA WILL GET:
        </div>
        <ChecklistRow icon={<I.MapPin size={14}/>}>Your live location, updated every 5 sec</ChecklistRow>
        <ChecklistRow icon={<I.Mic size={14}/>}>An encrypted audio recording</ChecklistRow>
        <ChecklistRow icon={<I.Send size={14}/>}>A web link to track you in real time</ChecklistRow>
        <ChecklistRow icon={<I.Phone size={14}/>}>An SMS if the push doesn't go through</ChecklistRow>
      </Card>
    </div>
  </Screen>
);

const ChecklistRow = ({ icon, children }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '5px 0', color: T.text2 }}>
    <div style={{ color: T.success }}>{icon}</div>
    <div style={{ fontSize: 13 }}>{children}</div>
  </div>
);

// ─── O7. Vendor battery (Android) ────────────────────────────
const OVendor = () => (
  <Screen padTop={0}>
    <div style={{
      flex: 1, padding: '70px 24px 36px',
      display: 'flex', flexDirection: 'column',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, color: T.text }}>
        <I.ArrowLeft size={22}/>
        <div style={{ fontSize: 18, fontWeight: 600 }}>One more thing</div>
      </div>

      <div style={{
        marginTop: 22, padding: 18, borderRadius: 20,
        background: 'linear-gradient(180deg, rgba(255,159,10,0.14), rgba(255,159,10,0.04))',
        border: '1px solid rgba(255,159,10,0.28)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{
            width: 44, height: 44, borderRadius: 12,
            background: 'rgba(255,159,10,0.2)', color: T.warning,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}><I.Battery size={22}/></div>
          <div>
            <div style={{ fontSize: 11, fontWeight: 700, color: T.warning, letterSpacing: 1 }}>XIAOMI · MIUI</div>
            <div style={{ fontSize: 16, fontWeight: 700, marginTop: 2 }}>Your phone will kill us in the background</div>
          </div>
        </div>
        <div style={{ fontSize: 13, color: T.text2, marginTop: 10, lineHeight: 1.5 }}>
          Without permission, MIUI shuts Beside down after 20 minutes. SOS, Safe Walk, fall detection — all dead. Let's fix it in 3 taps.
        </div>
      </div>

      <div style={{ marginTop: 22, display: 'flex', flexDirection: 'column', gap: 14 }}>
        <Step n="1" title="Open Settings" sub="We can deeplink you straight there."/>
        <Step n="2" title="Find Beside in Battery saver" sub="It's in Apps → Battery."/>
        <Step n="3" title='Pick "No restrictions"' sub="Default is Battery saver — switch to No restrictions."/>
      </div>

      <div style={{ flex: 1 }}/>
      <PrimaryButton icon={<I.Settings size={18}/>}>Open settings</PrimaryButton>
      <div style={{ textAlign: 'center', color: T.text3, fontSize: 12, marginTop: 12 }}>
        I'll do it later
      </div>
    </div>
  </Screen>
);

const Step = ({ n, title, sub }) => (
  <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
    <div style={{
      width: 28, height: 28, borderRadius: 14, background: T.bgEl2,
      border: `1px solid ${T.borderSoft}`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: T.primaryLight, fontSize: 13, fontWeight: 700, flexShrink: 0,
    }}>{n}</div>
    <div style={{ flex: 1 }}>
      <div style={{ fontSize: 15, fontWeight: 600 }}>{title}</div>
      <div style={{ fontSize: 13, color: T.text3, marginTop: 2, lineHeight: 1.5 }}>{sub}</div>
    </div>
  </div>
);

// ─── O8. Share ride / taxi ───────────────────────────────────
const SShareRide = () => (
  <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 }}>Share this ride</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: 10 }}>
          THE CAR
        </div>
        <div style={{
          height: 70, borderRadius: 14, background: T.bgEl2,
          display: 'flex', alignItems: 'center', padding: '0 18px', gap: 14,
          border: `1.5px solid ${T.primary}`,
        }}>
          <div style={{
            fontSize: 26, fontWeight: 700, fontFamily: 'monospace', letterSpacing: 1.5,
            color: '#FFD60A',
          }}>A 123 БВ 77</div>
        </div>
        <div style={{ display: 'flex', gap: 8, marginTop: 10 }}>
          <div style={{
            flex: 1, padding: '10px 12px', borderRadius: 12, background: T.bgEl2,
            border: `1px solid ${T.borderSoft}`,
          }}>
            <div style={{ fontSize: 11, color: T.text3, fontWeight: 600 }}>MAKE / COLOR</div>
            <div style={{ fontSize: 14, marginTop: 2 }}>Toyota Camry · white</div>
          </div>
          <div style={{
            flex: 1, padding: '10px 12px', borderRadius: 12, background: T.bgEl2,
            border: `1px solid ${T.borderSoft}`,
          }}>
            <div style={{ fontSize: 11, color: T.text3, fontWeight: 600 }}>DRIVER</div>
            <div style={{ fontSize: 14, marginTop: 2 }}>Виктор М.</div>
          </div>
        </div>
        <div style={{
          marginTop: 10, height: 56, borderRadius: 12,
          border: `1.5px dashed ${T.border}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: T.text3, fontSize: 13, gap: 8,
        }}>
          <I.Plus size={16}/> Photo of plate (optional · encrypted)
        </div>
      </Card>

      <Card>
        <div style={{ fontSize: 12, fontWeight: 600, color: T.text3, letterSpacing: 1, marginBottom: 10 }}>
          GOING TO
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ color: T.primaryLight }}><I.MapPin size={20}/></div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 15, fontWeight: 600 }}>Home</div>
            <div style={{ fontSize: 12, color: T.text3 }}>Sukhumvit 31 · ETA 22:40</div>
          </div>
        </div>
      </Card>

      <Card padding={4}>
        <div style={{ padding: '12px 14px 6px', fontSize: 12, fontWeight: 600, color: T.text3, letterSpacing: 1 }}>
          SHARE WITH
        </div>
        <div style={{ padding: '0 4px 4px' }}>
          <AngelRow name="Maria K." sub="Mom · primary" selected/>
          <Divider/>
          <AngelRow name="Alex S." sub="Boyfriend · primary" selected/>
        </div>
      </Card>

      <PrimaryButton icon={<I.Car size={20}/>}>Start ride · 22 min</PrimaryButton>
      <div style={{ textAlign: 'center', color: T.text3, fontSize: 12, marginTop: 4, lineHeight: 1.5 }}>
        If you don't tap "I'm home" within 5 min after ETA — SOS fires automatically.
      </div>
    </div>
  </Screen>
);

// ─── O9. Silent recording library ────────────────────────────
const SRecordings = () => (
  <Screen>
    <div style={{ padding: '6px 22px 14px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
      <div>
        <div style={{ fontSize: 26, fontWeight: 700, letterSpacing: -0.5 }}>Recordings</div>
        <div style={{ fontSize: 13, color: T.text3, marginTop: 2 }}>12 files · 84 MB · all encrypted</div>
      </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.MoreHorizontal size={18}/></div>
    </div>

    <div style={{ padding: '0 22px 14px', display: 'flex', gap: 6 }}>
      {[['All', true], ['SOS', false], ['Silent', false], ['Walks', false]].map(([l, on]) => (
        <div key={l} style={{
          padding: '7px 13px', borderRadius: 999,
          background: on ? T.text : T.bgEl,
          color: on ? '#0A0A0F' : T.text2,
          fontSize: 13, fontWeight: 600,
          border: on ? 'none' : `1px solid ${T.borderSoft}`,
        }}>{l}</div>
      ))}
    </div>

    <div style={{ padding: '0 18px', display: 'flex', flexDirection: 'column', gap: 10 }}>
      <RecRow title="SOS · Sukhumvit Soi 11" date="Today · 02:14" dur="4:32" type="sos" hash="a1f9…2c"/>
      <RecRow title="Safe Walk to Home" date="Today · 22:30" dur="18:04" type="walk"/>
      <RecRow title="Silent recording" date="Mar 14 · 23:48" dur="2:08" type="silent" hash="9b21…ef"/>
      <RecRow title="Silent recording" date="Mar 10 · 01:22" dur="0:42" type="silent" hash="14ac…05"/>
      <RecRow title="Safe Walk to Mom's" date="Mar 8 · 19:15" dur="12:30" type="walk"/>
    </div>

    <div style={{ height: 100 }}/>
    <TabBar active="settings"/>
  </Screen>
);

const RecRow = ({ title, date, dur, type, hash }) => {
  const tones = {
    sos:    { bg: 'rgba(255,59,48,0.14)',  fg: '#FF6B62', label: 'SOS' },
    walk:   { bg: 'rgba(123,95,230,0.14)', fg: '#9D85F2', label: 'WALK' },
    silent: { bg: 'rgba(168,168,181,0.14)', fg: T.text2, label: 'SILENT' },
  };
  const c = tones[type];
  return (
    <div style={{
      background: T.bgEl, borderRadius: 16, padding: '14px',
      border: `1px solid ${T.borderSoft}`,
      display: 'flex', alignItems: 'center', gap: 12,
    }}>
      <div style={{
        width: 44, height: 44, borderRadius: 12, background: c.bg, color: c.fg,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}><I.Mic size={20}/></div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{ fontSize: 14, fontWeight: 600, color: T.text, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{title}</div>
          <div style={{
            padding: '1px 6px', borderRadius: 5, background: c.bg, color: c.fg,
            fontSize: 9, fontWeight: 700, letterSpacing: 0.6,
          }}>{c.label}</div>
        </div>
        <div style={{ fontSize: 12, color: T.text3, marginTop: 2 }}>{date} · {dur}</div>
        {hash && <div style={{ fontSize: 10, color: T.text4, marginTop: 2, fontFamily: 'monospace' }}>SHA · {hash}</div>}
      </div>
      <div style={{
        width: 36, height: 36, borderRadius: 18, background: T.bgEl2,
        display: 'flex', alignItems: 'center', justifyContent: 'center', color: T.text,
      }}>
        <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
          <path d="M3 2l10 5-10 5z"/>
        </svg>
      </div>
    </div>
  );
};

// ─── O10. Edge — battery critical ────────────────────────────
const SEdgeBattery = () => (
  <Screen>
    <div style={{ padding: '4px 22px 0' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <div style={{ color: T.text3, fontSize: 14, fontWeight: 500 }}>Tuesday, 23:48</div>
          <div style={{ fontSize: 26, fontWeight: 700, marginTop: 2, letterSpacing: -0.5 }}>Hi, Anna</div>
        </div>
        <div style={{
          width: 40, height: 40, borderRadius: 20, background: T.bgEl,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          border: `1px solid ${T.borderSoft}`, color: T.warning,
          position: 'relative',
        }}>
          <I.Bell size={18}/>
          <div style={{
            position: 'absolute', top: 6, right: 6, width: 8, height: 8,
            borderRadius: 4, background: T.warning, border: '2px solid #16161D',
          }}/>
        </div>
      </div>

      {/* battery alert banner */}
      <div style={{
        marginTop: 14, padding: 14, borderRadius: 16,
        background: 'linear-gradient(180deg, rgba(255,159,10,0.16), rgba(255,159,10,0.04))',
        border: '1px solid rgba(255,159,10,0.4)',
        display: 'flex', gap: 12,
      }}>
        <div style={{
          width: 36, height: 36, borderRadius: 10,
          background: 'rgba(255,159,10,0.2)', color: T.warning,
          display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
        }}><I.Battery size={20}/></div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 14, fontWeight: 700 }}>Battery at 8%</div>
          <div style={{ fontSize: 13, color: T.text2, marginTop: 3, lineHeight: 1.5 }}>
            Switched to power saver. GPS pings every 30s, audio-only recording, fall detection off.
          </div>
          <div style={{ marginTop: 10, display: 'flex', gap: 8 }}>
            <div style={{
              padding: '6px 12px', borderRadius: 8, background: T.warning, color: '#1a1000',
              fontSize: 12, fontWeight: 600,
            }}>Keep saver on</div>
            <div style={{
              padding: '6px 12px', borderRadius: 8, background: 'transparent',
              border: `1px solid ${T.border}`, color: T.text2,
              fontSize: 12, fontWeight: 600,
            }}>Full power</div>
          </div>
        </div>
      </div>
    </div>

    {/* dimmed SOS button */}
    <div style={{
      marginTop: 22, display: 'flex', justifyContent: 'center', alignItems: 'center',
      flexDirection: 'column', gap: 8,
    }}>
      <div style={{ position: 'relative', width: 220, height: 220, opacity: 0.92 }}>
        <div style={{
          position: 'absolute', inset: 0, borderRadius: '50%',
          background: 'radial-gradient(circle at 35% 30%, #FF6B62 0%, #FF3B30 45%, #C92A22 100%)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          flexDirection: 'column', color: '#fff',
          boxShadow: '0 16px 40px rgba(255,59,48,0.3)',
        }}>
          <div style={{ fontSize: 52, fontWeight: 800, letterSpacing: 6 }}>SOS</div>
          <div style={{ fontSize: 10, opacity: 0.9, letterSpacing: 2, marginTop: -2 }}>WORKS · LOWER ACCURACY</div>
        </div>
      </div>
    </div>

    <div style={{ padding: '20px 18px 0' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        <QuickAction icon={<I.Footprint size={22}/>} title="Safe Walk" sub="Low-power mode"/>
        <QuickAction icon={<I.Clock size={22}/>} title="Check-in" sub="Timer alarm"/>
      </div>
    </div>

    <TabBar active="home"/>
  </Screen>
);

window.OPhone = OPhone;
window.OOtp = OOtp;
window.OPin = OPin;
window.OAddContact = OAddContact;
window.OPermission = OPermission;
window.OTest = OTest;
window.OVendor = OVendor;
window.SShareRide = SShareRide;
window.SRecordings = SRecordings;
window.SEdgeBattery = SEdgeBattery;