{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "contact-01",
  "title": "Sales Contact Form",
  "type": "registry:block",
  "description": "Interactive enterprise solutions architect dispatch workbench with track selection, live hub timezones, SLA badges, and ticket generator.",
  "categories": [
    "marketing"
  ],
  "files": [
    {
      "path": "packages/elements-lit/src/blocks/contact-01/contact-01.ts",
      "content": "import { LitElement, css, html } from 'lit'\nimport {\n  Building2,\n  Check,\n  Copy,\n  Headphones,\n  MessageSquare,\n  Send,\n  ShieldCheck,\n  type IconNode,\n} from 'lucide'\nimport { cn } from '../../lib/utils'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\nimport { icon } from '../../lib/icon'\n// Side-effect imports: register the composed elements for standalone use\n// (consumers who install only this block still get working primitives).\nimport '../../components/badge/badge'\nimport '../../components/button/button'\nimport '../../components/input/input'\nimport type { UipInput } from '../../components/input/input'\nimport '../../components/label/label'\nimport '../../components/textarea/textarea'\nimport type { UipTextarea } from '../../components/textarea/textarea'\n\nexport interface ContactSubmitPayload {\n  type: string\n  name: string\n  email: string\n  company: string\n  teamSize: string\n  message: string\n  ticketId: string\n}\n\ninterface InquiryType {\n  id: string\n  title: string\n  subtitle: string\n  sla: string\n  icon: IconNode\n  iconName: string\n}\n\nconst inquiryTypes: InquiryType[] = [\n  {\n    id: 'enterprise',\n    title: 'Enterprise Architecture',\n    subtitle: 'Custom registries, zero-lockin migrations & multi-team governance',\n    sla: '< 2h SLA',\n    icon: Building2,\n    iconName: 'building-2',\n  },\n  {\n    id: 'support',\n    title: 'Dedicated Engineering SLA',\n    subtitle: '24/7 incident response, custom upstream bugfixes & private Slack channel',\n    sla: '< 15m SLA',\n    icon: Headphones,\n    iconName: 'headphones',\n  },\n  {\n    id: 'security',\n    title: 'Security & Compliance Review',\n    subtitle: 'SOC2 Type II audits, self-hosted registry mirrors & air-gapped deployments',\n    sla: '< 4h SLA',\n    icon: ShieldCheck,\n    iconName: 'shield-check',\n  },\n]\n\nconst globalHubs = [\n  { city: 'San Francisco', tz: 'PST (UTC-8)', status: 'Active (09:00 - 18:00)', email: 'sf@uipkge.dev' },\n  { city: 'London', tz: 'GMT (UTC+0)', status: 'Active (08:30 - 17:30)', email: 'london@uipkge.dev' },\n  { city: 'Singapore', tz: 'SGT (UTC+8)', status: 'Active (09:00 - 18:00)', email: 'singapore@uipkge.dev' },\n]\n\n/**\n * <uip-contact-01> — the registry Contact01 block as a web component.\n *\n * Class strings are React's Contact01 verbatim. React state (useState)\n * becomes @state fields. `onSubmit` (payload) becomes a `submit`\n * CustomEvent with the payload in `detail` (bubbles, composed); the ticket\n * copy timeout is cleared in `disconnectedCallback`. Card chrome stays plain\n * divs carrying the registry Card part classes (see the login-01 block).\n */\nexport class UipContact01 extends LitElement {\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n  // :host display can't be a utility class (the host has no template of its own).\n  static styles = [tailwind, css`:host { display: block; }`]\n\n  static properties = {\n    selectedType: { state: true },\n    name: { state: true },\n    email: { state: true },\n    company: { state: true },\n    teamSize: { state: true },\n    message: { state: true },\n    sent: { state: true },\n    ticketId: { state: true },\n    copiedTicket: { state: true },\n  }\n\n  private selectedType = 'enterprise'\n  private name = ''\n  private email = ''\n  private company = ''\n  private teamSize = '10-50'\n  private message = ''\n  private sent = false\n  private ticketId = ''\n  private copiedTicket = false\n  private timer?: number\n\n  constructor() {\n    super()\n    new ThemeController(this)\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.setAttribute('data-uipkge', '')\n    this.setAttribute('data-slot', 'contact-01')\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    if (this.timer) window.clearTimeout(this.timer)\n  }\n\n  private get canSubmit() {\n    return !!this.name.trim() && !!this.email.trim() && !!this.message.trim()\n  }\n\n  private handleSubmit(e: Event) {\n    e.preventDefault()\n    if (!this.canSubmit) return\n    const generatedId = `UIP-${Math.floor(1000 + Math.random() * 9000)}`\n    this.ticketId = generatedId\n    this.dispatchEvent(\n      new CustomEvent<ContactSubmitPayload>('submit', {\n        detail: {\n          type: this.selectedType,\n          name: this.name,\n          email: this.email,\n          company: this.company,\n          teamSize: this.teamSize,\n          message: this.message,\n          ticketId: generatedId,\n        },\n        bubbles: true,\n        composed: true,\n      }),\n    )\n    this.sent = true\n  }\n\n  private copyTicket() {\n    try {\n      navigator.clipboard?.writeText(this.ticketId)?.catch(() => {})\n    } catch {\n      // Clipboard unavailable (insecure context): still flash the label.\n    }\n    this.copiedTicket = true\n    if (this.timer) window.clearTimeout(this.timer)\n    this.timer = window.setTimeout(() => {\n      this.copiedTicket = false\n    }, 2000)\n  }\n\n  render() {\n    return html`\n      <section data-slot=\"contact-01\" class=\"bg-background relative overflow-hidden px-4 py-16 sm:px-6 lg:px-8\">\n        <div class=\"mx-auto max-w-6xl space-y-12\">\n          <div class=\"max-w-3xl space-y-3\">\n            <uip-badge variant=\"secondary\" class=\"gap-1.5 px-3 py-1 font-mono text-xs shadow-xs\">\n              ${icon(ShieldCheck, 'shield-check', 'text-primary size-3.5')} Enterprise Engineering & Architecture\n              Solutions\n            </uip-badge>\n            <h2 class=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl\">\n              Talk to a principal design engineer.\n            </h2>\n            <p class=\"text-muted-foreground text-sm leading-relaxed sm:text-base\">\n              No generic sales reps. Connect directly with the core team that architects our dual-framework registry,\n              token engines, and headless workbenches.\n            </p>\n          </div>\n\n          <div class=\"grid grid-cols-1 items-start gap-8 lg:grid-cols-12\">\n            <div class=\"space-y-6 lg:col-span-5\">\n              <div class=\"space-y-3\">\n                <p class=\"text-muted-foreground font-mono text-xs tracking-wider uppercase\">\n                  Select Engagement Track\n                </p>\n                <div class=\"space-y-2.5\">\n                  ${inquiryTypes.map((track) => {\n                    const isSelected = this.selectedType === track.id\n                    return html`<div\n                      class=${cn(\n                        'group cursor-pointer rounded-xl border p-4 transition-colors',\n                        isSelected\n                          ? 'border-primary bg-primary/5 ring-primary/20 shadow-xs ring-1'\n                          : 'border-border bg-card hover:bg-muted/40',\n                      )}\n                      @click=${() => {\n                        this.selectedType = track.id\n                      }}\n                    >\n                      <div class=\"flex items-start justify-between gap-3\">\n                        <div class=\"flex items-center gap-2.5\">\n                          <div\n                            class=${cn(\n                              'rounded-lg p-2 transition-colors',\n                              isSelected\n                                ? 'bg-primary text-primary-foreground'\n                                : 'bg-muted text-foreground group-hover:bg-primary/10 group-hover:text-primary',\n                            )}\n                          >\n                            ${icon(track.icon, track.iconName, 'size-4')}\n                          </div>\n                          <span class=\"text-foreground text-xs font-semibold\">${track.title}</span>\n                        </div>\n                        <uip-badge variant=\"outline\" class=\"bg-background font-mono text-xs\">${track.sla}</uip-badge>\n                      </div>\n                      <p class=\"text-muted-foreground mt-2 pl-9 text-xs\">${track.subtitle}</p>\n                    </div>`\n                  })}\n                </div>\n              </div>\n\n              <div\n                data-uipkge=\"\"\n                data-slot=\"separator\"\n                data-orientation=\"horizontal\"\n                role=\"none\"\n                class=\"bg-border shrink-0 h-px w-full\"\n              ></div>\n\n              <div class=\"space-y-3\">\n                <div class=\"flex items-center justify-between\">\n                  <p class=\"text-muted-foreground font-mono text-xs tracking-wider uppercase\">\n                    Direct Engineering Hubs\n                  </p>\n                  <div class=\"text-success flex items-center gap-1.5 font-mono text-xs\">\n                    <span class=\"bg-success size-2 animate-pulse rounded-full\"></span>\n                    Live Dispatch Active\n                  </div>\n                </div>\n\n                <div class=\"space-y-2\">\n                  ${globalHubs.map(\n                    (hub) => html`<div\n                      class=\"border-border bg-card/60 flex items-center justify-between rounded-lg border p-3 text-xs shadow-xs\"\n                    >\n                      <div>\n                        <p class=\"text-foreground font-medium\">${hub.city}</p>\n                        <p class=\"text-muted-foreground font-mono text-xs\">${hub.tz} &bull; ${hub.status}</p>\n                      </div>\n                      <a href=${`mailto:${hub.email}`} class=\"text-primary font-mono text-xs hover:underline\">\n                        ${hub.email}\n                      </a>\n                    </div>`,\n                  )}\n                </div>\n              </div>\n            </div>\n\n            <div class=\"lg:col-span-7\">\n              <div\n                data-uipkge=\"\"\n                data-slot=\"card\"\n                class=\"bg-card text-card-foreground rounded-xl border border-border overflow-hidden shadow-sm transition-colors duration-150\"\n              >\n                <div\n                  data-uipkge=\"\"\n                  data-slot=\"card-header\"\n                  class=\"grid auto-rows-min grid-cols-[minmax(0,1fr)] grid-rows-[auto_auto] items-start gap-1.5 p-6 pb-4 border-b border-border/60 bg-muted/20 has-data-[slot=card-action]:grid-cols-[minmax(0,1fr)_auto]\"\n                >\n                  <div class=\"flex items-center justify-between\">\n                    <h3\n                      data-uipkge=\"\"\n                      data-slot=\"card-title\"\n                      class=\"leading-none tracking-tight flex items-center gap-2 text-base font-semibold\"\n                    >\n                      ${icon(MessageSquare, 'message-square', 'text-primary size-4')} Dispatch Engineering Request\n                    </h3>\n                    <uip-badge variant=\"secondary\" class=\"font-mono text-xs\">Direct Dispatch: ${this.selectedType}</uip-badge>\n                  </div>\n                  <p data-uipkge=\"\" data-slot=\"card-description\" class=\"text-muted-foreground text-xs\">\n                    Provide architectural specifications or questions. Our engineering team responds within guaranteed\n                    SLA.\n                  </p>\n                </div>\n\n                <div data-uipkge=\"\" data-slot=\"card-content\" class=\"p-6 pt-0\">\n                  ${!this.sent\n                    ? html`<form @submit=${this.handleSubmit} class=\"space-y-4\">\n                        <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n                          <div class=\"space-y-1.5\">\n                            <uip-label for=\"contact-name\" class=\"text-xs font-medium\">Your Name</uip-label>\n                            <uip-input\n                              id=\"contact-name\"\n                              .value=${this.name}\n                              @input=${(e: Event) => {\n                                this.name = (e.target as UipInput).value\n                              }}\n                              placeholder=\"Jane Doe\"\n                              required\n                              class=\"h-9 text-xs\"\n                            ></uip-input>\n                          </div>\n                          <div class=\"space-y-1.5\">\n                            <uip-label for=\"contact-email\" class=\"text-xs font-medium\">Work Email</uip-label>\n                            <uip-input\n                              id=\"contact-email\"\n                              type=\"email\"\n                              .value=${this.email}\n                              @input=${(e: Event) => {\n                                this.email = (e.target as UipInput).value\n                              }}\n                              placeholder=\"jane@company.com\"\n                              required\n                              class=\"h-9 font-mono text-xs\"\n                            ></uip-input>\n                          </div>\n                        </div>\n\n                        <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n                          <div class=\"space-y-1.5\">\n                            <uip-label for=\"contact-company\" class=\"text-xs font-medium\"\n                              >Company / Organization</uip-label\n                            >\n                            <uip-input\n                              id=\"contact-company\"\n                              .value=${this.company}\n                              @input=${(e: Event) => {\n                                this.company = (e.target as UipInput).value\n                              }}\n                              placeholder=\"Acme Corp\"\n                              class=\"h-9 text-xs\"\n                            ></uip-input>\n                          </div>\n                          <div class=\"space-y-1.5\">\n                            <uip-label class=\"text-xs font-medium\">Engineering Team Size</uip-label>\n                            <div class=\"grid grid-cols-3 gap-1.5\">\n                              ${['1-10', '10-50', '50+'].map(\n                                (ts) => html`<button\n                                  type=\"button\"\n                                  class=${cn(\n                                    'rounded-md border px-2 py-1.5 text-center font-mono text-xs transition-colors',\n                                    this.teamSize === ts\n                                      ? 'border-primary bg-primary/10 text-primary font-semibold'\n                                      : 'border-border bg-background text-muted-foreground hover:text-foreground',\n                                  )}\n                                  @click=${() => {\n                                    this.teamSize = ts\n                                  }}\n                                >\n                                  ${ts}\n                                </button>`,\n                              )}\n                            </div>\n                          </div>\n                        </div>\n\n                        <div class=\"space-y-1.5\">\n                          <uip-label for=\"contact-message\" class=\"text-xs font-medium\"\n                            >Project Scope & Technical Details</uip-label\n                          >\n                          <uip-textarea\n                            id=\"contact-message\"\n                            .value=${this.message}\n                            @input=${(e: Event) => {\n                              this.message = (e.target as UipTextarea).value ?? ''\n                            }}\n                            rows=\"4\"\n                            placeholder=\"Describe your tech stack (Vue 3, Nuxt 3, React 19, Next.js), design token requirements, and deployment targets...\"\n                            required\n                            class=\"resize-none text-xs\"\n                          ></uip-textarea>\n                        </div>\n\n                        <div class=\"flex flex-col items-center justify-between gap-3 pt-2 sm:flex-row\">\n                          <div class=\"text-muted-foreground flex items-center gap-2 text-xs\">\n                            ${icon(ShieldCheck, 'shield-check', 'text-success size-4')}\n                            <span>NDA & IP protection pre-guaranteed.</span>\n                          </div>\n\n                          <uip-button\n                            type=\"submit\"\n                            ?disabled=${!this.canSubmit}\n                            class=\"h-9 w-full gap-1.5 px-5 text-xs font-semibold sm:w-auto\"\n                          >\n                            <span>Dispatch Inquiry</span>\n                            ${icon(Send, 'send', 'size-3.5')}\n                          </uip-button>\n                        </div>\n                      </form>`\n                    : html`<div class=\"space-y-5 px-4 py-8 text-center\">\n                        <div class=\"bg-success/10 text-success mx-auto flex size-12 items-center justify-center rounded-full\">\n                          ${icon(Check, 'check', 'size-6')}\n                        </div>\n                        <div class=\"space-y-1\">\n                          <p class=\"text-foreground text-base font-bold\">Inquiry Dispatched Successfully</p>\n                          <p class=\"text-muted-foreground mx-auto max-w-sm text-xs\">\n                            A principal solutions architect has been assigned. You will receive a technical response at\n                            <strong class=\"text-foreground font-mono\">${this.email}</strong> within guaranteed SLA.\n                          </p>\n                        </div>\n\n                        <div\n                          class=\"border-border bg-muted/40 mx-auto flex max-w-xs items-center justify-between rounded-lg border p-3\"\n                        >\n                          <div class=\"text-left\">\n                            <p class=\"text-muted-foreground font-mono text-xs uppercase\">Reference Ticket ID</p>\n                            <p class=\"text-foreground font-mono text-xs font-bold\">${this.ticketId}</p>\n                          </div>\n                          <uip-button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1 font-mono text-xs\" @click=${this.copyTicket}>\n                            ${this.copiedTicket\n                              ? icon(Check, 'check', 'text-success size-3')\n                              : icon(Copy, 'copy', 'size-3')}\n                            <span>${this.copiedTicket ? 'Copied' : 'Copy'}</span>\n                          </uip-button>\n                        </div>\n\n                        <uip-button\n                          variant=\"ghost\"\n                          size=\"sm\"\n                          class=\"text-muted-foreground text-xs\"\n                          @click=${() => {\n                            this.sent = false\n                          }}\n                        >\n                          Send Another Inquiry\n                        </uip-button>\n                      </div>`}\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </section>\n    `\n  }\n}\n\ncustomElements.get('uip-contact-01') || customElements.define('uip-contact-01', UipContact01)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uip-contact-01': UipContact01\n  }\n}\n",
      "type": "registry:file",
      "target": "src/uip/blocks/contact-01/contact-01.ts"
    }
  ],
  "dependencies": [
    "lit",
    "lucide"
  ],
  "registryDependencies": [
    "https://uipkge.dev/r/lit/badge.json",
    "https://uipkge.dev/r/lit/button.json",
    "https://uipkge.dev/r/lit/input.json",
    "https://uipkge.dev/r/lit/label.json",
    "https://uipkge.dev/r/lit/lit-core.json",
    "https://uipkge.dev/r/lit/textarea.json"
  ]
}