پرسش‌ها و راهِ تماس

"use client"

import { ChatIcon, PhoneIcon } from "@/components/icons"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { Avatar, AvatarGroup } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { ControlSizeProvider } from "@/components/ui/control-size"
import { stockImages } from "@/lib/stock-images"

const ITEMS = [
  { q: "دورهٔ آزمایشی چطور کار می‌کند؟", a: "۱۴ روز همهٔ امکانات را رایگان داری و کارتِ بانکی نمی‌خواهیم. آخرِ دوره خودت تصمیم می‌گیری." },
  { q: "بعداً می‌توانم پلن را عوض کنم؟", a: "هر وقت خواستی؛ مابه‌التفاوت برای باقی دوره حساب می‌شود." },
  { q: "اطلاعاتِ نرم‌افزارِ قبلی منتقل می‌شود؟", a: "بله؛ فایلِ اکسل یا خروجی نرم‌افزارهای رایج را وارد کن، بقیه‌اش با ماست." },
  { q: "برای چند شعبه هم کار می‌کند؟", a: "بله؛ هر شعبه دفترِ خودش را دارد و گزارشِ تجمیعی هم می‌گیری." },
  { q: "پشتیبانی چه ساعاتی پاسخ می‌دهد؟", a: "شنبه تا چهارشنبه ۹ تا ۱۸، پنجشنبه تا ۱۳. چت آنلاین معمولاً زیرِ ۱۰ دقیقه جواب می‌گیرد." },
]

/**
 * پرسش‌ها کنارِ راهِ تماس: تیتر و توضیح با کارتِ «جوابت را پیدا نکردی؟» (عکسِ تیمِ
 * پشتیبانی، گفت‌وگو و تماس) در یک ستون و آکاردئونِ پرسش‌ها در ستونِ دیگر.
 */
export default function FaqContactBlock() {
  return (
    <ControlSizeProvider size="xl" asChild>
      <section aria-labelledby="fc-title" className="mx-auto grid w-full max-w-6xl grid-cols-1 items-start gap-12 px-4 py-24 sm:px-6 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)]">
        <div className="flex flex-col gap-8 lg:sticky lg:top-6">
          <div className="flex flex-col gap-3">
            <h2 id="fc-title" className="text-3xl leading-snug font-black text-balance sm:text-4xl">
              سؤالی داری؟
            </h2>
            <p className="text-lg leading-8 text-muted-foreground">پرتکرارترین‌ها این‌جاست؛ برای بقیه، تیمِ ما آنلاین است.</p>
          </div>
          <div className="flex flex-col gap-5 rounded-xl bg-subtle p-6">
            <AvatarGroup>
              {[stockImages.personMan1, stockImages.personWoman2, stockImages.personWoman3].map((photo) => (
                <Avatar key={photo.src} alt="" src={photo.src} />
              ))}
            </AvatarGroup>
            <div className="flex flex-col gap-1">
              <span className="font-bold">جوابت را پیدا نکردی؟</span>
              <span className="text-sm text-muted-foreground">میانگینِ پاسخ: ۱۰ دقیقه</span>
            </div>
            <div className="flex flex-wrap gap-2">
              <Button>
                <ChatIcon />
                گفت‌وگو
              </Button>
              <Button variant="outline" className="bg-card">
                <PhoneIcon />
                تماس
              </Button>
            </div>
          </div>
        </div>
        <Accordion type="single" collapsible variant="soft" indicator="plus" defaultValue={ITEMS[0].q}>
          {ITEMS.map((item) => (
            <AccordionItem key={item.q} value={item.q}>
              <AccordionTrigger>{item.q}</AccordionTrigger>
              <AccordionContent className="leading-8 text-muted-foreground">{item.a}</AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>
      </section>
    </ControlSizeProvider>
  )
}