تیم در ردیف‌ها

"use client"

import { ArrowUpIcon } from "@/components/icons"
import { ControlSizeProvider } from "@/components/ui/control-size"
import { Reveal } from "@/components/ui/reveal"
import { stockImages, type StockImageName } from "@/lib/stock-images"

const PEOPLE: { name: string; role: string; city: string; quote: string; photo: StockImageName }[] = [
  { name: "لیلا مرادی", role: "مهندسِ نصب", city: "شیراز", quote: "هر سقف یک معماست؛ لذتِ کار حلِ همین معماست.", photo: "personWoman2" },
  { name: "بهرام توکلی", role: "کارشناسِ طراحی", city: "اصفهان", quote: "عددِ تولید باید با قبضِ واقعی جور دربیاید، نه با کاتالوگ.", photo: "personMan1" },
  { name: "نسرین کاظمی", role: "مشاورِ مشتری", city: "تهران", quote: "بیشترِ سؤال‌ها یک جواب دارند: بیایید با هم حساب کنیم.", photo: "personWoman3" },
  { name: "رضا فرهادی", role: "سرپرستِ نگه‌داری", city: "مشهد", quote: "پنلِ تمیز یعنی ده درصد برقِ بیشتر؛ این را جدی می‌گیریم.", photo: "personMan2" },
]

/**
 * تیم در ردیف‌های فهرستی: عکسِ کوچک، اسم و نقش، یک جملهٔ خودِ آن آدم و شهر؛ ردیف‌ها با
 * خطِ نازک جدا می‌شوند و با هاور پیکانِ پیوند جلو می‌آید.
 */
export default function TeamListBlock() {
  return (
    <ControlSizeProvider size="xl" asChild>
      <section aria-labelledby="tl-title" className="mx-auto flex w-full max-w-5xl 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="rounded-full border border-border px-3 py-1 text-sm font-semibold">آدم‌های واقعی</span>
          <h2 id="tl-title" className="text-3xl leading-snug font-black text-balance sm:text-4xl">
            کسانی که به خانهٔ شما می‌آیند
          </h2>
        </div>
        <ul className="flex flex-col divide-y divide-border border-y border-border">
          {PEOPLE.map((person, index) => (
            <Reveal asChild key={person.name} delay={index * 80}>
              <li>
                <a href="#" className="group grid grid-cols-[4rem_1fr] items-center gap-x-5 gap-y-3 py-6 outline-none focus-visible:bg-muted md:grid-cols-[4rem_14rem_1fr_8rem_1.5rem]">
                  {/* eslint-disable-next-line @next/next/no-img-element -- عکس از کتابخانهٔ تصویرِ دیگ */}
                  <img src={stockImages[person.photo].src} alt="" className="size-16 rounded-full object-cover" />
                  <span className="flex flex-col">
                    <span className="font-bold">{person.name}</span>
                    <span className="text-sm text-muted-foreground">{person.role}</span>
                  </span>
                  <span className="col-span-2 leading-7 text-muted-foreground md:col-span-1">«{person.quote}»</span>
                  <span className="hidden text-sm text-muted-foreground md:block">{person.city}</span>
                  <ArrowUpIcon aria-hidden className="hidden size-5 -rotate-45 text-muted-foreground transition-transform group-hover:-translate-x-1 group-hover:-translate-y-1 group-hover:text-foreground md:block" />
                </a>
              </li>
            </Reveal>
          ))}
        </ul>
      </section>
    </ControlSizeProvider>
  )
}