فراخوان با آمار

"use client"

import { Button } from "@/components/ui/button"
import { ControlSizeProvider } from "@/components/ui/control-size"
import { CountUp } from "@/components/ui/count-up"

const STATS = [
  { value: 12, suffix: " هزار", label: "کسب‌وکارِ فعال" },
  { value: 98, prefix: "٪", label: "رضایتِ مشتری" },
  { value: 9, suffix: " ساعت", label: "صرفه‌جویی در هفته" },
]

/**
 * فراخوان با عدد: کارتِ تیرهٔ وارونه که تیتر و دکمه را با سه آمارِ شمارنده کنارِ هم
 * می‌گذارد؛ عددها دلیلِ کلیک‌اند. رنگ‌ها با بازتعریفِ متغیرها روی سطحِ inverse.
 */
export default function CtaStatsBlock() {
  return (
    <ControlSizeProvider size="xl" asChild>
      <section className="mx-auto w-full max-w-6xl px-4 py-24 sm:px-6">
        <div className="grid grid-cols-1 items-center gap-10 rounded-xl bg-inverse p-8 text-[var(--dig-white)] [--border:var(--inverse-border)] [--muted-foreground:var(--dig-neutral-400)] [--primary-foreground:var(--dig-graphite-950)] [--primary:var(--dig-white)] sm:p-12 lg:grid-cols-2">
          <div className="flex flex-col items-start gap-5">
            <h2 className="text-3xl leading-snug font-black text-balance sm:text-4xl">به جمعِ کسب‌وکارهایی بپیوند که حسابشان روشن است</h2>
            <p className="leading-8 text-muted-foreground">ماهِ اول رایگان؛ بدونِ کارتِ بانکی و بدونِ قرارداد.</p>
            <Button className="mt-3">شروعِ رایگان</Button>
          </div>
          <dl className="grid grid-cols-3 gap-4 border-t border-border pt-8 lg:border-s lg:border-t-0 lg:ps-10 lg:pt-0">
            {STATS.map((stat) => (
              <div key={stat.label} className="flex flex-col gap-1">
                <dd className="text-3xl font-black tabular-nums sm:text-4xl">
                  <CountUp value={stat.value} prefix={stat.prefix} suffix={stat.suffix} />
                </dd>
                <dt className="text-sm text-muted-foreground">{stat.label}</dt>
              </div>
            ))}
          </dl>
        </div>
      </section>
    </ControlSizeProvider>
  )
}