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

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

interface Faq7Props {
  className?: string;
}

const Faq7 = ({ className }: Faq7Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container mx-auto max-w-5xl">
        <div className="grid gap-10 md:grid-cols-2">
          <div className="flex flex-col gap-6 text-start">
            <h2 className="text-xl font-semibold">
              هنوز در مورد صورتحساب سوال دارید؟
                                        <br />
              <span className="text-muted-foreground/70">
                کارشناس مالی کمتر از یک روز کاری پاسخ می‌دهد.
                                            </span>
            </h2>
            <p className="text-lg text-muted-foreground md:text-xl">
              اگر پاسخ خود را پیدا نکردید، با
                                        <a href="#" className="mx-1 whitespace-nowrap underline">
                واحد صورتحساب
              </a>
              در ارتباط باشید.
                                      </p>
            <Button size="lg" variant="outline" className="w-fit">
              مشاهده راهنمای پلن‌ها
                                      </Button>
          </div>
          <Accordion type="multiple" className="text-start">
            {faqs.map((faq, index) => (
              <AccordionItem key={index} value={`item-${index}`}>
                <AccordionTrigger className="text-start">
                  {faq.question}
                </AccordionTrigger>
                <AccordionContent>{faq.answer}</AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </div>
      </div>
    </section>
  );
};

export { Faq7 };