// Beside — additional screens

// ─── X1. Home — Light theme variant ──────────────────────────
const SHomeLight = () => {
  const L = {
    bg: '#FAFAFA',
    bgEl: '#FFFFFF',
    bgEl2: '#F5F5F7',
    border: 'rgba(0,0,0,0.08)',
    text: '#0A0A0F',
    text2: '#6E6E7A',
    text3: '#A8A8B5',
  };
  return (
    <div style={{
      width: '100%', height: '100%', background: L.bg, color: L.text,
      fontFamily: T.font, display: 'flex', flexDirection: 'column',
      paddingTop: 60, position: 'relative', overflow: 'hidden',
    }}>
      <div style={{ padding: '4px 22px 0' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <div style={{ color: L.text2, fontSize: 14, fontWeight: 500 }}>Wednesday, 09:14</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: L.bgEl,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            border: `1px solid ${L.border}`, color: L.text2,
          }}><I.Bell size={18}/></div>
        </div>
        <div style={{ marginTop: 14, display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '6px 12px 6px 10px', borderRadius: 999,
          background: 'rgba(52,199,89,0.14)', color: '#1F7D3E', fontSize: 13, fontWeight: 500 }}>
          <span style={{ width: 6, height: 6, borderRadius: 3, background: '#34C759',
            boxShadow: '0 0 0 4px rgba(52,199,89,0.14)' }}/>
          You're safe · 3 angels online
        </div>
      </div>

      <div style={{ marginTop: 26, display: 'flex', justifyContent: 'center', alignItems: 'center',
        flexDirection: 'column', gap: 8 }}>
        <div style={{ position: 'relative', width: 240, height: 240 }}>
          <div style={{
            position: 'absolute', inset: -8, borderRadius: '50%',
            background: 'radial-gradient(circle, rgba(255,59,48,0.25) 0%, transparent 65%)',
            filter: 'blur(8px)',
          }}/>
          <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 24px 60px rgba(255,59,48,0.4), inset 0 -10px 30px rgba(0,0,0,0.2), inset 0 4px 16px rgba(255,255,255,0.2)',
          }}>
            <div style={{ fontSize: 56, fontWeight: 800, letterSpacing: 6 }}>SOS</div>
            <div style={{ fontSize: 12, opacity: 0.9, letterSpacing: 2.5, marginTop: -4 }}>HOLD OR TAP</div>
          </div>
        </div>
        <div style={{ color: L.text2, fontSize: 13, marginTop: 4 }}>
          5-second countdown · cancel with PIN
        </div>
      </div>

      <div style={{ padding: '24px 18px 0' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          {[
            [<I.Footprint size={22}/>, 'Safe Walk', 'Live tracking', true],
            [<I.Clock size={22}/>, 'Check-in', 'Timer alarm', false],
            [<I.PhoneIncoming size={22}/>, 'Fake call', 'Escape ringing', false],
            [<I.Car size={22}/>, 'Share ride', 'Plate · driver', false],
          ].map(([icon, title, sub, p]) => (
            <div key={title} style={{
              background: p ? 'linear-gradient(180deg, rgba(123,95,230,0.10), rgba(123,95,230,0.02))' : L.bgEl,
              border: p ? '1px solid rgba(123,95,230,0.3)' : `1px solid ${L.border}`,
              borderRadius: 18, padding: '14px 14px 13px', height: 90,
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            }}>
              <div style={{ color: p ? T.primary : L.text2 }}>{icon}</div>
              <div>
                <div style={{ fontSize: 15, fontWeight: 600, color: L.text }}>{title}</div>
                <div style={{ fontSize: 12, color: L.text2, marginTop: 1 }}>{sub}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* light tab bar */}
      <div style={{
        position: 'absolute', left: 12, right: 12, bottom: 28, height: 64,
        background: 'rgba(255,255,255,0.9)', backdropFilter: 'blur(20px)',
        WebkitBackdropFilter: 'blur(20px)',
        border: `1px solid ${L.border}`, borderRadius: 26,
        display: 'flex', alignItems: 'center', justifyContent: 'space-around',
        padding: '0 12px', zIndex: 5,
        boxShadow: '0 8px 28px rgba(0,0,0,0.06)',
      }}>
        {[
          ['Home', <I.Home size={22}/>, true],
          ['Map', <I.Map size={22}/>, false],
          ['People', <I.Users size={22}/>, false],
          ['Settings', <I.Settings size={22}/>, false],
        ].map(([l, ic, on]) => (
          <div key={l} style={{
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
            color: on ? T.primary : L.text3,
          }}>{ic}<div style={{ fontSize: 10, fontWeight: 500 }}>{l}</div></div>
        ))}
      </div>
    </div>
  );
};

// ─── X2. Fall detected — confirmation prompt ─────────────────
const SFallDetected = () => (
  <Screen padTop={0} bg={T.dangerDeep}>
    <div style={{
      flex: 1,
      background: `radial-gradient(80% 60% at 50% 30%, rgba(255,159,10,0.25) 0%, ${T.dangerDeep} 70%)`,
      padding: '90px 24px 36px',
      display: 'flex', flexDirection: 'column',
    }}>
      <div style={{ textAlign: 'center', color: '#fff' }}>
        <div style={{ fontSize: 13, fontWeight: 600, letterSpacing: 3, opacity: 0.85, color: T.warning }}>
          POSSIBLE FALL DETECTED
        </div>
      </div>

      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column' }}>
        <div style={{
          width: 140, height: 140, borderRadius: 70,
          background: 'rgba(255,159,10,0.15)', border: '2px solid rgba(255,159,10,0.4)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: T.warning,
          animation: 'pulse 2s ease-out infinite',
        }}>
          <I.AlertTriangle size={64} stroke={1.4}/>
        </div>
        <div style={{ color: '#fff', fontSize: 28, fontWeight: 700, marginTop: 28, textAlign: 'center', letterSpacing: -0.4 }}>
          Are you okay?
        </div>
        <div style={{ color: 'rgba(255,255,255,0.7)', fontSize: 15, marginTop: 8, textAlign: 'center', lineHeight: 1.5, maxWidth: 280 }}>
          We'll fire SOS automatically in 28 seconds unless you tell us you're fine.
        </div>

        {/* countdown ring */}
        <div style={{ marginTop: 22, position: 'relative', width: 80, height: 80 }}>
          <svg width="80" height="80" viewBox="0 0 80 80" style={{ transform: 'rotate(-90deg)' }}>
            <circle cx="40" cy="40" r="36" stroke="rgba(255,255,255,0.1)" strokeWidth="3" fill="none"/>
            <circle cx="40" cy="40" r="36" stroke={T.warning} strokeWidth="3" fill="none"
              strokeLinecap="round" strokeDasharray="226" strokeDashoffset="78"/>
          </svg>
          <div style={{
            position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: '#fff', fontSize: 28, fontWeight: 700, fontVariantNumeric: 'tabular-nums',
          }}>28</div>
        </div>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        <div style={{
          background: '#fff', color: '#0A0A0F', borderRadius: 18, height: 60,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 17, fontWeight: 700,
        }}>I'm fine · cancel</div>
        <div style={{
          background: 'transparent', color: '#fff', borderRadius: 18, height: 56,
          border: '1.5px solid rgba(255,255,255,0.3)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 16, fontWeight: 600,
        }}>Call for help now</div>
      </div>
    </div>
  </Screen>
);

// ─── X3. Silent recording — active overlay ───────────────────
const SSilentActive = () => (
  <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 }}>Wednesday, 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.text2 }}><I.Bell size={18}/></div>
      </div>

      {/* silent recording status */}
      <div style={{
        marginTop: 14, padding: '12px 14px', borderRadius: 16,
        background: 'rgba(255,59,48,0.10)', border: '1px solid rgba(255,59,48,0.3)',
        display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <div style={{ position: 'relative', width: 12, height: 12, flexShrink: 0 }}>
          <div style={{ position: 'absolute', inset: 0, borderRadius: 6, background: T.danger }}/>
          <div style={{ position: 'absolute', inset: -4, borderRadius: 10,
            background: 'rgba(255,59,48,0.35)', animation: 'pulse 1s ease-out infinite' }}/>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 14, fontWeight: 600 }}>Recording · 1:42</div>
          <div style={{ fontSize: 12, color: T.text3 }}>AES-256, never uploaded raw</div>
        </div>
        <div style={{ fontVariantNumeric: 'tabular-nums', fontSize: 13, color: T.text2 }}>
          84 MB free
        </div>
      </div>
    </div>

    {/* dim SOS */}
    <div style={{ marginTop: 22, display: 'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
      <div style={{ position: 'relative', width: 220, height: 220 }}>
        <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>
      </div>
    </div>

    {/* waveform */}
    <div style={{ padding: '24px 18px 0' }}>
      <Card>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
          <div>
            <div style={{ fontSize: 14, fontWeight: 600 }}>Silent recording</div>
            <div style={{ fontSize: 12, color: T.text3 }}>Triggered by shake · ends after 5 min of silence</div>
          </div>
          <div style={{ padding: '5px 10px', borderRadius: 999,
            background: 'rgba(255,59,48,0.14)', color: '#FF6B62', fontSize: 11, fontWeight: 700, letterSpacing: 0.5 }}>
            REC
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 2, height: 44 }}>
          {Array.from({ length: 56 }).map((_, i) => {
            const t = (Math.sin(i * 0.6) + Math.sin(i * 0.27) * 0.7 + 1.5) / 3;
            const h = 6 + t * 32;
            const past = i < 38;
            return <div key={i} style={{
              flex: 1, height: h, borderRadius: 2,
              background: past ? T.danger : T.text4,
            }}/>;
          })}
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6, fontSize: 11, color: T.text3, fontVariantNumeric: 'tabular-nums' }}>
          <span>0:00</span><span>1:42</span><span>5:00</span>
        </div>
        <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
          <div style={{
            flex: 1, height: 44, borderRadius: 12, background: T.bgEl2,
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            fontSize: 14, fontWeight: 600, color: T.text2,
          }}>Stop & save</div>
          <div style={{
            flex: 1, height: 44, borderRadius: 12,
            background: T.danger, color: '#fff',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            fontSize: 14, fontWeight: 600,
          }}>Stop & SOS</div>
        </div>
      </Card>
    </div>

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

