خلاصهٔ امتیاز و نظر

"use client"

import { StarIcon } from "@/components/icons"
import { Avatar } from "@/components/ui/avatar"
import { ControlSizeProvider } from "@/components/ui/control-size"
import { Progress } from "@/components/ui/progress"
import { toFaDigits } from "@/lib/persian"
import { stockImages } from "@/lib/stock-images"

const BARS = [
  { stars: 5, share: 82 },
  { stars: 4, share: 12 },
  { stars: 3, share: 4 },
  { stars: 2, share: 1 },
  { stars: 1, share: 1 },
]
const LOGOS = ["fintech/digipay", "fintech/asan-pardakht", "banks/blu", "banks/day"]

/**
 * خلاصهٔ رضایت: امتیازِ درشت با ستاره و توزیعِ امتیازها، کنارش یک نقل‌قولِ برجسته با
 * عکسِ گوینده، و زیرِ هر دو ردیفِ لوگوی مشتری‌ها. برای اعتمادسازی عددی در لندینگ.
 */
export default function TestimonialsRatingBlock() {
  return (
    <ControlSizeProvider size="xl" asChild>
      <section aria-labelledby="tr-title" className="mx-auto flex w-full max-w-6xl flex-col gap-12 px-4 py-24 sm:px-6">
        <h2 id="tr-title" className="text-3xl font-black">
          کاربرانِ ما چه می‌گویند
        </h2>
        <div className="grid grid-cols-1 gap-6 lg:grid-cols-[22rem_minmax(0,1fr)]">
          <div className="flex flex-col gap-6 rounded-xl bg-subtle p-6">
            <div className="flex items-end gap-3">
              <span className="text-6xl leading-none font-black tabular-nums">۴٫۸</span>
              <span className="flex flex-col gap-1 pb-1">
                <span className="flex gap-0.5" aria-label="۴٫۸ از ۵ ستاره">
                  {[0, 1, 2, 3, 4].map((star) => (
                    <StarIcon key={star} aria-hidden className="size-4 fill-[var(--dig-orange-400)] text-[var(--dig-orange-400)]" />
                  ))}
                </span>
                <span className="text-sm text-muted-foreground">از ۲٬۳۱۰ نظر</span>
              </span>
            </div>
            <ul className="flex flex-col gap-2.5">
              {BARS.map((bar) => (
                <li key={bar.stars} className="flex items-center gap-3 text-sm">
                  <span className="w-12 shrink-0 text-muted-foreground">{toFaDigits(bar.stars)} ستاره</span>
                  <Progress value={bar.share} aria-label={`${toFaDigits(bar.share)} درصد ${toFaDigits(bar.stars)} ستاره`} className="flex-1" />
                  <span className="w-10 shrink-0 text-end text-muted-foreground tabular-nums">٪{toFaDigits(bar.share)}</span>
                </li>
              ))}
            </ul>
          </div>
          <figure className="flex flex-col justify-between gap-8 rounded-xl border border-border bg-card p-6 sm:p-10">
            <blockquote className="text-2xl leading-relaxed font-bold text-balance">«سه سال با اکسل جنگیدیم. با آوند در یک هفته همهٔ شعبه‌ها روی یک داشبورد آمدند و حالا هر صبح می‌دانیم دیروز چه گذشت.»</blockquote>
            <figcaption className="flex items-center gap-4">
              <Avatar size="lg" alt="" src={stockImages.personWoman2.src} />
              <span className="flex flex-col">
                <span className="font-semibold">سارا محمدی</span>
                <span className="text-sm text-muted-foreground">مدیرِ عملیات، کافه رست</span>
              </span>
            </figcaption>
          </figure>
        </div>
        <div className="flex flex-wrap items-center justify-center gap-x-12 gap-y-6 border-t border-border pt-10">
          {LOGOS.map((logo) => (
            // eslint-disable-next-line @next/next/no-img-element -- لوگوی کوچکِ ثابت
            <img key={logo} src={`/logos/${logo}.svg`} alt="" className="h-8 w-auto grayscale" />
          ))}
        </div>
      </section>
    </ControlSizeProvider>
  )
}