"use client";

import Link from "next/link";

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

const faqItems = [
  {
    id: "item-1",
    question: "زمان تحویل استند یا ویترین سفارشی چقدر است؟",
    answer:
      "بسته به ابعاد، متریال و میزان سفارشی‌سازی متفاوت است؛ پس از نیازسنجی و تایید طرح، زمان دقیق اجرا و تحویل به‌صورت شفاف اعلام می‌شود.",
  },
  {
    id: "item-2",
    question: "شرایط پرداخت و پیش‌پرداخت چگونه است؟",
    answer:
      "مراحل پرداخت با توجه به حجم سفارش و توافق قرارداد تعیین می‌شود؛ معمولاً پیش‌پرداخت برای شروع تولید و تسویه مرحله‌ای تا تحویل نهایی در نظر گرفته می‌شود.",
  },
  {
    id: "item-3",
    question: "آیا می‌توانم بعد از تایید طرح تغییر بدهم؟",
    answer:
      "تا قبل از ورود به مرحلهٔ تولید نهایی، امکان اصلاح طرح وجود دارد؛ برای تغییرات پس از شروع ساخت، بسته به مرحلهٔ کار با شما هماهنگ می‌شود.",
  },
  {
    id: "item-4",
    question: "ارسال به شهرهای دیگر دارید؟",
    answer:
      "بله؛ بسته‌بندی حمل و نصب در مقصد با هماهنگی از قبل انجام می‌شود و هزینه و زمان ارسال قبل از عقد قرارداد شفاف است.",
  },
  {
    id: "item-5",
    question: "گارانتی و خدمات پس از فروش شامل چیست؟",
    answer:
      "تعهد روی کیفیت اجرای سازه و یراق‌آلات؛ پس از تحویل برای تعمیر، تعویض روکش و راهنمایی نگهداری طبق شرایط گارانتی و صفحهٔ خدمات پس از فروش در دسترس است.",
  },
];

export default function FAQsFour({ className }: { className?: string }) {
  return (
    <section className={cn("py-16 md:py-24", className)} dir="rtl">
      <div className="mx-auto max-w-5xl px-4 md:px-6">
        <div className="mx-auto max-w-xl text-center">
          <h2 className="text-heading-2 text-balance font-semibold text-foreground">سوالات پرتکرار</h2>
          <p className="mt-4 text-balance text-body text-muted-foreground">
            پاسخ کوتاه به پرسش‌های رایج دربارهٔ سفارش استند، ویترین و دکور طلافروشی با مستر دکور.
          </p>
        </div>

        <div className="mx-auto mt-12 max-w-xl">
          <Accordion type="single" collapsible className="w-full rounded-2xl bg-muted p-1">
            {faqItems.map((item) => (
              <div className="group" key={item.id}>
                <AccordionItem
                  value={item.id}
                  className="rounded-xl border-none px-7 py-1 data-[state=open]:border-none data-[state=open]:bg-card data-[state=open]:shadow-sm"
                >
                  <AccordionTrigger className="cursor-pointer text-heading-5 font-medium text-foreground hover:no-underline">
                    {item.question}
                  </AccordionTrigger>
                  <AccordionContent>
                    <p className="text-body-sm text-muted-foreground">{item.answer}</p>
                  </AccordionContent>
                </AccordionItem>
                <hr className="mx-7 border-dashed border-border group-last:hidden peer-data-[state=open]:opacity-0" />
              </div>
            ))}
          </Accordion>

          <p className="mt-6 px-8 text-body-sm text-muted-foreground">
            جواب سوالتان را پیدا نکردید؟ از صفحهٔ{" "}
            <Link href="/contact" className="font-medium text-primary hover:underline">
              تماس با ما
            </Link>{" "}
            یا{" "}
            <Link href="/faq" className="font-medium text-primary hover:underline">
              سوالات متداول
            </Link>{" "}
            اقدام کنید.
          </p>
        </div>
      </div>
    </section>
  );
}