<footer class="site-footer">
  <div class="footer-top">
    <div class="footer-col">
      <p class="footer-brand">Nimbus</p>
      <p class="footer-tag">Infrastructure for modern teams.</p>
    </div>
    <div class="footer-col">
      <p class="footer-heading">Product</p>
      <a href="#">Features</a>
      <a href="#">Pricing</a>
      <a href="#">Changelog</a>
    </div>
    <div class="footer-col">
      <p class="footer-heading">Company</p>
      <a href="#">About</a>
      <a href="#">Careers</a>
      <a href="#">Blog</a>
    </div>
  </div>

  <div class="footer-bottom">
    <span class="footer-copy">© 2026 Nimbus, Inc.</span>
    <a class="status-link" id="statusLink" href="#" role="status">
      <span class="status-dot" id="statusDot"></span>
      <span id="statusText">Checking status…</span>
    </a>
  </div>
</footer>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f8fafc; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }

.site-footer { width: 460px; max-width: 100%; background: #0f172a; border-radius: 18px; padding: 28px 24px 18px; display: flex; flex-direction: column; gap: 22px; }

.footer-top { display: flex; gap: 30px; flex-wrap: wrap; }
.footer-col { display: flex; flex-direction: column; gap: 8px; min-width: 110px; }
.footer-brand { font-size: 14px; font-weight: 800; color: #f1f5f9; }
.footer-tag { font-size: 11.5px; color: #64748b; line-height: 1.6; max-width: 160px; }
.footer-heading { font-size: 10.5px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 2px; }
.footer-col a { font-size: 12px; color: #94a3b8; text-decoration: none; }
.footer-col a:hover { color: #e2e8f0; }

.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.08); }
.footer-copy { font-size: 11px; color: #475569; }

.status-link { display: flex; align-items: center; gap: 7px; text-decoration: none; font-size: 11.5px; font-weight: 600; color: #94a3b8; padding: 4px 6px; border-radius: 7px; }
.status-link:hover { background: rgba(255,255,255,0.05); color: #e2e8f0; }
.status-link:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }

.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #64748b; flex-shrink: 0; }
.status-dot.operational { background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,0.15); }
.status-dot.degraded { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,0.15); animation: pulse 1.6s ease infinite; }
.status-dot.outage { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.15); animation: pulse 1.2s ease infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }

const statusDot = document.getElementById('statusDot');
const statusText = document.getElementById('statusText');
const statusLink = document.getElementById('statusLink');

// A single lookup table maps a status KEY to everything the indicator needs
// to display — the dot's animation/color class and the exact label text.
// Every place a status could originate from (an initial fetch, a polling
// refresh, a webhook-driven update) only ever needs to know the status key;
// it never needs to separately decide what color or wording that implies.
const STATUS_CONFIG = {
  operational: { className: 'operational', text: 'All systems operational' },
  degraded: { className: 'degraded', text: 'Degraded performance' },
  outage: { className: 'outage', text: 'Service outage' },
  unknown: { className: '', text: 'Status unavailable' },
};

function applyStatus(key) {
  const config = STATUS_CONFIG[key] || STATUS_CONFIG.unknown;
  statusDot.className = 'status-dot ' + config.className;
  statusText.textContent = config.text;
  // Updating aria-label (not just the visible text) means the link's
  // accessible name changes too, so a screen reader user tabbing to the
  // footer hears the current status directly, not stale link text.
  statusLink.setAttribute('aria-label', 'System status: ' + config.text + '. Opens status page.');
}

// Simulates a real status-page API poll. In production, replace this with
// an actual fetch to your status provider's public API (or your own
// status endpoint), keeping the same resolve-with-a-status-key contract.
function fetchStatus() {
  return new Promise((resolve) => {
    setTimeout(() => {
      const outcomes = ['operational', 'operational', 'operational', 'degraded'];
      resolve(outcomes[Math.floor(Math.random() * outcomes.length)]);
    }, 700);
  });
}

async function refreshStatus() {
  try {
    const status = await fetchStatus();
    applyStatus(status);
  } catch (err) {
    // A failed status check is itself meaningful information — showing
    // "unknown" rather than silently leaving a stale previous status
    // displayed is the more honest choice when the check itself fails.
    applyStatus('unknown');
  }
}

refreshStatus();
// Poll periodically so the footer indicator stays current without requiring
// a full page reload — a real deployment would likely poll less frequently
// than this demo's shortened interval.
setInterval(refreshStatus, 15000);