reui-blocks/blocks/contact9.tsx

"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import { Building, ChevronLeft, LoaderIcon, Mail, Phone } from "lucide-react";
import { useState } from "react";
import { Controller, useForm } from "react-hook-form";
import { z } from "zod";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
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 contactMethods = [
  {
    icon: Mail,
    title: "ایمیل",
    description:
      "برای درخواست دمو، مشاوره پلن یا پشتیبانی سامانه مدیریت ارتباط با مشتری ایمیل بزنید. در روزهای کاری معمولاً کمتر از ۲۴ ساعت پاسخ می‌دهیم.",
    contact: "hello@relative.io",
    ltr: true,
  },
  {
    icon: Phone,
    title: "تلفن",
    description:
      "ترجیح می‌دهید تلفنی صحبت کنید؟ کارشناس فروش در روزهای کاری از ۹ تا ۱۷ پاسخ‌گوست.",
    contact: "۲۱-۱۲۳۴۵۶۷۸",
    ltr: true,
  },
  {
    icon: Building,
    title: "دفتر",
    description: "جلسه معرفی محصول را با هماهنگی قبلی در دفتر تهران برگزار کنید.",
    contact: (
      <a
        href="#"
        className="inline-flex items-center gap-1 text-sm font-medium text-foreground hover:underline"
      >
        مسیریابی
        <ChevronLeft className="size-4" />
      </a>
    ),
    ltr: false,
  },
];

const contactFormSchema = z.object({
  name: z.string().min(1, "نام را وارد کنید"),
  email: z
    .string()
    .min(1, "ایمیل را وارد کنید")
    .email("ایمیل واردشده معتبر نیست"),
  message: z.string().min(1, "پیام را وارد کنید"),
  // @ts-ignore
  agreeToTerms: z.literal(true, {
    errorMap: () => ({ message: "برای ادامه، شرایط استفاده را بپذیرید." }),
  }),
});

type ContactFormData = z.infer<typeof contactFormSchema>;

interface Contact9Props {
  className?: string;
  onSubmit?: (data: ContactFormData) => Promise<void>;
}

const Contact9 = ({ className, onSubmit }: Contact9Props) => {
  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: "",
      agreeToTerms: undefined,
    },
  });

  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="flex flex-col gap-6 py-4 lg:py-8">
          <Badge
            variant="outline"
            className="w-fit gap-1 bg-card px-3 text-sm font-normal tracking-tight shadow-sm"
          >
            <Mail className="size-4" />
            <span>تیم فروش</span>
          </Badge>
          <h2 className="text-3xl leading-tight tracking-tight md:text-xl lg:text-2xll">
            درخواست دمو یا مشاوره
          </h2>
          <p className="max-w-[600px] tracking-[-0.32px] text-muted-foreground">
            درباره پلن سامانه مدیریت ارتباط با مشتری، استقرار یا پشتیبانی سؤال دارید؟ فرم را پر کنید تا کارشناس فروش پاسخ دهد.
                                </p>
        </div>

        <div className="flex justify-between gap-10 py-12 max-md:flex-col">
          <form
            onSubmit={form.handleSubmit(handleFormSubmit)}
            className="flex flex-1 flex-col"
          >
            {isSubmitted && (
              <div
                className={cn(
                  "mb-6 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="border-border bg-card"
                    />
                    {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="border-border bg-card 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="نیاز تیم فروش، تعداد کاربر یا زمان دمو را بنویسید."
                      rows={4}
                      className="border-border bg-card"
                    />
                    {fieldState.invalid && (
                      <FieldError errors={[fieldState.error]} />
                    )}
                  </Field>
                )}
              />

              <Controller
                control={form.control}
                name="agreeToTerms"
                render={({ field, fieldState }) => (
                  <Field data-invalid={fieldState.invalid}>
                    <div className="flex items-center gap-2">
                      <Checkbox
                        id={field.name}
                        // @ts-ignore
                        checked={field.value}
                        onCheckedChange={field.onChange}
                        aria-invalid={fieldState.invalid}
                      />
                      <label
                        htmlFor={field.name}
                        className="text-sm font-normal peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                      >
                        موافقم با{" "}
                        <a href="/terms" className="underline">
                          شرایط استفاده
                        </a>
                      </label>
                    </div>
                    {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"
                className="gap-2"
                disabled={form.formState.isSubmitting}
              >
                {form.formState.isSubmitting ? (
                  <>
                    <LoaderIcon className="size-4 animate-spin" />
                    در حال ارسال...
                  </>
                ) : (
                  "ارسال درخواست"
                )}
              </Button>
            </FieldGroup>
          </form>

          <div className="grid flex-1 gap-6 self-start lg:grid-cols-2">
            {contactMethods.map((method, index) => (
              <div key={index} className="space-y-2">
                <div className="flex items-center gap-2">
                  <method.icon className="size-5" />
                  <h3 className="text-xl tracking-[-0.96px]">
                    {method.title}
                  </h3>
                </div>
                <div className="space-y-2 tracking-[-0.32px]">
                  <p className="text-sm text-muted-foreground">
                    {method.description}
                  </p>
                  <div className="text-sm text-muted-foreground">
                    {method.ltr ? (
                      <span dir="rtl">{method.contact}</span>
                    ) : (
                      method.contact
                    )}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Contact9 };