// page-status.jsx — System status page
// Pre-launch: shows our operational commitments + live status comes online with the product.

function StatusPage() {
  return (
    <window.PageShell
      active="Status"
      eyebrow="009 / STATUS"
      title="The status board lights up at launch."
      subtitle="Campsite Sniper is in private beta. Live probe latency, regional health, and the public incident log come online when the product ships. Below: what we'll be measuring against."
    >
      <PreLaunchBanner/>
      <CommitmentGrid/>
      <WhatWillShowHere/>
    </window.PageShell>
  );
}

function PreLaunchBanner() {
  const T = window.useTokens();
  return (
    <window.PageSection dense>
      <div style={{
        border: `1px solid ${T.amber}`, background: T.bg3,
        padding: '32px 28px',
        display: 'flex', flexDirection: 'column', gap: 14,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <span style={{ width: 10, height: 10, borderRadius: '50%',
            background: T.amber, boxShadow: `0 0 10px ${T.amber}`,
            animation: 'shell-led 1.6s ease-in-out infinite' }}/>
          <span style={{ fontFamily: T.mono, fontSize: 11, letterSpacing: 1.8,
            color: T.amber, fontWeight: 600 }}>
            PRIVATE BETA · NO PUBLIC TRAFFIC YET
          </span>
        </div>
        <div style={{ fontFamily: T.mono, fontSize: 22, fontWeight: 600,
          color: T.text, letterSpacing: '-0.01em' }}>
          Live operational metrics arrive with launch.
        </div>
        <div style={{ fontFamily: T.mono, fontSize: 13, color: T.textMute,
          lineHeight: 1.6, maxWidth: 640 }}>
          We don't post fake uptime numbers. There's no production traffic to measure
          against. When the product is live, this page becomes the real-time view of
          probe queues, alert delivery, regional health, and every incident — including
          the embarrassing ones.
        </div>
      </div>
    </window.PageSection>
  );
}

function CommitmentGrid() {
  const T = window.useTokens();
  const COMMITMENTS = [
    ['SCAN CADENCE', 'Hot inventory gets the fastest cadence we run. Exact intervals are tuned continuously and not published.'],
    ['DELIVERY CHANNELS', 'Push notifications on every active watch. Optional email. SMS will ship only when full TCPA / 10DLC compliance is in place.'],
    ['REC.GOV POSTURE', 'robots.txt respected. Probes identify themselves with a unique User-Agent. Rate-limited. Back off on 429.'],
    ['PRIVACY', 'No data brokers. No cross-site tracking. Recreation.gov credentials never stored. Account exists to deliver alerts.'],
    ['TARGET SLO (POST-LAUNCH)', 'Sub-second push delivery from detection. Stale-alert rate kept under 10% of total alerts. Public incident log starts day one.'],
    ['REFUND', '30-day full refund window, prorated to the day. One click in account settings or one email — no forms, no chat bot.'],
  ];
  return (
    <window.PageSection>
      <div style={{ fontFamily: T.mono, fontSize: 11, letterSpacing: 2,
        color: T.amber, marginBottom: 16 }}>─── OPERATIONAL COMMITMENTS ───</div>
      <h2 style={{
        fontFamily: T.mono, fontSize: 'clamp(28px, 3.5vw, 40px)', fontWeight: 600,
        letterSpacing: '-0.01em', margin: '0 0 32px',
        textTransform: 'uppercase', color: T.text,
      }}>What we'll measure against.</h2>
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
        gap: 1, background: T.border, border: `1px solid ${T.border}`,
      }}>
        {COMMITMENTS.map(([label, body]) => (
          <div key={label} style={{ background: T.bg3, padding: '24px 22px' }}>
            <div style={{ fontFamily: T.mono, fontSize: 10, letterSpacing: 1.6,
              color: T.amber, marginBottom: 10, fontWeight: 600 }}>
              {label}
            </div>
            <div style={{ fontFamily: T.mono, fontSize: 12.5, color: T.textMute,
              lineHeight: 1.65 }}>
              {body}
            </div>
          </div>
        ))}
      </div>
    </window.PageSection>
  );
}

function WhatWillShowHere() {
  const T = window.useTokens();
  return (
    <window.PageSection>
      <div style={{ fontFamily: T.mono, fontSize: 11, letterSpacing: 2,
        color: T.amber, marginBottom: 16 }}>─── ON LAUNCH DAY ───</div>
      <h2 style={{
        fontFamily: T.mono, fontSize: 'clamp(28px, 3.5vw, 40px)', fontWeight: 600,
        letterSpacing: '-0.01em', margin: '0 0 32px',
        textTransform: 'uppercase', color: T.text,
      }}>What this page becomes.</h2>
      <div style={{
        border: `1px solid ${T.border}`, background: T.bg3,
        padding: '28px 32px',
        fontFamily: T.mono, fontSize: 13, color: T.textMute,
        lineHeight: 1.8,
      }}>
        <ul style={{ margin: 0, paddingLeft: 20, listStyle: '"› "' }}>
          <li>Live primary uptime gauge with rolling 90-day window.</li>
          <li>Subsystem health (probe queue, alert dispatch, push, dashboard, billing, Recreation.gov bridge).</li>
          <li>Per-region probe latency and active probe count.</li>
          <li>Incident log with full root-cause writeups — major and minor.</li>
          <li>Status webhook and RSS feed so you can wire it into your own monitoring.</li>
        </ul>
      </div>
    </window.PageSection>
  );
}

window.StatusPage = StatusPage;