{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cta-split-demo-request-modal",
  "title": "Cta Split Demo Request Modal",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/cta-split-demo-request-modal/CtaSplitDemoRequestModal.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { ArrowRight, Calendar, CheckCircle2, Lock, Mail, Palette, ShieldCheck, Zap } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { cn } from '@/lib/utils'\n\nexport interface CtaSplitDemoRequestModalProps {\n  className?: string\n}\n\nexport function CtaSplitDemoRequestModal({ className }: CtaSplitDemoRequestModalProps) {\n  const [email, setEmail] = React.useState('')\n  const [teamSize, setTeamSize] = React.useState('11-50')\n  const [frameworkFocus, setFrameworkFocus] = React.useState('Dual-Framework Monorepo')\n  const [isSubmitted, setIsSubmitted] = React.useState(false)\n\n  const submitDemoRequest = () => {\n    if (!email) return\n    setIsSubmitted(true)\n  }\n\n  return (\n    <section\n      data-slot=\"cta-split-demo-request-modal\"\n      className={cn('bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8', className)}\n    >\n      <div className=\"mx-auto max-w-6xl space-y-12\">\n        {/* Section Header */}\n        <div className=\"mx-auto max-w-3xl space-y-4 text-center\">\n          <Badge variant=\"secondary\" className=\"gap-1.5 px-3 py-1 font-mono text-xs shadow-xs\">\n            <Calendar className=\"text-primary size-3.5\" />\n            Enterprise Design System Strategy\n          </Badge>\n          <h2 className=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl\">\n            Schedule an architectural walkthrough.\n          </h2>\n          <p className=\"text-muted-foreground text-base\">\n            See how unbundled registries and dual-framework tokens accelerate enterprise frontend velocity.\n          </p>\n        </div>\n\n        {/* Split Workbench Container */}\n        <div className=\"grid grid-cols-1 items-stretch gap-8 lg:grid-cols-12\">\n          {/* Left Column: Enterprise Benefits (6 Cols) */}\n          <Card className=\"border-border bg-card/95 flex flex-col justify-between space-y-6 rounded-2xl p-6 text-left shadow-xl sm:p-8 lg:col-span-6\">\n            <div className=\"space-y-6\">\n              <h3 className=\"text-foreground font-mono text-xl font-bold\">What you'll discover on the call:</h3>\n\n              <div className=\"space-y-4\">\n                <div className=\"flex items-start gap-3\">\n                  <div className=\"bg-primary/10 border-primary/20 text-primary shrink-0 rounded-lg border p-2\">\n                    <Zap className=\"size-4\" />\n                  </div>\n                  <div>\n                    <h4 className=\"text-foreground font-mono text-xs font-bold\">Eliminating NPM Semver Bottlenecks</h4>\n                    <p className=\"text-muted-foreground mt-0.5 text-xs\">\n                      How code ownership prevents breaking upgrades and unblocks feature teams.\n                    </p>\n                  </div>\n                </div>\n\n                <div className=\"flex items-start gap-3\">\n                  <div className=\"bg-primary/10 border-primary/20 text-primary shrink-0 rounded-lg border p-2\">\n                    <ShieldCheck className=\"size-4\" />\n                  </div>\n                  <div>\n                    <h4 className=\"text-foreground font-mono text-xs font-bold\">\n                      Private Registry Mirroring &amp; Air-Gapping\n                    </h4>\n                    <p className=\"text-muted-foreground mt-0.5 text-xs\">\n                      Host internal organizational registries behind your enterprise firewall with custom security\n                      audits.\n                    </p>\n                  </div>\n                </div>\n\n                <div className=\"flex items-start gap-3\">\n                  <div className=\"bg-primary/10 border-primary/20 text-primary shrink-0 rounded-lg border p-2\">\n                    <Palette className=\"size-4\" />\n                  </div>\n                  <div>\n                    <h4 className=\"text-foreground font-mono text-xs font-bold\">Tailwind CSS v4 Token Architecture</h4>\n                    <p className=\"text-muted-foreground mt-0.5 text-xs\">\n                      100% mathematical token sync across Vue 3.5 SFCs and React 19 TSX islands.\n                    </p>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            {/* Trust footer */}\n            <div className=\"border-border text-muted-foreground flex items-center justify-between border-t pt-4 font-mono text-xs\">\n              <span className=\"flex items-center gap-1.5\">\n                <Lock className=\"text-primary size-3.5\" /> NDA Protected &bull; No Obligation\n              </span>\n              <span className=\"text-success font-semibold\">&check; 30-Min Fast Track</span>\n            </div>\n          </Card>\n\n          {/* Right Column: Interactive Scheduling Form (6 Cols) */}\n          <Card className=\"border-border bg-card/95 flex flex-col justify-between space-y-6 rounded-2xl p-6 text-left shadow-sm sm:p-8 lg:col-span-6\">\n            {!isSubmitted ? (\n              <div className=\"space-y-5\">\n                <div className=\"space-y-1\">\n                  <h3 className=\"text-foreground font-mono text-lg font-bold\">Request Your Custom Demo</h3>\n                  <p className=\"text-muted-foreground text-xs\">\n                    Fill in your team details to receive an instant calendar invite.\n                  </p>\n                </div>\n\n                {/* Email Field */}\n                <div className=\"space-y-1.5\">\n                  <label className=\"text-muted-foreground font-mono text-xs\">Work Email Address</label>\n                  <div className=\"relative\">\n                    <Mail className=\"text-muted-foreground absolute top-1/2 left-3.5 size-4 -translate-y-1/2\" />\n                    <Input\n                      type=\"email\"\n                      value={email}\n                      onChange={(e) => setEmail(e.target.value)}\n                      placeholder=\"alex@company.com\"\n                      className=\"bg-card border-border h-10 rounded-xl pl-10 font-mono text-xs shadow-xs\"\n                    />\n                  </div>\n                </div>\n\n                {/* Team Size Picker */}\n                <div className=\"space-y-1.5\">\n                  <label className=\"text-muted-foreground font-mono text-xs\">Engineering Team Size</label>\n                  <div className=\"grid grid-cols-4 gap-1.5\">\n                    {['1-10', '11-50', '50-200', '200+'].map((size) => (\n                      <button\n                        key={size}\n                        type=\"button\"\n                        className={cn(\n                          'rounded-lg border py-1.5 text-center font-mono text-xs transition-colors',\n                          teamSize === size\n                            ? 'border-primary bg-primary text-primary-foreground font-semibold shadow-xs'\n                            : 'border-border bg-card text-muted-foreground hover:text-foreground',\n                        )}\n                        onClick={() => setTeamSize(size)}\n                      >\n                        {size}\n                      </button>\n                    ))}\n                  </div>\n                </div>\n\n                {/* Framework Focus */}\n                <div className=\"space-y-1.5\">\n                  <label className=\"text-muted-foreground font-mono text-xs\">Primary Architecture Focus</label>\n                  <div className=\"grid grid-cols-3 gap-1.5\">\n                    {['Vue / Nuxt', 'React / Next', 'Dual-Framework'].map((fw) => (\n                      <button\n                        key={fw}\n                        type=\"button\"\n                        className={cn(\n                          'rounded-lg border py-1.5 text-center font-mono text-xs transition-colors',\n                          frameworkFocus === fw\n                            ? 'border-primary bg-primary text-primary-foreground font-semibold shadow-xs'\n                            : 'border-border bg-card text-muted-foreground hover:text-foreground',\n                        )}\n                        onClick={() => setFrameworkFocus(fw)}\n                      >\n                        {fw}\n                      </button>\n                    ))}\n                  </div>\n                </div>\n\n                <Button className=\"mt-2 h-10 w-full gap-1.5 font-mono text-xs shadow-md\" onClick={submitDemoRequest}>\n                  <span>Confirm &amp; Pick Time Slot</span>\n                  <ArrowRight className=\"size-3.5\" />\n                </Button>\n              </div>\n            ) : (\n              <div className=\"space-y-4 py-12 text-center\">\n                <div className=\"border-success/20 bg-success/10 text-success mx-auto flex size-12 items-center justify-center rounded-full border\">\n                  <CheckCircle2 className=\"size-6\" />\n                </div>\n                <div className=\"space-y-1\">\n                  <h4 className=\"text-foreground font-mono text-base font-bold\">Demo Request Received</h4>\n                  <p className=\"text-muted-foreground mx-auto max-w-xs text-xs\">\n                    We've sent calendar access to{' '}\n                    <span className=\"text-foreground font-mono font-semibold\">{email}</span>. Check your inbox to select\n                    a time.\n                  </p>\n                </div>\n                <Button size=\"sm\" variant=\"outline\" className=\"font-mono text-xs\" onClick={() => setIsSubmitted(false)}>\n                  Submit Another Request\n                </Button>\n              </div>\n            )}\n          </Card>\n        </div>\n      </div>\n    </section>\n  )\n}\nexport default CtaSplitDemoRequestModal\n",
      "type": "registry:block",
      "target": "~/components/blocks/CtaSplitDemoRequestModal.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/input.json"
  ],
  "description": "Split-pane enterprise demo request workbench with benefit highlights, team size selectors, framework focus filters, and interactive submission feedback.",
  "categories": [
    "marketing"
  ]
}