export function StatTileCard() {
  const stats = [
    { label: "Monthly recurring", value: "12.4k", unit: "$", delta: "+24%", up: true },
    { label: "Active customers", value: "1,284", delta: "+8%", up: true },
    { label: "Churn this month", value: "2.1", unit: "%", delta: "-0.3pp", up: true },
    { label: "Lifetime value", value: "840", unit: "$", delta: "+12%", up: true },
  ];
  return (
    <div className="bg-[#FAFAF8] p-12 grid place-items-center">
      <div className="grid grid-cols-2 gap-px bg-[#1111111A] border border-[#1111111A] w-full max-w-md">
        {stats.map((s) => (
          <div key={s.label} className="bg-[#FAFAF8] p-5">
            <div
              className="font-mono text-[10px] uppercase tracking-[0.14em] text-[#6B6B66]"
            >
              {s.label}
            </div>
            <div
              className="mt-2 flex items-baseline gap-1 tracking-[-0.02em] text-[#111111]"
              style={{
                fontFamily: "'Instrument Serif', Georgia, serif",
                fontSize: 36,
                lineHeight: 1,
              }}
            >
              {s.unit && (
                <span className="font-mono text-[14px] text-[#6B6B66]">
                  {s.unit}
                </span>
              )}
              {s.value}
            </div>
            <div
              className="font-mono text-[11px] mt-2"
              style={{ color: s.up ? "#2A3D2F" : "#a13" }}
            >
              {s.delta}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
Stat Tile Card
