{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "contact-us",
  "title": "Contact Us",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/contact-us/ContactUs.tsx",
      "content": "'use client'\n\n/**\n * Contact section — two columns. Left: eyebrow, headline, lede, icon-prefixed\n * contact rows, and a live map pinned to your office (pass `accessToken` +\n * `location`; falls back to a styled placeholder without a token). Right: a\n * Card-wrapped form (name / email / company / subject / message) that swaps to\n * a success state after submit. Emits \"submit\" with the payload.\n */\nimport * as React from 'react'\nimport { CheckCircle2, Mail, MapPin, Phone, Send } from 'lucide-react'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { Label } from '@/components/ui/label'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport { Textarea } from '@/components/ui/textarea'\nimport { Map, MapMarker } from '@/components/ui/map'\n\nexport interface ContactUsProps {\n  /** Mapbox token. Without it the map area shows a styled placeholder. */\n  accessToken?: string\n  /** Office [lng, lat]. */\n  location?: [number, number]\n  locationLabel?: string\n  onSubmit?: (payload: {\n    name: string\n    email: string\n    company: string\n    subject: string\n    message: string\n  }) => void\n}\n\nexport function ContactUs({\n  accessToken = '',\n  location = [-122.4194, 37.7749],\n  locationLabel = 'San Francisco, CA',\n  onSubmit,\n}: ContactUsProps) {\n  const [name, setName] = React.useState('')\n  const [email, setEmail] = React.useState('')\n  const [company, setCompany] = React.useState('')\n  const [subject, setSubject] = React.useState('sales')\n  const [message, setMessage] = React.useState('')\n  const [sent, setSent] = React.useState(false)\n\n  const canSubmit = !!name && !!email && !!message\n\n  function submit() {\n    if (!canSubmit) return\n    onSubmit?.({ name, email, company, subject, message })\n    setSent(true)\n  }\n\n  return (\n    <section className=\"bg-background\">\n      <div className=\"mx-auto max-w-6xl px-6 py-20\">\n        <div className=\"grid gap-10 lg:grid-cols-2 lg:items-start\">\n          {/* Left: copy + contact rows + map */}\n          <div className=\"space-y-6\">\n            <p className=\"text-primary text-sm font-medium uppercase tracking-widest\">Contact</p>\n            <h2 className=\"text-3xl font-semibold tracking-tight sm:text-4xl\">Talk to our team</h2>\n            <p className=\"text-muted-foreground max-w-md\">\n              Questions about pricing, onboarding, or a custom plan? Send a note and we'll get back within one business day.\n            </p>\n\n            <ul className=\"space-y-3\">\n              <li className=\"flex items-center gap-3\">\n                <span className=\"bg-muted text-foreground flex size-9 items-center justify-center rounded-lg\"><Mail className=\"size-4\" /></span>\n                <span className=\"text-sm\">hello@example.com</span>\n              </li>\n              <li className=\"flex items-center gap-3\">\n                <span className=\"bg-muted text-foreground flex size-9 items-center justify-center rounded-lg\"><Phone className=\"size-4\" /></span>\n                <span className=\"text-sm\">+1 (555) 010-2030</span>\n              </li>\n              <li className=\"flex items-center gap-3\">\n                <span className=\"bg-muted text-foreground flex size-9 items-center justify-center rounded-lg\"><MapPin className=\"size-4\" /></span>\n                <span className=\"text-sm\">{locationLabel}</span>\n              </li>\n            </ul>\n\n            <div className=\"h-56 overflow-hidden rounded-xl border\">\n              {accessToken ? (\n                <Map accessToken={accessToken} center={location} zoom={11} muted className=\"size-full\">\n                  <MapMarker longitude={location[0]} latitude={location[1]} anchor=\"bottom\">\n                    <svg viewBox=\"0 0 24 24\" width=\"26\" height=\"34\" className=\"text-primary drop-shadow\">\n                      <path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z\" fill=\"currentColor\" stroke=\"#fff\" strokeWidth=\"1.5\" />\n                      <circle cx=\"12\" cy=\"9\" r=\"2.6\" fill=\"#fff\" />\n                    </svg>\n                  </MapMarker>\n                </Map>\n              ) : (\n                <div className=\"bg-muted text-muted-foreground flex size-full items-center justify-center gap-2 text-sm\">\n                  <MapPin className=\"size-4\" /> {locationLabel}\n                </div>\n              )}\n            </div>\n          </div>\n\n          {/* Right: form */}\n          <Card>\n            {!sent ? (\n              <>\n                <CardHeader>\n                  <CardTitle>Send a message</CardTitle>\n                  <CardDescription>We'll route it to the right person.</CardDescription>\n                </CardHeader>\n                <CardContent className=\"space-y-4\">\n                  <div className=\"grid gap-4 sm:grid-cols-2\">\n                    <div className=\"space-y-1.5\">\n                      <Label htmlFor=\"cu-name\">Name</Label>\n                      <Input id=\"cu-name\" value={name} onChange={(e) => setName(e.target.value)} placeholder=\"Jane Cooper\" />\n                    </div>\n                    <div className=\"space-y-1.5\">\n                      <Label htmlFor=\"cu-email\">Email</Label>\n                      <Input id=\"cu-email\" value={email} onChange={(e) => setEmail(e.target.value)} type=\"email\" placeholder=\"jane@company.com\" />\n                    </div>\n                  </div>\n                  <div className=\"space-y-1.5\">\n                    <Label htmlFor=\"cu-company\">Company</Label>\n                    <Input id=\"cu-company\" value={company} onChange={(e) => setCompany(e.target.value)} placeholder=\"Acme Inc.\" />\n                  </div>\n                  <div className=\"space-y-1.5\">\n                    <Label>Subject</Label>\n                    <Select value={subject} onValueChange={setSubject}>\n                      <SelectTrigger><SelectValue placeholder=\"Choose a topic\" /></SelectTrigger>\n                      <SelectContent>\n                        <SelectItem value=\"sales\">Sales</SelectItem>\n                        <SelectItem value=\"support\">Support</SelectItem>\n                        <SelectItem value=\"partnership\">Partnership</SelectItem>\n                      </SelectContent>\n                    </Select>\n                  </div>\n                  <div className=\"space-y-1.5\">\n                    <Label htmlFor=\"cu-message\">Message</Label>\n                    <Textarea id=\"cu-message\" value={message} onValueChange={setMessage} rows={4} placeholder=\"How can we help?\" />\n                  </div>\n                  <Button className=\"w-full\" disabled={!canSubmit} onClick={submit}>\n                    <Send className=\"size-4\" /> Send message\n                  </Button>\n                </CardContent>\n              </>\n            ) : (\n              <CardContent className=\"flex flex-col items-center gap-3 py-16 text-center\">\n                <span className=\"bg-success/10 text-success flex size-12 items-center justify-center rounded-full\"><CheckCircle2 className=\"size-6\" /></span>\n                <p className=\"text-lg font-semibold\">Message sent</p>\n                <p className=\"text-muted-foreground max-w-xs text-sm\">Thanks, {name} — we'll reply to {email} within one business day.</p>\n                <Button variant=\"outline\" onClick={() => setSent(false)}>Send another</Button>\n              </CardContent>\n            )}\n          </Card>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/ContactUs.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/input.json",
    "https://uipkge.dev/r/react/label.json",
    "https://uipkge.dev/r/react/select.json",
    "https://uipkge.dev/r/react/textarea.json",
    "https://uipkge.dev/r/react/map.json"
  ],
  "description": "Two-column contact section. Left: eyebrow, headline, lede, icon contact rows (email / phone / office) and a live Mapbox map pinned to your office (pass access-token + location; falls back to a placeholder without a token). Right: a Card-wrapped form (name / email / company / subject Select / message Textarea) that swaps to a success state. Emits \"submit\" with the payload.",
  "categories": [
    "marketing"
  ]
}