import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";

const faqs = [
  {
    question: "وظایف تیم را چطور در یک جا می‌بینم؟",
    answer:
      "برد کار و فهرست وظایف به‌صورت زنده همگام است؛ فیلتر مالک، اولویت و مهلت وضعیت پروژه را شفاف می‌کند.",
  },
  {
    question: "آیا می‌توانم وابستگی بین کارها تعریف کنم؟",
    answer:
      "بله. وابستگی‌ها و نقاط عطف را مشخص کنید تا تأخیر یک بخش، مسیر بقیه تیم را واضح نشان دهد.",
  },
  {
    question: "به‌روزرسانی وضعیت چطور به ذی‌نفعان می‌رسد؟",
    answer:
      "خلاصه هفتگی خودکار یا لینک وضعیت زنده را برای مدیر و مشتری بدون دسترسی کامل به فضای کار بفرستید.",
  },
  {
    question: "فایل‌ها و تصمیم‌ها کجا ثبت می‌شوند؟",
    answer:
      "ضمیمه، نظر و تصمیم روی همان کارت کار می‌مانند تا جستجو جایگزین پیام‌های پراکنده شود.",
  },
  {
    question: "نقش‌ها و دسترسی‌ها قابل تنظیم‌اند؟",
    answer:
      "عضو، ناظر و مدیر فضای کار دسترسی متفاوت دارند تا داده حساس فقط در اختیار نقش درست باشد.",
  },
  {
    question: "با تقویم و پیام‌رسان تیم وصل می‌شود؟",
    answer:
      "مهلت‌ها به تقویم می‌روند و یادآورها در کانال تیم ظاهر می‌شوند تا هیچ موعدی جا نماند.",
  },
];

interface Faq6Props {
  className?: string;
}

const Faq6 = ({ className }: Faq6Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container mx-auto max-w-3xl">
        <div className="text-center">
          <Badge className="text-xs font-medium">همکاری تیمی</Badge>
          <h1 className="mt-4 text-xl font-semibold">
            چطور کار تیمی را شفاف نگه داریم
                                </h1>
          <p className="mt-6 font-medium text-muted-foreground">
            پاسخ پرسش‌های رایج درباره برد کار، وابستگی وظایف و گزارش وضعیت برای تیم‌های محصول و عملیات.
                                </p>
        </div>
        <div className="mx-auto mt-14 grid gap-8 text-start md:grid-cols-2 md:gap-12">
          {faqs.map((faq, index) => (
            <div key={index} className="flex gap-4">
              <span className="flex size-6 shrink-0 items-center justify-center rounded-sm bg-secondary font-mono text-xs text-primary">
                {(index + 1).toLocaleString("fa-IR")}
              </span>
              <div>
                <div className="mb-2 flex items-center justify-between">
                  <h3 className="font-medium">{faq.question}</h3>
                </div>
                <p className="text-sm text-muted-foreground">{faq.answer}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Faq6 };