reui-blocks/blocks/contact10.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 Contact10Props {
  className?: string;
  onSubmit?: (data: ContactFormData) => Promise<void>;
}

const Contact10 = ({ className, onSubmit }: Contact10Props) => {
  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(
        "relative mx-2.5 mt-2.5 rounded-t-2xl rounded-b-[36px] bg-linear-to-b from-amber-50 via-background to-background py-32 lg:mx-4 dark:from-amber-950",
        className,
      )}
    >
      <div className="container max-w-2xl">
        <h1 className="text-center text-xl font-semibold tracking-tight lg:text-2xll">
          درخواست دمو CRM
        </h1>
        <p className="mt-4 text-center leading-snug font-medium text-muted-foreground lg:mx-auto">
          فرم را پر کنید تا کارشناس فروش اندازه تیم و نیازتان را بررسی کند و جلسه دمو را هماهنگ کند.
                          </p>

        <div className="mt-10 flex justify-between gap-8 max-sm:flex-col md:mt-14 lg:mt-20 lg:gap-12">
          <div>
            <h2 className="font-semibold">دفتر تهران</h2>
            <p className="mt-3 text-muted-foreground" dir="rtl">
              Valiasr St, Tehran 15138
              <br />
              Iran
            </p>
          </div>

          <div>
            <h2 className="font-semibold">ایمیل فروش</h2>
            <div className="mt-3">
              <div>
                <p className="text-primary">مشاوره و دمو</p>
                <a
                  href="mailto:support@example.com"
                  className="text-muted-foreground hover:text-foreground"
                  dir="rtl"
                >
                  support@example.com
                </a>
              </div>
            </div>
          </div>

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

        <DashedLine className="my-12" />

        <div className="mx-auto">
          <h2 className="text-lg font-semibold">درخواست دمو</h2>

          {isSubmitted && (
            <div
              className={cn(
                "mt-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)} className="mt-8">
            <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
                  size="lg"
                  type="submit"
                  className="gap-2"
                  disabled={form.formState.isSubmitting}
                >
                  {form.formState.isSubmitting ? (
                    <>
                      <LoaderIcon className="size-4 animate-spin" />
                      در حال ارسال...
                    </>
                  ) : (
                    "درخواست دمو"
                  )}
                </Button>
              </div>
            </FieldGroup>
          </form>
        </div>
      </div>
    </section>
  );
};

interface DashedLineProps {
  orientation?: "horizontal" | "vertical";
  className?: string;
}

const DashedLine = ({
  orientation = "horizontal",
  className,
}: DashedLineProps) => {
  const isHorizontal = orientation === "horizontal";

  return (
    <div
      className={cn(
        "relative text-muted-foreground",
        isHorizontal ? "h-px w-full" : "h-full w-px",
        className,
      )}
    >
      <div
        className={cn(
          isHorizontal
            ? [
                "h-px w-full",
                "bg-[repeating-linear-gradient(90deg,transparent,transparent_4px,currentColor_4px,currentColor_10px)]",
                "[mask-image:linear-gradient(90deg,transparent,black_25%,black_75%,transparent)]",
              ]
            : [
                "h-full w-px",
                "bg-[repeating-linear-gradient(180deg,transparent,transparent_4px,currentColor_4px,currentColor_8px)]",
                "[mask-image:linear-gradient(180deg,transparent,black_25%,black_75%,transparent)]",
              ],
        )}
      />
    </div>
  );
};

export { Contact10 };