// M2 — Home dashboard za STO posmatrača (Vigilo Mobile)
// Tri varijante različite metafore za prikaz izbornog dana:
//   A — Calm (status-first, miran, jedan glavni CTA)
//   B — Timeline (vertikalna linija dana, trenutni trenutak markiran)
//   C — Action grid (komandni centar, 4 velike akcije + kontekst)
//
// Konstanta konteksta: 14. maj 2026, 14:08, Jovana Đurović, STO IN, BM 0341/A,
// celu smenu 06-22, sledeći izveštaj 14:00 zakasnio 8 min (soft warning).

// ─────────────────────────────────────────────────────────────
// Vigilo tokens (mirror iz design system-a)
// ─────────────────────────────────────────────────────────────
const V = {
  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)',
  red50:   'oklch(0.972 0.012 25)',
  obsOk:    'oklch(0.620 0.155 152)',
  obsAlert: 'oklch(0.590 0.215 25)',
  obsDanger:'oklch(0.220 0.015 60)',
  obsIdle:  'oklch(0.700 0.010 60)',
  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)',
  info:     'oklch(0.580 0.155 245)',
  infoBg:   'oklch(0.965 0.025 245)',
  danger:   'oklch(0.590 0.215 25)',
  dangerBg: 'oklch(0.960 0.025 25)',
  font:     'Geist, -apple-system, system-ui, sans-serif',
  mono:     '"Geist Mono", ui-monospace, SF Mono, Menlo, monospace',
};

// ─────────────────────────────────────────────────────────────
// Tiny icon helpers (lucide-style strokes, 1.6px)
// ─────────────────────────────────────────────────────────────
const Ico = ({ d, size = 18, sw = 1.6, fill = 'none', stroke = 'currentColor', children }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke={stroke} strokeWidth={sw}
       strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
    {children || (d ? <path d={d} /> : null)}
  </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 IcClock    = (p) => <Ico {...p}><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></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 IcCamera   = (p) => <Ico {...p}><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></Ico>;
const IcFileText = (p) => <Ico {...p}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/></Ico>;
const IcSpark    = (p) => <Ico {...p}><path d="M12 3l1.9 5.6L19.5 10l-5.6 1.9L12 17.5l-1.9-5.6L4.5 10l5.6-1.4z"/></Ico>;
const IcMore     = (p) => <Ico {...p}><circle cx="12" cy="12" r="1.5" fill="currentColor"/><circle cx="19" cy="12" r="1.5" fill="currentColor"/><circle cx="5" cy="12" r="1.5" fill="currentColor"/></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 IcCheckCircle = (p) => <Ico {...p}><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></Ico>;

// ─────────────────────────────────────────────────────────────
// Reusable atoms
// ─────────────────────────────────────────────────────────────
function Pin({ kind = 'ok', size = 8 }) {
  const color = kind === 'ok' ? V.obsOk : kind === 'alert' ? V.obsAlert : kind === 'danger' ? V.obsDanger : V.obsIdle;
  return <span style={{ width: size, height: size, borderRadius: '50%', background: color, display: 'inline-block', flexShrink: 0 }} />;
}

function Pill({ kind = 'neutral', children, dot = false, icon = null }) {
  const styles = {
    neutral: { bg: V.ink100, fg: V.ink700, dotC: V.ink400 },
    ok:      { bg: V.successBg, fg: 'oklch(0.45 0.155 152)', dotC: V.success },
    warn:    { bg: V.warningBg, fg: 'oklch(0.45 0.15 70)', dotC: V.warning },
    danger:  { bg: V.dangerBg,  fg: 'oklch(0.48 0.18 25)',  dotC: V.danger },
    info:    { bg: V.infoBg,    fg: 'oklch(0.45 0.155 245)', dotC: V.info },
    solid:   { bg: V.ink950, fg: 'white', dotC: 'white' },
  }[kind];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 5,
      background: styles.bg, color: styles.fg,
      fontSize: 11.5, fontWeight: 500, padding: '3px 8px',
      borderRadius: 6, lineHeight: 1.45,
    }}>
      {dot && <span style={{ width: 5, height: 5, borderRadius: '50%', background: styles.dotC }} />}
      {icon}
      {children}
    </span>
  );
}

