ویژگی‌ها در گرید

"use client"

import { BarChartIcon, BellIcon, BoltIcon, ReceiptIcon, ShieldCheckIcon, UsersIcon } from "@/components/icons"
import { ControlSizeProvider } from "@/components/ui/control-size"
import { Reveal } from "@/components/ui/reveal"

const FEATURES = [
  { icon: <ReceiptIcon />, tone: "violet", title: "فاکتور در یک دقیقه", text: "قالبِ رسمی، شمارهٔ خودکار و ارسالِ پیامکی برای مشتری." },
  { icon: <BarChartIcon />, tone: "blue", title: "گزارشِ زنده", text: "سود و زیانِ هر روز، بدونِ اکسل و فرمول." },
  { icon: <UsersIcon />, tone: "green", title: "حقوق و دستمزد", text: "فیشِ حقوقی، بیمه و مالیات با یک کلیک." },
  { icon: <BellIcon />, tone: "orange", title: "یادآورِ سررسید", text: "چک و قسط را یک روز قبل خبرت می‌کنیم." },
  { icon: <ShieldCheckIcon />, tone: "blue", title: "امن و پشتیبان‌دار", text: "رمزگذاری و نسخهٔ پشتیبانِ روزانه روی سرورِ داخلی." },
  { icon: <BoltIcon />, tone: "violet", title: "اتصال به بانک", text: "تراکنش‌های حساب خودش وارد و دسته‌بندی می‌شود." },
]

/**
 * ویژگی‌ها در گریدِ کارت: سرِ بخش با برچسب، تیتر و توضیح؛ شش کارت با آیکونِ رنگی
 * (تهِ رنگ از تمِ هر ویژگی)، تیتر و یک جملهٔ کوتاه. کارت‌ها پله‌پله نرم وارد می‌شوند.
 */
export default function FeaturesGridBlock() {
  return (
    <ControlSizeProvider size="xl" asChild>
      <section aria-labelledby="features-grid-title" className="mx-auto flex w-full max-w-6xl flex-col gap-12 px-4 py-24 sm:px-6">
        <div className="mx-auto flex max-w-2xl flex-col items-center gap-3 text-center">
          <span className="text-sm font-semibold text-brand-secondary">امکانات</span>
          <h2 id="features-grid-title" className="text-3xl leading-snug font-black text-balance sm:text-4xl">هر چه برای حساب‌وکتاب لازم داری</h2>
          <p className="text-lg leading-8 text-muted-foreground">از فاکتورِ اول تا گزارشِ آخرِ سال، بدونِ نرم‌افزارِ دوم.</p>
        </div>
        <ul className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {FEATURES.map((feature, index) => (
            <Reveal asChild key={feature.title} delay={index * 80}>
              <li className="flex flex-col gap-4 rounded-xl border border-border bg-card p-6 transition-[opacity,translate,box-shadow] hover:shadow-card">
                <span
                  aria-hidden
                  className="flex size-11 items-center justify-center rounded-xl [&>svg]:size-5"
                  style={{ background: `color-mix(in oklab, var(--dig-${feature.tone}-500) 12%, var(--card))`, color: `var(--dig-${feature.tone}-600)` }}
                >
                  {feature.icon}
                </span>
                <h3 className="text-lg font-bold">{feature.title}</h3>
                <p className="leading-7 text-muted-foreground">{feature.text}</p>
              </li>
            </Reveal>
          ))}
        </ul>
      </section>
    </ControlSizeProvider>
  )
}