reui-blocks/blocks/contact29.tsx

"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import {
  Building2,
  Check,
  ChevronRight,
  HelpCircle,
  Laptop,
  LoaderIcon,
  Rocket,
  Users,
} 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({
  serviceType: z.string().min(1, "یک مسیر را انتخاب کنید"),
  name: z.string().min(1, "نام الزامی است"),
  email: z
    .string()
    .min(1, "ایمیل الزامی است")
    .email("آدرس ایمیل نامعتبر است"),
  company: z.string().optional(),
  message: z.string().min(1, "شرح نیاز فروش الزامی است"),
});

type ContactFormData = z.infer<typeof contactFormSchema>;

const services = [
  {
    id: "consulting",
    icon: Users,
    title: "مشاوره فروش و سامانه مدیریت ارتباط با مشتری",
    description: "طراحی قیف فروش، فرآیند پیگیری لید و ساختار سامانه مدیریت ارتباط با مشتری",
  },
  {
    id: "development",
    icon: Laptop,
    title: "سفارشی‌سازی پلتفرم",
    description: "اتوماسیون فروش، یکپارچه‌سازی و داشبورد KPI",
  },
  {
    id: "enterprise",
    icon: Building2,
    title: "سامانه مدیریت ارتباط با مشتری سازمانی",
    description: "پیاده‌سازی در مقیاس بزرگ با کنترل دسترسی و گزارش‌گیری",
  },
  {
    id: "startup",
    icon: Rocket,
    title: "تیم‌های در حال رشد",
    description: "راه‌اندازی سریع سامانه مدیریت ارتباط با مشتری برای تیم‌های فروش در حال مقیاس",
  },
  {
    id: "other",
    icon: HelpCircle,
    title: "سایر درخواست‌ها",
    description: "مهاجرت داده، شراکت تجاری یا مشاوره تخصصی",
  },
];

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

