// M11 — MOB tim home (Vigilo Mobile)
// Home varijanta za člana mobilnog tima. Razlikuje se od M2 STO home:
// nema fiksno BM, ima direktive od HQ-a, kreće se između BM, prijavljuje
// šta zatekne i vidi šta drugi STO/partneri vide.

const VM = {
  paper:   'oklch(0.985 0.003 60)',
  surface: 'white',
  ink50:   'oklch(0.985 0.003 60)',
  ink75:   'oklch(0.972 0.004 60)',
  ink100:  'oklch(0.955 0.005 60)',
  ink150:  'oklch(0.930 0.006 60)',
  ink200:  'oklch(0.900 0.007 60)',
  ink300:  'oklch(0.830 0.008 60)',
  ink400:  'oklch(0.700 0.010 60)',
  ink500:  'oklch(0.580 0.011 60)',
  ink600:  'oklch(0.460 0.012 60)',
  ink700:  'oklch(0.340 0.013 60)',
  ink800:  'oklch(0.240 0.014 60)',
  ink900:  'oklch(0.160 0.015 60)',
  ink950:  'oklch(0.110 0.015 60)',
  red500:  'oklch(0.590 0.215 25)',
  red600:  'oklch(0.520 0.215 25)',
  red700:  'oklch(0.450 0.190 25)',
  red50:   'oklch(0.972 0.012 25)',
  success: 'oklch(0.620 0.155 152)',
  successBg:'oklch(0.960 0.030 152)',
  warning: 'oklch(0.745 0.150 70)',
  warningBg:'oklch(0.970 0.035 80)',
  warningFg:'oklch(0.40 0.15 70)',
  info:    'oklch(0.580 0.155 245)',
  infoBg:  'oklch(0.965 0.025 245)',
  infoFg:  'oklch(0.40 0.155 245)',
  purple:  'oklch(0.55 0.18 285)',
  purpleBg:'oklch(0.95 0.025 285)',
  purpleFg:'oklch(0.4 0.16 285)',
  mob:     'oklch(0.6 0.18 320)',
  font:    'Geist, -apple-system, system-ui, sans-serif',
  mono:    '"Geist Mono", ui-monospace, SF Mono, Menlo, monospace',
};

const Ico = ({ children, size = 18, sw = 1.6, fill = 'none' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke="currentColor" strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>{children}</svg>
);
const IcAlert = (p) => <Ico {...p}><path d="M12 9v4M12 17h.01"/><path d="M10.3 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/></Ico>;
const IcChat  = (p) => <Ico {...p}><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></Ico>;
const IcPhone = (p) => <Ico {...p}><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></Ico>;
const IcArrow = (p) => <Ico {...p}><path d="M5 12h14M12 5l7 7-7 7"/></Ico>;
const IcMap   = (p) => <Ico {...p}><path d="M9 20l-6 2V6l6-2 6 2 6-2v14l-6 2-6-2zM9 4v16M15 6v16"/></Ico>;
const IcCheck = (p) => <Ico {...p}><path d="M20 6 9 17l-5-5"/></Ico>;
const IcSiren = (p) => <Ico {...p}><path d="M7 12V8a5 5 0 0 1 10 0v4M5 20h14M5 20v-3a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v3M12 4V2M19 5l1-1M5 5l-1-1"/></Ico>;
const IcBell  = (p) => <Ico {...p}><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 0 1-3.46 0"/></Ico>;
const IcNav   = (p) => <Ico {...p}><path d="m3 11 19-9-9 19-2-8z"/></Ico>;
const IcPin   = (p) => <Ico {...p}><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></Ico>;
const IcTruck = (p) => <Ico {...p}><rect x="1" y="3" width="15" height="13"/><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></Ico>;
const IcFlag  = (p) => <Ico {...p}><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" y1="22" x2="4" y2="15"/></Ico>;
const IcEye   = (p) => <Ico {...p}><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></Ico>;
const IcUsers = (p) => <Ico {...p}><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></Ico>;
const IcDone  = (p) => <Ico {...p}><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></Ico>;

function Pill({ kind, children, dot = false }) {
  const styles = {
    ok:      { bg: VM.successBg, fg: 'oklch(0.36 0.15 152)', dot: VM.success },
    warn:    { bg: VM.warningBg, fg: VM.warningFg, dot: VM.warning },
    info:    { bg: VM.infoBg, fg: VM.infoFg, dot: VM.info },
    onway:   { bg: VM.infoBg, fg: VM.infoFg, dot: VM.info },
    atbm:    { bg: VM.successBg, fg: 'oklch(0.36 0.15 152)', dot: VM.success },
    free:    { bg: VM.ink100, fg: VM.ink700, dot: VM.ink400 },
    crta:    { bg: VM.red500, fg: 'white', dot: null },
    gns:     { bg: VM.info, fg: 'white', dot: null },
    tre:     { bg: VM.ink700, fg: 'white', dot: null },
  }[kind] || { bg: VM.ink100, fg: VM.ink700 };
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 4,
      background: styles.bg, color: styles.fg,
      fontSize: 10.5, fontWeight: 700, padding: '2px 7px',
      borderRadius: 4, lineHeight: 1.4, fontFamily: VM.mono,
      letterSpacing: 0.04, textTransform: 'uppercase',
    }}>
      {dot && <span style={{ width: 5, height: 5, borderRadius: '50%', background: styles.dot }} />}
      {children}
    </span>
  );
}

