// Mobile screens — Home, Teleop, Skills, Automations
// Uses IOSDevice frame (402×874)

const PHONE_W = 402;
const PHONE_H = 874;
// Inner content area = phone height - statusbar (~60) - home indicator (~34)
const INNER_H = 780;

// ─────────────────────────────────────────────────────────────
// 1. HOME — robot picker / overview
// ─────────────────────────────────────────────────────────────
function MobileHome({ accent = '#FF8A2B', dark = true }) {
  const t = useTheme(dark, accent);
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => { const id = setInterval(() => setTick(x => x + 1), 1500); return () => clearInterval(id); }, []);

  const robots = [
    { id: 'ada', name: 'Ada', kind: 'humanoid', model: 'Unitree H1', status: 'active', task: 'tidying kitchen', battery: 78, accent: true },
    { id: 'rex', name: 'Rex', kind: 'quadruped', model: 'Spot', status: 'active', task: 'patrolling', battery: 64 },
    { id: 'arm', name: 'Workbench', kind: 'arm', model: 'UR5e', status: 'idle', task: 'standby', battery: 100 },
    { id: 'sky', name: 'Sky', kind: 'drone', model: 'PX4 Holybro', status: 'charging', task: 'docked', battery: 23 },
  ];

  return (
    <IOSDevice dark={dark} width={PHONE_W} height={PHONE_H}>
      <div style={{ background: t.bg0, minHeight: INNER_H, fontFamily: OR.font.sans, color: t.t0, ['--accent']: accent }}>
        <ORStyles/>

        {/* Header */}
        <div style={{ padding: '8px 20px 16px' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
            <ORWordmark color={t.t0} accent={accent} size={15}/>
            <div style={{ display: 'flex', gap: 8 }}>
              <button style={iconBtn(t)}><Icon d={Icons.bell} size={16}/></button>
              <button style={iconBtn(t)}><Icon d={Icons.add} size={16}/></button>
            </div>
          </div>
          <div style={{ fontSize: 13, color: t.t2, fontFamily: OR.font.mono }}>Sat · 14:22 · home network</div>
          <h1 style={{ fontFamily: OR.font.display, fontSize: 32, fontWeight: 500, letterSpacing: '-0.02em', margin: '4px 0 0', lineHeight: 1.1 }}>
            4 robots,<br/>
            <span style={{ color: t.t2 }}>2 working.</span>
          </h1>
        </div>

        {/* Hero card — primary robot */}
        <div style={{ padding: '0 20px 16px' }}>
          <div style={{
            position: 'relative', borderRadius: 18, overflow: 'hidden',
            background: `linear-gradient(135deg, ${t.bg2}, ${t.bg1})`, border: `1px solid ${t.line}`,
            padding: 18,
          }}>
            <div style={{ position: 'absolute', top: -60, right: -60, width: 200, height: 200, borderRadius: '50%', background: `radial-gradient(circle, ${t.accentGlow}, transparent 70%)` }}/>

            <div style={{ position: 'relative', display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 14 }}>
              <div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
                  <Pip color={t.ok} pulse size={6}/>
                  <span style={{ fontSize: 11, fontFamily: OR.font.mono, color: t.ok, textTransform: 'uppercase', letterSpacing: '0.1em' }}>Active</span>
                </div>
                <div style={{ fontSize: 26, fontFamily: OR.font.display, fontWeight: 500, letterSpacing: '-0.02em' }}>Ada</div>
                <div style={{ fontSize: 12, color: t.t2, fontFamily: OR.font.mono }}>Unitree H1 · Lab</div>
              </div>
              <RobotGlyph kind="humanoid" size={56} color={t.t0} accent={accent}/>
            </div>

            <div style={{ position: 'relative', padding: 12, background: t.bg0, borderRadius: 10, marginBottom: 12, border: `1px solid ${t.line}` }}>
              <div style={{ fontSize: 10, fontFamily: OR.font.mono, color: t.t2, letterSpacing: '0.1em', marginBottom: 4 }}>NOW RUNNING</div>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <span style={{ fontSize: 14, color: t.t0, fontFamily: OR.font.mono }}>cleanup-kitchen</span>
                <span style={{ fontSize: 11, fontFamily: OR.font.mono, color: accent }}>3 / 7</span>
              </div>
              <div style={{ height: 4, background: t.bg3, borderRadius: 99, marginTop: 8, overflow: 'hidden' }}>
                <div style={{ width: `${30 + ((tick * 5) % 50)}%`, height: '100%', background: accent, transition: 'width 1.5s' }}/>
              </div>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, marginBottom: 14 }}>
              <Stat t={t} k="battery" v="78%" sub="3.2h"/>
              <Stat t={t} k="signal" v="-42" sub="dBm"/>
              <Stat t={t} k="cpu" v="42%" sub="orin"/>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
              <button style={pillBtnGhost(t)}><Icon d={Icons.cam} size={14}/> Live view</button>
              <button style={pillBtnPrim(t, accent)}><Icon d={Icons.joystick} size={14}/> Control</button>
            </div>
          </div>
        </div>

        {/* Other robots */}
        <div style={{ padding: '8px 20px 16px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
            <span style={{ fontSize: 11, fontFamily: OR.font.mono, color: t.t2, letterSpacing: '0.12em' }}>OTHERS · 3</span>
            <span style={{ fontSize: 11, fontFamily: OR.font.mono, color: t.t2 }}>Manage →</span>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {robots.slice(1).map(r => {
              const sc = r.status === 'active' ? t.ok : r.status === 'idle' ? t.t2 : t.info;
              return (
                <div key={r.id} style={{ display: 'grid', gridTemplateColumns: '44px 1fr auto', gap: 12, alignItems: 'center', padding: 12, background: t.bg1, border: `1px solid ${t.line}`, borderRadius: 12 }}>
                  <div style={{ width: 44, height: 44, background: t.bg2, borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <RobotGlyph kind={r.kind} size={30} color={t.t1} accent={accent}/>
                  </div>
                  <div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                      <span style={{ fontSize: 14, fontWeight: 500 }}>{r.name}</span>
                      <Pip color={sc} pulse={r.status === 'active'} size={5}/>
                    </div>
                    <div style={{ fontSize: 11, color: t.t2, fontFamily: OR.font.mono, marginTop: 2 }}>{r.task} · {r.model}</div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <div style={{ fontSize: 12, fontFamily: OR.font.mono, color: r.battery < 30 ? t.warn : t.t1 }}>{r.battery}%</div>
                    <Icon d={Icons.chev} size={14} stroke={t.t3} />
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        {/* Quick actions */}
        <div style={{ padding: '8px 20px 30px' }}>
          <div style={{ fontSize: 11, fontFamily: OR.font.mono, color: t.t2, letterSpacing: '0.12em', marginBottom: 10 }}>QUICK · 4</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
            {[
              { i: Icons.bolt, l: 'Run skill' },
              { i: Icons.mic, l: 'Voice' },
              { i: Icons.repeat, l: 'Routines' },
              { i: Icons.terminal, l: 'Console' },
            ].map((q, i) => (
              <div key={i} style={{ aspectRatio: 1, background: t.bg1, border: `1px solid ${t.line}`, borderRadius: 12, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
                <Icon d={q.i} size={18} stroke={accent}/>
                <span style={{ fontSize: 10, color: t.t1, fontFamily: OR.font.mono }}>{q.l}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Tab bar */}
        <MobileTabs t={t} accent={accent} active={0}/>
      </div>
    </IOSDevice>
  );
}

// ─────────────────────────────────────────────────────────────
// 2. TELEOP — live camera + joystick
// ─────────────────────────────────────────────────────────────
function MobileTeleop({ accent = '#FF8A2B', dark = true }) {
  const t = useTheme(true, accent); // teleop is always dark — pilot mode
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => { const id = setInterval(() => setTick(x => x + 1), 80); return () => clearInterval(id); }, []);

  // joystick position oscillating to feel alive
  const ang = (tick / 12) % (Math.PI * 2);
  const radL = 8 + Math.sin(tick / 20) * 4;
  const jx = Math.cos(ang) * radL;
  const jy = Math.sin(ang) * radL;

  return (
    <IOSDevice dark width={PHONE_W} height={PHONE_H}>
      <div style={{ background: '#000', minHeight: INNER_H, position: 'relative', fontFamily: OR.font.sans, color: '#fff', ['--accent']: accent }}>
        <ORStyles/>

        {/* Camera feed full bleed */}
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, #1a2030 0%, #0a0d14 50%, #06080d 100%)', overflow: 'hidden' }}>
          <div className="or-noise" style={{ position: 'absolute', inset: 0, opacity: 0.5 }}/>
          {/* perspective floor */}
          <svg viewBox="0 0 402 780" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
            {/* horizon */}
            <rect y="380" width="402" height="400" fill="url(#flrGrad)"/>
            <defs>
              <linearGradient id="flrGrad" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0" stopColor="#1a2535"/>
                <stop offset="1" stopColor="#04060a"/>
              </linearGradient>
            </defs>
            {/* perspective grid */}
            {[-3, -2, -1, 0, 1, 2, 3].map(i => (
              <line key={i} x1={201} y1="380" x2={201 + i * 200} y2="780" stroke="rgba(255,138,43,0.15)" strokeWidth="1"/>
            ))}
            {[0, 1, 2, 3, 4, 5].map(i => {
              const y = 380 + (i * i) * 12 + i * 20;
              return <line key={i} x1="0" y1={y} x2="402" y2={y} stroke="rgba(255,138,43,0.1)" strokeWidth="1"/>;
            })}
            {/* objects */}
            <g>
              <rect x="155" y="430" width="50" height="60" fill="none" stroke={accent} strokeWidth="1.5"/>
              <line x1="155" y1="430" x2="150" y2="425" stroke={accent} strokeWidth="1.5"/>
              <text x="150" y="420" fontFamily="JetBrains Mono" fontSize="10" fill={accent}>mug · 0.94 · 1.2m</text>
            </g>
            <g>
              <rect x="240" y="450" width="80" height="50" fill="none" stroke={t.info} strokeWidth="1.5"/>
              <text x="240" y="442" fontFamily="JetBrains Mono" fontSize="10" fill={t.info}>counter · 0.99</text>
            </g>
            {/* path projection */}
            <path d={`M 201 700 Q 201 600 180 ${455}`} fill="none" stroke={accent} strokeWidth="2" strokeDasharray="3 3" opacity="0.7"/>
            <circle cx="180" cy="455" r="6" fill={accent}/>
          </svg>

          {/* scan line effect */}
          <div style={{ position: 'absolute', left: 0, right: 0, height: 60, top: '40%' }}>
            <div className="or-scan-line" style={{ width: '100%', height: 1 }}/>
          </div>
        </div>

        {/* Top HUD */}
        <div style={{ position: 'absolute', top: 0, left: 0, right: 0, padding: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 10px', background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(12px)', borderRadius: 99, border: '1px solid rgba(255,255,255,0.1)' }}>
            <Icon d={Icons.arrowL} size={14} stroke="#fff"/>
            <span style={{ fontSize: 12, fontWeight: 500 }}>Ada</span>
            <Pip color={t.ok} pulse size={6}/>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'flex-end' }}>
            <div style={{ display: 'flex', gap: 4, padding: '6px 10px', background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(12px)', borderRadius: 99, border: '1px solid rgba(255,255,255,0.1)', fontFamily: OR.font.mono, fontSize: 10, color: '#fff', alignItems: 'center' }}>
              <Icon d={Icons.signal} size={10}/> 14ms
              <span style={{ color: 'rgba(255,255,255,0.4)' }}>·</span>
              <Icon d={Icons.battery} size={11}/> 78%
              <span style={{ color: 'rgba(255,255,255,0.4)' }}>·</span>
              REC ●
            </div>
            <div style={{ padding: '4px 10px', background: 'rgba(255,138,43,0.15)', backdropFilter: 'blur(12px)', borderRadius: 99, border: `1px solid ${accent}`, fontFamily: OR.font.mono, fontSize: 9, color: accent, letterSpacing: '0.1em' }}>
              ASSIST ON
            </div>
          </div>
        </div>

        {/* Center reticle / object selector */}
        <div style={{ position: 'absolute', left: '50%', top: '38%', transform: 'translate(-50%, -50%)', pointerEvents: 'none' }}>
          <div style={{ width: 70, height: 70, border: `1px solid ${accent}`, borderRadius: 6, position: 'relative' }}>
            {[
              { top: -1, left: -1, b: 'top left' },
              { top: -1, right: -1, b: 'top right' },
              { bottom: -1, left: -1, b: 'bottom left' },
              { bottom: -1, right: -1, b: 'bottom right' },
            ].map((p, i) => (
              <span key={i} style={{ position: 'absolute', width: 12, height: 12, borderTop: i < 2 ? `2px solid ${accent}` : 'none', borderBottom: i >= 2 ? `2px solid ${accent}` : 'none', borderLeft: i % 2 === 0 ? `2px solid ${accent}` : 'none', borderRight: i % 2 === 1 ? `2px solid ${accent}` : 'none', ...p, border: undefined, ...{[i === 0 ? 'borderTop' : i === 1 ? 'borderTop' : i === 2 ? 'borderBottom' : 'borderBottom']: `2px solid ${accent}`}, ...{[i % 2 === 0 ? 'borderLeft' : 'borderRight']: `2px solid ${accent}`}, top: i < 2 ? -1 : 'auto', bottom: i >= 2 ? -1 : 'auto', left: i % 2 === 0 ? -1 : 'auto', right: i % 2 === 1 ? -1 : 'auto' }}/>
            ))}
          </div>
        </div>

        {/* Action chip on selected object */}
        <div style={{ position: 'absolute', left: '50%', top: 'calc(38% + 50px)', transform: 'translateX(-50%)' }}>
          <div style={{ padding: '6px 12px', background: accent, color: '#0a0b0d', borderRadius: 99, fontSize: 11, fontFamily: OR.font.mono, fontWeight: 600, letterSpacing: '0.05em', display: 'flex', alignItems: 'center', gap: 6 }}>
            TAP TO PICK UP <Icon d={Icons.arrowR} size={11} sw={2.5}/>
          </div>
        </div>

        {/* Side action rail */}
        <div style={{ position: 'absolute', right: 14, top: '40%', display: 'flex', flexDirection: 'column', gap: 8 }}>
          {[Icons.cam, Icons.mic, Icons.flag, Icons.layers].map((i, k) => (
            <button key={k} style={{ width: 44, height: 44, borderRadius: 12, background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(12px)', border: '1px solid rgba(255,255,255,0.1)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}>
              <Icon d={i} size={18}/>
            </button>
          ))}
        </div>

        {/* Bottom controls — joystick + actions */}
        <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: 18, paddingBottom: 14 }}>
          {/* Mode selector */}
          <div style={{ display: 'flex', gap: 4, padding: 4, background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(12px)', borderRadius: 12, marginBottom: 14, alignSelf: 'center', width: 'fit-content', margin: '0 auto 14px', border: '1px solid rgba(255,255,255,0.08)' }}>
            {['MOVE', 'ARM', 'HEAD'].map((m, i) => (
              <span key={m} style={{ padding: '5px 12px', borderRadius: 8, fontSize: 10, fontFamily: OR.font.mono, fontWeight: 600, letterSpacing: '0.1em', color: i === 0 ? '#0a0b0d' : 'rgba(255,255,255,0.6)', background: i === 0 ? accent : 'transparent' }}>{m}</span>
            ))}
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '110px 1fr 110px', gap: 14, alignItems: 'center' }}>
            {/* Joystick */}
            <div style={{ width: 110, height: 110, borderRadius: '50%', background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(12px)', border: '1px solid rgba(255,255,255,0.12)', position: 'relative' }}>
              {/* concentric */}
              <div style={{ position: 'absolute', inset: 8, borderRadius: '50%', border: '1px dashed rgba(255,255,255,0.1)' }}/>
              <div style={{ position: 'absolute', top: '50%', left: '50%', width: 6, height: 6, transform: 'translate(-50%, -50%)', borderRadius: '50%', background: 'rgba(255,255,255,0.3)' }}/>
              {/* knob */}
              <div style={{
                position: 'absolute', top: '50%', left: '50%',
                width: 44, height: 44,
                transform: `translate(calc(-50% + ${jx}px), calc(-50% + ${jy}px))`,
                borderRadius: '50%',
                background: `radial-gradient(circle at 30% 30%, ${accent}, ${OR.c.amberDeep})`,
                boxShadow: `0 4px 12px ${t.accentGlow}`,
                border: '1px solid rgba(255,255,255,0.2)',
                transition: 'transform 0.08s linear',
              }}/>
              <div style={{ position: 'absolute', bottom: -18, left: 0, right: 0, textAlign: 'center', fontSize: 9, fontFamily: OR.font.mono, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.1em' }}>WALK</div>
            </div>

            {/* Center actions */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'center' }}>
              <button style={{
                width: 72, height: 72, borderRadius: '50%',
                background: t.danger, border: '4px solid rgba(255,92,92,0.3)',
                color: '#fff', fontSize: 11, fontFamily: OR.font.mono, fontWeight: 700,
                letterSpacing: '0.1em', cursor: 'pointer',
                boxShadow: '0 0 30px rgba(255,92,92,0.4)',
              }}>STOP</button>
              <span style={{ fontSize: 9, fontFamily: OR.font.mono, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.1em' }}>EMERGENCY</span>
            </div>

            {/* Right joy */}
            <div style={{ width: 110, height: 110, borderRadius: '50%', background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(12px)', border: '1px solid rgba(255,255,255,0.12)', position: 'relative' }}>
              <div style={{ position: 'absolute', inset: 8, borderRadius: '50%', border: '1px dashed rgba(255,255,255,0.1)' }}/>
              <div style={{
                position: 'absolute', top: '50%', left: '50%',
                width: 44, height: 44,
                transform: `translate(calc(-50% + ${-jx * 0.7}px), calc(-50% + ${jy * 0.7}px))`,
                borderRadius: '50%',
                background: `radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95), rgba(180,180,180,0.6))`,
                boxShadow: '0 4px 12px rgba(0,0,0,0.5)',
                border: '1px solid rgba(255,255,255,0.4)',
                transition: 'transform 0.08s linear',
              }}/>
              <div style={{ position: 'absolute', bottom: -18, left: 0, right: 0, textAlign: 'center', fontSize: 9, fontFamily: OR.font.mono, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.1em' }}>LOOK</div>
            </div>
          </div>
        </div>
      </div>
    </IOSDevice>
  );
}

// ─────────────────────────────────────────────────────────────
// 3. SKILLS — app store
// ─────────────────────────────────────────────────────────────
function MobileSkills({ accent = '#FF8A2B', dark = true }) {
  const t = useTheme(dark, accent);
  const featured = { i: '🍳', n: 'cook-breakfast', a: '@robomeals', d: 'Plans + executes simple breakfast meals using your kitchen tools.', dl: '142k', stars: 4.8, v: '2.4.0' };

  const cats = ['All', 'Home', 'Industrial', 'Mobility', 'Vision', 'Voice', 'Lab'];

  const skills = [
    { i: '🧹', n: 'tidy-room', a: '@openrobot', d: 'Picks up clutter', dl: '89k', stars: 4.7, tag: 'home' },
    { i: '📦', n: 'bin-picking', a: '@graspr', d: 'Industrial pick + place', dl: '24k', stars: 4.9, tag: 'industrial' },
    { i: '🐕', n: 'walk-dog', a: '@quadlab', d: 'Dog walker w/ leash', dl: '7.1k', stars: 4.6, tag: 'mobility' },
    { i: '👁️', n: 'face-greeter', a: '@socialbots', d: 'Recognize + greet', dl: '32k', stars: 4.5, tag: 'vision' },
    { i: '🌱', n: 'water-plants', a: '@greenlab', d: 'Schedule + dispense', dl: '14k', stars: 4.8, tag: 'home' },
    { i: '🔬', n: 'lab-pipette', a: '@biorobotics', d: 'Liquid handling', dl: '2.1k', stars: 5.0, tag: 'lab' },
  ];

  return (
    <IOSDevice dark={dark} width={PHONE_W} height={PHONE_H}>
      <div style={{ background: t.bg0, minHeight: INNER_H, fontFamily: OR.font.sans, color: t.t0, ['--accent']: accent }}>
        <ORStyles/>

        {/* Header */}
        <div style={{ padding: '8px 20px 12px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
            <h1 style={{ fontFamily: OR.font.display, fontSize: 28, fontWeight: 500, letterSpacing: '-0.02em', margin: 0 }}>Skills</h1>
            <div style={{ display: 'flex', gap: 8 }}>
              <button style={iconBtn(t)}><Icon d={Icons.flask} size={16}/></button>
              <button style={iconBtn(t)}><Icon d={Icons.download} size={16}/></button>
            </div>
          </div>
          {/* Search */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 12px', background: t.bg2, border: `1px solid ${t.line}`, borderRadius: 10 }}>
            <Icon d={Icons.search} size={15} stroke={t.t2}/>
            <span style={{ fontSize: 13, color: t.t2 }}>Search 2,400 skills…</span>
            <span style={{ marginLeft: 'auto', fontSize: 10, fontFamily: OR.font.mono, color: t.t3 }}>⌘K</span>
          </div>
        </div>

        {/* Categories */}
        <div style={{ padding: '4px 20px 14px', overflow: 'hidden' }}>
          <div style={{ display: 'flex', gap: 6, overflow: 'auto' }}>
            {cats.map((c, i) => (
              <span key={c} style={{
                padding: '6px 12px', fontSize: 12, fontWeight: 500,
                fontFamily: OR.font.mono, whiteSpace: 'nowrap',
                color: i === 0 ? t.bg0 : t.t1,
                background: i === 0 ? t.t0 : t.bg2,
                border: `1px solid ${i === 0 ? t.t0 : t.line}`,
                borderRadius: 99,
              }}>{c}</span>
            ))}
          </div>
        </div>

        {/* Featured */}
        <div style={{ padding: '0 20px 16px' }}>
          <div style={{ fontSize: 11, fontFamily: OR.font.mono, color: t.t2, letterSpacing: '0.12em', marginBottom: 8 }}>FEATURED</div>
          <div style={{
            position: 'relative', borderRadius: 14, overflow: 'hidden',
            background: `linear-gradient(135deg, ${t.accentSoft} 0%, ${t.bg2} 60%)`,
            border: `1px solid ${t.line}`, padding: 18,
          }}>
            <div style={{ position: 'absolute', top: -40, right: -40, width: 160, height: 160, borderRadius: '50%', background: t.accentGlow }}/>
            <div style={{ position: 'relative' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 14 }}>
                <div style={{ width: 56, height: 56, borderRadius: 12, background: t.bg0, border: `1px solid ${t.line}`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 28 }}>{featured.i}</div>
                <button style={{ padding: '6px 14px', background: accent, color: '#0a0b0d', border: 'none', borderRadius: 99, fontFamily: OR.font.mono, fontSize: 11, fontWeight: 600, cursor: 'pointer' }}>Install</button>
              </div>
              <div style={{ fontFamily: OR.font.mono, fontSize: 16, color: t.t0, fontWeight: 500 }}>{featured.n}</div>
              <div style={{ fontSize: 11, fontFamily: OR.font.mono, color: t.t2, marginTop: 2 }}>{featured.a} · v{featured.v}</div>
              <p style={{ fontSize: 13, color: t.t1, marginTop: 10, marginBottom: 10, lineHeight: 1.4 }}>{featured.d}</p>
              <div style={{ display: 'flex', gap: 14, fontSize: 11, fontFamily: OR.font.mono, color: t.t2 }}>
                <span><Icon d={Icons.download} size={11}/> {featured.dl}</span>
                <span>★ {featured.stars}</span>
                <span>humanoid · arm</span>
              </div>
            </div>
          </div>
        </div>

        {/* List */}
        <div style={{ padding: '0 20px 16px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
            <span style={{ fontSize: 11, fontFamily: OR.font.mono, color: t.t2, letterSpacing: '0.12em' }}>POPULAR · 2,418</span>
            <span style={{ fontSize: 11, fontFamily: OR.font.mono, color: t.t2 }}>Sort ▾</span>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 1, background: t.line, border: `1px solid ${t.line}`, borderRadius: 12, overflow: 'hidden' }}>
            {skills.map((s, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '44px 1fr auto', gap: 12, alignItems: 'center', padding: 12, background: t.bg1 }}>
                <div style={{ width: 44, height: 44, borderRadius: 8, background: t.bg2, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 22, border: `1px solid ${t.line}` }}>{s.i}</div>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontFamily: OR.font.mono, color: t.t0, fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{s.n}</div>
                  <div style={{ fontSize: 11, color: t.t2, marginTop: 2, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{s.d}</div>
                  <div style={{ fontSize: 10, fontFamily: OR.font.mono, color: t.t3, marginTop: 2 }}>★ {s.stars} · {s.dl} · {s.tag}</div>
                </div>
                <button style={{ padding: '6px 12px', background: 'transparent', color: t.t0, border: `1px solid ${t.line}`, borderRadius: 99, fontFamily: OR.font.mono, fontSize: 11, fontWeight: 500, cursor: 'pointer' }}>get</button>
              </div>
            ))}
          </div>
        </div>

        <MobileTabs t={t} accent={accent} active={2}/>
      </div>
    </IOSDevice>
  );
}

// ─────────────────────────────────────────────────────────────
// 4. AUTOMATIONS — behavior editor (when X then Y)
// ─────────────────────────────────────────────────────────────
function MobileAutomations({ accent = '#FF8A2B', dark = true }) {
  const t = useTheme(dark, accent);

  const flows = [
    { name: 'Morning routine', active: true, when: '7:00 AM · weekdays', then: 'open blinds → start coffee → daily briefing', runs: 142, robot: 'Ada' },
    { name: 'Doorbell greeter', active: true, when: 'doorbell rings', then: 'face-greeter → notify phone', runs: 38, robot: 'Ada' },
    { name: 'Floor patrol', active: false, when: 'every 30 min · 9pm-7am', then: 'patrol-perimeter → log anomalies', runs: 0, robot: 'Rex' },
    { name: 'Plant water', active: true, when: 'soil < 30%', then: 'water-plants(zone-a)', runs: 21, robot: 'Arm' },
  ];

  return (
    <IOSDevice dark={dark} width={PHONE_W} height={PHONE_H}>
      <div style={{ background: t.bg0, minHeight: INNER_H, fontFamily: OR.font.sans, color: t.t0, ['--accent']: accent }}>
        <ORStyles/>

        {/* Header */}
        <div style={{ padding: '8px 20px 14px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <h1 style={{ fontFamily: OR.font.display, fontSize: 28, fontWeight: 500, letterSpacing: '-0.02em', margin: 0 }}>Routines</h1>
            <button style={{ ...iconBtn(t), background: accent, color: t.bg0, border: 'none' }}><Icon d={Icons.add} size={16} sw={2.5}/></button>
          </div>
          <div style={{ fontSize: 13, color: t.t2, marginTop: 4 }}>3 active · 1 paused</div>
        </div>

        {/* Editor preview — featured/expanded card */}
        <div style={{ padding: '0 20px 16px' }}>
          <div style={{ borderRadius: 14, background: t.bg1, border: `1px solid ${t.line}`, overflow: 'hidden' }}>
            {/* Header */}
            <div style={{ padding: '12px 14px', borderBottom: `1px solid ${t.line}`, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <Pip color={t.ok} pulse size={6}/>
                <span style={{ fontSize: 14, fontWeight: 500 }}>Morning routine</span>
              </div>
              <Toggle on accent={accent}/>
            </div>

            {/* Flow editor */}
            <div style={{ padding: 16, position: 'relative' }}>
              {/* trigger */}
              <FlowNode t={t} accent={accent} kind="when" icon="🕐" title="Weekdays · 7:00 AM"
                sub="Trigger" type="time"/>

              <FlowConnector t={t}/>

              <FlowNode t={t} accent={accent} kind="if" icon="📍" title="If anyone is home"
                sub="Condition · presence sensor" type="and"/>

              <FlowConnector t={t}/>

              <FlowNode t={t} accent={accent} kind="then" icon="🪟" title="Open bedroom blinds"
                sub="Action · Ada" type="step" step={1}/>

              <FlowConnector t={t}/>

              <FlowNode t={t} accent={accent} kind="then" icon="☕" title="Start coffee"
                sub="Action · Arm-12" type="step" step={2}/>

              <FlowConnector t={t}/>

              <FlowNode t={t} accent={accent} kind="then" icon="🗞️" title="Read daily briefing"
                sub="Action · Ada · voice" type="step" step={3}/>

              <FlowConnector t={t} last/>

              {/* Add step */}
              <button style={{
                width: '100%', padding: 10, marginTop: 4,
                background: 'transparent', border: `1px dashed ${t.line}`, borderRadius: 8,
                color: t.t2, fontFamily: OR.font.mono, fontSize: 12, cursor: 'pointer',
                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
              }}>
                <Icon d={Icons.add} size={12}/> add step
              </button>
            </div>

            {/* Footer */}
            <div style={{ padding: '10px 14px', borderTop: `1px solid ${t.line}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <span style={{ fontSize: 11, fontFamily: OR.font.mono, color: t.t2 }}>ran 142× · last 2h ago</span>
              <span style={{ fontSize: 11, fontFamily: OR.font.mono, color: accent }}>Test run →</span>
            </div>
          </div>
        </div>

        {/* Other routines */}
        <div style={{ padding: '0 20px 16px' }}>
          <div style={{ fontSize: 11, fontFamily: OR.font.mono, color: t.t2, letterSpacing: '0.12em', marginBottom: 8 }}>ALL ROUTINES · 4</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {flows.slice(1).map((f, i) => (
              <div key={i} style={{ padding: 12, background: t.bg1, border: `1px solid ${t.line}`, borderRadius: 10 }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 6 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <Pip color={f.active ? t.ok : t.t3} pulse={f.active} size={6}/>
                    <span style={{ fontSize: 13, fontWeight: 500, color: t.t0 }}>{f.name}</span>
                  </div>
                  <Toggle on={f.active} accent={accent}/>
                </div>
                <div style={{ fontSize: 11, fontFamily: OR.font.mono, color: t.t2, lineHeight: 1.5 }}>
                  <span style={{ color: accent }}>when</span> {f.when}<br/>
                  <span style={{ color: accent }}>then</span> {f.then}
                </div>
                <div style={{ fontSize: 10, fontFamily: OR.font.mono, color: t.t3, marginTop: 6, paddingTop: 6, borderTop: `1px solid ${t.line}` }}>
                  {f.runs} runs · {f.robot}
                </div>
              </div>
            ))}
          </div>
        </div>

        <MobileTabs t={t} accent={accent} active={3}/>
      </div>
    </IOSDevice>
  );
}

// ─────────────────────────────────────────────────────────────
// Shared components
// ─────────────────────────────────────────────────────────────
function FlowNode({ t, accent, kind, icon, title, sub, step }) {
  const labelColor = kind === 'when' ? t.info : kind === 'if' ? t.warn : accent;
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '36px 1fr', gap: 12, alignItems: 'center' }}>
      <div style={{
        width: 36, height: 36, borderRadius: 8,
        background: t.bg2, border: `1px solid ${t.line}`,
        display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18,
      }}>{icon}</div>
      <div style={{
        padding: '8px 12px', background: t.bg2, border: `1px solid ${t.line}`, borderRadius: 8,
        position: 'relative',
      }}>
        <div style={{ fontSize: 9, fontFamily: OR.font.mono, color: labelColor, letterSpacing: '0.14em', textTransform: 'uppercase' }}>
          {kind} {step ? `· step ${step}` : ''}
        </div>
        <div style={{ fontSize: 13, color: t.t0, marginTop: 2 }}>{title}</div>
        <div style={{ fontSize: 10, fontFamily: OR.font.mono, color: t.t2, marginTop: 1 }}>{sub}</div>
      </div>
    </div>
  );
}

function FlowConnector({ t, last }) {
  return (
    <div style={{ marginLeft: 17, height: last ? 12 : 16, width: 2, background: t.line, marginTop: 2, marginBottom: 2 }}/>
  );
}

function Toggle({ on, accent }) {
  return (
    <span style={{
      width: 32, height: 18, borderRadius: 99,
      background: on ? accent : '#3a3f47', position: 'relative', transition: 'background 0.2s',
    }}>
      <span style={{
        position: 'absolute', top: 2, left: on ? 16 : 2,
        width: 14, height: 14, borderRadius: '50%', background: '#fff',
        transition: 'left 0.2s',
      }}/>
    </span>
  );
}

function Stat({ t, k, v, sub }) {
  return (
    <div style={{ padding: '8px 10px', background: t.bg1, borderRadius: 8, border: `1px solid ${t.line}` }}>
      <div style={{ fontSize: 9, fontFamily: OR.font.mono, color: t.t2, letterSpacing: '0.12em', textTransform: 'uppercase' }}>{k}</div>
      <div style={{ fontSize: 16, fontFamily: OR.font.mono, color: t.t0, fontWeight: 500, marginTop: 1 }}>{v}</div>
      <div style={{ fontSize: 9, fontFamily: OR.font.mono, color: t.t3 }}>{sub}</div>
    </div>
  );
}

function MobileTabs({ t, accent, active }) {
  const items = [
    { i: Icons.home, l: 'Home' },
    { i: Icons.map, l: 'Map' },
    { i: Icons.store, l: 'Skills' },
    { i: Icons.repeat, l: 'Routines' },
    { i: Icons.settings, l: 'Settings' },
  ];
  return (
    <div style={{
      position: 'sticky', bottom: 0,
      borderTop: `1px solid ${t.line}`, background: `${t.bg0}EE`, backdropFilter: 'blur(12px)',
      display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', padding: '10px 0 4px',
    }}>
      {items.map((x, i) => (
        <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3, color: i === active ? accent : t.t2 }}>
          <Icon d={x.i} size={18}/>
          <span style={{ fontSize: 10, fontFamily: OR.font.mono }}>{x.l}</span>
        </div>
      ))}
    </div>
  );
}

const iconBtn = (t) => ({
  width: 32, height: 32, borderRadius: 8,
  background: t.bg2, border: `1px solid ${t.line}`, color: t.t0,
  display: 'inline-flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
});
const pillBtnPrim = (t, a) => ({
  display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
  padding: '10px 12px', fontSize: 13, fontWeight: 600, fontFamily: OR.font.sans,
  background: a, color: '#0A0B0D', border: 'none', borderRadius: 10, cursor: 'pointer',
});
const pillBtnGhost = (t) => ({
  display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
  padding: '10px 12px', fontSize: 13, fontWeight: 500, fontFamily: OR.font.sans,
  background: 'transparent', color: t.t0, border: `1px solid ${t.line}`, borderRadius: 10, cursor: 'pointer',
});

Object.assign(window, { MobileHome, MobileTeleop, MobileSkills, MobileAutomations });