reui-blocks/blocks/help2.tsx

"use client";

import { Mail, MessageSquare, Phone, Search } from "lucide-react";
import { useMemo, useState } from "react";

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

interface FAQ {
  question: string;
  answer: string;
  category: string;
}

interface Help2Props {
  title?: string;
  description?: string;
  faqs?: FAQ[];
  contactTitle?: string;
  contactDescription?: string;
  className?: string;
}

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

const Help2 = ({
  title = "چطور می‌توانیم کمک کنیم؟",
  description = "پاسخ سوالات رایج را بیابید یا با تیم پشتیبانی تماس بگیرید.",
  faqs = DEFAULT_FAQS,
  contactTitle = "هنوز به کمک نیاز دارید؟",
  contactDescription = "تیم پشتیبانی ما در کنار شماست.",
  className,
}: Help2Props) => {
  const [searchQuery, setSearchQuery] = useState("");

  const filteredFaqs = useMemo(() => {
    if (!searchQuery.trim()) return faqs;
    const query = searchQuery.toLowerCase();
    return faqs.filter(
      (faq) =>
        faq.question.toLowerCase().includes(query) ||
        faq.answer.toLowerCase().includes(query),
    );
  }, [faqs, searchQuery]);

  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto max-w-3xl">
          <div className="mb-10 text-center">
            <h1 className="mb-4 text-xl font-medium tracking-tight md:text-2xll">
              {title}
            </h1>
            <p className="text-muted-foreground">{description}</p>
          </div>

          <div className="relative mb-8">
            <Search className="absolute top-1/2 start-3 size-5 -translate-y-1/2 text-muted-foreground" />
            <Input
              type="search"
              placeholder="جستجو در پاسخ‌ها..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="ps-10"
            />
          </div>

          <Accordion type="single" collapsible className="mb-16">
            {filteredFaqs.length > 0 ? (
              filteredFaqs.map((faq, index) => (
                <AccordionItem key={index} value={`item-${index}`}>
                  <AccordionTrigger className="text-start">
                    {faq.question}
                  </AccordionTrigger>
                  <AccordionContent className="text-muted-foreground">
                    {faq.answer}
                  </AccordionContent>
                </AccordionItem>
              ))
            ) : (
              <p className="py-8 text-center text-muted-foreground">
                نتیجه‌ای برای «{searchQuery}» یافت نشد.
              </p>
            )}
          </Accordion>

          <div className="rounded-xl bg-muted/50 p-8">
            <div className="mb-6 text-center">
              <h2 className="mb-2 text-xl font-semibold">{contactTitle}</h2>
              <p className="text-sm text-muted-foreground">
                {contactDescription}
              </p>
            </div>
            <div className="grid gap-3 sm:grid-cols-3">
              <Button variant="outline" className="w-full bg-background">
                <MessageSquare className="me-2 size-4" />
                چت زنده
              </Button>
              <Button variant="outline" className="w-full bg-background">
                <Mail className="me-2 size-4" />
                به ما ایمیل بزنید
              </Button>
              <Button variant="outline" className="w-full bg-background">
                <Phone className="me-2 size-4" />
                با ما تماس بگیرید
              </Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Help2 };