import { MessageCircleQuestion } from "lucide-react";

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

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

interface Faq10Props {
  className?: string;
}

const Faq10 = ({ className }: Faq10Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="border-y">
        <div className="container mx-auto flex max-w-3xl flex-col gap-6 border-x py-4 text-center max-lg:border-x lg:py-8">
          <Badge
            variant="outline"
            className="mx-auto w-fit gap-1 bg-card px-3 text-sm font-normal tracking-tight shadow-sm"
          >
            <MessageCircleQuestion className="size-4" />

            <span>هوش مصنوعی کسب‌وکار</span>
          </Badge>
          <h2 className="text-3xl leading-tight tracking-tight md:text-xl lg:text-2xll">
            پاسخ کوتاه به سوال‌های پرتکرار
          </h2>
          <p className="mx-auto max-w-[600px] tracking-[-0.32px] text-muted-foreground">
            به دنبال پاسخ سریع هستید؟{" "}
            <span className="underline">همین فهرست</span> را مطالعه کنید.
                                </p>
        </div>
      </div>

      <div className="container mx-auto max-w-3xl">
        <div className="pt-8 pb-4 md:pb-8 lg:pt-[3.75rem] lg:pb-[50px]">
          <Accordion type="single" collapsible className="space-y-4 text-start">
            {DATA.map((item, index) => (
              <AccordionItem
                key={index}
                value={`item-${index}`}
                className="rounded-[7px] border px-6 text-primary data-[state=open]:pb-2"
              >
                <AccordionTrigger className="py-5 text-start text-base tracking-[-0.32px]">
                  {item.question}
                </AccordionTrigger>
                <AccordionContent className="text-base tracking-[-0.32px] text-muted-foreground">
                  {item.answer}
                </AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </div>
      </div>
      <div className="h-8 w-full border-y md:h-12 lg:h-[112px]">
        <div className="container mx-auto h-full max-w-3xl border-x"></div>
      </div>
    </section>
  );
};

export { Faq10 };