reui-blocks/blocks/contact11.tsx

"use client";

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

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({
  fullName: z.string().min(1, "نام و نام خانوادگی"),
  email: z
    .string()
    .min(1, "ایمیل کاری")
    .email("ایمیل واردشده معتبر نیست"),
  company: z.string().optional(),
  employees: z.string().optional(),
  message: z.string().min(1, "شرح درخواست را وارد کنید"),
});

type ContactFormData = z.infer<typeof contactFormSchema>;

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

const Contact11 = ({ className, onSubmit }: Contact11Props) => {
  const [isSubmitted, setIsSubmitted] = useState(false);
  const [showSuccess, setShowSuccess] = useState(false);

  const form = useForm<ContactFormData>({
    resolver: zodResolver(contactFormSchema),
    mode: "onSubmit",
    reValidateMode: "onSubmit",
    defaultValues: {
      fullName: "",
      email: "",
      company: "",
      employees: "",
      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 max-w-4xl">
        <h1 className="text-center text-xl font-semibold tracking-tight sm:text-2xll">
          درخواست دمو CRM
        </h1>
        <p className="mt-4 text-center text-muted-foreground">
          فرم را پر کنید تا کارشناس فروش جلسه دمو را بر اساس اندازه تیم و نیازتان هماهنگ کند.
                          </p>

        <div className="mt-8 flex gap-10 max-md:flex-col md:mt-12 md:divide-x">
          <div className="space-y-10 pe-10 md:gap-20">
            <div>
              <h2 className="text-lg font-semibold">دفتر تهران</h2>
              <p
                className="mt-3 font-medium tracking-tight text-muted-foreground"
                dir="rtl"
              >
                Valiasr St, Tehran 15138
                <br />
                Iran
              </p>
            </div>

            <div>
              <h2 className="text-lg font-semibold">ایمیل تیم فروش</h2>
              <div className="mt-3 space-y-2">
                <div>
                  <p className="text-primary">فروش سازمانی</p>
                  <a
                    href="mailto:careers@example.com"
                    className="mt-3 tracking-tight text-muted-foreground hover:text-foreground"
                    dir="rtl"
                  >
                    careers@example.com
                  </a>
                </div>
                <div>
                  <p className="text-primary">پشتیبانی محصول</p>
                  <a
                    href="mailto:press@example.com"
                    className="mt-3 tracking-tight text-muted-foreground hover:text-foreground"
                    dir="rtl"
                  >
                    press@example.com
                  </a>
                </div>
              </div>
            </div>

            <div>
              <h2 className="text-lg font-semibold">ما را دنبال کنید</h2>
              <div className="mt-3 flex gap-6">
                <a
                  href="#"
                  aria-label="فیسبوک"
                  className="text-muted-foreground hover:text-foreground"
                >
                  <Facebook className="size-6" />
                </a>
                <a
                  href="#"
                  aria-label="توییتر"
                  className="text-muted-foreground hover:text-foreground"
                >
                  <Twitter className="size-6" />
                </a>
                <a
                  href="#"
                  aria-label="لینکدین"
                  className="text-muted-foreground hover:text-foreground"
                >
                  <Linkedin className="size-6" />
                </a>
              </div>
            </div>
          </div>

          <div className="flex-1 md:ps-10">
            <h2 className="text-lg font-semibold">درخواست دمو</h2>

            {isSubmitted && (
              <div
                className={cn(
                  "mt-5 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>
            )}

            <form
              onSubmit={form.handleSubmit(handleFormSubmit)}
              className="mt-5"
            >
              <FieldGroup>
                <Controller
                  control={form.control}
                  name="fullName"
                  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="علی محمدی"
                      />
                      {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="name@company.com"
                        dir="rtl"
                        className="text-start"
                      />
                      {fieldState.invalid && (
                        <FieldError errors={[fieldState.error]} />
                      )}
                    </Field>
                  )}
                />

                <Controller
                  control={form.control}
                  name="company"
                  render={({ field }) => (
                    <Field>
                      <FieldLabel htmlFor={field.name}>نام شرکت</FieldLabel>
                      <Input
                        {...field}
                        id={field.name}
                        placeholder="نام شرکت"
                      />
                    </Field>
                  )}
                />

                <Controller
                  control={form.control}
                  name="employees"
                  render={({ field }) => (
                    <Field>
                      <FieldLabel htmlFor={field.name}>
                        تعداد کاربران CRM
                      </FieldLabel>
                      <Input
                        {...field}
                        id={field.name}
                        placeholder="مثال: ۱۰ تا ۵۰ نفر"
                      />
                    </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="ابزار فعلی فروش، هدف استقرار و زمان پیشنهادی دمو را بنویسید."
                        className="min-h-[120px] resize-none"
                      />
                      {fieldState.invalid && (
                        <FieldError errors={[fieldState.error]} />
                      )}
                    </Field>
                  )}
                />

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

                <div className="flex justify-start">
                  <Button
                    type="submit"
                    size="lg"
                    className="gap-2"
                    disabled={form.formState.isSubmitting}
                  >
                    {form.formState.isSubmitting ? (
                      <>
                        <LoaderIcon className="size-4 animate-spin" />
                        در حال ارسال...
                      </>
                    ) : (
                      "درخواست دمو"
                    )}
                  </Button>
                </div>
              </FieldGroup>
            </form>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Contact11 };