یک پلن

"use client"

import { CheckIcon } from "@/components/icons"
import { Avatar, AvatarGroup } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { ControlSizeProvider } from "@/components/ui/control-size"
import { formatCurrency } from "@/lib/persian"
import { stockImages } from "@/lib/stock-images"

const FEATURES = ["فاکتور و پیش‌فاکتورِ نامحدود", "گزارشِ سود و زیانِ زنده", "اتصال به همهٔ بانک‌ها", "حقوق، بیمه و مالیات", "تا ۱۰ کاربر", "پشتیبانی تلفنی و آنلاین", "نسخهٔ پشتیبانِ روزانه", "اپِ موبایل"]

/**
 * یک پلن، یک قیمت: کارتِ دوتکه با قیمتِ درشت و دکمه در یک سو و فهرستِ دوستونهٔ همه‌چیزِ
 * شاملِ پلن در سوی دیگر؛ تصمیم ساده می‌شود چون انتخابی برای مقایسه نیست.
 */
export default function PricingSingleBlock() {
  return (
    <ControlSizeProvider size="xl" asChild>
      <main className="mx-auto flex w-full max-w-5xl flex-col gap-12 px-4 py-20 sm:px-6">
        <header className="mx-auto flex max-w-2xl flex-col items-center gap-3 text-center">
          <h1 className="text-4xl font-black text-balance">یک قیمت، همه‌چیز</h1>
          <p className="text-lg leading-8 text-muted-foreground">بدونِ پلنِ پیچیده و هزینهٔ پنهان.</p>
        </header>
        <div className="grid grid-cols-1 overflow-hidden rounded-xl border border-border bg-card md:grid-cols-[minmax(0,1fr)_minmax(0,1.4fr)]">
          <div className="flex flex-col items-start gap-6 bg-subtle p-8 sm:p-10">
            <span className="font-semibold">آوندِ کامل</span>
            <div className="flex items-baseline gap-2">
              <span className="text-5xl font-black tabular-nums">{formatCurrency(690_000)}</span>
            </div>
            <span className="-mt-4 text-sm text-muted-foreground">در ماه، با پرداختِ سالانه</span>
            <Button fullWidth className="mt-4">
              شروعِ رایگان
            </Button>
            <div className="flex items-center gap-3">
              <AvatarGroup>
                {[stockImages.personWoman2, stockImages.personMan1, stockImages.personWoman3].map((photo) => (
                  <Avatar key={photo.src} size="sm" alt="" src={photo.src} />
                ))}
              </AvatarGroup>
              <span className="text-sm text-muted-foreground">۱۲ هزار کسب‌وکار</span>
            </div>
          </div>
          <div className="flex flex-col gap-6 p-8 sm:p-10">
            <h2 className="font-bold">همهٔ این‌ها شامل است</h2>
            <ul className="grid grid-cols-1 gap-4 sm:grid-cols-2">
              {FEATURES.map((feature) => (
                <li key={feature} className="flex items-center gap-3">
                  <span aria-hidden className="flex size-6 shrink-0 items-center justify-center rounded-full bg-success-subtle text-success [&>svg]:size-3.5">
                    <CheckIcon />
                  </span>
                  {feature}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </main>
    </ControlSizeProvider>
  )
}