درباره ما، تیم

"use client"

import * as React from "react"

import { LinkedInLogo } from "@/components/icons"
import { Button } from "@/components/ui/button"
import { ControlSizeProvider } from "@/components/ui/control-size"
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
import { stockImages, type StockImageName } from "@/lib/stock-images"

const PEOPLE: { name: string; role: string; team: string; photo: StockImageName; fact: string }[] = [
  { name: "مهسا کریمی", role: "بنیان‌گذار و مدیرعامل", team: "مدیریت", photo: "personWoman1", fact: "هر صبح با دوچرخه می‌آید." },
  { name: "امیر رضایی", role: "مدیرِ فنی", team: "فنی", photo: "personMan1", fact: "کدِ اولِ آوند را در کافه نوشت." },
  { name: "سارا محمدی", role: "طراحِ محصول", team: "محصول", photo: "personWoman2", fact: "هر هفته با پنج مشتری حرف می‌زند." },
  { name: "علی کاظمی", role: "مدیرِ فروش", team: "فروش", photo: "personMan2", fact: "اسمِ همهٔ مشتری‌های اول را حفظ است." },
  { name: "نگار احمدی", role: "مشاورِ مالی", team: "محصول", photo: "personWoman3", fact: "حسابدارِ رسمی و معلمِ دوره‌ها." },
]
const TEAMS = ["همه", "مدیریت", "محصول", "فنی", "فروش"]

/**
 * درباره ما با تمرکز بر آدم‌ها: تیتر و توضیح، فیلترِ تیم با سگمنت، و گریدِ عکس‌های بزرگ
 * با نام، نقش و یک واقعیتِ کوچکِ انسانی؛ لینکدین روی هر کارت و دعوت به همکاری در پایان.
 */
export default function AboutTeamBlock() {
  const [team, setTeam] = React.useState("همه")
  const visible = PEOPLE.filter((person) => team === "همه" || person.team === team)

  return (
    <ControlSizeProvider size="xl" asChild>
      <main className="mx-auto flex w-full max-w-6xl flex-col gap-12 px-4 py-16 sm:px-6">
        <header className="mx-auto flex max-w-2xl flex-col items-center gap-4 text-center">
          <h1 className="text-4xl font-black text-balance">آدم‌های پشتِ آوند</h1>
          <p className="text-lg leading-8 text-muted-foreground">۳۸ نفر در تهران و شیراز، که هر روز با مشتری حرف می‌زنند.</p>
        </header>
        <div className="mx-auto max-w-full overflow-x-auto">
          <ToggleGroup type="single" variant="segmented" value={team} onValueChange={(value) => value && setTeam(value as string)} aria-label="تیم">
            {TEAMS.map((item) => (
              <ToggleGroupItem key={item} value={item} className="whitespace-nowrap">
                {item}
              </ToggleGroupItem>
            ))}
          </ToggleGroup>
        </div>
        <ul className="grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3">
          {visible.map((person) => (
            <li key={person.name} className="flex flex-col gap-4">
              {/* eslint-disable-next-line @next/next/no-img-element -- عکس از کتابخانهٔ تصویرِ دیگ */}
              <img src={stockImages[person.photo].src} alt={person.name} loading="lazy" className="aspect-square w-full rounded-xl object-cover" />
              <div className="flex items-start justify-between gap-3">
                <span className="flex flex-col gap-1">
                  <span className="text-lg font-bold">{person.name}</span>
                  <span className="text-muted-foreground">{person.role}</span>
                  <span className="text-sm text-muted-foreground">{person.fact}</span>
                </span>
                <Button variant="ghost" size="icon" asChild>
                  <a href="#" aria-label={`لینکدینِ ${person.name}`}>
                    <LinkedInLogo />
                  </a>
                </Button>
              </div>
            </li>
          ))}
        </ul>
        <section className="flex flex-col items-center gap-4 rounded-xl bg-subtle p-10 text-center">
          <h2 className="text-2xl font-black">جای تو این‌جا خالی است</h2>
          <p className="text-muted-foreground">۴ جایگاهِ باز در تیم‌های فنی و محصول.</p>
          <Button className="mt-2">دیدنِ فرصت‌ها</Button>
        </section>
      </main>
    </ControlSizeProvider>
  )
}