// ─── X4. Angel — confirm escalation (web view) ───────────────
const SAngelEscalate = () => (
  <Screen padTop={0} bg="#F5F5F7">
    <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={36}/>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 14, fontWeight: 600 }}>Anna is on her way home</div>
          <div style={{ fontSize: 12, color: '#6E6E7A' }}>Updated just now · battery 92%</div>
        </div>
      </div>
    </div>

    {/* Dimmed map preview */}
    <div style={{ padding: '12px 18px 0', position: 'relative' }}>
      <div style={{
        height: 140, borderRadius: 14, overflow: 'hidden', background: '#E8ECF3',
        opacity: 0.5,
      }}>
        <svg width="100%" height="100%" viewBox="0 0 400 140" preserveAspectRatio="xMidYMid slice">
          <rect width="400" height="140" fill="#E8ECF3"/>
          <path d="M 0 70 L 400 70" stroke="#fff" strokeWidth="6"/>
          <path d="M 200 0 L 200 140" stroke="#fff" strokeWidth="6"/>
          <path d="M 60 100 L 60 70 L 200 70 L 200 30 L 360 30" stroke="#9D85F2" strokeWidth="4"
            fill="none" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="4 6"/>
        </svg>
      </div>
    </div>

    {/* modal */}
    <div style={{
      position: 'absolute', left: 0, right: 0, bottom: 0, top: 0,
      background: 'rgba(0,0,0,0.45)',
      display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
    }}>
      <div style={{
        background: '#fff', borderRadius: '22px 22px 0 0', width: '100%',
        padding: '20px 22px 36px', color: '#0A0A0F',
        boxShadow: '0 -20px 60px rgba(0,0,0,0.2)',
      }}>
        <div style={{ width: 40, height: 4, borderRadius: 2, background: 'rgba(0,0,0,0.15)', margin: '0 auto 14px' }}/>
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 4 }}>
          <div style={{
            width: 56, height: 56, borderRadius: 16,
            background: 'rgba(255,59,48,0.12)', color: '#FF3B30',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}><I.AlertTriangle size={28}/></div>
        </div>
        <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: -0.4, textAlign: 'center', marginTop: 16 }}>
          Escalate to full SOS?
        </div>
        <div style={{ color: '#6E6E7A', fontSize: 15, lineHeight: 1.5, marginTop: 10, textAlign: 'center' }}>
          Anna's other angels will be alerted, recording will start on her phone, and emergency services will be one tap away.
        </div>

        <div style={{
          marginTop: 16, padding: '12px 14px', borderRadius: 12, background: '#FFF6E6',
          border: '1px solid rgba(255,159,10,0.4)',
          display: 'flex', gap: 10, alignItems: 'flex-start',
        }}>
          <div style={{ color: '#B7740A', marginTop: 1 }}><I.AlertTriangle size={16}/></div>
          <div style={{ fontSize: 13, color: '#5A4416', lineHeight: 1.5 }}>
            Only do this if you genuinely can't reach her or you have reason to worry.
          </div>
        </div>

        <div style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 10 }}>
          <div style={{
            height: 54, borderRadius: 14, background: '#FF3B30', color: '#fff',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 16, fontWeight: 700, gap: 8,
            boxShadow: '0 8px 24px rgba(255,59,48,0.3)',
          }}><I.AlertTriangle size={18}/> Yes, escalate</div>
          <div style={{
            height: 54, borderRadius: 14, background: '#0A0A0F', color: '#fff',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 16, fontWeight: 600, gap: 8,
          }}><I.Phone size={16}/> Try calling Anna first</div>
          <div style={{
            height: 44, color: '#6E6E7A', fontSize: 14, fontWeight: 500,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>Cancel</div>
        </div>
      </div>
    </div>
  </Screen>
);

// ─── X5. No-network banner / SMS fallback ────────────────────
const SNoNetwork = () => (
  <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 }}>Safe Walk</div>
      </div>
    </div>

    <div style={{ padding: '0 18px', display: 'flex', flexDirection: 'column', gap: 12 }}>
      <div style={{
        padding: '14px 16px', 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: 38, height: 38, borderRadius: 12,
          background: 'rgba(255,159,10,0.2)', color: T.warning,
          display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
        }}>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
            strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
            <path d="M5 12.5a10 10 0 0114 0"/><path d="M2 2l20 20"/>
            <path d="M8 16a6 6 0 018 0"/><circle cx="12" cy="20" r="0.5" fill="currentColor"/>
          </svg>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 14, fontWeight: 700 }}>No internet</div>
          <div style={{ fontSize: 13, color: T.text2, marginTop: 3, lineHeight: 1.5 }}>
            SOS still works — we'll send your location to Maria & Alex via SMS. Live tracking pauses until you're back online.
          </div>
        </div>
      </div>

      <Card>
        <div style={{ fontSize: 12, fontWeight: 600, color: T.text3, letterSpacing: 1, marginBottom: 10 }}>WHAT WILL WORK</div>
        <ChecklistRow icon={<I.Check size={14}/>}>SOS via SMS (each angel gets one)</ChecklistRow>
        <ChecklistRow icon={<I.Check size={14}/>}>Local audio recording (encrypted)</ChecklistRow>
        <ChecklistRow icon={<I.Check size={14}/>}>Direct emergency call (191 / 112)</ChecklistRow>
        <div style={{ height: 8 }}/>
        <div style={{ fontSize: 12, fontWeight: 600, color: T.text3, letterSpacing: 1, marginTop: 6, marginBottom: 6 }}>WHAT WON'T</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '5px 0', color: T.text3 }}>
          <I.X size={14}/><span style={{ fontSize: 13 }}>Live map for angels (queued)</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '5px 0', color: T.text3 }}>
          <I.X size={14}/><span style={{ fontSize: 13 }}>Cloud backup of recording</span>
        </div>
      </Card>

      <div style={{ marginTop: 4 }}>
        <PrimaryButton icon={<I.Footprint size={20}/>}>Start anyway — SMS mode</PrimaryButton>
        <div style={{ marginTop: 10 }}><SecondaryButton>Wait for network</SecondaryButton></div>
      </div>
    </div>
  </Screen>
);

