{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "contact-us",
  "title": "Contact Us",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/contact-us/ContactUs.vue",
      "content": "<script setup lang=\"ts\">\n/**\n * Contact section — two columns. Left: eyebrow, headline, lede, icon-prefixed\n * contact rows, and a live map pinned to your office (pass `access-token` +\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 { computed, ref } from 'vue'\nimport { CheckCircle2, Mail, MapPin, Phone, Send } from 'lucide-vue-next'\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\nconst props = withDefaults(\n  defineProps<{\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  }>(),\n  {\n    accessToken: '',\n    location: () => [-122.4194, 37.7749],\n    locationLabel: 'San Francisco, CA',\n  },\n)\n\nconst emit = defineEmits<{\n  (e: 'submit', payload: { name: string; email: string; company: string; subject: string; message: string }): void\n}>()\n\nconst name = ref('')\nconst email = ref('')\nconst company = ref('')\nconst subject = ref('sales')\nconst message = ref('')\nconst sent = ref(false)\n\nconst canSubmit = computed(() => name.value && email.value && message.value)\n\nfunction submit() {\n  if (!canSubmit.value) return\n  emit('submit', { name: name.value, email: email.value, company: company.value, subject: subject.value, message: message.value })\n  sent.value = true\n}\n</script>\n\n<template>\n  <section class=\"bg-background\">\n    <div class=\"mx-auto max-w-6xl px-6 py-20\">\n      <div class=\"grid gap-10 lg:grid-cols-2 lg:items-start\">\n        <!-- Left: copy + contact rows + map -->\n        <div class=\"space-y-6\">\n          <p class=\"text-primary text-sm font-medium uppercase tracking-widest\">Contact</p>\n          <h2 class=\"text-3xl font-semibold tracking-tight sm:text-4xl\">Talk to our team</h2>\n          <p class=\"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 class=\"space-y-3\">\n            <li class=\"flex items-center gap-3\">\n              <span class=\"bg-muted text-foreground flex size-9 items-center justify-center rounded-lg\"><Mail class=\"size-4\" /></span>\n              <span class=\"text-sm\">hello@example.com</span>\n            </li>\n            <li class=\"flex items-center gap-3\">\n              <span class=\"bg-muted text-foreground flex size-9 items-center justify-center rounded-lg\"><Phone class=\"size-4\" /></span>\n              <span class=\"text-sm\">+1 (555) 010-2030</span>\n            </li>\n            <li class=\"flex items-center gap-3\">\n              <span class=\"bg-muted text-foreground flex size-9 items-center justify-center rounded-lg\"><MapPin class=\"size-4\" /></span>\n              <span class=\"text-sm\">{{ locationLabel }}</span>\n            </li>\n          </ul>\n\n          <div class=\"h-56 overflow-hidden rounded-xl border\">\n            <Map v-if=\"accessToken\" :access-token=\"accessToken\" :center=\"location\" :zoom=\"11\" muted class=\"size-full\">\n              <MapMarker :lng-lat=\"location\" anchor=\"bottom\">\n                <svg viewBox=\"0 0 24 24\" width=\"26\" height=\"34\" class=\"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\" stroke-width=\"1.5\" />\n                  <circle cx=\"12\" cy=\"9\" r=\"2.6\" fill=\"#fff\" />\n                </svg>\n              </MapMarker>\n            </Map>\n            <div v-else class=\"bg-muted text-muted-foreground flex size-full items-center justify-center gap-2 text-sm\">\n              <MapPin class=\"size-4\" /> {{ locationLabel }}\n            </div>\n          </div>\n        </div>\n\n        <!-- Right: form -->\n        <Card>\n          <template v-if=\"!sent\">\n            <CardHeader>\n              <CardTitle>Send a message</CardTitle>\n              <CardDescription>We'll route it to the right person.</CardDescription>\n            </CardHeader>\n            <CardContent class=\"space-y-4\">\n              <div class=\"grid gap-4 sm:grid-cols-2\">\n                <div class=\"space-y-1.5\">\n                  <Label for=\"cu-name\">Name</Label>\n                  <Input id=\"cu-name\" v-model=\"name\" placeholder=\"Jane Cooper\" />\n                </div>\n                <div class=\"space-y-1.5\">\n                  <Label for=\"cu-email\">Email</Label>\n                  <Input id=\"cu-email\" v-model=\"email\" type=\"email\" placeholder=\"jane@company.com\" />\n                </div>\n              </div>\n              <div class=\"space-y-1.5\">\n                <Label for=\"cu-company\">Company</Label>\n                <Input id=\"cu-company\" v-model=\"company\" placeholder=\"Acme Inc.\" />\n              </div>\n              <div class=\"space-y-1.5\">\n                <Label>Subject</Label>\n                <Select v-model=\"subject\">\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 class=\"space-y-1.5\">\n                <Label for=\"cu-message\">Message</Label>\n                <Textarea id=\"cu-message\" v-model=\"message\" :rows=\"4\" placeholder=\"How can we help?\" />\n              </div>\n              <Button class=\"w-full\" :disabled=\"!canSubmit\" @click=\"submit\">\n                <Send class=\"size-4\" /> Send message\n              </Button>\n            </CardContent>\n          </template>\n\n          <CardContent v-else class=\"flex flex-col items-center gap-3 py-16 text-center\">\n            <span class=\"bg-success/10 text-success flex size-12 items-center justify-center rounded-full\"><CheckCircle2 class=\"size-6\" /></span>\n            <p class=\"text-lg font-semibold\">Message sent</p>\n            <p class=\"text-muted-foreground max-w-xs text-sm\">Thanks, {{ name }} — we'll reply to {{ email }} within one business day.</p>\n            <Button variant=\"outline\" @click=\"sent = false\">Send another</Button>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/ContactUs.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/input.json",
    "https://uipkge.dev/r/vue/label.json",
    "https://uipkge.dev/r/vue/select.json",
    "https://uipkge.dev/r/vue/textarea.json",
    "https://uipkge.dev/r/vue/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"
  ]
}