reui-blocks/blocks/contact6.tsx

"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import { LoaderIcon, Mail, MapPin, MessagesSquare, 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 { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";
import {
  Field,
  FieldError,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { Separator } from "@/components/ui/separator";
import { Textarea } from "@/components/ui/textarea";
import { cn } from "@/lib/utils";

interface ContactInfo {
  icon: React.ReactNode;
  title: string;
  description: string;
  value: string;
  href: string;
  badge?: string;
}

const contactInfo: ContactInfo[] = [
  {
    icon: <Mail className="size-6" />,
    title: "ایمیل",
    description: "پاسخ فروش در روزهای کاری، معمولاً کمتر از ۲۴ ساعت",
    value: "hello@company.com",
    href: "mailto:hello@company.com",
    badge: "پیشنهادی",
  },
  {
    icon: <MessagesSquare className="size-6" />,
    title: "چت زنده",
    description: "پشتیبانی محصول برای سؤال‌های فوری درباره سامانه مدیریت ارتباط با مشتری.",
    value: "شروع گفتگو",
    href: "#",
    badge: "آنلاین",
  },
  {
    icon: <Phone className="size-6" />,
    title: "تلفن",
    description: "مشاوره فروش، دوشنبه تا جمعه ۹ تا ۱۸",
    value: "۲۱-۱۲۳۴۵۶۷۸",
    href: "tel:+982112345678",
  },
  {
    icon: <MapPin className="size-6" />,
    title: "دفتر",
    description: "جلسه معرفی محصول را با هماهنگی قبلی برگزار کنید.",
    value: "تهران، خیابان ولیعصر",
    href: "#",
  },
];

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

type ContactFormData = z.infer<typeof contactFormSchema>;

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

const Contact6 = ({ className, onSubmit }: Contact6Props) => {
  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: "",
      company: "",
      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("bg-background py-24", className)}>
      <div className="container px-4 md:px-6">
        <div className="mx-auto max-w-4xl">
          <div className="mb-16 text-center">
            <h1 className="mb-4 text-3xl font-bold tracking-tight sm:text-xl md:text-2xll">
              با تیم سامانه مدیریت ارتباط با مشتری در ارتباط باشید
            </h1>
            <p className="mx-auto max-w-2xl text-lg text-muted-foreground">
              برای دمو، پشتیبانی یا انتخاب پلن فروش از یکی از راه‌های زیر اقدام کنید. کارشناس مربوط در کوتاه‌ترین زمان پیگیری می‌کند.
                                      </p>
          </div>

          <div className="grid gap-12 lg:grid-cols-2">
            <div className="space-y-6">
              <div className="space-y-4">
                {contactInfo.map((info, index) => (
                  <Card key={index} className="border-0 bg-muted shadow-none">
                    <CardContent>
                      <div className="flex items-start gap-4">
                        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-muted">
                          {info.icon}
                        </div>
                        <div className="min-w-0 flex-1">
                          <div className="mb-1 flex items-center gap-2">
                            <h3 className="font-semibold">{info.title}</h3>
                          </div>
                          <p className="mb-2 text-sm text-muted-foreground">
                            {info.description}
                          </p>
                          <a
                            href={info.href}
                            className="text-sm font-medium transition-colors hover:underline"
                            dir={
                              info.title === "ایمیل" || info.title === "تلفن"
                                ? "ltr"
                                : undefined
                            }
                          >
                            {info.value}
                          </a>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </div>

            <Card className="border-0 shadow-none">
              <CardHeader>
                <CardTitle>درخواست خود را ارسال کنید</CardTitle>
                <p className="text-sm text-muted-foreground">
                  فرم را پر کنید تا کارشناس فروش در کوتاه‌ترین زمان پاسخ دهد.
                                                  </p>
              </CardHeader>
              <CardContent>
                {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 grid-cols-2 gap-4">
                      <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@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="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="resize-none"
                          />
                          {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-start gap-3">
                            <Checkbox
                              id={field.name}
                              // @ts-ignore
                              checked={field.value}
                              onCheckedChange={field.onChange}
                              aria-invalid={fieldState.invalid}
                            />
                            <label
                              htmlFor={field.name}
                              className="text-sm leading-relaxed text-muted-foreground"
                            >
                              موافقم با{" "}
                              <a
                                href="#"
                                className="font-medium text-foreground hover:underline"
                              >
                                شرایط استفاده
                              </a>{" "}
                              و{" "}
                              <a
                                href="#"
                                className="font-medium text-foreground hover: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="w-full gap-2"
                      disabled={form.formState.isSubmitting}
                    >
                      {form.formState.isSubmitting ? (
                        <>
                          <LoaderIcon className="size-4 animate-spin" />
                          در حال ارسال...
                        </>
                      ) : (
                        "ارسال درخواست"
                      )}
                    </Button>
                  </FieldGroup>
                </form>
              </CardContent>
            </Card>
          </div>

          <div className="mt-12">
            <Separator className="mb-8" />
            <Card className="border-0 bg-muted shadow-none">
              <CardContent className="p-6">
                <div className="grid gap-8 md:grid-cols-2">
                  <div className="space-y-4">
                    <h3 className="text-lg font-semibold">ساعات پاسخ‌گویی</h3>
                    <div className="space-y-2 text-sm text-muted-foreground">
                      <div className="flex justify-between gap-4">
                        <span>دوشنبه تا جمعه</span>
                        <span dir="rtl">۹:۰۰ - ۱۸:۰۰</span>
                      </div>
                      <div className="flex justify-between gap-4">
                        <span>شنبه</span>
                        <span dir="rtl">۱۰:۰۰ - ۱۶:۰۰</span>
                      </div>
                      <div className="flex justify-between gap-4">
                        <span>یکشنبه</span>
                        <span>تعطیل</span>
                      </div>
                    </div>
                  </div>
                  <div className="space-y-4">
                    <h3 className="text-lg font-semibold">راه‌های تماس</h3>
                    <div className="space-y-2 text-sm text-muted-foreground">
                      <div className="flex justify-between gap-4">
                        <span>ایمیل فروش</span>
                        <span dir="rtl">hello@company.com</span>
                      </div>
                      <div className="flex justify-between gap-4">
                        <span>تلفن</span>
                        <span dir="rtl">۲۱-۱۲۳۴۵۶۷۸</span>
                      </div>
                      <div className="flex justify-between gap-4">
                        <span>آدرس</span>
                        <span>تهران، خیابان ولیعصر</span>
                      </div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Contact6 };