// Beside — primary screens (part 1)
// Onboarding, Home, SOS Countdown, SOS Active, Safe Walk Setup, Safe Walk Active

// ─── S1. Welcome / Onboarding ────────────────────────────────
const SWelcome = () => (
  <Screen padTop={0}>
    <div style={{
      flex: 1, display: 'flex', flexDirection: 'column',
      padding: '110px 28px 44px',
      background: `radial-gradient(120% 60% at 50% 10%, rgba(123,95,230,0.22) 0%, transparent 60%), ${T.bg}`,
    }}>
      {/* Hero glyph */}
      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <div style={{
          width: 168, height: 168, borderRadius: '50%',
          background: 'radial-gradient(circle at 30% 30%, rgba(157,133,242,0.45), rgba(90,63,208,0.15) 60%, transparent 80%)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          position: 'relative',
        }}>
          <div style={{
            position: 'absolute', inset: 26, borderRadius: '50%',
            border: `1px solid rgba(157,133,242,0.4)`,
          }}/>
          <div style={{
            position: 'absolute', inset: 48, borderRadius: '50%',
            border: `1px solid rgba(157,133,242,0.6)`,
          }}/>
          <div style={{ color: T.primaryLight }}>
            <I.ShieldCheck size={56} stroke={1.4}/>
          </div>
        </div>
      </div>
      <BesideMark size={26} />
      <div style={{
        fontSize: 36, fontWeight: 700, lineHeight: 1.1, letterSpacing: -0.8,
        marginTop: 16,
      }}>Someone is<br/>beside you.</div>
      <div style={{ color: T.text2, fontSize: 16, lineHeight: 1.5, marginTop: 14, maxWidth: 320 }}>
        Late walks, blind dates, taxis at 2am.
        Tap once and your people see where you are.
      </div>
      <div style={{ marginTop: 28 }}>
        <PrimaryButton>Get started</PrimaryButton>
      </div>
      <div style={{ color: T.text3, fontSize: 12, textAlign: 'center', marginTop: 14, lineHeight: 1.5 }}>
        By continuing you agree to our Terms · Privacy
      </div>
    </div>
  </Screen>
);