const Contact29 = ({
  title = "مسیر سامانه مدیریت ارتباط با مشتری مناسب را انتخاب کنید",
  subtitle = "نوع نیاز فروش را مشخص کنید و جزئیات پیاده‌سازی سامانه مدیریت ارتباط با مشتری را برای تیم فروش ارسال کنید.",
  className,
  onSubmit,
}: Contact29Props) => {
  const [step, setStep] = useState<"select" | "form" | "success">("select");
  const [selectedService, setSelectedService] = useState<string>("");

  const form = useForm<ContactFormData>({
    resolver: zodResolver(contactFormSchema),
    mode: "onSubmit",
    reValidateMode: "onSubmit",
    defaultValues: {
      serviceType: "",
      name: "",
      email: "",
      company: "",
      message: "",
    },
  });

  const handleServiceSelect = (serviceId: string) => {
    setSelectedService(serviceId);
    form.setValue("serviceType", serviceId);
  };

  const handleContinue = () => {
    if (selectedService) {
      setStep("form");
    }
  };

  const handleFormSubmit = async (data: ContactFormData) => {
    try {
      if (onSubmit) {
        await onSubmit(data);
      } else {
        console.log("Form submitted:", data);
        await new Promise((resolve) => setTimeout(resolve, 1000));
      }
      setStep("success");
    } catch {
      form.setError("root", {
        message: "مشکلی پیش آمد. لطفاً دوباره تلاش کنید.",
      });
    }
  };

  const resetForm = () => {
    setStep("select");
    setSelectedService("");
    form.reset();
  };

  if (step === "success") {
    return (
      <section
        dir="rtl"
        lang="fa"
        className={cn("relative min-h-screen bg-muted/30", className)}
      >
        <div className="container flex min-h-screen flex-col justify-center py-20">
          <div className="mx-auto max-w-xl text-center">
            <div className="mx-auto mb-6 flex size-20 items-center justify-center rounded-full bg-green-500/10">
              <Check className="size-10 text-green-600" />
            </div>
            <h2 className="mb-4 text-xl font-medium">درخواست شما ثبت شد</h2>
            <p className="text-xl text-muted-foreground">
              تیم فروش درخواست سامانه مدیریت ارتباط با مشتری را بررسی می‌کند و حداکثر تا یک روز کاری برای هماهنگی دمو یا پیاده‌سازی تماس می‌گیرد.
                                    </p>
            <Button
              className="mt-10"
              size="lg"
              variant="outline"
              onClick={resetForm}
            >
              درخواست جدید
            </Button>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("relative min-h-screen bg-muted/30", className)}
    >
      <div className="container flex min-h-screen flex-col justify-center py-20">
        {step === "select" && (
          <div className="mx-auto max-w-4xl">
            <div className="mb-12 text-center">
              <h1 className="mb-6 text-2xll font-medium tracking-tight md:text-2xll lg:text-2xll">
                {title}
              </h1>
              <p className="text-xl text-muted-foreground md:text-xl">
                {subtitle}
              </p>
            </div>

            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
              {services.map((service) => {
                const Icon = service.icon;
                const isSelected = selectedService === service.id;
                return (
                  <button
                    key={service.id}
                    type="button"
                    onClick={() => handleServiceSelect(service.id)}
                    className={cn(
                      "relative flex flex-col items-center rounded-2xl p-8 text-center transition-all",
                      isSelected
                        ? "bg-background shadow-lg ring-2 ring-primary"
                        : "bg-background/60 hover:bg-background hover:shadow-md",
                    )}
                  >
                    {isSelected && (
                      <div className="absolute top-4 end-4 flex size-6 items-center justify-center rounded-full bg-primary">
                        <Check className="size-4 text-primary-foreground" />
                      </div>
                    )}
                    <div
                      className={cn(
                        "mb-4 flex size-14 items-center justify-center rounded-xl",
                        isSelected ? "bg-primary/10" : "bg-muted",
                      )}
                    >
                      <Icon
                        className={cn(
                          "size-7",
                          isSelected ? "text-primary" : "text-muted-foreground",
                        )}
                      />
                    </div>
                    <h3 className="mb-2 text-lg font-semibold">
                      {service.title}
                    </h3>
                    <p className="text-muted-foreground">
                      {service.description}
                    </p>
                  </button>
                );
              })}
            </div>

            <div className="mt-12 flex justify-center">
              <Button
                size="lg"
                onClick={handleContinue}
                disabled={!selectedService}
              >
                مرحله بعد
                                            </Button>
            </div>
          </div>
        )}

        {step === "form" && (
          <div className="grid gap-16 lg:grid-cols-2 lg:gap-24">
            <div className="flex flex-col justify-center">
              <button
                type="button"
                onClick={() => setStep("select")}
                className="mb-8 flex items-center gap-1 text-muted-foreground hover:text-foreground"
              >
                <ChevronRight className="size-4" />
                تغییر انتخاب
              </button>

              <h1 className="mb-6 text-2xll font-medium tracking-tight md:text-2xll lg:text-2xll">
                جزئیات نیاز فروش را تکمیل کنید
                                            </h1>
              <p className="mb-12 text-xl text-muted-foreground md:text-xl">
                هرچه درباره تیم فروش، قیف فعلی و یکپارچگی‌ها دقیق‌تر بنویسید، پیشنهاد سامانه مدیریت ارتباط با مشتری و زمان‌بندی دمو دقیق‌تر خواهد بود.
                                            </p>

              <div className="flex items-center gap-4 rounded-xl bg-background p-5 shadow-sm">
                {(() => {
                  const service = services.find(
                    (s) => s.id === selectedService,
                  );
                  if (!service) return null;
                  const Icon = service.icon;
                  return (
                    <>
                      <div className="flex size-12 shrink-0 items-center justify-center rounded-xl bg-primary/10">
                        <Icon className="size-6 text-primary" />
                      </div>
                      <div>
                        <p className="text-lg font-semibold">{service.title}</p>
                        <p className="text-muted-foreground">
                          {service.description}
                        </p>
                      </div>
                    </>
                  );
                })()}
              </div>
            </div>

            <div className="flex items-center">
              <form
                onSubmit={form.handleSubmit(handleFormSubmit)}
                className="w-full rounded-2xl bg-background p-8 shadow-lg md:p-10"
              >
                <h2 className="mb-8 text-xl font-semibold">اطلاعات تماس فروش</h2>

                <FieldGroup>
                  <div className="grid gap-4 sm:grid-cols-2">
                    <Controller
                      control={form.control}
                      name="name"
                      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>
                      )}
                    />
                  </div>

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

export { Contact29 };