تیم و استخدام

"use client"

import { ArrowUpIcon, ClockIcon, GlobeIcon } from "@/components/icons"
import { Avatar, AvatarGroup } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { ControlSizeProvider } from "@/components/ui/control-size"
import { Reveal } from "@/components/ui/reveal"
import { toFaDigits } from "@/lib/persian"
import { stockImages } from "@/lib/stock-images"

const ROLES = [
  { title: "طراحِ محصولِ ارشد", team: "طراحی", place: "تهران یا دورکاری", type: "تمام‌وقت", fresh: true },
  { title: "مهندسِ فرانت‌اند", team: "مهندسی", place: "اصفهان", type: "تمام‌وقت" },
  { title: "کارشناسِ موفقیتِ مشتری", team: "مشتری", place: "دورکاری", type: "پاره‌وقت" },
]
const FACES = [stockImages.personWoman1.src, stockImages.personMan1.src, stockImages.personWoman3.src, stockImages.personMan2.src, stockImages.personWoman2.src]

/**
 * تیم و استخدام در یک بخش: سمتی دیوارِ چهره‌ها با شمارِ تیم و سه آمار، سمتِ دیگر
 * موقعیت‌های باز با تیم، محل و نوعِ همکاری و برچسبِ «تازه»؛ فراخوانِ پایانی به صفحهٔ شغل‌ها.
 */
export default function TeamHiringBlock() {
  return (
    <ControlSizeProvider size="xl" asChild>
      <section aria-labelledby="th-title" className="mx-auto grid w-full max-w-6xl grid-cols-1 gap-12 px-4 py-24 sm:px-6 lg:grid-cols-[1fr_1.2fr]">
        <div className="flex flex-col items-start gap-6">
          <span className="text-sm font-semibold text-brand-secondary">به ما بپیوندید</span>
          <h2 id="th-title" className="text-3xl leading-snug font-black text-balance sm:text-4xl">
            تیمی که از کارش لذت می‌برد
          </h2>
          <p className="leading-7 text-muted-foreground">ساعتِ کاریِ شناور، بودجهٔ آموزش و یک هفته در سال برای پروژهٔ دلخواه.</p>
          <div className="flex items-center gap-3">
            <AvatarGroup max={5} total={42} size="lg" bordered>
              {FACES.map((src) => (
                <Avatar key={src} src={src} alt="" />
              ))}
            </AvatarGroup>
            <span className="text-sm text-muted-foreground">{toFaDigits(42)} نفر در سه شهر</span>
          </div>
          <dl className="grid w-full grid-cols-3 gap-4 border-t border-border pt-6">
            {[
              ["۴٫۸", "رضایتِ کارکنان"],
              ["۳۸٪", "زنان در مدیریت"],
              ["۹۲٪", "ماندگاریِ سالانه"],
            ].map(([value, label]) => (
              <div key={label} className="flex flex-col gap-1">
                <dt className="order-2 text-sm text-muted-foreground">{label}</dt>
                <dd className="order-1 text-2xl font-black">{value}</dd>
              </div>
            ))}
          </dl>
        </div>
        <div className="flex flex-col gap-3">
          {ROLES.map((role, index) => (
            <Reveal asChild key={role.title} delay={index * 100}>
              <a href="#" className="group flex items-center justify-between gap-4 rounded-xl border border-border bg-card p-5 outline-none transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring">
                <span className="flex flex-col gap-2">
                  <span className="flex flex-wrap items-center gap-2 font-bold">
                    {role.title}
                    {role.fresh && (
                      <Badge color="success" variant="soft" size="sm">
                        تازه
                      </Badge>
                    )}
                  </span>
                  <span className="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-muted-foreground">
                    <span>{role.team}</span>
                    <span className="flex items-center gap-1">
                      <GlobeIcon aria-hidden className="size-4" />
                      {role.place}
                    </span>
                    <span className="flex items-center gap-1">
                      <ClockIcon aria-hidden className="size-4" />
                      {role.type}
                    </span>
                  </span>
                </span>
                <span aria-hidden className="flex size-10 shrink-0 items-center justify-center rounded-full bg-muted transition-colors group-hover:bg-foreground group-hover:text-background">
                  <ArrowUpIcon className="size-4 -rotate-45" />
                </span>
              </a>
            </Reveal>
          ))}
          <Button variant="outline" className="mt-3 self-start">
            همهٔ موقعیت‌ها
          </Button>
        </div>
      </section>
    </ControlSizeProvider>
  )
}