// ---------- Status ----------
function StatusPage() {
  const services = [
    { n: 'Web app', s: 'op', up: '99.99%' },
    { n: 'Mobile sync API', s: 'op', up: '99.98%' },
    { n: 'PDF generation', s: 'op', up: '99.95%' },
    { n: 'Email notifications', s: 'op', up: '99.99%' },
    { n: 'SMS notifications', s: 'degraded', up: '99.12%' },
    { n: 'White-label sub-domains', s: 'op', up: '99.97%' },
  ];
  const incidents = [
    { d: '2026.04.14', t: 'SMS delivery delay (Australia)', s: 'Resolved · 42 min', st: 'resolved' },
    { d: '2026.04.02', t: 'Photo upload slowdown on large files', s: 'Resolved · 1h 18m', st: 'resolved' },
    { d: '2026.03.21', t: 'Planned maintenance — sync engine upgrade', s: 'Completed · 28 min', st: 'maintenance' },
  ];
  const stMap = {
    op: { c: 'var(--ok)', l: 'Operational' },
    degraded: { c: 'var(--warn)', l: 'Degraded performance' },
    down: { c: 'var(--danger)', l: 'Outage' },
  };
  return (
    <SideRailLayout current="/status">
      <Block pad="56px 56px 32px">
        <Headline eyebrow="Status" title="System status." subtitle="Live service health and incident history." align="left" />
      </Block>
      <Block pad="0 56px 32px">
        <div style={{
          padding: '24px 28px', borderRadius: 10,
          background: 'color-mix(in oklab, var(--ok) 14%, var(--paper-2))',
          border: '1px solid color-mix(in oklab, var(--ok) 35%, transparent)',
          display: 'flex', alignItems: 'center', gap: 16, marginBottom: 32,
        }}>
          <span style={{ width: 10, height: 10, background: 'var(--ok)', borderRadius: '50%' }} />
          <div style={{ fontSize: 17, fontWeight: 500 }}>All core systems operational</div>
          <span style={{ flex: 1 }} />
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-3)' }}>Last check · 2 min ago</span>
        </div>
        <div style={{ borderRadius: 10, border: '1px solid var(--rule)', overflow: 'hidden' }}>
          {services.map((s, i) => {
            const st = stMap[s.s];
            return (
              <div key={s.n} style={{
                display: 'grid', gridTemplateColumns: '1fr auto 100px 90px', gap: 16,
                padding: '16px 20px',
                borderBottom: i < services.length - 1 ? '1px solid var(--rule)' : 'none',
                background: 'var(--card)', alignItems: 'center',
              }}>
                <div style={{ fontSize: 14, fontWeight: 500 }}>{s.n}</div>
                {/* 30-day bar */}
                <div style={{ display: 'flex', gap: 1.5 }}>
                  {Array.from({ length: 30 }).map((_, d) => (
                    <span key={d} style={{
                      width: 3, height: 14, borderRadius: 1,
                      background: (s.s === 'degraded' && d === 2) ? 'var(--warn)' : 'var(--ok)',
                      opacity: 0.9,
                    }} />
                  ))}
                </div>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-3)' }}>{s.up}</span>
                <span style={{
                  fontSize: 11, fontFamily: 'var(--font-mono)',
                  color: st.c, display: 'inline-flex', alignItems: 'center', gap: 5, justifyContent: 'flex-end',
                }}>
                  <span style={{ width: 6, height: 6, background: st.c, borderRadius: '50%' }} />
                  {st.l}
                </span>
              </div>
            );
          })}
        </div>
      </Block>
      <Block pad="16px 56px 72px">
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 14 }}>Recent incidents</div>
        {incidents.map(inc => (
          <div key={inc.d + inc.t} style={{
            display: 'grid', gridTemplateColumns: '120px 1fr auto', gap: 16,
            padding: '16px 0', borderTop: '1px solid var(--rule)', alignItems: 'center',
          }}>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-3)' }}>{inc.d}</span>
            <div style={{ fontSize: 14 }}>{inc.t}</div>
            <span style={{
              fontFamily: 'var(--font-mono)', fontSize: 11,
              color: inc.st === 'resolved' ? 'var(--ok)' : 'var(--ink-3)',
            }}>{inc.s}</span>
          </div>
        ))}
      </Block>
    </SideRailLayout>
  );
}

window.StatusPage = StatusPage;