reui-blocks/blocks/contact17.tsx

"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import { Check, LoaderIcon } 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 {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { cn } from "@/lib/utils";

const contactFormSchema = z.object({
  firstName: z.string().min(1, "نام الزامی است"),
  lastName: z.string().min(1, "نام خانوادگی الزامی است"),
  email: z
    .string()
    .min(1, "ایمیل الزامی است")
    .email("آدرس ایمیل نامعتبر است"),
  companySize: z.string().optional(),
  message: z.string().min(1, "پیام الزامی است"),
  referrer: z.string().optional(),
});

type ContactFormData = z.infer<typeof contactFormSchema>;

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

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

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

  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("bg-muted/50 py-32", className)}>
      <div className="container">
        <span className="text-xs text-muted-foreground">شروع با سامانه مدیریت ارتباط با مشتری /</span>
        <div className="mt-8 grid grid-cols-1 gap-8 md:gap-10 lg:grid-cols-2 lg:grid-rows-[min-content_1fr]">
          <h2 className="order-1 text-xl font-medium tracking-tight md:order-none md:text-2xll">
            درخواست دمو و مشاوره فروش
                                </h2>
          <div className="order-2 md:order-none md:row-span-2">
            <div className="rounded-lg border border-border bg-background p-6">
              {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">
                    درخواست شما ثبت شد. کارشناس Customer Success ظرف یک روز کاری تماس می‌گیرد.
                                                        </p>
                </div>
              )}

              <form onSubmit={form.handleSubmit(handleFormSubmit)}>
                <FieldGroup className="grid gap-6 sm:grid-cols-2">
                  <Controller
                    control={form.control}
                    name="firstName"
                    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="lastName"
                    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="example@email.com"
                          dir="rtl"
                          className="text-start"
                        />
                        {fieldState.invalid && (
                          <FieldError errors={[fieldState.error]} />
                        )}
                      </Field>
                    )}
                  />

                  <Controller
                    control={form.control}
                    name="companySize"
                    render={({ field }) => (
                      <Field>
                        <FieldLabel htmlFor={field.name}>
                          اندازه تیم فروش
                        </FieldLabel>
                        <Select
                          onValueChange={field.onChange}
                          value={field.value}
                        >
                          <SelectTrigger id={field.name} className="w-full">
                            <SelectValue placeholder="تعداد کاربران سامانه مدیریت ارتباط با مشتری" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="5k-15k">
                              ۱ تا ۱۰ کاربر
                            </SelectItem>
                            <SelectItem value="15k-30k">
                              ۱۱ تا ۲۵ کاربر
                            </SelectItem>
                            <SelectItem value="30k-50k">
                              ۲۶ تا ۵۰ کاربر
                            </SelectItem>
                            <SelectItem value="50k-100k">
                              ۵۱ تا ۱۰۰ کاربر
                            </SelectItem>
                            <SelectItem value="100k-250k">
                              ۱۰۱ تا ۲۵۰ کاربر
                            </SelectItem>
                            <SelectItem value="250k+">
                              بیش از ۲۵۰ کاربر
                            </SelectItem>
                          </SelectContent>
                        </Select>
                      </Field>
                    )}
                  />

                  <Controller
                    control={form.control}
                    name="message"
                    render={({ field, fieldState }) => (
                      <Field
                        data-invalid={fieldState.invalid}
                        className="sm:col-span-2"
                      >
                        <FieldLabel htmlFor={field.name}>
                          هدف شما از سامانه مدیریت ارتباط با مشتری <span className="text-destructive">*</span>
                        </FieldLabel>
                        <Textarea
                          {...field}
                          id={field.name}
                          aria-invalid={fieldState.invalid}
                          placeholder="مثلاً پیپ‌لاین فروش، اتوماسیون lead یا گزارش‌دهی تیم."
                        />
                        {fieldState.invalid && (
                          <FieldError errors={[fieldState.error]} />
                        )}
                      </Field>
                    )}
                  />

                  <Controller
                    control={form.control}
                    name="referrer"
                    render={({ field }) => (
                      <Field className="sm:col-span-2">
                        <FieldLabel htmlFor={field.name}>
                          چطور با محصول آشنا شدید؟
                        </FieldLabel>
                        <Input
                          {...field}
                          id={field.name}
                          placeholder="جستجوی گوگل، معرفی همکار، وبینار یا LinkedIn"
                        />
                      </Field>
                    )}
                  />

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

                  <Button
                    type="submit"
                    className="gap-2 sm:col-span-2"
                    disabled={form.formState.isSubmitting}
                  >
                    {form.formState.isSubmitting ? (
                      <>
                        <LoaderIcon className="size-4 animate-spin" />
                        در حال ارسال...
                      </>
                    ) : (
                      "ارسال درخواست دمو"
                    )}
                  </Button>

                  <p className="text-xs text-muted-foreground sm:col-span-2">
                    با ارسال این فرم، تأیید می‌کنید که{" "}
                    <a href="#" className="text-primary hover:underline">
                      سیاست حفظ حریم خصوصی
                    </a>{" "}
                    و{" "}
                    <a href="#" className="text-primary hover:underline">
                      شرایط استفاده از سرویس
                    </a>{" "}
                    ما را مطالعه کرده و پذیرفته‌اید.
                  </p>
                </FieldGroup>
              </form>
            </div>
          </div>
          <div className="order-3 my-6 md:order-none">
            <ul className="space-y-2 font-medium">
              <li className="flex items-center gap-2">
                <span className="flex size-6 shrink-0 items-center justify-center rounded-full bg-background">
                  <Check className="size-4" />
                </span>
                نیازهای فروش و اهداف تیم خود را با ما مطرح کنید.
                                            </li>
              <li className="flex items-center gap-2">
                <span className="flex size-6 shrink-0 items-center justify-center rounded-full bg-background">
                  <Check className="size-4" />
                </span>
                پیشنهاد استقرار و پلن متناسب با اندازه تیم بگیرید.
                                            </li>
              <li className="flex items-center gap-2">
                <span className="flex size-6 shrink-0 items-center justify-center rounded-full bg-background">
                  <Check className="size-4" />
                </span>
                دموی اختصاصی محصول را با کارشناس فروش رزرو کنید.
                                            </li>
            </ul>
            <p className="my-6 font-bold">
              بیش از ۳۰۰۰ تیم فروش، سامانه مدیریت ارتباط با مشتری ما را برای مدیریت lead و پیپ‌لاین به‌کار می‌برند.
                                      </p>
            <div className="grid grid-cols-2 place-items-center gap-8 md:grid-cols-4">
              <img
                src="/block-media/shadcnblocks/block/logos/company/fictional-company-logo-1.svg"
                alt="لوگوی مشتری سازمانی"
                className="max-w-24 dark:invert"
              />
              <img
                src="/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg"
                alt="لوگوی مشتری سازمانی"
                className="max-w-24 dark:invert"
              />
              <img
                src="/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg"
                alt="لوگوی مشتری سازمانی"
                className="max-w-24 dark:invert"
              />
              <img
                src="/block-media/shadcnblocks/block/logos/company/fictional-company-logo-4.svg"
                alt="لوگوی مشتری سازمانی"
                className="max-w-24 dark:invert"
              />
              <img
                src="/block-media/shadcnblocks/block/logos/company/fictional-company-logo-5.svg"
                alt="لوگوی مشتری سازمانی"
                className="max-w-24 dark:invert"
              />
              <img
                src="/block-media/shadcnblocks/block/logos/company/fictional-company-logo-6.svg"
                alt="لوگوی مشتری سازمانی"
                className="max-w-24 dark:invert"
              />
              <img
                src="/block-media/shadcnblocks/block/logos/company/fictional-company-logo-7.svg"
                alt="لوگوی مشتری سازمانی"
                className="max-w-24 dark:invert"
              />
              <img
                src="/block-media/shadcnblocks/block/logos/company/fictional-company-logo-8.svg"
                alt="لوگوی مشتری سازمانی"
                className="max-w-24 dark:invert"
              />
            </div>
          </div>
        </div>
        <div className="mt-16 grid gap-8 md:gap-12 lg:w-1/2 lg:grid-cols-2">
          <div>
            <h3 className="mb-1.5 font-bold">سوالات متداول</h3>
            <p className="text-sm text-muted-foreground">
              درباره onboarding، پلن‌ها و یکپارچه‌سازی در{" "}
              <a href="#" className="text-primary underline hover:underline">
                مرکز راهنما
              </a>{" "}
              بخوانید و سریع‌تر تصمیم بگیرید.
                                      </p>
          </div>
          <div>
            <h3 className="mb-1.5 font-bold">منابع محصول</h3>
            <p className="text-sm text-muted-foreground">
              راهنماهای استقرار، گزارش‌های موفقیت و مستندات API را در{" "}
              <a href="#" className="text-primary underline hover:underline">
                مرکز منابع
              </a>{" "}
              ببینید و تیم فروش را زودتر آماده کنید.
                                      </p>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Contact17 };