export function StatsComparisonCard() {
  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-6 hover:shadow-[0_24px_60px_-30px_rgba(17,17,17,0.18)] transition-shadow">
        <div className="flex items-center justify-between">
          <h3 className="text-[14px] font-medium tracking-tight">Conversion · this quarter</h3>
          <span className="inline-flex items-center gap-1 rounded-full bg-emerald-50 text-emerald-700 px-2 py-0.5 text-[10.5px] font-mono uppercase tracking-[0.14em]">
            ▲ 3.2 pts
          </span>
        </div>

        {/* Big number */}
        <div className="mt-4">
          <div className="flex items-end gap-2">
            <span
              className="text-[56px] leading-none tracking-tight"
              style={{ fontFamily: "var(--font-instrument-serif), Georgia, serif" }}
            >
              28.4
            </span>
            <span className="pb-2 text-[18px] text-[#6B6B66]">%</span>
          </div>
          <p className="mt-1 text-[12px] text-[#6B6B66] font-mono">
            from 25.2% last quarter
          </p>
        </div>

        {/* Comparison bar */}
        <div className="mt-6">
          <div className="flex items-center justify-between text-[11px] font-mono">
            <span className="text-[#6B6B66]">Q1 ’25</span>
            <span className="text-[#6B6B66]">target 30%</span>
            <span className="text-[#6B6B66]">Q2 ’25</span>
          </div>
          <div className="mt-2 relative h-3 rounded-full bg-[#1111111A] overflow-hidden">
            {/* target marker */}
            <span
              aria-hidden
              className="absolute top-0 bottom-0 w-px bg-[#111111]/40"
              style={{ left: "75%" }}
            />
            {/* prior quarter */}
            <span
              className="absolute top-0 bottom-0 left-0 rounded-l-full"
              style={{ width: "63%", background: "#1111114D" }}
            />
            {/* current quarter overlay */}
            <span
              className="absolute top-0 bottom-0 left-0 rounded-l-full transition-[width] duration-1000"
              style={{
                width: "71%",
                background: "linear-gradient(90deg, #2A3D2F, #5E7F66)",
              }}
            />
          </div>
          <div className="mt-1.5 flex items-center justify-between text-[10.5px] font-mono text-[#6B6B66]">
            <span>0%</span>
            <span>40%</span>
          </div>
        </div>

        {/* Breakdown */}
        <div className="mt-6 grid grid-cols-3 gap-3 border-t border-[#1111111A] pt-5">
          <Cell value="42.1k" label="Visits" delta="+8%" up />
          <Cell value="11.9k" label="Signups" delta="+14%" up />
          <Cell value="3.4k" label="Activated" delta="−2%" />
        </div>
      </article>
    </div>
  );
}

function Cell({ value, label, delta, up }: { value: string; label: string; delta: string; up?: boolean }) {
  return (
    <div>
      <div
        className="text-[20px] leading-none"
        style={{ fontFamily: "var(--font-instrument-serif), Georgia, serif" }}
      >
        {value}
      </div>
      <div className="mt-1 font-mono text-[10px] uppercase tracking-[0.14em] text-[#6B6B66]">
        {label}
      </div>
      <div className={`mt-1 font-mono text-[11px] ${up ? "text-emerald-700" : "text-rose-700"}`}>
        {delta}
      </div>
    </div>
  );
}
Stats Comparison Card

Conversion · this quarter
