const REGIONS = [
  { id: "iad", name: "us-east", uptime: 100 },
  { id: "fra", name: "eu-central", uptime: 99.97 },
  { id: "hkg", name: "ap-east", uptime: 99.82, warn: true },
  { id: "syd", name: "ap-south", uptime: 100 },
];

const BARS = 28;

export function ServiceStatusCard() {
  return (
    <div className="bg-[#FAFAF8] antialiased px-10 py-14 grid place-items-center text-[#111111]">
      <article className="group w-full max-w-md rounded-xl border border-[#1111111A] bg-white p-5 hover:shadow-[0_24px_60px_-30px_rgba(17,17,17,0.18)] transition-shadow">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <span className="relative flex h-2 w-2">
              <span className="absolute inset-0 rounded-full bg-emerald-500 animate-ping" />
              <span className="relative h-2 w-2 rounded-full bg-emerald-500" />
            </span>
            <span className="text-[14px] font-medium">All systems operational</span>
          </div>
          <span className="font-mono text-[10.5px] uppercase tracking-[0.18em] text-[#6B6B66]">
            Live · 1m ago
          </span>
        </div>

        <ul className="mt-4 divide-y divide-[#1111111A] border-t border-[#1111111A]">
          {REGIONS.map((r) => (
            <li key={r.id} className="flex items-center gap-3 py-3">
              <span className="font-mono text-[10px] uppercase tracking-[0.18em] text-[#6B6B66] w-16">
                {r.id}
              </span>
              <span className="text-[13px] font-medium w-24">{r.name}</span>
              {/* Bars */}
              <div className="flex items-end gap-[2px] h-4 flex-1">
                {Array.from({ length: BARS }).map((_, i) => {
                  const failAt = r.warn ? BARS - 3 - (i % 4 === 0 ? 1 : 0) : -1;
                  const isFail = r.warn && i >= failAt && i < failAt + 2;
                  return (
                    <span
                      key={i}
                      className={`w-[3px] rounded-sm ${
                        isFail ? "bg-amber-500" : "bg-emerald-500"
                      }`}
                      style={{
                        height: `${30 + (i % 5) * 14}%`,
                        opacity: 0.55 + (i / BARS) * 0.45,
                      }}
                    />
                  );
                })}
              </div>
              <span
                className={`ml-2 font-mono text-[11.5px] tabular-nums ${
                  r.warn ? "text-amber-700" : "text-emerald-700"
                }`}
              >
                {r.uptime}%
              </span>
            </li>
          ))}
        </ul>

        {/* Footer */}
        <div className="mt-4 flex items-center justify-between border-t border-[#1111111A] pt-3 text-[11.5px]">
          <span className="text-[#6B6B66]">90-day uptime · 99.94%</span>
          <a
            href="#"
            className="inline-flex items-center gap-1 font-medium hover:underline underline-offset-2"
          >
            History
            <span aria-hidden className="transition-transform group-hover:translate-x-0.5">→</span>
          </a>
        </div>
      </article>
    </div>
  );
}
Service Status Card