// ─── S2. Home ────────────────────────────────────────────────
const SHome = () => (
  <Screen>
    <div style={{ padding: '4px 22px 0' }}>
      {/* greeting */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <div style={{ color: T.text3, fontSize: 14, fontWeight: 500 }}>Tuesday, 22: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: T.bgEl,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          border: `1px solid ${T.borderSoft}`, color: T.text2,
        }}><I.Bell size={18}/></div>
      </div>
      <div style={{ marginTop: 14 }}><StatusPill tone="safe">You're safe · 3 angels online</StatusPill></div>
    </div>

    {/* SOS button */}
    <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.35) 0%, transparent 65%)',
          filter: 'blur(8px)',
        }}/>
        <div style={{
          position: 'absolute', inset: 16, borderRadius: '50%',
          border: '1px solid rgba(255,59,48,0.18)',
        }}/>
        <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.25), inset 0 4px 16px rgba(255,255,255,0.18)',
        }}>
          <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: T.text3, fontSize: 13, marginTop: 4 }}>
        5-second countdown · cancel with PIN
      </div>
    </div>

    {/* Quick actions */}
    <div style={{ padding: '24px 18px 0' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        <QuickAction icon={<I.Footprint size={22}/>} title="Safe Walk" sub="Live tracking" tone="primary"/>
        <QuickAction icon={<I.Clock size={22}/>} title="Check-in" sub="Timer alarm"/>
        <QuickAction icon={<I.PhoneIncoming size={22}/>} title="Fake call" sub="Escape ringing"/>
        <QuickAction icon={<I.Car size={22}/>} title="Share ride" sub="Plate · driver"/>
      </div>
    </div>
    <TabBar active="home"/>
  </Screen>
);

const QuickAction = ({ icon, title, sub, tone }) => (
  <div style={{
    background: tone === 'primary' ? 'linear-gradient(180deg, rgba(123,95,230,0.18), rgba(123,95,230,0.05))' : T.bgEl,
    border: `1px solid ${tone === 'primary' ? 'rgba(123,95,230,0.35)' : T.borderSoft}`,
    borderRadius: 18, padding: '14px 14px 13px', height: 90,
    display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
  }}>
    <div style={{ color: tone === 'primary' ? T.primaryLight : T.text2 }}>{icon}</div>
    <div>
      <div style={{ fontSize: 15, fontWeight: 600, color: T.text }}>{title}</div>
      <div style={{ fontSize: 12, color: T.text3, marginTop: 1 }}>{sub}</div>
    </div>
  </div>
);

// ─── S3. SOS Countdown ───────────────────────────────────────
const SCountdown = () => (
  <Screen padTop={0} bg={T.dangerDeep}>
    <div style={{
      flex: 1, position: 'relative',
      background: `radial-gradient(80% 60% at 50% 35%, rgba(255,59,48,0.35) 0%, ${T.dangerBg} 50%, ${T.dangerDeep} 100%)`,
      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 }}>SOS ACTIVATING IN</div>
      </div>

      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <div style={{ position: 'relative', width: 260, height: 260 }}>
          <svg width="260" height="260" viewBox="0 0 260 260" style={{ transform: 'rotate(-90deg)' }}>
            <circle cx="130" cy="130" r="120" stroke="rgba(255,255,255,0.1)" strokeWidth="3" fill="none"/>
            <circle cx="130" cy="130" r="120" stroke="#fff" strokeWidth="3" fill="none"
              strokeLinecap="round" strokeDasharray="754" strokeDashoffset="151"/>
          </svg>
          <div style={{
            position: 'absolute', inset: 24, borderRadius: '50%',
            background: 'radial-gradient(circle at 35% 30%, #FF6B62 0%, #FF3B30 45%, #C92A22 100%)',
            display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff',
            boxShadow: '0 0 60px rgba(255,59,48,0.6), inset 0 4px 20px rgba(255,255,255,0.18)',
          }}>
            <div style={{ fontSize: 140, fontWeight: 800, lineHeight: 1, letterSpacing: -4 }}>4</div>
          </div>
        </div>
      </div>

      <div style={{ textAlign: 'center', color: '#fff', marginBottom: 24 }}>
        <div style={{ fontSize: 17, fontWeight: 600 }}>Sending alert to 3 contacts</div>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 8, marginTop: 12 }}>
          {['MK','AS','OL'].map(n => (
            <div key={n} style={{
              width: 32, height: 32, borderRadius: 16, background: 'rgba(255,255,255,0.18)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 11, fontWeight: 600,
            }}>{n}</div>
          ))}
        </div>
      </div>

      <div style={{
        background: '#fff', color: '#0A0A0F', borderRadius: 18, height: 64,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        flexDirection: 'column',
      }}>
        <div style={{ fontSize: 17, fontWeight: 700 }}>Cancel</div>
        <div style={{ fontSize: 11, color: T.text3, fontWeight: 500, marginTop: 1 }}>PIN required</div>
      </div>
    </div>
  </Screen>
);

