{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "contact-2",
  "dependencies": [
    "lucide-react",
    "react-icons"
  ],
  "registryDependencies": [
    "badge",
    "button",
    "card",
    "input",
    "label",
    "textarea"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/contact-2.tsx",
      "content": "\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { Textarea } from \"@/components/ui/textarea\";\n\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { MdPerson, MdMailOutline } from \"react-icons/md\";\nimport type { ReactNode } from \"react\";\n\nexport interface ContactMethod {\n  id: string;\n  icon: ReactNode;\n  label: string;\n}\n\nexport interface ContactFormProps {\n  topics: { value: string; label: string }[];\n  submitButtonText?: string;\n  onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;\n}\n\nexport interface Contact2Props {\n  badge?: string;\n  heading: string;\n  description: string;\n  contactMethods: ContactMethod[];\n  form: ContactFormProps;\n  footerText?: string;\n}\n\nconst CELL_COUNT = 1000;\nconst cellDelays = Array.from({ length: CELL_COUNT }).map(() =>\n  Math.floor(Math.random() * 4000),\n);\n\nfunction GridBackground() {\n  const [activeCells, setActiveCells] = useState<number[]>([]);\n\n  useEffect(() => {\n    const generateCells = () => {\n      const cells = [];\n      const count = Math.floor(Math.random() * 30) + 15;\n      for (let i = 0; i < count; i++) {\n        cells.push(Math.floor(Math.random() * CELL_COUNT));\n      }\n      setActiveCells(cells);\n    };\n\n    generateCells();\n    const interval = setInterval(generateCells, 6000);\n\n    return () => clearInterval(interval);\n  }, []);\n\n  return (\n    <div className=\"pointer-events-none absolute inset-0 z-0 overflow-hidden mask-[radial-gradient(circle_at_center,white_0%,transparent_70%)]\">\n      <div className=\"absolute inset-0 grid grid-cols-[repeat(auto-fill,minmax(4rem,1fr))]\">\n        {Array.from({ length: CELL_COUNT }).map((_, i) => {\n          const isActive = activeCells.includes(i);\n          return (\n            <div\n              key={i}\n              style={{ transitionDelay: `${cellDelays[i]}ms` }}\n              className={`border-border/10 aspect-square border-[0.5px] opacity-20 transition-all duration-200 ease-in-out ${\n                isActive\n                  ? \"bg-primary [box-shadow:0_0_20px_5px_var(--primary)] brightness-150\"\n                  : \"bg-transparent\"\n              }`}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nexport function Contact2({ badge, heading, description, form }: Contact2Props) {\n  return (\n    <section className=\"bg-background relative flex w-full flex-col items-center justify-center overflow-hidden py-16\">\n      <div className=\"relative z-10 container px-4 md:px-6\">\n        <div className=\"mx-auto mb-12 flex max-w-3xl flex-col items-center text-center\">\n          {badge && (\n            <Badge\n              variant=\"secondary\"\n              className=\"bg-muted text-muted-foreground hover:bg-muted/80 mb-6 rounded-full border-none px-4 py-1.5 text-sm font-medium transition-colors\"\n            >\n              {badge}\n            </Badge>\n          )}\n          <h2 className=\"text-foreground mb-6 text-3xl font-extrabold tracking-tight md:text-4xl lg:text-5xl\">\n            {heading}\n          </h2>\n          <p className=\"text-muted-foreground mx-auto max-w-2xl text-lg leading-relaxed md:text-xl\">\n            {description}\n          </p>\n        </div>\n\n        <div className=\"mx-auto w-full max-w-md\">\n          <Card className=\"border-border/60 bg-background/50 overflow-hidden rounded-4xl shadow-lg backdrop-blur-sm\">\n            <CardContent className=\"p-6 sm:p-8 md:p-6\">\n              <form\n                onSubmit={(e) => {\n                  e.preventDefault();\n                  form.onSubmit?.(e);\n                }}\n                className=\"space-y-4\"\n              >\n                <div className=\"space-y-0.5\">\n                  <Label htmlFor=\"fullName\" className=\"text-sm font-medium\">\n                    Your full name\n                  </Label>\n                  <div className=\"relative\">\n                    <MdPerson className=\"text-muted-foreground/70 absolute top-1/2 left-3.5 h-4 w-4 -translate-y-1/2\" />\n                    <Input\n                      id=\"fullName\"\n                      placeholder=\"Jane Doe\"\n                      className=\"bg-background/50 focus-visible:ring-primary/20 focus-visible:border-primary/50 h-11 pl-10\"\n                    />\n                  </div>\n                </div>\n\n                <div className=\"space-y-0.5\">\n                  <Label htmlFor=\"email\" className=\"text-sm font-medium\">\n                    Work email address\n                  </Label>\n                  <div className=\"relative\">\n                    <MdMailOutline className=\"text-muted-foreground/70 absolute top-1/2 left-3.5 h-4 w-4 -translate-y-1/2\" />\n                    <Input\n                      id=\"email\"\n                      type=\"email\"\n                      placeholder=\"jane@company.com\"\n                      className=\"bg-background/50 focus-visible:ring-primary/20 focus-visible:border-primary/50 h-11 pl-10\"\n                    />\n                  </div>\n                </div>\n                <div className=\"space-y-0.5\">\n                  <Label htmlFor=\"details\" className=\"text-sm font-medium\">\n                    Message details\n                  </Label>\n                  <Textarea\n                    id=\"details\"\n                    placeholder=\"Tell us more about your inquiry...\"\n                    className=\"bg-background/50 focus-visible:ring-primary/20 focus-visible:border-primary/50 min-h-[140px] resize-y p-4\"\n                  />\n                </div>\n\n                <Button\n                  type=\"submit\"\n                  className=\"mt-2 h-12 w-full text-base font-medium\"\n                >\n                  {form.submitButtonText || \"Send message\"}\n                </Button>\n              </form>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n\n      <GridBackground />\n      <div className=\"pointer-events-none absolute inset-0 z-0 flex items-center justify-center overflow-hidden\">\n        <div className=\"bg-primary/5 absolute top-1/2 left-1/2 h-[600px] w-[800px] -translate-x-1/2 -translate-y-1/2 rounded-full opacity-50 blur-3xl dark:opacity-20\" />\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/contact-2.tsx"
    }
  ],
  "type": "registry:ui"
}