// SOS — drži-pritiskaj komponenta, vizuelno konzistentna preko varijanata
function SOSBar() {
  const [pressed, setPressed] = React.useState(0); // 0..1 progress
  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: V.red500, color: 'white', border: 0,
        borderRadius: 16, overflow: 'hidden', cursor: 'pointer',
        fontFamily: V.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',
        transform: active ? 'scale(0.985)' : 'none',
        transition: 'transform 80ms',
      }}>
      <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>
  );
}

// Status header — konzistentan preko varijanata
function HeaderBlock({ name = 'Jovana', subtitle, status = 'ok', dateLine = 'sreda · 14. maj · 14:08' }) {
  return (
    <div style={{ padding: '8px 20px 4px', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
      <div>
        <div style={{ fontSize: 11, fontFamily: V.mono, color: V.ink400, textTransform: 'uppercase', letterSpacing: 0.06, marginBottom: 6 }}>
          {dateLine}
        </div>
        <div style={{ fontSize: 26, fontWeight: 600, letterSpacing: -0.6, color: V.ink900, lineHeight: 1.1 }}>
          Dobar dan, {name}
        </div>
        {subtitle && <div style={{ fontSize: 13.5, color: V.ink500, marginTop: 4 }}>{subtitle}</div>}
      </div>
      <button style={{
        width: 40, height: 40, borderRadius: 10, background: V.surface,
        border: '1px solid ' + V.ink200, position: 'relative',
        display: 'grid', placeItems: 'center', color: V.ink700, cursor: 'pointer',
      }}>
        <IcBell size={18} />
        <span style={{ position: 'absolute', top: 7, right: 7, width: 8, height: 8, background: V.red500, borderRadius: '50%', boxShadow: '0 0 0 2px ' + V.surface }} />
      </button>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// VARIJANTA A — Calm (status-first)
// ═════════════════════════════════════════════════════════════
function HomeCalm() {
  return (
    <div style={{ background: V.paper, height: '100%', display: 'flex', flexDirection: 'column', fontFamily: V.font, color: V.ink900 }}>
      <div style={{ paddingTop: 56 }} />
      <HeaderBlock subtitle="STO IN · BM 0341/A · cela smena"/>

      <div style={{ padding: '12px 20px 0', display: 'flex', gap: 6, flexWrap: 'wrap' }}>
        <Pill kind="ok" dot>Aktivna na BM</Pill>
        <Pill kind="warn" dot>Izveštaj kasni 8 min</Pill>
      </div>

      {/* Sledeća akcija — najvažnija kartica */}
      <div style={{ margin: '16px 16px 0', borderRadius: 18, padding: 20,
        background: V.ink950, color: 'white',
        backgroundImage: 'radial-gradient(circle at 100% 0%, oklch(0.59 0.215 25 / 0.22), transparent 55%)',
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 14 }}>
          <div>
            <div style={{ fontSize: 10.5, fontFamily: V.mono, textTransform: 'uppercase', letterSpacing: 0.08, opacity: 0.55, marginBottom: 6 }}>Sledeći izveštaj</div>
            <div style={{ fontSize: 15, opacity: 0.85 }}>Izlaznost · 14:00</div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontSize: 32, fontWeight: 600, letterSpacing: -0.8, lineHeight: 1, color: 'oklch(0.85 0.15 60)' }}>+8<span style={{ fontSize: 18, opacity: 0.65, marginLeft: 2 }}>min</span></div>
            <div style={{ fontSize: 11, opacity: 0.5, marginTop: 4, fontFamily: V.mono }}>kasni</div>
          </div>
        </div>
        <div style={{ fontSize: 12.5, opacity: 0.65, lineHeight: 1.5, marginBottom: 16, paddingTop: 14, borderTop: '1px solid oklch(1 0 0 / 0.08)' }}>
          Soft warning — možeš poslati i sada. Sistem će označiti kao zakašnjelo, ne odbiti.
        </div>
        <button style={{
          width: '100%', height: 46, background: 'white', color: V.ink950,
          border: 0, borderRadius: 11, fontFamily: V.font, fontSize: 15, fontWeight: 600,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          cursor: 'pointer',
        }}>
          Otvori formu izveštaja <IcArrow size={16} sw={2.4}/>
        </button>
      </div>

      {/* BM kontekst */}
      <div style={{ margin: '12px 16px 0', background: V.surface, border: '1px solid ' + V.ink200, borderRadius: 14, padding: 16 }}>
        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 12 }}>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 10.5, fontFamily: V.mono, color: V.ink400, textTransform: 'uppercase', letterSpacing: 0.06, marginBottom: 4 }}>Biračko mesto</div>
            <div style={{ fontSize: 16, fontWeight: 600, color: V.ink900, lineHeight: 1.25, marginBottom: 2 }}>OŠ „Vladislav Ribnikar“</div>
            <div style={{ fontSize: 12.5, color: V.ink500 }}>BM 0341/A · Knez Mihailova 12, N. Beograd</div>
          </div>
          <button style={{
            width: 44, height: 44, borderRadius: 11, background: V.ink950,
            border: 0, display: 'grid', placeItems: 'center', color: 'white', cursor: 'pointer',
          }}><IcNav size={18} sw={2}/></button>
        </div>
        <div style={{ display: 'flex', gap: 14, marginTop: 14, paddingTop: 14, borderTop: '1px solid ' + V.ink150 }}>
          <div>
            <div style={{ fontSize: 10.5, fontFamily: V.mono, color: V.ink400, textTransform: 'uppercase' }}>Izlaznost</div>
            <div style={{ fontSize: 19, fontWeight: 600, color: V.ink900, letterSpacing: -0.4, lineHeight: 1.1, marginTop: 2 }}>42%</div>
          </div>
          <div>
            <div style={{ fontSize: 10.5, fontFamily: V.mono, color: V.ink400, textTransform: 'uppercase' }}>Izveštaja</div>
            <div style={{ fontSize: 19, fontWeight: 600, color: V.ink900, letterSpacing: -0.4, lineHeight: 1.1, marginTop: 2 }}>3<span style={{ fontSize: 12, opacity: 0.4, fontWeight: 500 }}> / 8</span></div>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 10.5, fontFamily: V.mono, color: V.ink400, textTransform: 'uppercase' }}>Koordinator</div>
            <div style={{ fontSize: 13, color: V.ink900, marginTop: 5, fontWeight: 500 }}>M. Stojanović</div>
          </div>
        </div>
      </div>

      {/* Today timeline strip */}
      <div style={{ padding: '20px 20px 0' }}>
        <div style={{ fontSize: 10.5, fontFamily: V.mono, color: V.ink400, textTransform: 'uppercase', letterSpacing: 0.08, marginBottom: 10 }}>Danas · raspored javljanja</div>
        <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
          {[
            { t: '08', done: true }, { t: '10', done: true }, { t: '12', done: true },
            { t: '14', now: true }, { t: '16' }, { t: '18' }, { t: '20' }, { t: 'ZAP', closing: true },
          ].map((s, i) => (
            <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
              <div style={{
                width: '100%', height: 4, borderRadius: 2,
                background: s.done ? V.obsOk : s.now ? V.warning : V.ink200,
              }} />
              <div style={{ fontSize: 10, fontFamily: V.mono, color: s.now ? V.ink900 : V.ink400, fontWeight: s.now ? 600 : 400 }}>{s.t}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Quick actions */}
      <div style={{ padding: '20px 16px 0', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
        {[
          { ic: <IcAlert size={20}/>, l: 'Prijavi\nincident' },
          { ic: <IcSpark size={20}/>, l: 'Pitaj\nZmAI' },
          { ic: <IcChat size={20}/>, l: 'Poruke', badge: 2 },
        ].map((a, i) => (
          <button key={i} style={{
            position: 'relative', background: V.surface, border: '1px solid ' + V.ink200,
            borderRadius: 12, padding: '14px 8px', cursor: 'pointer',
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
            color: V.ink800, fontFamily: V.font, fontSize: 12, 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: V.red500, color: 'white', fontSize: 10, fontWeight: 600, padding: '1px 5px', borderRadius: 10, fontFamily: V.mono }}>{a.badge}</span>}
          </button>
        ))}
      </div>

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

// ═════════════════════════════════════════════════════════════
// VARIJANTA B — Timeline-first
// ═════════════════════════════════════════════════════════════
function HomeTimeline() {
  const events = [
    { time: '06:00', label: 'Otvaranje BM', state: 'done', detail: 'Provera kabina i kutije, prisustvo svih članova BO' },
    { time: '08:00', label: 'Izveštaj — otvaranje', state: 'done', detail: 'Poslat · sve uredu' },
    { time: '10:00', label: 'Izveštaj — izlaznost', state: 'done', detail: '12% · poslat 10:04' },
    { time: '12:00', label: 'Izveštaj — izlaznost', state: 'done', detail: '28% · poslat 12:01' },
    { time: '14:00', label: 'Izveštaj — izlaznost', state: 'now', detail: 'Kasni 8 min · soft warning', cta: true },
    { time: '16:00', label: 'Izveštaj — izlaznost', state: 'next' },
    { time: '18:00', label: 'Izveštaj — izlaznost', state: 'next' },
    { time: '20:00', label: 'Izveštaj — pred zatvaranje', state: 'next' },
    { time: '22:00', label: 'Zatvaranje + zapisnik', state: 'next', detail: 'OCR slikanje zapisnika', closing: true },
  ];
  return (
    <div style={{ background: V.paper, height: '100%', display: 'flex', flexDirection: 'column', fontFamily: V.font, color: V.ink900 }}>
      <div style={{ paddingTop: 56 }} />
      <HeaderBlock subtitle="STO IN · BM 0341/A · cela smena"/>

      <div style={{ padding: '12px 20px 0', display: 'flex', gap: 6 }}>
        <Pill kind="ok" dot>Aktivna na BM</Pill>
        <Pill kind="warn" dot>Kasniš 8 min</Pill>
      </div>

      {/* BM minimalni strip */}
      <div style={{ margin: '14px 16px 0', padding: '12px 14px', background: V.surface, border: '1px solid ' + V.ink200, borderRadius: 12, display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{ width: 36, height: 36, borderRadius: 9, background: V.ink100, display: 'grid', placeItems: 'center', color: V.ink700 }}><IcMap size={18}/></div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 13.5, fontWeight: 600, color: V.ink900, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>OŠ „Vladislav Ribnikar“ · 0341/A</div>
          <div style={{ fontSize: 11, color: V.ink500, fontFamily: V.mono }}>Izlaznost 42% · VPM 28.2 · 3/8 izv.</div>
        </div>
        <IcArrow size={16} sw={2}/>
      </div>

      <div style={{ padding: '20px 20px 8px', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <div style={{ fontSize: 17, fontWeight: 600, letterSpacing: -0.2, color: V.ink900 }}>Današnja smena</div>
        <div style={{ fontSize: 11, fontFamily: V.mono, color: V.ink400, textTransform: 'uppercase', letterSpacing: 0.06 }}>06:00 — 22:00</div>
      </div>

      {/* Vertikalna linija */}
      <div style={{ flex: 1, overflowY: 'auto', padding: '0 20px 12px', position: 'relative' }}>
        <div style={{ position: 'relative', paddingLeft: 36 }}>
          <div style={{ position: 'absolute', left: 17, top: 6, bottom: 6, width: 2, background: V.ink150 }} />
          {events.map((e, i) => {
            const isDone = e.state === 'done';
            const isNow  = e.state === 'now';
            return (
              <div key={i} style={{ position: 'relative', paddingBottom: i === events.length - 1 ? 0 : 16 }}>
                <div style={{
                  position: 'absolute', left: -28, top: 4,
                  width: 18, height: 18, borderRadius: '50%',
                  background: isDone ? V.obsOk : isNow ? V.warning : V.surface,
                  border: isNow ? `2px solid ${V.warning}` : isDone ? `2px solid ${V.obsOk}` : `2px solid ${V.ink200}`,
                  boxShadow: isNow ? '0 0 0 4px oklch(0.745 0.15 70 / 0.18)' : 'none',
                  display: 'grid', placeItems: 'center',
                }}>
                  {isDone && <IcCheck size={11} sw={3} stroke="white"/>}
                  {isNow && <span style={{ width: 6, height: 6, background: 'white', borderRadius: '50%' }} />}
                </div>
                <div style={{
                  background: isNow ? V.ink950 : V.surface,
                  color: isNow ? 'white' : V.ink900,
                  border: isNow ? 'none' : '1px solid ' + V.ink200,
                  borderRadius: 12, padding: '10px 12px',
                  opacity: e.state === 'next' && !e.closing ? 0.7 : 1,
                }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 8 }}>
                    <div style={{ fontSize: 13.5, fontWeight: 600, letterSpacing: -0.1 }}>{e.label}</div>
                    <div style={{ fontSize: 11, fontFamily: V.mono, opacity: isNow ? 0.65 : 0.5, fontWeight: 600 }}>{e.time}</div>
                  </div>
                  {e.detail && <div style={{ fontSize: 11.5, marginTop: 4, opacity: isNow ? 0.7 : 0.55, lineHeight: 1.4 }}>{e.detail}</div>}
                  {e.cta && (
                    <button style={{
                      marginTop: 10, width: '100%', height: 36, background: 'white', color: V.ink950,
                      border: 0, borderRadius: 8, fontFamily: V.font, fontSize: 13, fontWeight: 600,
                      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, cursor: 'pointer',
                    }}>
                      Otvori formu izveštaja <IcArrow size={14} sw={2.4}/>
                    </button>
                  )}
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* Bottom bar — uvek dostupni: chat, incident, SOS */}
      <div style={{ borderTop: '1px solid ' + V.ink200, background: V.surface, padding: '10px 16px 34px' }}>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          <button style={{
            width: 44, height: 44, borderRadius: 11, background: V.ink100, border: 0,
            display: 'grid', placeItems: 'center', color: V.ink800, cursor: 'pointer', flexShrink: 0,
          }}><IcSpark size={20}/></button>
          <button style={{
            width: 44, height: 44, borderRadius: 11, background: V.ink100, border: 0,
            display: 'grid', placeItems: 'center', color: V.ink800, cursor: 'pointer', flexShrink: 0, position: 'relative',
          }}>
            <IcChat size={20}/>
            <span style={{ position: 'absolute', top: 6, right: 6, width: 8, height: 8, background: V.red500, borderRadius: '50%' }} />
          </button>
          <button style={{
            flex: 1, height: 44, background: V.red500, color: 'white', border: 0, borderRadius: 11,
            fontFamily: V.font, fontSize: 14, fontWeight: 600, cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            boxShadow: '0 6px 14px -3px oklch(0.59 0.215 25 / 0.35)',
          }}>
            <IcSiren size={18} sw={2}/> Drži za SOS
          </button>
        </div>
      </div>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// VARIJANTA C — Action grid (komandni centar)
// ═════════════════════════════════════════════════════════════
function HomeActionGrid() {
  const tiles = [
    {
      title: 'Pošalji izveštaj',
      sub:   'Izlaznost · 14:00',
      icon:  <IcFileText size={22}/>,
      accent: V.warning,
      badge: 'Kasni 8 min',
      primary: true,
    },
    {
      title: 'Prijavi incident',
      sub:   'Sistem klasifikuje',
      icon:  <IcAlert size={22}/>,
      accent: V.ink400,
    },
    {
      title: 'Pitaj ZmAI',
      sub:   'Pravila i procedure',
      icon:  <IcSpark size={22}/>,
      accent: V.info,
    },
    {
      title: 'Slikaj zapisnik',
      sub:   'OCR · veče',
      icon:  <IcCamera size={22}/>,
      accent: V.ink400,
      disabled: true,
    },
  ];

  return (
    <div style={{ background: V.paper, height: '100%', display: 'flex', flexDirection: 'column', fontFamily: V.font, color: V.ink900 }}>
      <div style={{ paddingTop: 56 }} />
      <HeaderBlock subtitle="STO IN · BM 0341/A"/>

      {/* BM context strip */}
      <div style={{ margin: '14px 16px 0', padding: '14px 16px', background: V.surface, border: '1px solid ' + V.ink200, borderRadius: 14, display: 'flex', alignItems: 'center', gap: 12 }}>
        <Pin kind="ok" size={10}/>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 14, fontWeight: 600, color: V.ink900, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>OŠ „Vladislav Ribnikar“</div>
          <div style={{ fontSize: 11.5, color: V.ink500, fontFamily: V.mono, marginTop: 2 }}>BM 0341/A · NOVI BEOGRAD · cela smena</div>
        </div>
        <button style={{
          width: 36, height: 36, borderRadius: 10, background: V.ink100,
          border: 0, display: 'grid', placeItems: 'center', color: V.ink700, cursor: 'pointer',
        }}><IcNav size={16} sw={2}/></button>
      </div>

      {/* Section label */}
      <div style={{ padding: '20px 20px 10px', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <div style={{ fontSize: 11, fontFamily: V.mono, color: V.ink400, textTransform: 'uppercase', letterSpacing: 0.08 }}>Šta sada</div>
        <div style={{ fontSize: 11, fontFamily: V.mono, color: V.ink500 }}>14:08</div>
      </div>

      {/* 2x2 grid */}
      <div style={{ padding: '0 16px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        {tiles.map((t, i) => (
          <button key={i} disabled={t.disabled} style={{
            position: 'relative',
            background: t.primary ? V.ink950 : V.surface,
            color: t.primary ? 'white' : V.ink900,
            border: t.primary ? 'none' : '1px solid ' + V.ink200,
            borderRadius: 14, padding: '16px 14px 16px',
            textAlign: 'left', cursor: t.disabled ? 'default' : 'pointer',
            opacity: t.disabled ? 0.5 : 1,
            minHeight: 130, display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            fontFamily: V.font,
            backgroundImage: t.primary ? 'radial-gradient(circle at 100% 0%, oklch(0.59 0.215 25 / 0.22), transparent 60%)' : 'none',
          }}>
            <div style={{
              width: 38, height: 38, borderRadius: 10,
              background: t.primary ? 'oklch(1 0 0 / 0.1)' : V.ink75,
              color: t.primary ? 'white' : V.ink800,
              display: 'grid', placeItems: 'center',
            }}>{t.icon}</div>
            <div>
              <div style={{ fontSize: 15, fontWeight: 600, letterSpacing: -0.2, marginBottom: 2 }}>{t.title}</div>
              <div style={{ fontSize: 11.5, opacity: t.primary ? 0.6 : 0.55, fontFamily: V.mono, letterSpacing: 0.02 }}>{t.sub}</div>
            </div>
            {t.badge && (
              <div style={{
                position: 'absolute', top: 12, right: 12,
                background: t.primary ? 'oklch(0.745 0.15 70)' : V.warningBg,
                color: t.primary ? V.ink950 : 'oklch(0.45 0.15 70)',
                fontSize: 10.5, fontWeight: 600, padding: '3px 7px', borderRadius: 5,
                fontFamily: V.font,
              }}>{t.badge}</div>
            )}
          </button>
        ))}
      </div>

      {/* Today schedule mini */}
      <div style={{ padding: '20px 20px 0' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12 }}>
          <div style={{ fontSize: 11, fontFamily: V.mono, color: V.ink400, textTransform: 'uppercase', letterSpacing: 0.08 }}>Smena 06—22</div>
          <div style={{ fontSize: 11.5, color: V.ink500 }}>3 od 8 javljanja</div>
        </div>
        <div style={{ display: 'flex', gap: 6 }}>
          {['08', '10', '12', '14', '16', '18', '20', 'ZAP'].map((t, i) => {
            const done = i < 3;
            const now = i === 3;
            return (
              <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5 }}>
                <div style={{
                  width: 22, height: 22, borderRadius: '50%',
                  background: done ? V.obsOk : now ? V.warning : V.ink100,
                  border: now ? `2px solid ${V.warning}` : 'none',
                  boxShadow: now ? '0 0 0 4px oklch(0.745 0.15 70 / 0.18)' : 'none',
                  display: 'grid', placeItems: 'center', color: 'white',
                }}>
                  {done && <IcCheck size={11} sw={3}/>}
                  {now && <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'white' }}/>}
                </div>
                <div style={{ fontSize: 10, fontFamily: V.mono, color: now ? V.ink900 : V.ink400, fontWeight: now ? 600 : 400 }}>{t}</div>
              </div>
            );
          })}
        </div>
      </div>

      {/* Communication strip */}
      <div style={{ padding: '20px 16px 0', display: 'flex', gap: 8 }}>
        <button style={{
          flex: 1, height: 44, background: V.surface, border: '1px solid ' + V.ink200, borderRadius: 11,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, color: V.ink800,
          fontFamily: V.font, fontSize: 13, fontWeight: 500, cursor: 'pointer', position: 'relative',
        }}>
          <IcChat size={17}/> Poruke
          <span style={{ position: 'absolute', top: 7, right: 14, width: 7, height: 7, background: V.red500, borderRadius: '50%' }}/>
        </button>
        <button style={{
          flex: 1, height: 44, background: V.surface, border: '1px solid ' + V.ink200, borderRadius: 11,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, color: V.ink800,
          fontFamily: V.font, fontSize: 13, fontWeight: 500, cursor: 'pointer',
        }}>
          <IcPhone size={17}/> Pozovi M. Stojanović
        </button>
      </div>

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

Object.assign(window, { HomeCalm, HomeTimeline, HomeActionGrid });