// ─── S4. SOS Active ──────────────────────────────────────────
const SActive = () => (
  <Screen padTop={0} bg={T.dangerDeep}>
    <div style={{
      flex: 1,
      background: `linear-gradient(180deg, ${T.dangerBg} 0%, ${T.dangerDeep} 80%)`,
      padding: '60px 18px 28px',
      display: 'flex', flexDirection: 'column', gap: 14,
    }}>
      {/* header */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        padding: '6px 6px',
      }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 10, color: '#fff',
        }}>
          <div style={{ position: 'relative', width: 12, height: 12 }}>
            <div style={{
              position: 'absolute', inset: 0, borderRadius: 6, background: '#FF3B30',
            }}/>
            <div style={{
              position: 'absolute', inset: -4, borderRadius: 10, background: 'rgba(255,59,48,0.35)',
              animation: 'pulse 1s ease-out infinite',
            }}/>
          </div>
          <div>
            <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: 2, opacity: 0.8 }}>SOS ACTIVE</div>
            <div style={{ fontSize: 22, fontWeight: 700, color: '#fff' }}>0:23</div>
          </div>
        </div>
        <div style={{ color: 'rgba(255,255,255,0.6)' }}><I.Volume size={20}/></div>
      </div>

      {/* mini map */}
      <Card style={{ padding: 4, background: T.bgEl }}>
        <MiniMap height={150} withPin/>
        <div style={{ padding: '10px 12px 6px', display: 'flex', justifyContent: 'space-between' }}>
          <div style={{ fontSize: 13, color: T.text }}>Sukhumvit Soi 11 · 4m ago</div>
          <div style={{ fontSize: 13, color: T.primaryLight, fontWeight: 600 }}>Open map</div>
        </div>
      </Card>

      {/* Status cards */}
      <Card style={{ background: T.bgEl }}>
        <StatusRow icon={<I.MapPin size={18}/>} ok title="Location streaming"
          sub="Updating every 5 seconds" right="92%"/>
        <Divider/>
        <StatusRow icon={<I.Mic size={18}/>} active title="Recording audio"
          sub="Encrypted · 0:23" right={<div style={{
            width: 8, height: 8, borderRadius: 4, background: T.danger,
            animation: 'pulse 1s ease-out infinite',
          }}/>}/>
        <Divider/>
        <StatusRow icon={<I.Send size={18}/>} ok title="Notified 2 of 3"
          sub="Maria — seen · Alex — sent · Olya — sending" right=""/>
      </Card>

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

      <div style={{
        background: '#fff', color: '#0A0A0F', borderRadius: 18, height: 64,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        flexDirection: 'column',
      }}>
        <div style={{ fontSize: 17, fontWeight: 700 }}>I'm safe</div>
        <div style={{ fontSize: 11, color: T.text3, fontWeight: 500, marginTop: 1 }}>PIN required</div>
      </div>
      <div style={{
        textAlign: 'center', color: 'rgba(255,255,255,0.6)', fontSize: 13,
        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
      }}>
        <I.Phone size={14}/> Call emergency · 191
      </div>
    </div>
  </Screen>
);

