{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "contact-us",
  "title": "Contact Us",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-svelte/blocks/contact-us/ContactUs.svelte",
      "content": "<script 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 `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. Calls `onsubmit` with the payload.\n   */\n  import { CircleCheckBig, Mail, MapPin, Phone, Send } from '@lucide/svelte'\n  import { Button } from '$lib/components/ui/button'\n  import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '$lib/components/ui/card'\n  import { Input } from '$lib/components/ui/input'\n  import { Label } from '$lib/components/ui/label'\n  import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '$lib/components/ui/select'\n  import { Textarea } from '$lib/components/ui/textarea'\n  import { Map, MapMarker } from '$lib/components/ui/map'\n\n  export interface ContactSubmitPayload {\n    name: string\n    email: string\n    company: string\n    subject: string\n    message: string\n  }\n\n  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: ContactSubmitPayload) => void\n  }\n\n  let {\n    accessToken = '',\n    location = [-122.4194, 37.7749],\n    locationLabel = 'San Francisco, CA',\n    onsubmit,\n  }: ContactUsProps = $props()\n\n  let name = $state('')\n  let email = $state('')\n  let company = $state('')\n  let subject = $state('sales')\n  let message = $state('')\n  let sent = $state(false)\n\n  const canSubmit = $derived(name !== '' && email !== '' && message !== '')\n\n  function submit() {\n    if (!canSubmit) return\n    onsubmit?.({ name, email, company, subject, message })\n    sent = true\n  }\n</script>\n\n<section data-slot=\"contact-us\" 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 tracking-widest uppercase\">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\n          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\"\n              ><Mail class=\"size-4\" /></span\n            >\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\"\n              ><Phone class=\"size-4\" /></span\n            >\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\"\n              ><MapPin class=\"size-4\" /></span\n            >\n            <span class=\"text-sm\">{locationLabel}</span>\n          </li>\n        </ul>\n\n        <div class=\"h-56 overflow-hidden rounded-xl border\">\n          {#if accessToken}\n            <Map {accessToken} center={location} zoom={11} muted class=\"size-full\">\n              <MapMarker lngLat={location} anchor=\"bottom\">\n                <svg viewBox=\"0 0 24 24\" width=\"26\" height=\"34\" class=\"text-primary drop-shadow\">\n                  <path\n                    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\"\n                    fill=\"currentColor\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"1.5\"\n                  />\n                  <circle cx=\"12\" cy=\"9\" r=\"2.6\" fill=\"var(--background)\" />\n                </svg>\n              </MapMarker>\n            </Map>\n          {:else}\n            <div 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          {/if}\n        </div>\n      </div>\n\n      <!-- Right: form -->\n      <Card>\n        {#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\" bind:value={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\" bind:value={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\" bind:value={company} placeholder=\"Acme Inc.\" />\n            </div>\n            <div class=\"space-y-1.5\">\n              <Label>Subject</Label>\n              <Select bind:value={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\" bind:value={message} rows={4} placeholder=\"How can we help?\" />\n            </div>\n            <Button class=\"w-full\" disabled={!canSubmit} onclick={submit}>\n              <Send class=\"size-4\" /> Send message\n            </Button>\n          </CardContent>\n        {:else}\n          <CardContent 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\"\n              ><CircleCheckBig class=\"size-6\" /></span\n            >\n            <p class=\"text-lg font-semibold\">Message sent</p>\n            <p class=\"text-muted-foreground max-w-xs text-sm\">\n              Thanks, {name} — we'll reply to {email} within one business day.\n            </p>\n            <Button variant=\"outline\" onclick={() => (sent = false)}>Send another</Button>\n          </CardContent>\n        {/if}\n      </Card>\n    </div>\n  </div>\n</section>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/contact-us/ContactUs.svelte"
    }
  ],
  "dependencies": [
    "@lucide/svelte"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/svelte/button.json",
    "https://uipkge.dev/r/svelte/card.json",
    "https://uipkge.dev/r/svelte/input.json",
    "https://uipkge.dev/r/svelte/label.json",
    "https://uipkge.dev/r/svelte/select.json",
    "https://uipkge.dev/r/svelte/textarea.json",
    "https://uipkge.dev/r/svelte/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 accessToken + 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. Calls onsubmit with the payload.",
  "categories": [
    "marketing"
  ]
}