{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"contact-02","type":"registry:component","title":"Contact 02","description":"A comprehensive contact component with category-based contact system featuring contact option cards and detailed form. Features customizable contact option cards with hover effects, comprehensive form with priority level radio buttons and inquiry type selection, and quick contact actions. Perfect for support centers, service providers, and businesses requiring categorized contact workflows with priority handling.","dependencies":["lucide-react","react-hook-form","@hookform/resolvers","zod"],"registryDependencies":["badge","button","card","input","textarea","form"],"files":[{"path":"src/registry/blocks/marketing/landing-pages/contact/contact-02.tsx","content":"\"use client\";\n\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport {\n  ArrowRight,\n  FileText,\n  Headphones,\n  type LucideIcon,\n  MessageSquare,\n  Users,\n} from \"lucide-react\";\nimport { useForm } from \"react-hook-form\";\nimport { z } from \"zod\";\nimport { cn } from \"@/registry/lib/utils\";\nimport { Badge } from \"@/registry/ui/badge\";\nimport { Button } from \"@/registry/ui/button\";\nimport { Card, CardContent } from \"@/registry/ui/card\";\nimport {\n  Form,\n  FormControl,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/ui/form\";\nimport { Input } from \"@/registry/ui/input\";\nimport { Textarea } from \"@/registry/ui/textarea\";\n\ninterface ContactOption {\n  id: string;\n  icon: LucideIcon;\n  title: string;\n  description: string;\n  badge: {\n    text: string;\n    className: string;\n  };\n  color: \"blue\" | \"green\" | \"purple\" | \"orange\";\n}\n\ninterface InquiryType {\n  value: string;\n  label: string;\n}\n\ninterface PriorityLevel {\n  value: string;\n  label: string;\n  defaultChecked?: boolean;\n}\n\nconst formSchema = z.object({\n  name: z.string().min(2, \"Name must be at least 2 characters\"),\n  email: z.string().email(\"Please enter a valid email address\"),\n  category: z.string().min(1, \"Please select an inquiry type\"),\n  priority: z.string().min(1, \"Please select a priority level\"),\n  message: z.string().min(10, \"Message must be at least 10 characters\"),\n  newsletter: z.boolean().optional(),\n});\n\ntype FormValues = z.infer<typeof formSchema>;\n\nexport interface Contact02Props {\n  className?: string;\n}\n\nconst content: {\n  header: {\n    title: string;\n    description: string;\n  };\n  maxWidth: string;\n  sectionPadding: string;\n  contactOptions: ContactOption[];\n  form: {\n    title: string;\n    description: string;\n    buttonText: string;\n    fields: {\n      inquiryTypes: InquiryType[];\n      priorityLevels: PriorityLevel[];\n    };\n  };\n  newsletter: {\n    show: boolean;\n    text: string;\n  };\n  quickContact: {\n    text: string;\n    buttons: {\n      chat: { text: string; icon: LucideIcon };\n      support: { text: string; icon: LucideIcon };\n    };\n  };\n} = {\n  header: {\n    title: \"How Can We Help You?\",\n    description:\n      \"Choose the best way to get in touch with our team. We're here to help with any questions or support you need.\",\n  },\n  maxWidth: \"max-w-6xl\",\n  sectionPadding: \"py-16 px-4\",\n  contactOptions: [\n    {\n      id: \"general\",\n      icon: MessageSquare,\n      title: \"General Inquiry\",\n      description: \"Questions about our products or services\",\n      badge: {\n        text: \"Most Popular\",\n        className:\n          \"bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300\",\n      },\n      color: \"blue\",\n    },\n    {\n      id: \"support\",\n      icon: Headphones,\n      title: \"Technical Support\",\n      description: \"Need help with technical issues\",\n      badge: {\n        text: \"24/7 Available\",\n        className:\n          \"bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300\",\n      },\n      color: \"green\",\n    },\n    {\n      id: \"sales\",\n      icon: FileText,\n      title: \"Sales & Pricing\",\n      description: \"Get quotes and pricing information\",\n      badge: {\n        text: \"Custom Quotes\",\n        className:\n          \"bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300\",\n      },\n      color: \"purple\",\n    },\n    {\n      id: \"partnership\",\n      icon: Users,\n      title: \"Partnership\",\n      description: \"Explore partnership opportunities\",\n      badge: {\n        text: \"Business Only\",\n        className:\n          \"bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300\",\n      },\n      color: \"orange\",\n    },\n  ],\n  form: {\n    title: \"Send Us a Message\",\n    description: \"We'll get back to you within 24 hours\",\n    buttonText: \"Send Message\",\n    fields: {\n      inquiryTypes: [\n        { value: \"\", label: \"Select an option\" },\n        { value: \"general\", label: \"General Inquiry\" },\n        { value: \"support\", label: \"Technical Support\" },\n        { value: \"sales\", label: \"Sales & Pricing\" },\n        { value: \"partnership\", label: \"Partnership\" },\n      ],\n      priorityLevels: [\n        { value: \"low\", label: \"Low\" },\n        { value: \"medium\", label: \"Medium\", defaultChecked: true },\n        { value: \"high\", label: \"High\" },\n        { value: \"urgent\", label: \"Urgent\" },\n      ],\n    },\n  },\n  newsletter: {\n    show: true,\n    text: \"Subscribe to our newsletter for updates and tips\",\n  },\n  quickContact: {\n    text: \"Need immediate assistance?\",\n    buttons: {\n      chat: { text: \"Live Chat\", icon: MessageSquare },\n      support: { text: \"Call Support\", icon: Headphones },\n    },\n  },\n};\n\nexport function Contact02({ className }: Contact02Props) {\n  const form = useForm<FormValues>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      name: \"\",\n      email: \"\",\n      category: \"\",\n      priority: \"medium\",\n      message: \"\",\n      newsletter: false,\n    },\n  });\n\n  const onSubmit = (values: FormValues) => {\n    console.log(\"Form submitted:\", values);\n    // Handle form submission here\n    form.reset();\n  };\n\n  const handleContactOptionClick =\n    (option: ContactOption) => (e: React.MouseEvent) => {\n      e.stopPropagation();\n      console.log(\"Contact option clicked:\", option);\n    };\n\n  const handleQuickContactClick =\n    (type: \"chat\" | \"support\") => (e: React.MouseEvent) => {\n      e.stopPropagation();\n      console.log(\"Quick contact clicked:\", type);\n    };\n\n  const getIconBackground = (color: ContactOption[\"color\"]) => {\n    const backgrounds = {\n      blue: \"bg-blue-100 dark:bg-blue-900/30\",\n      green: \"bg-green-100 dark:bg-green-900/30\",\n      purple: \"bg-purple-100 dark:bg-purple-900/30\",\n      orange: \"bg-orange-100 dark:bg-orange-900/30\",\n    };\n    return backgrounds[color];\n  };\n\n  const getIconColor = (color: ContactOption[\"color\"]) => {\n    const colors = {\n      blue: \"text-blue-600 dark:text-blue-400\",\n      green: \"text-green-600 dark:text-green-400\",\n      purple: \"text-purple-600 dark:text-purple-400\",\n      orange: \"text-orange-600 dark:text-orange-400\",\n    };\n    return colors[color];\n  };\n\n  return (\n    <section\n      className={cn(content.sectionPadding, className)}\n      data-testid=\"contact-02\"\n    >\n      <div className={cn(content.maxWidth, \"mx-auto\")}>\n        {/* Header */}\n        <div\n          className=\"text-center space-y-4 mb-12\"\n          data-testid=\"header-section\"\n        >\n          <h2\n            className=\"text-3xl md:text-4xl font-bold\"\n            data-testid=\"header-title\"\n          >\n            {content.header.title}\n          </h2>\n          <p\n            className=\"text-lg text-muted-foreground max-w-2xl mx-auto\"\n            data-testid=\"header-description\"\n          >\n            {content.header.description}\n          </p>\n        </div>\n\n        {/* Contact Options */}\n        <div\n          className=\"grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12\"\n          data-testid=\"contact-options-grid\"\n        >\n          {content.contactOptions.map((option) => {\n            const IconComponent = option.icon;\n            return (\n              <Card\n                key={option.id}\n                className=\"bg-card border-border hover:shadow-lg transition-shadow cursor-pointer group\"\n                onClick={handleContactOptionClick(option)}\n                data-testid={`contact-option-${option.id}`}\n              >\n                <CardContent className=\"text-center\">\n                  <div\n                    className={cn(\n                      \"w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform\",\n                      getIconBackground(option.color),\n                    )}\n                    data-testid={`contact-option-icon-${option.id}`}\n                  >\n                    <IconComponent\n                      className={cn(\"h-6 w-6\", getIconColor(option.color))}\n                    />\n                  </div>\n                  <h3\n                    className=\"font-semibold mb-2\"\n                    data-testid={`contact-option-title-${option.id}`}\n                  >\n                    {option.title}\n                  </h3>\n                  <p\n                    className=\"text-sm text-muted-foreground mb-4\"\n                    data-testid={`contact-option-description-${option.id}`}\n                  >\n                    {option.description}\n                  </p>\n                  <Badge\n                    variant=\"secondary\"\n                    className={option.badge.className}\n                    data-testid={`contact-option-badge-${option.id}`}\n                  >\n                    {option.badge.text}\n                  </Badge>\n                </CardContent>\n              </Card>\n            );\n          })}\n        </div>\n\n        {/* Contact Form */}\n        <div className=\"max-w-2xl mx-auto\" data-testid=\"contact-form-section\">\n          <Card\n            className=\"bg-card border-border shadow-xl\"\n            data-testid=\"contact-form-card\"\n          >\n            <CardContent className=\"p-8\">\n              <div\n                className=\"text-center space-y-2 mb-8\"\n                data-testid=\"form-header\"\n              >\n                <h3 className=\"text-2xl font-bold\" data-testid=\"form-title\">\n                  {content.form.title}\n                </h3>\n                <p\n                  className=\"text-muted-foreground\"\n                  data-testid=\"form-description\"\n                >\n                  {content.form.description}\n                </p>\n              </div>\n\n              <Form {...form}>\n                <form\n                  onSubmit={form.handleSubmit(onSubmit)}\n                  className=\"space-y-6\"\n                  data-testid=\"contact-form\"\n                >\n                  <div\n                    className=\"grid md:grid-cols-2 gap-4\"\n                    data-testid=\"form-grid-fields\"\n                  >\n                    <FormField\n                      control={form.control}\n                      name=\"name\"\n                      render={({ field }) => (\n                        <FormItem data-testid=\"form-field-name\">\n                          <FormLabel data-testid=\"label-name\">\n                            Full Name *\n                          </FormLabel>\n                          <FormControl>\n                            <Input\n                              placeholder=\"Your full name\"\n                              className=\"bg-background border-border\"\n                              data-testid=\"input-name\"\n                              {...field}\n                            />\n                          </FormControl>\n                          <FormMessage />\n                        </FormItem>\n                      )}\n                    />\n                    <FormField\n                      control={form.control}\n                      name=\"email\"\n                      render={({ field }) => (\n                        <FormItem data-testid=\"form-field-email\">\n                          <FormLabel data-testid=\"label-email\">\n                            Email Address *\n                          </FormLabel>\n                          <FormControl>\n                            <Input\n                              type=\"email\"\n                              placeholder=\"your@email.com\"\n                              className=\"bg-background border-border\"\n                              data-testid=\"input-email\"\n                              {...field}\n                            />\n                          </FormControl>\n                          <FormMessage />\n                        </FormItem>\n                      )}\n                    />\n                  </div>\n\n                  <FormField\n                    control={form.control}\n                    name=\"category\"\n                    render={({ field }) => (\n                      <FormItem data-testid=\"form-field-category\">\n                        <FormLabel data-testid=\"label-category\">\n                          Inquiry Type *\n                        </FormLabel>\n                        <FormControl>\n                          <select\n                            className=\"w-full h-10 px-3 bg-background border border-border rounded-md text-sm\"\n                            data-testid=\"select-category\"\n                            {...field}\n                          >\n                            {content.form.fields.inquiryTypes.map((type) => (\n                              <option key={type.value} value={type.value}>\n                                {type.label}\n                              </option>\n                            ))}\n                          </select>\n                        </FormControl>\n                        <FormMessage />\n                      </FormItem>\n                    )}\n                  />\n\n                  <FormField\n                    control={form.control}\n                    name=\"priority\"\n                    render={({ field }) => (\n                      <FormItem data-testid=\"form-field-priority\">\n                        <FormLabel data-testid=\"priority-legend\">\n                          Priority Level\n                        </FormLabel>\n                        <FormControl>\n                          <div\n                            className=\"flex gap-4\"\n                            data-testid=\"priority-options\"\n                          >\n                            {content.form.fields.priorityLevels.map((level) => (\n                              <label\n                                key={level.value}\n                                className=\"flex items-center space-x-2 cursor-pointer\"\n                                data-testid={`priority-label-${level.value}`}\n                              >\n                                <input\n                                  type=\"radio\"\n                                  value={level.value}\n                                  checked={field.value === level.value}\n                                  onChange={(e) =>\n                                    field.onChange(e.target.value)\n                                  }\n                                  className=\"text-primary\"\n                                  data-testid={`priority-input-${level.value}`}\n                                />\n                                <span className=\"text-sm\">{level.label}</span>\n                              </label>\n                            ))}\n                          </div>\n                        </FormControl>\n                        <FormMessage />\n                      </FormItem>\n                    )}\n                  />\n\n                  <FormField\n                    control={form.control}\n                    name=\"message\"\n                    render={({ field }) => (\n                      <FormItem data-testid=\"form-field-message\">\n                        <FormLabel data-testid=\"label-message\">\n                          Message *\n                        </FormLabel>\n                        <FormControl>\n                          <Textarea\n                            placeholder=\"Please describe your inquiry in detail...\"\n                            className=\"bg-background border-border min-h-[120px]\"\n                            data-testid=\"textarea-message\"\n                            {...field}\n                          />\n                        </FormControl>\n                        <FormMessage />\n                      </FormItem>\n                    )}\n                  />\n\n                  {content.newsletter.show && (\n                    <FormField\n                      control={form.control}\n                      name=\"newsletter\"\n                      render={({ field }) => (\n                        <FormItem data-testid=\"newsletter-section\">\n                          <div className=\"flex items-center space-x-2\">\n                            <FormControl>\n                              <input\n                                type=\"checkbox\"\n                                className=\"rounded\"\n                                checked={field.value}\n                                onChange={field.onChange}\n                                data-testid=\"checkbox-newsletter\"\n                              />\n                            </FormControl>\n                            <FormLabel\n                              className=\"text-sm text-muted-foreground cursor-pointer\"\n                              data-testid=\"label-newsletter\"\n                            >\n                              {content.newsletter.text}\n                            </FormLabel>\n                          </div>\n                          <FormMessage />\n                        </FormItem>\n                      )}\n                    />\n                  )}\n\n                  <Button\n                    type=\"submit\"\n                    className=\"w-full\"\n                    size=\"lg\"\n                    disabled={form.formState.isSubmitting}\n                    data-testid=\"form-submit-button\"\n                  >\n                    {form.formState.isSubmitting\n                      ? \"Submitting...\"\n                      : content.form.buttonText}\n                    <ArrowRight className=\"ml-2 h-4 w-4\" />\n                  </Button>\n                </form>\n              </Form>\n            </CardContent>\n          </Card>\n        </div>\n\n        {/* Quick Contact */}\n        <div className=\"text-center mt-12\" data-testid=\"quick-contact-section\">\n          <p\n            className=\"text-muted-foreground mb-4\"\n            data-testid=\"quick-contact-text\"\n          >\n            {content.quickContact.text}\n          </p>\n          <div\n            className=\"flex flex-col sm:flex-row items-center justify-center gap-4\"\n            data-testid=\"quick-contact-buttons\"\n          >\n            {content.quickContact.buttons?.chat && (\n              <Button\n                variant=\"outline\"\n                size=\"lg\"\n                onClick={handleQuickContactClick(\"chat\")}\n                data-testid=\"quick-contact-chat-button\"\n              >\n                <content.quickContact.buttons.chat.icon className=\"mr-2 h-4 w-4\" />\n                {content.quickContact.buttons.chat.text}\n              </Button>\n            )}\n            {content.quickContact.buttons?.support && (\n              <Button\n                variant=\"outline\"\n                size=\"lg\"\n                onClick={handleQuickContactClick(\"support\")}\n                data-testid=\"quick-contact-support-button\"\n              >\n                <content.quickContact.buttons.support.icon className=\"mr-2 h-4 w-4\" />\n                {content.quickContact.buttons.support.text}\n              </Button>\n            )}\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n","type":"registry:component"},{"path":"src/registry/lib/utils.ts","content":"import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","type":"registry:lib"}]}