const StatusRow = ({ icon, title, sub, ok, active, right }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 4px' }}>
    <div style={{
      width: 32, height: 32, borderRadius: 10,
      background: ok ? 'rgba(52,199,89,0.14)' : active ? 'rgba(255,59,48,0.14)' : T.bgEl2,
      color: ok ? T.success : active ? T.danger : T.text2,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>{icon}</div>
    <div style={{ flex: 1, minWidth: 0 }}>
      <div style={{ fontSize: 14, fontWeight: 600, color: T.text }}>{title}</div>
      <div style={{ fontSize: 12, color: T.text3, marginTop: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{sub}</div>
    </div>
    <div style={{ fontSize: 13, color: T.text2, fontWeight: 500 }}>{right}</div>
  </div>
);
const Divider = () => <div style={{ height: 1, background: T.borderSoft, margin: '2px 0' }}/>;

// ─── S5. Safe Walk Setup ─────────────────────────────────────
const SSafeWalkSetup = () => (
  <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 }}>
      {/* destination */}
      <Card>
        <div style={{ fontSize: 12, fontWeight: 600, color: T.text3, letterSpacing: 1, marginBottom: 10 }}>
          DESTINATION
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '4px 0' }}>
          <div style={{ color: T.primaryLight }}><I.MapPin size={20}/></div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 16, fontWeight: 600 }}>Home</div>
            <div style={{ fontSize: 13, color: T.text3 }}>Sukhumvit 31, 10110 · 1.4 km</div>
          </div>
          <div style={{ color: T.text3 }}><I.ChevronRight size={18}/></div>
        </div>
        <div style={{ display: 'flex', gap: 8, marginTop: 10, flexWrap: 'wrap' }}>
          <Chip icon={<I.Home size={13}/>}>Home</Chip>
          <Chip>Work</Chip>
          <Chip>Mom's</Chip>
          <Chip icon={<I.Plus size={13}/>}>Pin a place</Chip>
        </div>
      </Card>

      {/* angels */}
      <Card>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
          <div style={{ fontSize: 12, fontWeight: 600, color: T.text3, letterSpacing: 1 }}>ANGELS</div>
          <div style={{ fontSize: 12, color: T.primaryLight, fontWeight: 600 }}>2 selected</div>
        </div>
        <AngelRow name="Maria K." sub="Mom · primary" selected/>
        <Divider/>
        <AngelRow name="Alex S." sub="Boyfriend · primary" selected/>
        <Divider/>
        <AngelRow name="Olya L." sub="Best friend · secondary"/>
      </Card>

      {/* eta */}
      <Card>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{
            width: 40, height: 40, borderRadius: 12, background: T.bgEl2,
            display: 'flex', alignItems: 'center', justifyContent: 'center', color: T.text2,
          }}><I.Clock size={20}/></div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12, color: T.text3 }}>Estimated arrival</div>
            <div style={{ fontSize: 18, fontWeight: 600 }}>22:32 · in 18 min</div>
          </div>
          <div style={{
            padding: '6px 12px', borderRadius: 999, background: T.bgEl2,
            fontSize: 13, color: T.text, fontWeight: 500,
          }}>Walk</div>
        </div>
      </Card>

      <div style={{ marginTop: 10 }}>
        <PrimaryButton icon={<I.Footprint size={20}/>}>Start Safe Walk</PrimaryButton>
        <div style={{ textAlign: 'center', color: T.text3, fontSize: 12, marginTop: 12 }}>
          Auto-finishes when you reach Home
        </div>
      </div>
    </div>
  </Screen>
);

const Chip = ({ icon, children, selected }) => (
  <div style={{
    display: 'inline-flex', alignItems: 'center', gap: 6,
    padding: '7px 12px', borderRadius: 999,
    background: selected ? 'rgba(123,95,230,0.16)' : T.bgEl2,
    color: selected ? T.primaryLight : T.text2,
    fontSize: 13, fontWeight: 500,
    border: selected ? `1px solid rgba(123,95,230,0.4)` : `1px solid transparent`,
  }}>{icon}{children}</div>
);
const AngelRow = ({ name, sub, selected }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 0' }}>
    <Avatar name={name} size={40}/>
    <div style={{ flex: 1 }}>
      <div style={{ fontSize: 15, fontWeight: 600 }}>{name}</div>
      <div style={{ fontSize: 12, color: T.text3 }}>{sub}</div>
    </div>
    <div style={{
      width: 24, height: 24, borderRadius: 7,
      background: selected ? T.primary : 'transparent',
      border: selected ? 'none' : `1.5px solid ${T.border}`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: '#fff',
    }}>{selected && <I.Check size={14} stroke={3}/>}</div>
  </div>
);