function SOSBar() {
  const [pressed, setPressed] = React.useState(0);
  const timer = React.useRef(null);
  const start = () => {
    if (timer.current) return;
    const t0 = Date.now();
    timer.current = setInterval(() => {
      const p = Math.min(1, (Date.now() - t0) / 1200);
      setPressed(p);
      if (p >= 1) { clearInterval(timer.current); timer.current = null; }
    }, 30);
  };
  const stop = () => { clearInterval(timer.current); timer.current = null; setPressed(0); };
  const active = pressed > 0;
  return (
    <button
      onMouseDown={start} onMouseUp={stop} onMouseLeave={stop}
      onTouchStart={start} onTouchEnd={stop}
      style={{
        position: 'relative', width: '100%', height: 56,
        background: VM.red500, color: 'white', border: 0,
        borderRadius: 16, overflow: 'hidden', cursor: 'pointer',
        fontFamily: VM.font, fontSize: 16, fontWeight: 600, letterSpacing: -0.2,
        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
        boxShadow: '0 8px 20px -4px oklch(0.59 0.215 25 / 0.35), inset 0 1px 0 oklch(1 0 0 / 0.18)',
        WebkitTapHighlightColor: 'transparent',
      }}>
      <div style={{
        position: 'absolute', inset: 0, background: 'oklch(0.46 0.215 25)',
        transform: `scaleX(${pressed})`, transformOrigin: 'left',
        transition: timer.current ? 'none' : 'transform 200ms ease-out',
      }}/>
      <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 10 }}>
        <IcSiren size={20} sw={2}/>
        <span>{active ? `Drži još ${Math.ceil((1 - pressed) * 1.2 * 10) / 10}s…` : 'Drži za SOS'}</span>
      </div>
    </button>
  );
}

