reui-blocks/blocks/contact32.tsx

"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import { ArrowLeft, LoaderIcon, Mail, Phone } 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({
  firstName: z.string().min(1, "نام الزامی است"),
  lastName: z.string().min(1, "نام خانوادگی الزامی است"),
  email: z
    .string()
    .min(1, "ایمیل الزامی است")
    .email("آدرس ایمیل نامعتبر است"),
  message: z.string().min(1, "پیام الزامی است"),
});

type ContactFormData = z.infer<typeof contactFormSchema>;

interface Contact32Props {
  title?: string;
  subtitle?: string;
  description?: string;
  email?: string;
  phone?: string;
  image?: string;
  className?: string;
  onSubmit?: (data: ContactFormData) => Promise<void>;
}

const Contact32 = ({
  title = "گفتگو با فروش",
  subtitle = "فروش را با سامانه مدیریت ارتباط با مشتری یکپارچه مقیاس دهید",
  description = "فرم را تکمیل کنید تا کارشناس فروش حداکثر تا یک روز کاری برای دمو یا قیمت‌گذاری تماس بگیرد.",
  email = "hello@studio.com",
  phone = "۲۱-۱۲۳۴۵۶۷۸",
  image = "/block-media/shadcnblocks/block/lummi/Modern%20Architectural%20Elegance%20at%20Twilight.png",
  className,
  onSubmit,
}: Contact32Props) => {
  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: "",
      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("relative", className)}>
      <div className="grid min-h-screen lg:grid-cols-2">
        {/* Image Side */}
        <div className="relative hidden lg:block">
          <img
            src={image}
            alt="گفتگو با فروش"
            className="absolute inset-0 size-full object-cover"
          />
          <div className="absolute inset-0 bg-black/40" />
          <div className="relative flex h-full flex-col justify-end p-12 text-white">
            <p className="mb-2 text-sm tracking-widest uppercase opacity-80">
              فروش و پشتیبانی
                                      </p>
            <h2 className="text-xl font-medium">{subtitle}</h2>
          </div>
        </div>

        {/* Form Side */}
        <div className="flex flex-col justify-center px-6 py-16 md:px-12 lg:px-16">
          <div className="mx-auto w-full max-w-md">
            <div className="mb-10">
              <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="mb-10 flex flex-col gap-4 sm:flex-row sm:gap-8">
              <a
                href={`mailto:${email}`}
                className="group flex items-center gap-2 text-sm"
              >
                <Mail className="size-4 text-muted-foreground" />
                <span className="group-hover:underline" dir="rtl">
                  {email}
                </span>
              </a>
              <a
                href={`tel:${phone}`}
                className="group flex items-center gap-2 text-sm"
              >
                <Phone className="size-4 text-muted-foreground" />
                <span className="group-hover:underline" dir="rtl">
                  {phone}
                </span>
              </a>
            </div>

            {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>
            )}

            <form onSubmit={form.handleSubmit(handleFormSubmit)}>
              <FieldGroup>
                <div className="grid gap-4 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>
                    )}
                  />
                </div>

                <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="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={5}
                      />
                      {fieldState.invalid && (
                        <FieldError errors={[fieldState.error]} />
                      )}
                    </Field>
                  )}
                />

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

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

export { Contact32 };