// ─── S6. Safe Walk Active ────────────────────────────────────
const SSafeWalkActive = () => (
  <Screen padTop={0}>
    {/* Map background fills screen */}
    <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="dots2" width="30" height="30" 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(#dots2)"/>
        <path d="M 0 600 Q 200 580 400 620" stroke="rgba(80,120,180,0.4)" strokeWidth="20" fill="none"/>
        <path d="M 0 300 L 400 300" stroke="rgba(180,180,200,0.18)" strokeWidth="3"/>
        <path d="M 0 450 L 400 450" stroke="rgba(180,180,200,0.18)" strokeWidth="3"/>
        <path d="M 100 0 L 100 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 60 700 L 60 450 L 280 450 L 280 220 L 340 220" stroke="rgba(123,95,230,0.35)" strokeWidth="5"
          fill="none" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="2 8"/>
        <path d="M 60 700 L 60 540" stroke="#7B5FE6" strokeWidth="5"
          fill="none" strokeLinecap="round" strokeLinejoin="round"/>
        <rect x="180" y="460" width="60" height="40" rx="3" fill="rgba(255,255,255,0.04)"/>
        <rect x="290" y="320" width="40" height="80" rx="3" fill="rgba(255,255,255,0.04)"/>
      </svg>
      <div style={{
        position: 'absolute', left: '15%', top: '67%', transform: 'translate(-50%,-50%)',
      }}>
        <div style={{
          position: 'absolute', inset: -14, borderRadius: '50%',
          background: 'rgba(123,95,230,0.3)', animation: 'pulse 2s ease-out infinite',
        }} />
        <div style={{
          width: 18, height: 18, borderRadius: 9, background: T.primaryLight,
          border: '3px solid #fff',
        }} />
      </div>
      <div style={{
        position: 'absolute', left: '85%', top: '27%', transform: 'translate(-50%,-100%)',
        color: T.primaryLight,
      }}><I.MapPin size={32}/></div>
    </div>

    {/* Top banner */}
    <div style={{
      position: 'absolute', top: 56, left: 16, right: 16,
      background: 'rgba(22,22,29,0.85)', backdropFilter: 'blur(20px)',
      WebkitBackdropFilter: 'blur(20px)',
      border: `1px solid ${T.borderSoft}`, borderRadius: 18, padding: '12px 14px',
      display: 'flex', alignItems: 'center', gap: 12,
    }}>
      <div style={{
        width: 36, height: 36, borderRadius: 12,
        background: 'rgba(123,95,230,0.18)', color: T.primaryLight,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}><I.Footprint size={18}/></div>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 13, color: T.text3 }}>Safe Walk · arriving in</div>
        <div style={{ fontSize: 17, fontWeight: 700 }}>14 min · 1.1 km left</div>
      </div>
      <div style={{ color: T.text2 }}><I.MoreHorizontal size={20}/></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', alignItems: 'center', gap: 12, marginBottom: 16,
      }}>
        <div style={{ display: 'flex' }}>
          <Avatar name="Maria K" size={36}/>
          <div style={{ marginLeft: -10 }}><Avatar name="Alex S" size={36}/></div>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 14, fontWeight: 600 }}>Maria & Alex are watching</div>
          <div style={{ fontSize: 12, color: T.text3 }}>Maria viewing now · Alex notified</div>
        </div>
        <div style={{
          padding: '4px 8px', borderRadius: 8, background: 'rgba(52,199,89,0.16)',
          color: T.success, fontSize: 11, fontWeight: 600,
        }}>LIVE</div>
      </div>
      <div style={{ display: 'flex', gap: 10 }}>
        <div style={{
          flex: 1, height: 52, borderRadius: 14, background: T.bgEl2,
          border: `1px solid ${T.borderSoft}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          gap: 8, fontSize: 15, fontWeight: 600, color: T.text,
        }}><I.Plus size={16}/> Extend 15m</div>
        <div style={{
          flex: 1.4, height: 52, borderRadius: 14, background: T.success,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          gap: 8, fontSize: 15, fontWeight: 600, color: '#08220F',
        }}><I.CheckCircle size={18}/> I'm home</div>
      </div>
    </div>
  </Screen>
);

window.SWelcome = SWelcome;
window.SHome = SHome;
window.SCountdown = SCountdown;
window.SActive = SActive;
window.SSafeWalkSetup = SSafeWalkSetup;
window.SSafeWalkActive = SSafeWalkActive;