import { type SVGProps, useId } from "react";

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Card, CardContent, CardHeader } from "@/components/ui/card";

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

export function Faq14() {
  return (
    <section dir="rtl" lang="fa" className="relative py-32">
      <div className="container mx-auto max-w-3xl">
        <div className="text-center">
          <h1 className="text-xl font-semibold tracking-tight md:text-2xll lg:text-2xll">
            پرسش‌های متداول
                                </h1>
          <p className="mt-4 text-xl text-muted-foreground md:text-3xl">
            پاسخ پرسش‌های متداول کاربران
                                </p>
        </div>

        <div className="mx-auto mt-8 max-w-2xl space-y-12 text-start md:mt-12 lg:mt-20">
          {FAQ_ITEMS.map((category) => (
            <Card key={category.category} className="border-hidden bg-muted">
              <CardHeader className="pb-0">
                <h3 className="border-b pb-4 font-mono text-sm font-medium tracking-widest text-accent-foreground uppercase">
                  {category.category}
                </h3>
              </CardHeader>
              <CardContent>
                <Accordion type="single" collapsible className="w-full">
                  {category.items.map((item, i) => (
                    <AccordionItem
                      key={i}
                      value={`${category.category}-${i}`}
                      className="border-b border-muted last:border-0"
                    >
                      <AccordionTrigger className="text-start text-base font-medium hover:no-underline">
                        {item.question}
                      </AccordionTrigger>
                      <AccordionContent className="text-base font-medium text-muted-foreground">
                        {item.answer}
                      </AccordionContent>
                    </AccordionItem>
                  ))}
                </Accordion>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
      <div className="absolute -inset-40 z-[-1] [mask-image:radial-gradient(circle_at_center,black_0%,black_20%,transparent_75%)]">
        <PlusSigns className="h-full w-full text-foreground/[0.05]" />
      </div>
    </section>
  );
}

interface PlusSignsProps extends SVGProps<SVGSVGElement> {
  className?: string;
}

const PlusSigns = ({ className, ...props }: PlusSignsProps) => {
  const GAP = 16;
  const STROKE_WIDTH = 1;
  const PLUS_SIZE = 6;
  const id = useId();
  const patternId = `${id}`;

  return (
    <svg width={GAP * 2} height={GAP * 2} className={className} {...props}>
      <defs>
        <pattern
          id={patternId}
          x="0"
          y="0"
          width={GAP}
          height={GAP}
          patternUnits="userSpaceOnUse"
        >
          <line
            x1={GAP / 2}
            y1={(GAP - PLUS_SIZE) / 2}
            x2={GAP / 2}
            y2={(GAP + PLUS_SIZE) / 2}
            stroke="currentColor"
            strokeWidth={STROKE_WIDTH}
          />
          <line
            x1={(GAP - PLUS_SIZE) / 2}
            y1={GAP / 2}
            x2={(GAP + PLUS_SIZE) / 2}
            y2={GAP / 2}
            stroke="currentColor"
            strokeWidth={STROKE_WIDTH}
          />
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill={`url(#${patternId})`} />
    </svg>
  );
};