// Additional mobile screens — Map, Settings, Onboarding (pair-a-robot)

const M_W = 402;
const M_H = 874;
const M_INNER_H = 780;

// ─────────────────────────────────────────────────────────────
// MOBILE MAP
// ─────────────────────────────────────────────────────────────
function MobileMap({ 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 rooms = [
    { x: 30, y: 60, w: 140, h: 110, l: 'KITCHEN' },
    { x: 170, y: 60, w: 200, h: 150, l: 'LIVING' },
    { x: 30, y: 170, w: 140, h: 130, l: 'LAB' },
    { x: 170, y: 210, w: 200, h: 90, l: 'HALL' },
    { x: 30, y: 300, w: 340, h: 90, l: 'BEDROOM' },
  ];
  const robots = [
    { x: 95, y: 115, kind: 'humanoid', name: 'Ada', status: 'active', sel: true },
    { x: 270, y: 130, kind: 'rover', name: 'Roam', status: 'active' },
    { x: 280, y: 250, kind: 'quadruped', name: 'Rex', status: 'active' },
    { x: 95, y: 240, kind: 'humanoid', name: 'Ada-02', status: 'error' },
  ];

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

        {/* Header */}
        <div style={{ padding: '8px 20px 12px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <h1 style={{ fontFamily: OR.font.display, fontSize: 28, fontWeight: 500, letterSpacing: '-0.02em', margin: 0 }}>Map</h1>
            <div style={{ display: 'flex', gap: 8 }}>
              <button style={iconBtn2(t)}><Icon d={Icons.layers} size={16}/></button>
              <button style={iconBtn2(t)}><Icon d={Icons.search} size={16}/></button>
            </div>
          </div>
          <div style={{ fontSize: 12, color: t.t2, fontFamily: OR.font.mono, marginTop: 2 }}>Lab · floor 1 · 920 m²</div>
        </div>

        {/* Floor plan */}
        <div style={{ margin: '0 20px', borderRadius: 14, overflow: 'hidden', background: t.bg1, border: `1px solid ${t.line}`, position: 'relative', height: 410 }}>
          <div className="or-grid" style={{ position: 'absolute', inset: 0, opacity: 0.4 }}/>
          <svg viewBox="0 0 400 420" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
            {rooms.map((r, i) => (
              <g key={i}>
                <rect x={r.x} y={r.y} width={r.w} height={r.h} fill={t.bg2} stroke={t.line}/>
                <text x={r.x + 8} y={r.y + 14} fontFamily="JetBrains Mono" fontSize="8" fill={t.t2} letterSpacing="1">{r.l}</text>
              </g>
            ))}

            {/* Heatmap */}
            <g opacity="0.3">
              <circle cx="95" cy="115" r="35" fill={accent}/>
              <circle cx="280" cy="250" r="30" fill={accent}/>
            </g>

            {/* Path */}
            <path d="M 60 140 Q 90 100 120 130 T 150 110" fill="none" stroke={accent} strokeWidth="1.5" strokeDasharray="3 3" opacity="0.7"/>

            {robots.map((r, i) => {
              const c = r.status === 'active' ? t.ok : r.status === 'error' ? t.danger : t.t2;
              return (
                <g key={i} transform={`translate(${r.x}, ${r.y})`}>
                  {r.sel && <circle r="20" fill="none" stroke={accent} strokeWidth="1.5"/>}
                  {r.status === 'active' && <circle r={12 + (tick % 2) * 3} fill="none" stroke={c} strokeWidth="1" opacity="0.4"/>}
                  <circle r="10" fill={t.bg2} stroke={c} strokeWidth="1.5"/>
                  <foreignObject x="-7" y="-7" width="14" height="14">
                    <div style={{ width: 14, height: 14, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                      <RobotGlyph kind={r.kind} size={11} color={c} accent={accent}/>
                    </div>
                  </foreignObject>
                </g>
              );
            })}
          </svg>

          {/* Map controls */}
          <div style={{ position: 'absolute', top: 12, right: 12, display: 'flex', flexDirection: 'column', gap: 4, background: t.bg2, border: `1px solid ${t.line}`, borderRadius: 8, padding: 4 }}>
            <button style={mapBtn2(t)}>+</button>
            <button style={mapBtn2(t)}>−</button>
          </div>
          <div style={{ position: 'absolute', bottom: 10, left: 10, fontSize: 9, fontFamily: OR.font.mono, color: t.t2 }}>scan 2 min ago</div>
        </div>

        {/* Selected robot */}
        <div style={{ padding: '14px 20px 12px' }}>
          <div style={{ fontSize: 11, fontFamily: OR.font.mono, color: t.t2, letterSpacing: '0.12em', marginBottom: 8 }}>SELECTED</div>
          <div style={{ padding: 14, background: t.bg1, border: `1px solid ${t.line}`, borderRadius: 12 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
              <div style={{ width: 40, height: 40, background: t.bg2, borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <RobotGlyph kind="humanoid" size={28} color={t.t0} accent={accent}/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <span style={{ fontSize: 15, fontWeight: 500 }}>Ada</span>
                  <Pip color={t.ok} pulse size={6}/>
                </div>
                <div style={{ fontSize: 11, fontFamily: OR.font.mono, color: t.t2 }}>Kitchen · zone 2</div>
              </div>
              <span style={{ fontSize: 10, fontFamily: OR.font.mono, color: accent }}>→ dishwasher</span>
            </div>
            <div style={{ display: 'flex', gap: 6 }}>
              {[
                { i: Icons.flag, l: 'Recall' },
                { i: Icons.cam, l: 'Live view' },
                { i: Icons.joystick, l: 'Drive' },
              ].map((a, i) => (
                <button key={i} style={{
                  flex: 1, padding: '8px 10px', background: t.bg2, border: `1px solid ${t.line}`, borderRadius: 8,
                  color: t.t0, fontFamily: OR.font.mono, fontSize: 11, cursor: 'pointer',
                  display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
                }}>
                  <Icon d={a.i} size={12}/> {a.l}
                </button>
              ))}
            </div>
          </div>
        </div>

        {/* All robots strip */}
        <div style={{ padding: '0 20px 16px' }}>
          <div style={{ display: 'flex', gap: 6, overflowX: 'auto' }}>
            {[
              { n: 'Ada', s: t.ok, sel: true },
              { n: 'Rex', s: t.ok },
              { n: 'Ada-02', s: t.danger },
              { n: 'Roam-7', s: t.ok },
              { n: 'Sky', s: t.info },
            ].map((r, i) => (
              <span key={i} style={{
                padding: '5px 10px', fontSize: 11, fontFamily: OR.font.mono, whiteSpace: 'nowrap',
                color: r.sel ? t.bg0 : t.t1, background: r.sel ? t.t0 : t.bg2,
                border: `1px solid ${r.sel ? t.t0 : t.line}`, borderRadius: 99,
                display: 'inline-flex', alignItems: 'center', gap: 5,
              }}>
                <Pip color={r.s} size={5}/>
                {r.n}
              </span>
            ))}
          </div>
        </div>

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

// ─────────────────────────────────────────────────────────────
// MOBILE SETTINGS
// ─────────────────────────────────────────────────────────────
function MobileSettings({ accent = '#FF8A2B', dark = true }) {
  const t = useTheme(dark, accent);

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

        {/* Header */}
        <div style={{ padding: '8px 20px 14px' }}>
          <h1 style={{ fontFamily: OR.font.display, fontSize: 28, fontWeight: 500, letterSpacing: '-0.02em', margin: 0 }}>Settings</h1>
        </div>

        {/* Account card */}
        <div style={{ padding: '0 20px 16px' }}>
          <div style={{ padding: 14, background: t.bg1, border: `1px solid ${t.line}`, borderRadius: 12, display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 44, height: 44, borderRadius: '50%', background: accent, color: t.bg0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16, fontWeight: 600 }}>K</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 500 }}>Kai Tanaka</div>
              <div style={{ fontSize: 11, fontFamily: OR.font.mono, color: t.t2 }}>kai@openrobot.app · admin</div>
            </div>
            <Icon d={Icons.chev} size={14} stroke={t.t3}/>
          </div>
        </div>

        {/* Hub card */}
        <div style={{ padding: '0 20px 16px' }}>
          <div style={{ padding: 14, background: t.bg1, border: `1px solid ${t.line}`, borderRadius: 12 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
              <div style={{ width: 32, height: 32, background: t.bg2, borderRadius: 6, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon d={Icons.cpu} size={16} stroke={accent}/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 500 }}>hub.local</div>
                <div style={{ fontSize: 10, fontFamily: OR.font.mono, color: t.t2 }}>v0.9.4 · 192.168.1.42</div>
              </div>
              <Tag theme={t} color={t.ok} dot>online</Tag>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, paddingTop: 10, borderTop: `1px solid ${t.line}`, fontFamily: OR.font.mono }}>
              <div><div style={{ fontSize: 9, color: t.t2 }}>UPTIME</div><div style={{ fontSize: 12, color: t.t0, marginTop: 2 }}>18d</div></div>
              <div><div style={{ fontSize: 9, color: t.t2 }}>LOAD</div><div style={{ fontSize: 12, color: t.t0, marginTop: 2 }}>0.42</div></div>
              <div><div style={{ fontSize: 9, color: t.t2 }}>ROBOTS</div><div style={{ fontSize: 12, color: t.t0, marginTop: 2 }}>6 paired</div></div>
            </div>
          </div>
        </div>

        {/* Settings groups */}
        {[
          {
            title: 'PREFERENCES',
            rows: [
              { i: Icons.bell, l: 'Notifications', sub: 'Alerts, mentions' },
              { i: Icons.sun, l: 'Appearance', sub: 'Dark · amber accent' },
              { i: Icons.globe, l: 'Language & region', sub: 'English (US)' },
            ],
          },
          {
            title: 'ROBOTS & NETWORK',
            rows: [
              { i: Icons.robot, l: 'Paired robots', sub: '6 active', n: '6' },
              { i: Icons.wifi, l: 'Network & relay', sub: 'Local · cloud relay off' },
              { i: Icons.shield, l: 'Safety & limits', sub: 'Geofence on · force capped', acc: true },
            ],
          },
          {
            title: 'DEVELOPER',
            rows: [
              { i: Icons.terminal, l: 'API & webhooks', sub: '2 keys' },
              { i: Icons.flask, l: 'Beta features', sub: 'Off' },
              { i: Icons.github, l: 'Source · contribute', sub: 'github.com/openrobot' },
            ],
          },
        ].map((g, gi) => (
          <div key={gi} style={{ padding: '0 20px 16px' }}>
            <div style={{ fontSize: 10, fontFamily: OR.font.mono, color: t.t2, letterSpacing: '0.14em', marginBottom: 8 }}>{g.title}</div>
            <div style={{ background: t.bg1, border: `1px solid ${t.line}`, borderRadius: 12, overflow: 'hidden' }}>
              {g.rows.map((r, i) => (
                <div key={i} style={{
                  display: 'grid', gridTemplateColumns: '32px 1fr auto', gap: 12, alignItems: 'center',
                  padding: '11px 14px', borderTop: i ? `1px solid ${t.line}` : 'none',
                }}>
                  <div style={{ width: 32, height: 32, background: r.acc ? t.accentSoft : t.bg2, borderRadius: 7, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <Icon d={r.i} size={14} stroke={r.acc ? accent : t.t1}/>
                  </div>
                  <div>
                    <div style={{ fontSize: 13, color: t.t0 }}>{r.l}</div>
                    <div style={{ fontSize: 10, fontFamily: OR.font.mono, color: t.t2, marginTop: 2 }}>{r.sub}</div>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                    {r.n && <span style={{ fontSize: 11, fontFamily: OR.font.mono, color: t.t3 }}>{r.n}</span>}
                    <Icon d={Icons.chev} size={12} stroke={t.t3}/>
                  </div>
                </div>
              ))}
            </div>
          </div>
        ))}

        <div style={{ padding: '8px 20px 30px', textAlign: 'center', fontSize: 10, fontFamily: OR.font.mono, color: t.t3 }}>
          openrobot v0.9.4 · build 3a8f2e1<br/>
          MIT · made by humans + robots
        </div>

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

// ─────────────────────────────────────────────────────────────
// ONBOARDING — pair a robot
// ─────────────────────────────────────────────────────────────
function MobileOnboard({ accent = '#FF8A2B', dark = true }) {
  const t = useTheme(dark, accent);
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => { const id = setInterval(() => setTick(x => x + 1), 1200); return () => clearInterval(id); }, []);

  return (
    <IOSDevice dark={dark} width={M_W} height={M_H}>
      <div style={{ background: t.bg0, minHeight: M_INNER_H, fontFamily: OR.font.sans, color: t.t0, ['--accent']: accent, position: 'relative', overflow: 'hidden' }}>
        <ORStyles/>
        <div style={{ position: 'absolute', top: -100, left: '50%', transform: 'translateX(-50%)', width: 400, height: 300, borderRadius: '50%', background: `radial-gradient(circle, ${t.accentGlow}, transparent 65%)`, pointerEvents: 'none' }}/>

        {/* Header */}
        <div style={{ padding: '12px 20px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <button style={iconBtn2(t)}><Icon d={Icons.x} size={16}/></button>
          <div style={{ fontSize: 11, fontFamily: OR.font.mono, color: t.t2, letterSpacing: '0.1em' }}>STEP 2 · 4</div>
          <button style={{ ...iconBtn2(t), border: 'none', background: 'transparent' }}><Icon d={Icons.bolt} size={16} stroke={t.t2}/></button>
        </div>

        {/* Step bar */}
        <div style={{ padding: '0 20px 24px', display: 'flex', gap: 4 }}>
          {[true, true, false, false].map((d, i) => (
            <div key={i} style={{ flex: 1, height: 3, borderRadius: 99, background: d ? accent : t.bg3 }}/>
          ))}
        </div>

        {/* Title */}
        <div style={{ padding: '0 28px 12px' }}>
          <div style={{ fontSize: 12, fontFamily: OR.font.mono, color: accent, letterSpacing: '0.12em', marginBottom: 8 }}>PAIRING</div>
          <h1 style={{ fontFamily: OR.font.display, fontSize: 32, fontWeight: 500, letterSpacing: '-0.025em', margin: 0, lineHeight: 1.05 }}>
            Hold your phone near<br/>your robot's <span style={{ color: accent }}>NFC patch</span>.
          </h1>
          <p style={{ marginTop: 12, fontSize: 14, color: t.t1, lineHeight: 1.5 }}>
            We'll handshake over the local network — no cloud round-trip, no QR codes.
          </p>
        </div>

        {/* Visual: phone scanning robot */}
        <div style={{ position: 'relative', height: 280, margin: '14px 28px 0', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          {/* outer pulse rings */}
          {[0, 1, 2].map(i => (
            <div key={i} style={{
              position: 'absolute', width: 120 + i * 60, height: 120 + i * 60,
              borderRadius: '50%', border: `1px solid ${accent}`,
              opacity: 0.5 - i * 0.15 + (tick % 2) * 0.1,
              transition: 'opacity 1.2s',
            }}/>
          ))}

          {/* Robot illustration */}
          <div style={{
            width: 110, height: 110, borderRadius: 18,
            background: `linear-gradient(135deg, ${t.bg2}, ${t.bg1})`,
            border: `1px solid ${t.line}`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            position: 'relative', zIndex: 2,
            boxShadow: `0 12px 40px ${t.accentGlow}`,
          }}>
            <RobotGlyph kind="humanoid" size={70} color={t.t0} accent={accent}/>
            <div style={{
              position: 'absolute', top: -6, right: -6,
              width: 24, height: 24, borderRadius: '50%', background: accent,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              boxShadow: `0 0 20px ${t.accentGlow}`,
            }}>
              <Icon d={Icons.spark} size={12} stroke={t.bg0} sw={2.5}/>
            </div>
          </div>
        </div>

        {/* Status row */}
        <div style={{ padding: '24px 28px 0', textAlign: 'center' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '8px 14px', background: t.bg1, border: `1px solid ${t.line}`, borderRadius: 99, fontFamily: OR.font.mono, fontSize: 12, color: t.t1 }}>
            <Pip color={t.ok} pulse size={6}/>
            <span style={{ color: t.ok }}>Detected:</span> Unitree H1 · fw 2.4.1
          </div>
        </div>

        {/* Detected info */}
        <div style={{ padding: '20px 28px 0' }}>
          <div style={{ background: t.bg1, border: `1px solid ${t.line}`, borderRadius: 12, padding: 14 }}>
            <div style={{ fontSize: 10, fontFamily: OR.font.mono, color: t.t2, letterSpacing: '0.12em', marginBottom: 8 }}>HANDSHAKE</div>
            {[
              ['signature', '✓ verified · openrobot.app/keys'],
              ['runtime', 'compatible · v0.9.x'],
              ['skills', '0 installed (fresh device)'],
              ['encryption', 'X25519 · forward secret'],
            ].map((r, i) => (
              <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '5px 0', fontFamily: OR.font.mono, fontSize: 11, color: t.t1, borderTop: i ? `1px solid ${t.line}` : 'none' }}>
                <span style={{ color: t.t2 }}>{r[0]}</span>
                <span style={{ color: r[1].startsWith('✓') ? t.ok : t.t1 }}>{r[1]}</span>
              </div>
            ))}
          </div>
        </div>

        {/* CTA */}
        <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: 20, background: `linear-gradient(180deg, transparent, ${t.bg0} 30%)` }}>
          <button style={{
            width: '100%', padding: '14px 16px', background: accent, color: t.bg0,
            border: 'none', borderRadius: 12, fontFamily: OR.font.sans, fontSize: 15, fontWeight: 600,
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, cursor: 'pointer',
            boxShadow: `0 8px 30px ${t.accentGlow}`,
          }}>
            Pair this robot <Icon d={Icons.arrowR} size={15} stroke={t.bg0} sw={2.5}/>
          </button>
          <button style={{
            width: '100%', marginTop: 8, padding: '12px', background: 'transparent', color: t.t1,
            border: 'none', fontFamily: OR.font.mono, fontSize: 12, cursor: 'pointer',
          }}>
            Pair with code instead →
          </button>
        </div>
      </div>
    </IOSDevice>
  );
}

const iconBtn2 = (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 mapBtn2 = (t) => ({
  width: 26, height: 26, border: 'none', background: 'transparent', color: t.t1,
  borderRadius: 4, fontSize: 13, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
});

Object.assign(window, { MobileMap, MobileSettings, MobileOnboard });