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:
          "در پلن سازمانی، SSO و الزام تأیید دو مرحله‌ای برای کنترل دسترسی تیم قابل فعال‌سازی است.",
      },
    ],
  },
  {
    category: "سایر پرسش‌ها",
    items: [
      {
        question: "خروجی گزارش را چطور به BI بفرستم؟",
        answer:
          "CSV، Webhook و اتصال انبار داده برای همگام‌سازی با ابزار هوش تجاری شما آماده است.",
      },
      {
        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>
  );
};