Contact 02

1"use client";
2 
3import { useForm } from "react-hook-form";
4import { zodResolver } from "@hookform/resolvers/zod";
5import { z } from "zod";
6import { toast } from "sonner";
7import { ArrowUpRight, Clock, Mail, Phone } from "lucide-react";
8import { cn } from "@/lib/utils";
9import { Badge } from "@/components/ui/badge";
10import { Button } from "@/components/ui/button";
11import {
12  Form,
13  FormControl,
14  FormField,
15  FormItem,
16  FormLabel,
17  FormMessage,
18} from "@/components/ui/form";
19import { Input } from "@/components/ui/input";
20import {
21  Select,
22  SelectContent,
23  SelectItem,
24  SelectTrigger,
25  SelectValue,
26} from "@/components/ui/select";
27import { Textarea } from "@/components/ui/textarea";
28import { Toaster } from "@/components/ui/sonner";
29 
30const formSchema = z.object({
31  name: z.string().min(2, "Please enter your name"),
32  email: z.string().email("Please enter a valid email"),
33  phone: z.string().optional(),
34  tour: z.string().min(1, "Please choose a tour"),
35  date: z.string().optional(),
36  travelers: z.string().optional(),
37  message: z.string().optional(),
38});
39 
40type FormValues = z.infer<typeof formSchema>;
41 
42interface ContactInfoItem {
43  icon: React.ReactNode;
44  label: string;
45  details: string[];
46}
47 
48interface Contact02Props {
49  badge?: string;
50  title?: string;
51  description?: string;
52  tours?: string[];
53  img?: string;
54  imgBadge?: string;
55  contactInfo?: ContactInfoItem[];
56  className?: string;
57}
58 
59const defaultContactInfo: ContactInfoItem[] = [
60  {
61    icon: <Phone className="size-5" />,
62    label: "Call & WhatsApp",
63    details: ["+966 55 123 4567", "+966 53 987 6543"],
64  },
65  {
66    icon: <Clock className="size-5" />,
67    label: "Working Hours",
68    details: ["Daily: 8am–5pm", "Friday: Closed"],
69  },
70  {
71    icon: <Mail className="size-5" />,
72    label: "Write to Us",
73    details: ["info@example.com", "booking@example.com"],
74  },
75];
76 
77const Contact02 = ({
78  badge = "Plan Trip",
79  title = "Contact Us",
80  description = "Tell us when and where you'd like to go and we'll confirm availability within 24 hours.",
81  tours = [
82    "City Highlights",
83    "Desert Safari",
84    "Coastal Escape",
85    "Mountain Trek",
86  ],
87  img = "https://www.shadcnship.com/images/placeholders/hero-architecture-7.webp",
88  imgBadge = "Your Journey",
89  contactInfo = defaultContactInfo,
90  className,
91}: Contact02Props) => {
92  const form = useForm<FormValues>({
93    resolver: zodResolver(formSchema),
94    defaultValues: {
95      name: "",
96      email: "",
97      phone: "",
98      tour: "",
99// … truncated