{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "contact-02",
  "title": "Contact 02",
  "description": "A pro contact form with split layout, tour select, image slot, and contact info strip",
  "dependencies": [
    "lucide-react",
    "react-hook-form",
    "zod",
    "sonner"
  ],
  "registryDependencies": [
    "badge",
    "button",
    "form",
    "input",
    "select",
    "textarea",
    "sonner"
  ],
  "files": [
    {
      "path": "src/registry/blocks/contact-02/contact.tsx",
      "content": "\"use client\";\n\nimport { useForm } from \"react-hook-form\";\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport { z } from \"zod\";\nimport { toast } from \"sonner\";\nimport { ArrowUpRight, Clock, Mail, Phone } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Form,\n  FormControl,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/components/ui/form\";\nimport { Input } from \"@/components/ui/input\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { Toaster } from \"@/components/ui/sonner\";\n\nconst formSchema = z.object({\n  name: z.string().min(2, \"Please enter your name\"),\n  email: z.string().email(\"Please enter a valid email\"),\n  phone: z.string().optional(),\n  tour: z.string().min(1, \"Please choose a tour\"),\n  date: z.string().optional(),\n  travelers: z.string().optional(),\n  message: z.string().optional(),\n});\n\ntype FormValues = z.infer<typeof formSchema>;\n\ninterface ContactInfoItem {\n  icon: React.ReactNode;\n  label: string;\n  details: string[];\n}\n\ninterface Contact02Props {\n  badge?: string;\n  title?: string;\n  description?: string;\n  tours?: string[];\n  img?: string;\n  imgBadge?: string;\n  contactInfo?: ContactInfoItem[];\n  className?: string;\n}\n\nconst defaultContactInfo: ContactInfoItem[] = [\n  {\n    icon: <Phone className=\"size-5\" />,\n    label: \"Call & WhatsApp\",\n    details: [\"+966 55 123 4567\", \"+966 53 987 6543\"],\n  },\n  {\n    icon: <Clock className=\"size-5\" />,\n    label: \"Working Hours\",\n    details: [\"Daily: 8am–5pm\", \"Friday: Closed\"],\n  },\n  {\n    icon: <Mail className=\"size-5\" />,\n    label: \"Write to Us\",\n    details: [\"info@example.com\", \"booking@example.com\"],\n  },\n];\n\nconst Contact02 = ({\n  badge = \"Plan Trip\",\n  title = \"Contact Us\",\n  description = \"Tell us when and where you'd like to go and we'll confirm availability within 24 hours.\",\n  tours = [\n    \"City Highlights\",\n    \"Desert Safari\",\n    \"Coastal Escape\",\n    \"Mountain Trek\",\n  ],\n  img = \"https://www.shadcnship.com/images/placeholders/hero-architecture-7.webp\",\n  imgBadge = \"Your Journey\",\n  contactInfo = defaultContactInfo,\n  className,\n}: Contact02Props) => {\n  const form = useForm<FormValues>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      name: \"\",\n      email: \"\",\n      phone: \"\",\n      tour: \"\",\n      date: \"\",\n      travelers: \"\",\n      message: \"\",\n    },\n  });\n\n  const onSubmit = (values: FormValues) => {\n    console.log(values);\n    toast.success(\"Request sent! We'll get back to you within 24 hours.\");\n    form.reset();\n  };\n\n  return (\n    <section className={cn(\"container mx-auto px-8 py-8 md:py-12\", className)}>\n      <Toaster />\n\n      {/* Header: badge + display title left, subtitle bottom-right */}\n      <div className=\"flex flex-col gap-6\">\n        <Badge variant=\"secondary\" className=\"w-fit rounded-full py-1\">\n          {badge}\n        </Badge>\n        <div className=\"grid gap-4 md:grid-cols-2 md:items-end\">\n          <h2 className=\"text-5xl font-semibold tracking-tight md:text-6xl lg:text-7xl\">\n            {title}\n          </h2>\n          <p className=\"max-w-sm text-muted-foreground md:justify-self-end md:text-right\">\n            {description}\n          </p>\n        </div>\n      </div>\n\n      {/* Form + image */}\n      <div className=\"mt-12 grid gap-6 lg:grid-cols-[3fr_2fr]\">\n        <div className=\"rounded-2xl bg-muted/40 p-6 md:p-8\">\n          <Form {...form}>\n            <form\n              onSubmit={form.handleSubmit(onSubmit)}\n              className=\"flex flex-col gap-6\"\n            >\n              <div className=\"grid gap-6 sm:grid-cols-2\">\n                <FormField\n                  control={form.control}\n                  name=\"name\"\n                  render={({ field }) => (\n                    <FormItem>\n                      <FormLabel>Name</FormLabel>\n                      <FormControl>\n                        <Input placeholder=\"Your full name\" {...field} />\n                      </FormControl>\n                      <FormMessage />\n                    </FormItem>\n                  )}\n                />\n                <FormField\n                  control={form.control}\n                  name=\"email\"\n                  render={({ field }) => (\n                    <FormItem>\n                      <FormLabel>Email</FormLabel>\n                      <FormControl>\n                        <Input\n                          type=\"email\"\n                          placeholder=\"you@example.com\"\n                          {...field}\n                        />\n                      </FormControl>\n                      <FormMessage />\n                    </FormItem>\n                  )}\n                />\n                <FormField\n                  control={form.control}\n                  name=\"phone\"\n                  render={({ field }) => (\n                    <FormItem>\n                      <FormLabel>Phone Number</FormLabel>\n                      <FormControl>\n                        <Input placeholder=\"+966 55 123 4567\" {...field} />\n                      </FormControl>\n                      <FormMessage />\n                    </FormItem>\n                  )}\n                />\n                <FormField\n                  control={form.control}\n                  name=\"tour\"\n                  render={({ field }) => (\n                    <FormItem>\n                      <FormLabel>Select Your Tour</FormLabel>\n                      <Select\n                        onValueChange={field.onChange}\n                        value={field.value}\n                      >\n                        <FormControl>\n                          <SelectTrigger className=\"w-full\">\n                            <SelectValue placeholder=\"Choose your tour...\" />\n                          </SelectTrigger>\n                        </FormControl>\n                        <SelectContent>\n                          {tours.map((tour) => (\n                            <SelectItem key={tour} value={tour}>\n                              {tour}\n                            </SelectItem>\n                          ))}\n                        </SelectContent>\n                      </Select>\n                      <FormMessage />\n                    </FormItem>\n                  )}\n                />\n                <FormField\n                  control={form.control}\n                  name=\"date\"\n                  render={({ field }) => (\n                    <FormItem>\n                      <FormLabel>Preferred Date</FormLabel>\n                      <FormControl>\n                        <Input\n                          type=\"date\"\n                          placeholder=\"dd/mm/yyyy\"\n                          {...field}\n                        />\n                      </FormControl>\n                      <FormMessage />\n                    </FormItem>\n                  )}\n                />\n                <FormField\n                  control={form.control}\n                  name=\"travelers\"\n                  render={({ field }) => (\n                    <FormItem>\n                      <FormLabel>Number of Travelers</FormLabel>\n                      <FormControl>\n                        <Input placeholder=\"2 adults, 1 child\" {...field} />\n                      </FormControl>\n                      <FormMessage />\n                    </FormItem>\n                  )}\n                />\n              </div>\n\n              <FormField\n                control={form.control}\n                name=\"message\"\n                render={({ field }) => (\n                  <FormItem>\n                    <FormLabel>Message / Special Requests</FormLabel>\n                    <FormControl>\n                      <Textarea\n                        rows={4}\n                        placeholder=\"Anything else we should know?\"\n                        {...field}\n                      />\n                    </FormControl>\n                    <FormMessage />\n                  </FormItem>\n                )}\n              />\n\n              <div className=\"flex items-center gap-3\">\n                <Button\n                  type=\"submit\"\n                  size=\"lg\"\n                  className=\"rounded-full\"\n                  disabled={form.formState.isSubmitting}\n                >\n                  {form.formState.isSubmitting\n                    ? \"Sending...\"\n                    : \"Reserve Your Spot\"}\n                </Button>\n                <Button\n                  type=\"submit\"\n                  size=\"icon\"\n                  className=\"size-11 rounded-full\"\n                  disabled={form.formState.isSubmitting}\n                  aria-label=\"Reserve Your Spot\"\n                >\n                  <ArrowUpRight className=\"size-4\" />\n                </Button>\n              </div>\n            </form>\n          </Form>\n        </div>\n\n        {/* Image slot with badge overlay */}\n        <div className=\"relative order-first min-h-72 overflow-hidden rounded-2xl bg-muted lg:order-none lg:min-h-full\">\n          {img && (\n            <img\n              src={img}\n              alt=\"\"\n              className=\"absolute inset-0 size-full object-cover\"\n            />\n          )}\n          {imgBadge && (\n            <Badge\n              variant=\"secondary\"\n              className=\"absolute top-4 right-4 rounded-full py-1\"\n            >\n              {imgBadge}\n            </Badge>\n          )}\n        </div>\n      </div>\n\n      {/* Contact info strip — centered columns */}\n      <div className=\"mt-12 grid gap-10 border-t pt-12 md:grid-cols-3 md:gap-6\">\n        {contactInfo.map((info) => (\n          <div\n            key={info.label}\n            className=\"flex flex-col items-center gap-3 text-center\"\n          >\n            <div className=\"flex size-11 items-center justify-center rounded-full bg-muted\">\n              {info.icon}\n            </div>\n            <p className=\"font-semibold\">{info.label}</p>\n            <div>\n              {info.details.map((line, i) => (\n                <p key={i} className=\"text-sm text-muted-foreground\">\n                  {line}\n                </p>\n              ))}\n            </div>\n          </div>\n        ))}\n      </div>\n    </section>\n  );\n};\n\nexport default Contact02;\nexport type { Contact02Props, ContactInfoItem };\n",
      "type": "registry:component",
      "target": "components/contact-02/contact.tsx"
    }
  ],
  "meta": {
    "image": "/r/previews/contact-02.webp",
    "imageDark": "/r/previews/contact-02-dark.webp"
  },
  "categories": [
    "contact"
  ],
  "type": "registry:block"
}