"use client";

import * as React from "react";

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { cn } from "@/lib/utils";

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

interface Faq16Props {
  className?: string;
}

const Faq16 = ({ className }: Faq16Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("bg-background py-32", className)}
    >
      <div className="container mx-auto max-w-3xl">
        <h1 className="mb-10 text-center text-2xll font-bold tracking-tighter text-foreground">
          پرسش‌های اتوماسیون فرایند
                          </h1>
        <div className="z-20 mx-auto max-w-2xl rounded-2xl border border-border bg-background p-3">
          <Accordion
            type="single"
            collapsible
            className="flex w-full flex-col items-center justify-center gap-3 text-start"
          >
            {FAQ_QUESTIONS.map((item, index) => (
              <AccordionItem
                value={index.toString()}
                key={index}
                className="m-0 w-full rounded-xl bg-muted px-4 py-2"
              >
                <AccordionTrigger className="flex flex-1 justify-between text-start font-semibold transition-all hover:no-underline">
                  {item.question}
                </AccordionTrigger>
                <AccordionContent className="mt-2 text-muted-foreground">
                  {item.answer}
                </AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </div>
      </div>
    </section>
  );
};

export { Faq16 };