تماس با تیم

"use client"

import { ChatIcon, ClockIcon, EnvelopeIcon, PhoneIcon } from "@/components/icons"
import { Avatar } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { ControlSizeProvider } from "@/components/ui/control-size"
import { DotPattern } from "@/components/ui/background-pattern"
import { Reveal } from "@/components/ui/reveal"
import { toFaDigits } from "@/lib/persian"
import { stockImages, type StockImageName } from "@/lib/stock-images"

const TEAMS: { title: string; text: string; person: string; role: string; photo: StockImageName; action: string; icon: React.ReactNode; online?: boolean }[] = [
  { title: "فروش", text: "پلنِ مناسب، دموی اختصاصی یا قیمتِ سازمانی.", person: "سارا محمدی", role: "مشاورِ فروش", photo: "personWoman2", action: "رزروِ دمو", icon: <PhoneIcon />, online: true },
  { title: "پشتیبانی", text: "مشکل در حساب، پرداخت یا کار با محصول.", person: "امیر رضایی", role: "پشتیبانِ فنی", photo: "personMan1", action: "گفت‌وگوی آنلاین", icon: <ChatIcon />, online: true },
  { title: "رسانه و همکاری", text: "مصاحبه، رویداد یا پیشنهادِ همکاری.", person: "نگار احمدی", role: "روابطِ عمومی", photo: "personWoman3", action: "نوشتنِ ایمیل", icon: <EnvelopeIcon /> },
]
const OFFICES: { city: string; address: string; hours: string; image: StockImageName }[] = [
  { city: "تهران", address: "خیابان ولیعصر، بالاتر از پارک ساعی، پلاک ۱۲", hours: "شنبه تا چهارشنبه، ۹ تا ۱۸", image: "studioSunlit" },
  { city: "شیراز", address: "بلوار چمران، ساختمانِ نوآوری، طبقهٔ ۳", hours: "شنبه تا چهارشنبه، ۹ تا ۱۷", image: "coverMinimalRoom" },
]

/**
 * تماس با تیم: هیروی تیره با پترن، سه کارتِ بخش که هر کدام آدمِ واقعی پاسخ‌گو، وضعیتِ
 * آنلاین و یک اقدامِ مستقیم دارند؛ دفترها با عکس و ساعتِ کار. بدونِ فرمِ طولانی.
 */
export default function ContactTeamBlock() {
  return (
    <ControlSizeProvider size="xl" asChild>
      <main className="flex w-full flex-col">
        <section className="relative overflow-hidden bg-inverse px-4 pt-20 pb-40 text-center text-[var(--dig-white)] [--border:var(--inverse-border)] [--muted-foreground:var(--dig-neutral-400)] sm:px-6">
          <DotPattern size={22} />
          <div className="relative mx-auto flex max-w-2xl flex-col items-center gap-4">
            <Badge className="bg-inverse-border text-[var(--dig-white)]">میانگینِ پاسخ: ۱۲ دقیقه</Badge>
            <h1 className="text-4xl leading-snug font-black text-balance sm:text-5xl sm:leading-snug">با آدمِ درست حرف بزنید</h1>
            <p className="text-lg leading-8 text-muted-foreground">بخشِ موردِ نظرتان را انتخاب کنید؛ مستقیم به کسی می‌رسید که جواب را می‌داند.</p>
          </div>
        </section>

        <div className="mx-auto -mt-28 grid grid-cols-1 w-full max-w-6xl gap-6 px-4 sm:px-6 md:grid-cols-3">
          {TEAMS.map((team, index) => (
            <Reveal asChild key={team.title} delay={index * 100}>
              <article className="relative flex flex-col gap-6 rounded-xl border border-border bg-card p-6 shadow-card">
                <div className="flex flex-col gap-2">
                  <h2 className="text-xl font-bold">{team.title}</h2>
                  <p className="leading-7 text-muted-foreground">{team.text}</p>
                </div>
                <div className="flex items-center gap-3 rounded-lg bg-subtle p-3">
                  <span className="relative">
                    <Avatar alt={team.person} src={stockImages[team.photo].src} />
                    {team.online && <span aria-hidden className="absolute -end-0.5 -bottom-0.5 size-3 rounded-full bg-success ring-2 ring-[var(--subtle)]" />}
                  </span>
                  <span className="flex flex-col">
                    <span className="text-sm font-semibold">{team.person}</span>
                    <span className="text-xs text-muted-foreground">
                      {team.role}
                      {team.online ? " · آنلاین" : ""}
                    </span>
                  </span>
                </div>
                <Button variant={index === 0 ? "default" : "outline"} className="mt-auto">
                  {team.icon}
                  {team.action}
                </Button>
              </article>
            </Reveal>
          ))}
        </div>

        <section aria-labelledby="contact-offices" className="mx-auto flex w-full max-w-6xl flex-col gap-10 px-4 py-24 sm:px-6">
          <div className="flex flex-col gap-2">
            <h2 id="contact-offices" className="text-3xl font-black">
              دفترهای ما
            </h2>
            <p className="text-muted-foreground">برای مراجعهٔ حضوری از قبل وقت بگیرید.</p>
          </div>
          <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
            {OFFICES.map((office, index) => (
              <Reveal asChild key={office.city} delay={index * 100}>
                <article className="flex flex-col overflow-hidden rounded-xl border border-border bg-card">
                  {/* eslint-disable-next-line @next/next/no-img-element -- عکس از کتابخانهٔ تصویرِ دیگ */}
                  <img src={stockImages[office.image].src} alt={stockImages[office.image].alt} loading="lazy" className="aspect-[16/9] w-full object-cover" />
                  <div className="flex flex-col gap-3 p-6">
                    <h3 className="text-lg font-bold">{office.city}</h3>
                    <p className="leading-7 text-muted-foreground">{office.address}</p>
                    <span className="flex items-center gap-2 text-sm text-muted-foreground">
                      <ClockIcon aria-hidden className="size-4" />
                      {office.hours}
                    </span>
                  </div>
                </article>
              </Reveal>
            ))}
          </div>
          <p className="text-center text-muted-foreground">
            ترجیح می‌دهید تلفنی صحبت کنید؟{" "}
            <a href="tel:02191001234" className="font-semibold text-foreground hover:underline">
              <bdi dir="ltr">{toFaDigits("021-91001234")}</bdi>
            </a>
          </p>
        </section>
      </main>
    </ControlSizeProvider>
  )
}