"use client";

import { CircleHelp } from "lucide-react";

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { MeteorTitleBackground } from "@/components/utilities/meteor-title-background";
import { cn } from "@/lib/utils";

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

interface Faq16Props {
  className?: string;
}

const Faq16 = ({ className }: Faq16Props) => {
  return (
    <section className={cn("bg-background py-16 md:py-24 lg:py-28", className)} dir="rtl">
      <div className="mx-auto w-full max-w-7xl px-4 sm:px-6">
        <header className="mb-8 text-center md:mb-10">
          <div className="relative mx-auto max-w-4xl overflow-hidden rounded-2xl px-4 py-6 sm:px-8">
            <MeteorTitleBackground className="opacity-75" />
            <div className="relative z-10 space-y-2">
              <h1 className="flex flex-wrap items-center justify-center gap-2 text-heading-2 font-bold text-foreground sm:gap-3">
                <CircleHelp className="size-8 shrink-0 text-primary sm:size-9" aria-hidden />
                <span>سوالات متداول</span>
              </h1>
              <p className="mx-auto max-w-xl text-caption font-medium text-muted-foreground">
                پاسخ کوتاه به سوالات پرتکرار درباره انتخاب، سفارش، اجرا و پشتیبانی استندهای ویترین طلافروشی.
              </p>
            </div>
          </div>
        </header>

        <div className="mx-auto max-w-3xl rounded-2xl border border-border bg-card p-3 sm:p-4">
          <Accordion
            type="single"
            collapsible
            className="flex w-full flex-col items-center justify-center gap-3"
          >
            {FAQ_QUESTIONS.map((item, index) => (
              <AccordionItem
                value={index.toString()}
                key={index}
                className="m-0 w-full rounded-xl bg-muted px-4 py-2"
              >
                <AccordionTrigger className="flex flex-1 justify-between text-heading-5 font-medium text-foreground transition-all hover:no-underline">
                  {item.question}
                </AccordionTrigger>
                <AccordionContent className="mt-2 text-body-sm text-muted-foreground">
                  {item.answer}
                </AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </div>
      </div>
    </section>
  );
};

export { Faq16 };