reui-blocks/blocks/contact25.tsx

"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import { LoaderIcon, MailIcon, MessageCircle } from "lucide-react";
import { useState } from "react";
import { Controller, useForm } from "react-hook-form";
import { z } from "zod";

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Button } from "@/components/ui/button";
import {
  Field,
  FieldError,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { cn } from "@/lib/utils";

const contactFormSchema = z.object({
  name: z.string().min(1, "نام الزامی است"),
  email: z
    .string()
    .min(1, "ایمیل الزامی است")
    .email("آدرس ایمیل نامعتبر است"),
  message: z.string().min(1, "پیام الزامی است"),
});

type ContactFormData = z.infer<typeof contactFormSchema>;

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

interface Contact25Props {
  title?: string;
  description?: string;
  faqTitle?: string;
  faqs?: FAQ[];
  className?: string;
  onSubmit?: (data: ContactFormData) => Promise<void>;
}

const Contact25 = ({
  title = "پشتیبانی، دمو و onboarding",
  description = "پاسخ پرسش‌های رایج محصول را ببینید یا برای دمو، استقرار و پشتیبانی پیام بفرستید.",
  faqTitle = "سوالات متداول CRM",
  faqs = [
    {
      question: "ساعات پشتیبانی محصول چیست؟",
      answer:
        "تیم Customer Success شنبه تا چهارشنبه، ۹ تا ۱۸ در دسترس است. برای موارد فوری خارج از این ساعات به urgent@company.com ایمیل بزنید.",
    },
    {
      question: "پاسخ به تیکت چقدر طول می‌کشد؟",
      answer:
        "معمولاً ظرف ۲۴ ساعت کاری به درخواست‌های پشتیبانی پاسخ می‌دهیم. مسائل پیچیده یا یکپارچه‌سازی ممکن است تا ۴۸ ساعت زمان ببرد.",
    },
    {
      question: "پشتیبانی تلفنی دارید؟",
      answer:
        "بله؛ پشتیبانی تلفنی برای پلن حرفه‌ای و سازمانی فعال است. شماره اختصاصی را در داشبورد حساب خود ببینید.",
    },
    {
      question: "چطور دموی محصول رزرو کنم؟",
      answer:
        "از فرم همین صفحه یا تماس با تیم فروش می‌توانید دمو شخصی‌سازی‌شده رزرو کنید. هر جلسه معمولاً ۳۰ تا ۴۵ دقیقه است.",
    },
    {
      question: "در پیام پشتیبانی چه بنویسم؟",
      answer:
        "ایمیل حساب، توضیح دقیق مشکل یا سؤال onboarding، و در صورت نیاز اسکرین‌شات یا متن خطا را ارسال کنید تا سریع‌تر رسیدگی شود.",
    },
  ],
  className,
  onSubmit,
}: Contact25Props) => {
  const [isSubmitted, setIsSubmitted] = useState(false);
  const [showSuccess, setShowSuccess] = useState(false);

  const form = useForm<ContactFormData>({
    resolver: zodResolver(contactFormSchema),
    mode: "onSubmit",
    reValidateMode: "onSubmit",
    defaultValues: {
      name: "",
      email: "",
      message: "",
    },
  });

  const handleFormSubmit = async (data: ContactFormData) => {
    try {
      if (onSubmit) {
        await onSubmit(data);
      } else {
        console.log("Form submitted:", data);
        await new Promise((resolve) => setTimeout(resolve, 1000));
      }
      setIsSubmitted(true);
      setShowSuccess(true);
      form.reset();
      setTimeout(() => setShowSuccess(false), 4500);
      setTimeout(() => setIsSubmitted(false), 5000);
    } catch {
      form.setError("root", {
        message: "ارسال ناموفق بود. لطفاً دوباره تلاش کنید.",
      });
    }
  };

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto max-w-6xl">
          <div className="mb-14 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="grid gap-12 lg:grid-cols-2 lg:gap-16">
            <div>
              <div className="mb-6 flex items-center gap-2">
                <MessageCircle className="size-5 text-muted-foreground" />
                <h2 className="text-lg font-medium">{faqTitle}</h2>
              </div>
              <Accordion type="single" collapsible className="w-full">
                {faqs.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>
                ))}
              </Accordion>
            </div>

            <div>
              <div className="mb-6 flex items-center gap-2">
                <MailIcon className="size-5 text-muted-foreground" />
                <h2 className="text-lg font-medium">هنوز سؤال دارید؟</h2>
              </div>
              <form
                onSubmit={form.handleSubmit(handleFormSubmit)}
                className="flex flex-col gap-6 rounded-xl bg-muted/50 p-8"
              >
                {isSubmitted && (
                  <div
                    className={cn(
                      "rounded-lg border border-green-500/20 bg-green-500/10 p-4 text-center transition-opacity duration-500",
                      showSuccess ? "opacity-100" : "opacity-0",
                    )}
                  >
                    <p className="text-sm font-medium text-green-600 dark:text-green-400">
                      تیکت شما ثبت شد. تیم پشتیبانی به‌زودی پاسخ می‌دهد.
                                                              </p>
                  </div>
                )}

                <FieldGroup>
                  <Controller
                    control={form.control}
                    name="name"
                    render={({ field, fieldState }) => (
                      <Field data-invalid={fieldState.invalid}>
                        <FieldLabel htmlFor={field.name}>
                          نام کامل <span className="text-destructive">*</span>
                        </FieldLabel>
                        <Input
                          {...field}
                          id={field.name}
                          aria-invalid={fieldState.invalid}
                          placeholder="نام و نقش شغلی"
                          className="bg-background"
                        />
                        {fieldState.invalid && (
                          <FieldError errors={[fieldState.error]} />
                        )}
                      </Field>
                    )}
                  />

                  <Controller
                    control={form.control}
                    name="email"
                    render={({ field, fieldState }) => (
                      <Field data-invalid={fieldState.invalid}>
                        <FieldLabel htmlFor={field.name}>
                          ایمیل کاری <span className="text-destructive">*</span>
                        </FieldLabel>
                        <Input
                          {...field}
                          id={field.name}
                          type="email"
                          aria-invalid={fieldState.invalid}
                          placeholder="example@email.com"
                          dir="rtl"
                          className="bg-background text-start"
                        />
                        {fieldState.invalid && (
                          <FieldError errors={[fieldState.error]} />
                        )}
                      </Field>
                    )}
                  />

                  <Controller
                    control={form.control}
                    name="message"
                    render={({ field, fieldState }) => (
                      <Field data-invalid={fieldState.invalid}>
                        <FieldLabel htmlFor={field.name}>
                          پیام <span className="text-destructive">*</span>
                        </FieldLabel>
                        <Textarea
                          {...field}
                          id={field.name}
                          aria-invalid={fieldState.invalid}
                          placeholder="دمو، onboarding یا مشکل پشتیبانی را بنویسید."
                          rows={4}
                          className="bg-background"
                        />
                        {fieldState.invalid && (
                          <FieldError errors={[fieldState.error]} />
                        )}
                      </Field>
                    )}
                  />

                  {form.formState.errors.root && (
                    <p className="text-sm text-destructive">
                      {form.formState.errors.root.message}
                    </p>
                  )}

                  <Button
                    type="submit"
                    size="lg"
                    className="w-full gap-2"
                    disabled={form.formState.isSubmitting}
                  >
                    {form.formState.isSubmitting ? (
                      <>
                        <LoaderIcon className="size-4 animate-spin" />
                        در حال ارسال...
                      </>
                    ) : (
                      "ارسال به پشتیبانی"
                    )}
                  </Button>
                </FieldGroup>
              </form>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Contact25 };