// ─────────────────────────────────────────────────────
// Mini-mapa rejona sa BM markerima + MOB pozicijom
// ─────────────────────────────────────────────────────
function MiniMap({ status }) {
  // Position MOB based on status
  const mobX = status === 'onway' ? 56 : status === 'atbm' ? 84 : 42;
  const mobY = status === 'onway' ? 54 : status === 'atbm' ? 28 : 70;
  return (
    <div style={{
      position: 'relative', height: 168, borderRadius: 14, overflow: 'hidden',
      background: 'oklch(0.96 0.005 60)',
      backgroundImage:
        'linear-gradient(oklch(0.92 0.006 60) 1px, transparent 1px),' +
        'linear-gradient(90deg, oklch(0.92 0.006 60) 1px, transparent 1px)',
      backgroundSize: '20px 20px',
      border: '1px solid ' + VM.ink200,
    }}>
      <svg viewBox="0 0 100 100" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
        {/* Region polygon (MOB 2 rejon) */}
        <path d="M 8,16 L 92,12 L 94,82 L 12,86 Z" fill="oklch(0.95 0.025 320 / 0.35)" stroke={VM.mob} strokeWidth="0.4" strokeDasharray="2 2" opacity="0.7"/>
        {/* "Streets" */}
        <path d="M 0,40 Q 30,30 60,42 T 100,38" stroke="oklch(0.85 0.007 60)" strokeWidth="0.5" fill="none"/>
        <path d="M 20,0 Q 28,40 22,80 T 30,100" stroke="oklch(0.85 0.007 60)" strokeWidth="0.4" fill="none"/>
        <path d="M 0,72 L 100,68" stroke="oklch(0.85 0.007 60)" strokeWidth="0.4" fill="none"/>

        {/* BM markers */}
        {/* Crveni — 0341/A (target) */}
        <g transform="translate(84,28)">
          <circle r="6" fill={VM.red500} opacity="0.35"><animate attributeName="r" values="3;9;3" dur="2s" repeatCount="indefinite"/><animate attributeName="opacity" values="0.6;0;0.6" dur="2s" repeatCount="indefinite"/></circle>
          <circle r="3.5" fill={VM.red500} stroke="white" strokeWidth="0.5"/>
        </g>
        {/* Žuti */}
        <g transform="translate(28,32)"><circle r="3" fill={VM.warning} stroke="white" strokeWidth="0.5"/></g>
        <g transform="translate(64,72)"><circle r="3" fill={VM.warning} stroke="white" strokeWidth="0.5"/></g>
        {/* Sivi */}
        <g transform="translate(38,62)"><circle r="2.5" fill={VM.ink400} stroke="white" strokeWidth="0.5"/></g>
        {/* Zeleni */}
        <g transform="translate(72,52)"><circle r="2.5" fill={VM.success} stroke="white" strokeWidth="0.5"/></g>
        <g transform="translate(18,78)"><circle r="2.5" fill={VM.success} stroke="white" strokeWidth="0.5"/></g>

        {/* Route if onway */}
        {status === 'onway' && (
          <path d={`M ${mobX},${mobY} Q ${(mobX + 84) / 2},${(mobY + 28) / 2 - 8} 84,28`} fill="none" stroke={VM.mob} strokeWidth="0.6" strokeDasharray="2 1.5">
            <animate attributeName="stroke-dashoffset" values="0;-3.5" dur="0.8s" repeatCount="indefinite"/>
          </path>
        )}

        {/* MOB marker */}
        <g transform={`translate(${mobX},${mobY})`}>
          <rect x="-4" y="-4" width="8" height="8" rx="2" fill={VM.mob} stroke="white" strokeWidth="0.7"/>
          <text x="0" y="2.5" textAnchor="middle" fontFamily="Geist Mono" fontSize="4.5" fontWeight="700" fill="white">2</text>
        </g>
      </svg>

      {/* Coords overlay */}
      <div style={{
        position: 'absolute', bottom: 8, left: 10,
        fontFamily: VM.mono, fontSize: 10, color: VM.ink700,
        background: 'white', padding: '3px 7px', borderRadius: 4,
        boxShadow: '0 1px 4px oklch(0 0 0 / 0.08)',
      }}>
        44.81°N · 20.46°E · ±5m
      </div>
      <div style={{
        position: 'absolute', top: 8, right: 10,
        fontFamily: VM.mono, fontSize: 9.5, color: 'white',
        background: VM.mob, padding: '3px 7px', borderRadius: 4,
        fontWeight: 700, letterSpacing: 0.04,
      }}>
        REJON MOB 2 · BG SEVER
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────
// Glavni screen
// ─────────────────────────────────────────────────────
function MOBHome({ status, hasDirective }) {
  return (
    <div style={{ background: VM.paper, height: '100%', display: 'flex', flexDirection: 'column', fontFamily: VM.font, color: VM.ink900, overflow: 'auto' }}>
      <div style={{ paddingTop: 56 }} />

      {/* Header */}
      <div style={{ padding: '8px 20px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
        <div>
          <div style={{ fontSize: 11, fontFamily: VM.mono, color: VM.ink400, textTransform: 'uppercase', letterSpacing: 0.06, marginBottom: 6 }}>
            sreda · 28. maj · 14:08
          </div>
          <div style={{ fontSize: 26, fontWeight: 600, letterSpacing: -0.6, color: VM.ink900, lineHeight: 1.1 }}>
            Petar Janković
          </div>
          <div style={{ fontSize: 13, color: VM.ink500, marginTop: 4, display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 5,
              padding: '2px 8px', borderRadius: 4, background: VM.purpleBg, color: VM.purpleFg,
              fontFamily: VM.mono, fontSize: 11, fontWeight: 700, letterSpacing: 0.04,
            }}>
              <IcTruck size={11} sw={2}/>MOB 2
            </span>
            <span>Beograd rejon · sever</span>
          </div>
        </div>
        <button style={{
          width: 40, height: 40, borderRadius: 10, background: VM.surface,
          border: '1px solid ' + VM.ink200, position: 'relative',
          display: 'grid', placeItems: 'center', color: VM.ink700, cursor: 'pointer',
        }}>
          <IcBell size={18} />
          <span style={{ position: 'absolute', top: 7, right: 7, width: 8, height: 8, background: VM.red500, borderRadius: '50%', boxShadow: '0 0 0 2px ' + VM.surface }} />
        </button>
      </div>

      {/* Status chips */}
      <div style={{ padding: '12px 20px 0', display: 'flex', gap: 6, flexWrap: 'wrap' }}>
        {status === 'onway' && <Pill kind="onway" dot>Na putu · 0341/A</Pill>}
        {status === 'atbm' && <Pill kind="atbm" dot>Na BM 0341/A</Pill>}
        {status === 'free' && <Pill kind="free" dot>Slobodan · pauza</Pill>}
        <Pill kind="ok" dot>Live tracking</Pill>
        <Pill kind="info">Smena 06–22</Pill>
      </div>

      {/* Aktivna direktiva — istaknuta */}
      {hasDirective && status !== 'atbm' && (
        <div style={{
          margin: '16px 16px 0', borderRadius: 18, padding: 18,
          background: VM.ink950, color: 'white',
          backgroundImage: 'radial-gradient(circle at 100% 0%, oklch(0.59 0.215 25 / 0.28), transparent 60%)',
          position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
            <span style={{
              fontFamily: VM.mono, fontSize: 10.5, fontWeight: 700,
              padding: '3px 8px', borderRadius: 5,
              background: VM.red500, color: 'white', letterSpacing: 0.06,
            }}>HQ DIREKTIVA · HITNO</span>
            <span style={{ fontSize: 11, fontFamily: VM.mono, color: 'oklch(0.85 0.15 60)' }}>ETA 8 min</span>
          </div>
          <div style={{ fontSize: 19, fontWeight: 600, letterSpacing: -0.4, lineHeight: 1.2, marginBottom: 6 }}>
            Idi na BM 0341/A
          </div>
          <div style={{ fontSize: 12.5, color: 'oklch(1 0 0 / 0.7)', marginBottom: 10, fontFamily: VM.mono }}>
            OŠ „Vladislav Ribnikar" · Knez Mihailova 12 · Novi Beograd
          </div>
          <div style={{
            fontSize: 13, color: 'oklch(1 0 0 / 0.85)', lineHeight: 1.5,
            padding: '10px 12px', background: 'oklch(1 0 0 / 0.08)', borderRadius: 10,
            borderLeft: `3px solid ${VM.red500}`, marginBottom: 14,
          }}>
            <strong style={{ color: 'white', fontWeight: 600, display: 'block', marginBottom: 4 }}>Eskaliran incident · K2 kupovina glasova</strong>
            Anonimna dojava + STO IN javila: parkiran plavi kombi 30m od ulaza, dvojica daju kovertice ulazećim. Ne ulazi u sukob — snimi prilaz, podrška za posmatračicu, javi nazad.
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <button style={{
              flex: 1, height: 46, background: 'white', color: VM.ink950,
              border: 0, borderRadius: 11, fontFamily: VM.font, fontSize: 14, fontWeight: 600,
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
              cursor: 'pointer',
            }}>
              <IcNav size={16} sw={2.4}/>Otvori navigaciju
            </button>
            <button style={{
              flex: 1, height: 46, background: VM.success, color: 'white',
              border: 0, borderRadius: 11, fontFamily: VM.font, fontSize: 14, fontWeight: 600,
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
              cursor: 'pointer',
            }}>
              <IcCheck size={16} sw={2.6}/>Stigao sam
            </button>
          </div>
        </div>
      )}

      {/* "Na ovom BM" — pojavi se kad je atbm */}
      {status === 'atbm' && (
        <div style={{
          margin: '16px 16px 0', background: VM.surface,
          border: '1px solid ' + VM.ink200, borderRadius: 16, overflow: 'hidden',
        }}>
          <div style={{
            padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 10,
            borderBottom: '1px solid ' + VM.ink150, background: VM.red50,
          }}>
            <div style={{
              width: 30, height: 30, borderRadius: 8, background: VM.red500,
              color: 'white', display: 'grid', placeItems: 'center', flexShrink: 0,
            }}><IcFlag size={14}/></div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13.5, fontWeight: 600, color: VM.ink900 }}>BM 0341/A · OŠ V. Ribnikar</div>
              <div style={{ fontSize: 11, color: VM.ink500, fontFamily: VM.mono, marginTop: 1 }}>Novi Beograd · skor 87 · CRVENO</div>
            </div>
          </div>
          <div style={{ padding: '12px 16px' }}>
            <div style={{ fontSize: 10.5, fontFamily: VM.mono, color: VM.ink400, textTransform: 'uppercase', letterSpacing: 0.08, marginBottom: 10 }}>
              Ko je sve ovde · 4 osobe
            </div>
            {[
              { av: 'av-3', initials: 'MR', who: 'Milica Radović', role: 'STO IN · cela smena', org: 'crta', orgLabel: 'CRTA', status: 'SOS aktivan', statusColor: VM.red500 },
              { av: 'av-5', initials: 'AJ', who: 'Aleksa Jakić', role: 'STO IN · 14–22', org: 'crta', orgLabel: 'CRTA' },
              { av: 'av-6', initials: 'DK', who: 'Danica Kovač', role: 'STO OUT · prilaz BM', org: 'gns', orgLabel: 'GNS' },
              { av: 'av-4', initials: 'IM', who: 'Igor Marinković', role: 'EU posmatrač', org: 'tre', orgLabel: '3. strana' },
            ].map((p, i) => (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', gap: 10,
                padding: '8px 0', borderTop: i === 0 ? 0 : '1px solid ' + VM.ink150,
              }}>
                <div style={{
                  width: 32, height: 32, borderRadius: '50%',
                  background: ['oklch(0.93 0.05 245)', 'oklch(0.93 0.05 152)', 'oklch(0.93 0.05 25)', 'oklch(0.93 0.05 285)', 'oklch(0.93 0.05 80)', 'oklch(0.93 0.05 195)'][i % 6],
                  color: VM.ink800, display: 'grid', placeItems: 'center',
                  fontSize: 11, fontWeight: 700, flexShrink: 0,
                }}>{p.initials}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 600, color: VM.ink900, display: 'flex', alignItems: 'center', gap: 6 }}>
                    {p.who}
                    {p.status && <span style={{ fontSize: 10, fontFamily: VM.mono, color: p.statusColor, fontWeight: 700, letterSpacing: 0.04 }}>· {p.status}</span>}
                  </div>
                  <div style={{ fontSize: 11, color: VM.ink500, fontFamily: VM.mono, marginTop: 1 }}>{p.role}</div>
                </div>
                <Pill kind={p.org}>{p.orgLabel}</Pill>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Mini-mapa */}
      <div style={{ padding: '16px 16px 0' }}>
        <div style={{ fontSize: 10.5, fontFamily: VM.mono, color: VM.ink400, textTransform: 'uppercase', letterSpacing: 0.08, marginBottom: 10, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <span>Tvoj rejon · uživo</span>
          <span style={{ color: VM.red700, fontWeight: 600 }}>2 crvena BM</span>
        </div>
        <MiniMap status={status}/>
      </div>

      {/* Brze akcije */}
      <div style={{ padding: '16px 16px 0', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
        {[
          { ic: <IcAlert size={20}/>, l: 'Prijavi šta\nzatekneš', primary: true },
          { ic: <IcChat size={20}/>, l: 'Poruka\nHQ-u', badge: 2 },
          { ic: <IcEye size={20}/>, l: 'Detalji\nBM' },
        ].map((a, i) => (
          <button key={i} style={{
            position: 'relative', background: a.primary ? VM.ink950 : VM.surface,
            color: a.primary ? 'white' : VM.ink800,
            border: a.primary ? 'none' : '1px solid ' + VM.ink200,
            borderRadius: 12, padding: '14px 8px', cursor: 'pointer',
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
            fontFamily: VM.font, fontSize: 11.5, lineHeight: 1.3, fontWeight: 500,
            whiteSpace: 'pre-line', textAlign: 'center',
          }}>
            {a.ic}
            <span>{a.l}</span>
            {a.badge && <span style={{ position: 'absolute', top: 8, right: 12, background: VM.red500, color: 'white', fontSize: 10, fontWeight: 600, padding: '1px 5px', borderRadius: 10, fontFamily: VM.mono }}>{a.badge}</span>}
          </button>
        ))}
      </div>

      {/* Obilasci danas */}
      <div style={{ padding: '20px 20px 0' }}>
        <div style={{ fontSize: 10.5, fontFamily: VM.mono, color: VM.ink400, textTransform: 'uppercase', letterSpacing: 0.08, marginBottom: 10, display: 'flex', justifyContent: 'space-between' }}>
          <span>Obilasci · danas</span>
          <span>5 obavljenih · 1 u toku</span>
        </div>
        <div style={{ background: VM.surface, border: '1px solid ' + VM.ink200, borderRadius: 12, overflow: 'hidden' }}>
          {[
            { t: '14:08', bm: '0341/A', name: 'OŠ V. Ribnikar', state: 'onway', label: 'NA PUTU · 8 min ETA', color: VM.info, ic: <IcNav size={11}/> },
            { t: '13:18', bm: '0298/A', name: 'Dom kult. „B. Radičević"', state: 'done', label: 'OBAVLJEN · 14 min', color: VM.success, ic: <IcDone size={11}/> },
            { t: '12:42', bm: '0421/A', name: 'OŠ V. Nazor', state: 'done', label: 'OBAVLJEN · 18 min', color: VM.success, ic: <IcDone size={11}/> },
            { t: '11:54', bm: '0334/A', name: 'Gimn. J. J. Zmaj', state: 'done', label: 'OBAVLJEN · 9 min', color: VM.success, ic: <IcDone size={11}/> },
            { t: '10:12', bm: '0177/B', name: 'Gimn. „Sveti Sava"', state: 'done', label: 'OBAVLJEN · 22 min', color: VM.success, ic: <IcDone size={11}/> },
            { t: '07:14', bm: '0421/B', name: 'OŠ V. Nazor (drugo)', state: 'done', label: 'OTVARANJE · 6 min', color: VM.success, ic: <IcDone size={11}/> },
          ].map((r, i, arr) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 12,
              padding: '12px 14px', borderTop: i === 0 ? 0 : '1px solid ' + VM.ink150,
              background: r.state === 'onway' ? VM.infoBg : 'transparent',
            }}>
              <div style={{
                width: 28, height: 28, borderRadius: 7,
                background: r.state === 'onway' ? VM.info : VM.successBg,
                color: r.state === 'onway' ? 'white' : VM.success,
                display: 'grid', placeItems: 'center', flexShrink: 0,
              }}>{r.ic}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 600, color: VM.ink900 }}>
                  <span style={{ fontFamily: VM.mono, color: VM.ink700 }}>{r.bm}</span>
                  <span style={{ marginLeft: 6, fontWeight: 500 }}>{r.name}</span>
                </div>
                <div style={{ fontSize: 10.5, fontFamily: VM.mono, color: r.color, fontWeight: 700, marginTop: 2, letterSpacing: 0.04 }}>
                  {r.label}
                </div>
              </div>
              <div style={{ fontSize: 11, fontFamily: VM.mono, color: VM.ink500 }}>{r.t}</div>
            </div>
          ))}
        </div>
      </div>

      <div style={{ flex: 1, minHeight: 16 }} />

      {/* SOS sticky bottom */}
      <div style={{ padding: '16px 16px 38px' }}>
        <SOSBar />
      </div>
    </div>
  );
}

Object.assign(window, { MOBHome });