// ─── X6. Recording detail — export evidence ──────────────────
const SRecordingDetail = () => (
  <Screen>
    <div style={{ padding: '6px 22px 18px' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, color: T.text }}>
        <I.ArrowLeft size={22}/>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 11, color: T.text3, letterSpacing: 1, fontWeight: 600 }}>SOS · MAR 14</div>
          <div style={{ fontSize: 17, fontWeight: 600 }}>Sukhumvit Soi 11</div>
        </div>
        <div style={{ color: T.text2 }}><I.MoreHorizontal size={20}/></div>
      </div>
    </div>

    <div style={{ padding: '0 18px', display: 'flex', flexDirection: 'column', gap: 12 }}>
      {/* player */}
      <Card>
        <div style={{ display: 'flex', alignItems: 'center', gap: 2, height: 76, padding: '0 4px' }}>
          {Array.from({ length: 72 }).map((_, i) => {
            const t = (Math.sin(i * 0.7) + Math.sin(i * 0.31) * 0.65 + Math.sin(i * 0.15) * 0.4 + 1.5) / 3;
            const h = 6 + t * 64;
            const past = i < 28;
            return <div key={i} style={{
              flex: 1, height: h, borderRadius: 2,
              background: past ? T.primaryLight : T.bgEl3,
            }}/>;
          })}
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6, fontSize: 12, color: T.text3, fontVariantNumeric: 'tabular-nums', padding: '0 4px' }}>
          <span style={{ color: T.text }}>1:46</span><span>4:32</span>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 24, marginTop: 14, alignItems: 'center' }}>
          <div style={{ color: T.text2 }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M19 20L9 12l10-8zM7 4v16"/></svg>
          </div>
          <div style={{
            width: 56, height: 56, borderRadius: 28, background: T.primary, color: '#fff',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: `0 8px 24px ${T.primaryGlow}`,
          }}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M6 4h4v16H6zM14 4h4v16h-4z"/></svg>
          </div>
          <div style={{ color: T.text2 }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M5 4l10 8-10 8zM17 4v16"/></svg>
          </div>
        </div>
      </Card>

      <Card>
        <div style={{ fontSize: 12, fontWeight: 600, color: T.text3, letterSpacing: 1, marginBottom: 12 }}>METADATA</div>
        <Meta label="Started" value="14 Mar 2026 · 02:14:08 +07"/>
        <Divider/>
        <Meta label="Ended" value="14 Mar 2026 · 02:18:40 +07"/>
        <Divider/>
        <Meta label="Duration" value="4:32"/>
        <Divider/>
        <Meta label="Size" value="3.8 MB · AES-256-GCM"/>
        <Divider/>
        <Meta label="SHA-256" value="a1f9 2c4e 8b73 …" mono/>
      </Card>

      <Card padding={4}>
        <div style={{ padding: '12px 14px 4px' }}>
          <div style={{ fontSize: 12, fontWeight: 600, color: T.text3, letterSpacing: 1 }}>GPS TRACK</div>
        </div>
        <div style={{ padding: '4px 8px 10px' }}>
          <MiniMap height={120} withRoute={false} withPin/>
        </div>
      </Card>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 4 }}>
        <PrimaryButton icon={<I.Send size={18}/>}>Export as legal PDF</PrimaryButton>
        <SecondaryButton icon={<I.Lock size={16}/>}>Share encrypted file</SecondaryButton>
      </div>
      <div style={{ textAlign: 'center', color: T.text3, fontSize: 12, marginTop: 4, lineHeight: 1.5 }}>
        PDF includes waveform, GPS, timestamps and the SHA-256 hash — admissible as evidence in most jurisdictions.
      </div>
    </div>
  </Screen>
);

const Meta = ({ label, value, mono }) => (
  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '10px 0' }}>
    <div style={{ fontSize: 13, color: T.text3 }}>{label}</div>
    <div style={{ fontSize: 13, color: T.text, fontWeight: 500, fontFamily: mono ? 'monospace' : undefined }}>{value}</div>
  </div>
);

window.SHomeLight = SHomeLight;
window.SFallDetected = SFallDetected;
window.SSilentActive = SSilentActive;
window.SAngelEscalate = SAngelEscalate;
window.SNoNetwork = SNoNetwork;
window.SRecordingDetail = SRecordingDetail;