ویژگی‌ها در بنتو

"use client"

import { BarChartIcon, ShieldCheckIcon, SparklesIcon } from "@/components/icons"
import { ControlSizeProvider } from "@/components/ui/control-size"
import { CountUp } from "@/components/ui/count-up"
import { Progress } from "@/components/ui/progress"
import { Reveal } from "@/components/ui/reveal"
import { stockImages } from "@/lib/stock-images"

const BARS = [42, 58, 50, 72, 64, 88, 80]

/**
 * ویژگی‌ها در چیدمانِ بنتو: کاشی‌های هم‌خانواده با اندازه‌های مختلف؛ کاشی بزرگِ تیره با
 * نمودارِ ستونی ساده، کاشی عکس‌دار، کاشی عددِ شمارنده و کاشی امنیت با نوارِ پیشرفت.
 */
export default function FeaturesBentoBlock() {
  return (
    <ControlSizeProvider size="xl" asChild>
      <section aria-labelledby="bento-title" className="mx-auto flex w-full max-w-6xl flex-col gap-12 px-4 py-24 sm:px-6">
        <div className="flex max-w-2xl flex-col gap-3">
          <span className="text-sm font-semibold text-brand-secondary">چرا آوند</span>
          <h2 id="bento-title" className="text-3xl leading-snug font-black text-balance sm:text-4xl">کمتر وقت بگذار، بیشتر بفهم</h2>
        </div>
        <div className="grid grid-cols-1 auto-rows-[minmax(14rem,auto)] gap-4 md:grid-cols-3">
          <Reveal className="flex flex-col justify-between gap-6 rounded-xl bg-inverse p-6 text-[var(--dig-white)] [--muted-foreground:var(--dig-neutral-400)] md:col-span-2 md:row-span-2 sm:p-8">
            <div className="flex flex-col gap-2">
              <span aria-hidden className="flex size-11 items-center justify-center rounded-xl bg-inverse-raised text-[var(--dig-violet-300)] [&>svg]:size-5">
                <BarChartIcon />
              </span>
              <h3 className="mt-2 text-2xl font-bold">گزارشی که خودش را می‌سازد</h3>
              <p className="max-w-md leading-7 text-muted-foreground">هر تراکنش در دستهٔ درست می‌نشیند و نمودارِ هفته بی‌درنگ به‌روز می‌شود.</p>
            </div>
            <div aria-hidden className="flex h-40 items-end gap-3">
              {BARS.map((value, index) => (
                <span key={index} className={`flex-1 rounded-t-md ${index === BARS.length - 2 ? "bg-[var(--dig-violet-400)]" : "bg-inverse-border"}`} style={{ height: `${value}%` }} />
              ))}
            </div>
          </Reveal>
          <Reveal delay={100} className="relative overflow-hidden rounded-xl">
            {/* eslint-disable-next-line @next/next/no-img-element -- عکس از کتابخانهٔ تصویرِ دیگ */}
            <img src={stockImages.personWoman1.src} alt="" className="absolute inset-0 size-full object-cover" />
            <div className="absolute inset-x-0 bottom-0 bg-linear-to-t from-[var(--dig-graphite-950)] to-transparent p-6 pt-16 text-[var(--dig-white)]">
              <p className="font-bold">پشتیبانی آدمِ واقعی</p>
              <p className="text-sm text-[var(--dig-neutral-300)]">میانگینِ پاسخ ۱۲ دقیقه</p>
            </div>
          </Reveal>
          <Reveal delay={200} className="flex flex-col justify-between gap-4 rounded-xl bg-subtle p-6">
            <span aria-hidden className="flex size-11 items-center justify-center rounded-xl bg-card text-[var(--dig-orange-600)] [&>svg]:size-5">
              <SparklesIcon />
            </span>
            <div className="flex flex-col gap-1">
              <span className="text-4xl font-black tabular-nums">
                <CountUp value={9} /> ساعت
              </span>
              <span className="text-muted-foreground">صرفه‌جویی در هفته</span>
            </div>
          </Reveal>
          <Reveal delay={100} className="flex flex-col justify-between gap-6 rounded-xl border border-border bg-card p-6 md:col-span-3 md:flex-row md:items-center">
            <div className="flex items-center gap-4">
              <span aria-hidden className="flex size-11 shrink-0 items-center justify-center rounded-xl bg-success-subtle text-success [&>svg]:size-5">
                <ShieldCheckIcon />
              </span>
              <div className="flex flex-col gap-1">
                <h3 className="font-bold">نسخهٔ پشتیبانِ روزانه</h3>
                <p className="text-sm text-muted-foreground">رمزگذاری‌شده، روی سرورهای داخلِ کشور.</p>
              </div>
            </div>
            <div className="flex w-full flex-col gap-2 md:max-w-sm">
              <span className="text-sm text-muted-foreground">پشتیبان‌گیری امشب</span>
              <Progress value={72} aria-label="پیشرفتِ پشتیبان‌گیری" />
            </div>
          </Reveal>
        </div>
      </section>
    </ControlSizeProvider>
  )
}