export function MetricTrendCard() {
  // Sparkline path
  const points = [12, 18, 14, 22, 19, 26, 24, 30, 28, 36, 34, 42];
  const max = 44;
  const w = 220;
  const h = 60;
  const step = w / (points.length - 1);
  const linePath = points
    .map((p, i) => `${i === 0 ? "M" : "L"} ${i * step} ${h - (p / max) * h}`)
    .join(" ");
  const areaPath = `${linePath} L ${w} ${h} L 0 ${h} Z`;

  return (
    <div className="bg-[#FAFAF8] antialiased px-10 py-14 grid place-items-center text-[#111111]">
      <article className="group w-full max-w-sm rounded-xl border border-[#1111111A] bg-white p-6 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="grid h-8 w-8 place-items-center rounded-lg bg-[#2A3D2F]/10 text-[#2A3D2F]"
              aria-hidden
            >
              ⌁
            </span>
            <span className="font-mono text-[11px] uppercase tracking-[0.18em] text-[#6B6B66]">
              Monthly active
            </span>
          </div>
          <span className="inline-flex items-center gap-1 text-[11px] font-mono text-emerald-700 bg-emerald-50 px-1.5 py-0.5 rounded">
            ▲ 12.4%
          </span>
        </div>

        <div className="mt-3 flex items-baseline gap-2">
          <span
            className="text-[44px] leading-none tracking-tight"
            style={{ fontFamily: "var(--font-instrument-serif), Georgia, serif" }}
          >
            42,318
          </span>
          <span className="text-[12px] text-[#6B6B66] font-mono">/ users</span>
        </div>
        <p className="mt-1 text-[12px] text-[#6B6B66]">
          vs. <span className="font-mono">37,652</span> last month
        </p>

        {/* Sparkline */}
        <div className="mt-5">
          <svg viewBox={`0 0 ${w} ${h}`} className="w-full h-16 overflow-visible">
            <defs>
              <linearGradient id="metric-area" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0%" stopColor="#2A3D2F" stopOpacity="0.25" />
                <stop offset="100%" stopColor="#2A3D2F" stopOpacity="0" />
              </linearGradient>
            </defs>
            <path d={areaPath} fill="url(#metric-area)" />
            <path
              d={linePath}
              fill="none"
              stroke="#2A3D2F"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
              style={{
                strokeDasharray: 600,
                strokeDashoffset: 0,
                animation: "metric-draw 1.8s ease-out forwards",
              }}
            />
            <circle
              cx={w}
              cy={h - (points[points.length - 1] / max) * h}
              r="3.5"
              fill="#2A3D2F"
            />
          </svg>
          <style>{`
            @keyframes metric-draw {
              from { stroke-dashoffset: 600; }
              to { stroke-dashoffset: 0; }
            }
          `}</style>
        </div>

        {/* Axis labels */}
        <div className="mt-1 flex justify-between font-mono text-[10px] text-[#6B6B66] uppercase tracking-[0.14em]">
          <span>Jan</span>
          <span>Jun</span>
          <span>Dec</span>
        </div>
      </article>
    </div>
  );
}
Metric Trend Card
