{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "contact-01",
  "title": "Sales Contact Form",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-svelte/blocks/contact-01/Contact01.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { Component } from 'svelte'\n\n  export interface Contact01SubmitPayload {\n    type: string\n    name: string\n    email: string\n    company: string\n    teamSize: string\n    message: string\n    ticketId: string\n  }\n\n  export interface Contact01Props {\n    onSubmit?: (payload: Contact01SubmitPayload) => void\n  }\n</script>\n\n<script lang=\"ts\">\n  import { Building2, Check, Copy, Headphones, MessageSquare, Send, ShieldCheck } from '@lucide/svelte'\n  import { Badge } from '$lib/components/ui/badge'\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 { Separator } from '$lib/components/ui/separator'\n  import { Textarea } from '$lib/components/ui/textarea'\n\n  let { onSubmit }: Contact01Props = $props()\n\n  interface InquiryType {\n    id: string\n    title: string\n    subtitle: string\n    sla: string\n    icon: Component\n  }\n\n  const 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    },\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    },\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    },\n  ]\n\n  const 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  const teamSizes = ['1-10', '10-50', '50+']\n\n  // Form State\n  let selectedType = $state('enterprise')\n  let name = $state('')\n  let email = $state('')\n  let company = $state('')\n  let teamSize = $state('10-50')\n  let message = $state('')\n  let sent = $state(false)\n  let ticketId = $state('')\n  let copiedTicket = $state(false)\n\n  const canSubmit = $derived(name.trim() && email.trim() && message.trim())\n\n  function submit() {\n    if (!canSubmit) return\n    const generatedId = `UIP-${Math.floor(1000 + Math.random() * 9000)}`\n    ticketId = generatedId\n\n    onSubmit?.({\n      type: selectedType,\n      name,\n      email,\n      company,\n      teamSize,\n      message,\n      ticketId: generatedId,\n    })\n    sent = true\n  }\n\n  function copyTicket() {\n    navigator.clipboard.writeText(ticketId)\n    copiedTicket = true\n    setTimeout(() => (copiedTicket = false), 2000)\n  }\n</script>\n\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    <!-- Section Header -->\n    <div class=\"max-w-3xl space-y-3\">\n      <Badge variant=\"secondary\" class=\"gap-1.5 px-3 py-1 font-mono text-xs shadow-xs\">\n        <ShieldCheck class=\"text-primary size-3.5\" />\n        Enterprise Engineering & Architecture Solutions\n      </Badge>\n      <h2 class=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl\">Talk to a principal design engineer.</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 multi-framework registry, token\n        engines, and headless workbenches.\n      </p>\n    </div>\n\n    <!-- Main Layout -->\n    <div class=\"grid grid-cols-1 items-start gap-8 lg:grid-cols-12\">\n      <!-- Left Column: Inquiry Routing & Global Hubs (5 Cols) -->\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\">Select Engagement Track</p>\n          <div class=\"space-y-2.5\">\n            {#each inquiryTypes as track (track.id)}\n              {@const TrackIcon = track.icon}\n              <div\n                class=\"group cursor-pointer rounded-xl border p-4 transition-colors {selectedType === track.id\n                  ? 'border-primary bg-primary/5 ring-primary/20 shadow-xs ring-1'\n                  : 'border-border bg-card hover:bg-muted/40'}\"\n                onclick={() => (selectedType = track.id)}\n                onkeydown={(e) => e.key === 'Enter' && (selectedType = track.id)}\n                role=\"button\"\n                tabindex=\"0\"\n              >\n                <div class=\"flex items-start justify-between gap-3\">\n                  <div class=\"flex items-center gap-2.5\">\n                    <div\n                      class=\"rounded-lg p-2 transition-colors {selectedType === track.id\n                        ? 'bg-primary text-primary-foreground'\n                        : 'bg-muted text-foreground group-hover:bg-primary/10 group-hover:text-primary'}\"\n                    >\n                      <TrackIcon class=\"size-4\" />\n                    </div>\n                    <span class=\"text-foreground text-xs font-semibold\">{track.title}</span>\n                  </div>\n                  <Badge variant=\"outline\" class=\"bg-background font-mono text-xs\">\n                    {track.sla}\n                  </Badge>\n                </div>\n                <p class=\"text-muted-foreground mt-2 pl-9 text-xs\">\n                  {track.subtitle}\n                </p>\n              </div>\n            {/each}\n          </div>\n        </div>\n\n        <Separator />\n\n        <!-- Global Timezone & Architecture Hubs -->\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\">Direct Engineering Hubs</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            {#each globalHubs as hub (hub.city)}\n              <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            {/each}\n          </div>\n        </div>\n      </div>\n\n      <!-- Right Column: Interactive Dispatch Form (7 Cols) -->\n      <div class=\"lg:col-span-7\">\n        <Card class=\"border-border bg-card overflow-hidden shadow-sm\">\n          <CardHeader class=\"border-border/60 bg-muted/20 border-b pb-4\">\n            <div class=\"flex items-center justify-between\">\n              <CardTitle class=\"flex items-center gap-2 text-base font-semibold\">\n                <MessageSquare class=\"text-primary size-4\" />\n                Dispatch Engineering Request\n              </CardTitle>\n              <Badge variant=\"secondary\" class=\"font-mono text-xs\">Direct Dispatch: {selectedType}</Badge>\n            </div>\n            <CardDescription class=\"text-xs\">\n              Provide architectural specifications or questions. Our engineering team responds within guaranteed SLA.\n            </CardDescription>\n          </CardHeader>\n\n          <CardContent class=\"p-6\">\n            {#if !sent}\n              <form\n                class=\"space-y-4\"\n                onsubmit={(e) => {\n                  e.preventDefault()\n                  submit()\n                }}\n              >\n                <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n                  <div class=\"space-y-1.5\">\n                    <Label for=\"contact-name\" class=\"text-xs font-medium\">Your Name</Label>\n                    <Input id=\"contact-name\" bind:value={name} placeholder=\"Jane Doe\" required class=\"h-9 text-xs\" />\n                  </div>\n                  <div class=\"space-y-1.5\">\n                    <Label for=\"contact-email\" class=\"text-xs font-medium\">Work Email</Label>\n                    <Input\n                      id=\"contact-email\"\n                      bind:value={email}\n                      type=\"email\"\n                      placeholder=\"jane@company.com\"\n                      required\n                      class=\"h-9 font-mono text-xs\"\n                    />\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                    <Label for=\"contact-company\" class=\"text-xs font-medium\">Company / Organization</Label>\n                    <Input id=\"contact-company\" bind:value={company} placeholder=\"Acme Corp\" class=\"h-9 text-xs\" />\n                  </div>\n                  <div class=\"space-y-1.5\">\n                    <Label class=\"text-xs font-medium\">Engineering Team Size</Label>\n                    <div class=\"grid grid-cols-3 gap-1.5\">\n                      {#each teamSizes as ts (ts)}\n                        <button\n                          type=\"button\"\n                          class=\"rounded-md border px-2 py-1.5 text-center font-mono text-xs transition-colors {teamSize ===\n                          ts\n                            ? 'border-primary bg-primary/10 text-primary font-semibold'\n                            : 'border-border bg-background text-muted-foreground hover:text-foreground'}\"\n                          onclick={() => (teamSize = ts)}\n                        >\n                          {ts}\n                        </button>\n                      {/each}\n                    </div>\n                  </div>\n                </div>\n\n                <div class=\"space-y-1.5\">\n                  <Label for=\"contact-message\" class=\"text-xs font-medium\">Project Scope & Technical Details</Label>\n                  <Textarea\n                    id=\"contact-message\"\n                    bind:value={message}\n                    rows=\"4\"\n                    placeholder=\"Describe your tech stack (Svelte 5, SvelteKit), design token requirements, and deployment targets...\"\n                    required\n                    class=\"resize-none text-xs\"\n                  />\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                    <ShieldCheck class=\"text-success size-4\" />\n                    <span>NDA & IP protection pre-guaranteed.</span>\n                  </div>\n\n                  <Button\n                    type=\"submit\"\n                    disabled={!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                    <Send class=\"size-3.5\" />\n                  </Button>\n                </div>\n              </form>\n            {:else}\n              <!-- Success Feedback View -->\n              <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                  <Check class=\"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\">{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\">{ticketId}</p>\n                  </div>\n                  <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1 font-mono text-xs\" onclick={copyTicket}>\n                    {#if copiedTicket}\n                      <Check class=\"text-success size-3\" />\n                    {:else}\n                      <Copy class=\"size-3\" />\n                    {/if}\n                    <span>{copiedTicket ? 'Copied' : 'Copy'}</span>\n                  </Button>\n                </div>\n\n                <Button variant=\"ghost\" size=\"sm\" class=\"text-muted-foreground text-xs\" onclick={() => (sent = false)}>\n                  Send Another Inquiry\n                </Button>\n              </div>\n            {/if}\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  </div>\n</section>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/contact-01/Contact01.svelte"
    }
  ],
  "dependencies": [
    "@lucide/svelte"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/svelte/badge.json",
    "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/separator.json",
    "https://uipkge.dev/r/svelte/textarea.json"
  ],
  "description": "Interactive enterprise solutions architect dispatch workbench with track selection, live hub timezones, SLA badges, and ticket generator.",
  "categories": [
    "marketing"
  ]
}