Stat Backed Features

export default function FeatureStatBacked() {
  const stats = [
    {
      value: "62%",
      caption: "less time on admin",
      title: "Automations do the busywork",
      body: "Rules handle the routing, reminders and status updates your team used to chase by hand.",
      accent: "text-indigo-600 dark:text-indigo-400",
      bar: "bg-indigo-500",
    },
    {
      value: "3x",
      caption: "faster sign off",
      title: "Reviews that close themselves",
      body: "Approvals happen in context with a clear decision, so nothing waits in an inbox for days.",
      accent: "text-emerald-600 dark:text-emerald-400",
      bar: "bg-emerald-500",
    },
    {
      value: "12h",
      caption: "saved per person weekly",
      title: "One place, no tab hopping",
      body: "Docs, tasks and chat share a home, which cuts out the hours lost searching across tools.",
      accent: "text-amber-600 dark:text-amber-400",
      bar: "bg-amber-500",
    },
    {
      value: "99.98%",
      caption: "measured uptime",
      title: "Always there when you need it",
      body: "A resilient backbone keeps work moving, with offline edits that merge the moment you return.",
      accent: "text-rose-600 dark:text-rose-400",
      bar: "bg-rose-500",
    },
  ];

  return (
    <section className="bg-white px-6 py-16 dark:bg-zinc-950 md:py-24">
      <div className="mx-auto max-w-6xl">
        <div className="grid gap-10 lg:grid-cols-[1.1fr_1fr] lg:items-center">
          <div>
            <p className="text-sm font-semibold uppercase tracking-widest text-indigo-600 dark:text-indigo-400">
              Results, not promises
            </p>
            <h2 className="mt-4 text-balance text-3xl font-bold tracking-tight text-zinc-900 sm:text-4xl dark:text-white">
              Features you can measure by the week
            </h2>
            <p className="mt-4 text-lg leading-relaxed text-zinc-600 dark:text-zinc-400">
              Every capability here earns its place with a number behind it. These are the averages teams report after their first quarter on the platform.
            </p>
            <dl className="mt-8 flex flex-wrap gap-x-10 gap-y-6">
              <div>
                <dt className="text-sm text-zinc-500 dark:text-zinc-500">Teams onboard</dt>
                <dd className="mt-1 text-3xl font-bold tracking-tight text-zinc-900 dark:text-white">
                  1,200+
                </dd>
              </div>
              <div>
                <dt className="text-sm text-zinc-500 dark:text-zinc-500">Would recommend</dt>
                <dd className="mt-1 text-3xl font-bold tracking-tight text-zinc-900 dark:text-white">
                  96%
                </dd>
              </div>
              <div>
                <dt className="text-sm text-zinc-500 dark:text-zinc-500">Time to value</dt>
                <dd className="mt-1 text-3xl font-bold tracking-tight text-zinc-900 dark:text-white">
                  2 weeks
                </dd>
              </div>
            </dl>
          </div>

          <div className="grid gap-4 sm:grid-cols-2">
            {stats.map((stat) => (
              <article
                key={stat.title}
                className="rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm transition hover:shadow-md dark:border-zinc-800 dark:bg-zinc-900/50 dark:hover:shadow-black/40"
              >
                <p className={`text-4xl font-bold tracking-tight ${stat.accent}`}>
                  {stat.value}
                </p>
                <p className="mt-1 text-sm font-medium text-zinc-500 dark:text-zinc-500">
                  {stat.caption}
                </p>
                <div
                  aria-hidden="true"
                  className="mt-4 h-1 w-full overflow-hidden rounded-full bg-zinc-100 dark:bg-zinc-800"
                >
                  <div className={`h-full w-2/3 rounded-full ${stat.bar}`} />
                </div>
                <h3 className="mt-4 text-base font-semibold text-zinc-900 dark:text-white">
                  {stat.title}
                </h3>
                <p className="mt-1 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
                  {stat.body}
                </p>
              </article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}