{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "lead-capture-popup",
  "title": "Lead Capture Popup",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/lead-capture-popup/LeadCapturePopup.tsx",
      "content": "'use client'\n\nimport { useEffect, useState } from 'react'\nimport { ArrowRight, Check, CheckCircle2, Clock, Copy, Gift, RotateCcw, Star, X } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Input } from '@/components/ui/input'\n\ninterface LeadCapturePopupProps {\n  headline?: string\n  subtitle?: string\n  discountCode?: string\n  discountPercent?: number\n  initialSeconds?: number\n  socialProofRating?: string\n  socialProofCount?: string\n  initialSubmitted?: boolean\n  className?: string\n  onSubmit?: (payload: { email: string; discountCode: string }) => void\n  onDismiss?: () => void\n  onCopy?: (code: string) => void\n  onReset?: () => void\n}\n\nexport function LeadCapturePopup({\n  headline = 'Unlock 20% Off Your First Order',\n  subtitle = 'Join 45,000+ engineers receiving our weekly curated component teardowns and architectural breakdowns.',\n  discountCode = 'WELCOME20',\n  discountPercent = 20,\n  initialSeconds = 599,\n  socialProofRating = '4.9/5',\n  socialProofCount = '1,200+ developers',\n  initialSubmitted = false,\n  className,\n  onSubmit,\n  onDismiss,\n  onCopy,\n  onReset,\n}: LeadCapturePopupProps) {\n  const [email, setEmail] = useState('')\n  const [isSubmitted, setIsSubmitted] = useState(initialSubmitted)\n  const [isDismissed, setIsDismissed] = useState(false)\n  const [copied, setCopied] = useState(false)\n  const [timeLeft, setTimeLeft] = useState(initialSeconds)\n\n  useEffect(() => {\n    const timer = setInterval(() => {\n      setTimeLeft((prev) => (prev > 0 ? prev - 1 : 0))\n    }, 1000)\n    return () => clearInterval(timer)\n  }, [])\n\n  const mins = Math.floor(timeLeft / 60)\n  const secs = timeLeft % 60\n  const formattedTime = `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`\n\n  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {\n    e.preventDefault()\n    if (!email || !email.includes('@')) return\n    setIsSubmitted(true)\n    onSubmit?.({ email, discountCode })\n  }\n\n  function handleDismiss() {\n    setIsDismissed(true)\n    onDismiss?.()\n  }\n\n  function handleReset() {\n    setIsSubmitted(false)\n    setIsDismissed(false)\n    setEmail('')\n    setCopied(false)\n    setTimeLeft(initialSeconds)\n    onReset?.()\n  }\n\n  function copyCoupon() {\n    navigator.clipboard?.writeText(discountCode)\n    setCopied(true)\n    onCopy?.(discountCode)\n    setTimeout(() => {\n      setCopied(false)\n    }, 2000)\n  }\n\n  if (isDismissed) {\n    return (\n      <div\n        className=\"flex flex-col items-center justify-center p-8 text-center\"\n        data-slot=\"lead-capture-popup-dismissed\"\n      >\n        <p className=\"text-muted-foreground text-sm\">Popup was dismissed.</p>\n        <Button variant=\"outline\" size=\"sm\" className=\"mt-3 gap-2\" onClick={handleReset}>\n          <RotateCcw className=\"text-primary size-3.5\" />\n          Reopen Welcome Popup\n        </Button>\n      </div>\n    )\n  }\n\n  return (\n    <div data-slot=\"lead-capture-popup\" className={cn('w-full', className)}>\n      <div className=\"bg-card text-card-foreground border-border relative mx-auto w-full max-w-lg overflow-hidden rounded-2xl border p-6 shadow-xl sm:p-8\">\n        {/* Top Right Dismiss Button */}\n        <button\n          type=\"button\"\n          aria-label=\"Dismiss popup\"\n          className=\"text-muted-foreground hover:text-foreground focus-visible:ring-ring absolute top-4 right-4 rounded-full p-1.5 transition-colors focus-visible:ring-2 focus-visible:outline-hidden\"\n          onClick={handleDismiss}\n        >\n          <X className=\"size-4\" />\n        </button>\n\n        {/* FORM STATE */}\n        {!isSubmitted ? (\n          <div className=\"relative z-10 space-y-6\">\n            {/* Top Badge */}\n            <div className=\"flex items-center\">\n              <Badge\n                variant=\"secondary\"\n                className=\"border-primary/20 bg-primary/10 text-primary inline-flex items-center gap-1.5 px-3 py-1 text-xs font-medium\"\n              >\n                <Gift className=\"text-primary size-3.5\" />\n                Limited Time Welcome Gift\n              </Badge>\n            </div>\n\n            {/* Urgency Countdown Bar */}\n            <div className=\"border-warning/20 bg-warning/10 text-foreground text-warning flex items-center justify-between gap-2 rounded-lg border px-3.5 py-2 text-xs\">\n              <div className=\"flex items-center gap-2\">\n                <Clock className=\"text-warning size-4 shrink-0\" />\n                <span className=\"font-medium\">\n                  Claim your {discountPercent}% discount code before the timer expires:\n                </span>\n              </div>\n              <span className=\"bg-warning/20 text-foreground dark:text-foreground rounded px-2 py-0.5 font-mono text-xs font-bold tabular-nums\">\n                {formattedTime}\n              </span>\n            </div>\n\n            {/* Headline & Subtitle */}\n            <div className=\"space-y-2\">\n              <h2 className=\"text-foreground text-2xl font-bold tracking-tight sm:text-3xl\">{headline}</h2>\n              <p className=\"text-muted-foreground text-sm leading-relaxed\">{subtitle}</p>\n            </div>\n\n            {/* Value Bullet Points (3 items with emerald checkmarks) */}\n            <ul className=\"space-y-2.5\" role=\"list\">\n              <li className=\"text-muted-foreground flex items-center gap-2.5 text-xs sm:text-sm\">\n                <span className=\"bg-success/15 text-success flex size-4 shrink-0 items-center justify-center rounded-full\">\n                  <Check className=\"size-2.5 stroke-[3]\" />\n                </span>\n                <span>No spam ever &mdash; high-signal engineering teardowns</span>\n              </li>\n              <li className=\"text-muted-foreground flex items-center gap-2.5 text-xs sm:text-sm\">\n                <span className=\"bg-success/15 text-success flex size-4 shrink-0 items-center justify-center rounded-full\">\n                  <Check className=\"size-2.5 stroke-[3]\" />\n                </span>\n                <span>1-click unsubscribe anytime with zero friction</span>\n              </li>\n              <li className=\"text-muted-foreground flex items-center gap-2.5 text-xs sm:text-sm\">\n                <span className=\"bg-success/15 text-success flex size-4 shrink-0 items-center justify-center rounded-full\">\n                  <Check className=\"size-2.5 stroke-[3]\" />\n                </span>\n                <span>Instant coupon delivery straight to your screen &amp; inbox</span>\n              </li>\n            </ul>\n\n            {/* Email Capture Form */}\n            <form className=\"space-y-3 pt-1\" onSubmit={handleSubmit}>\n              <Input\n                value={email}\n                onChange={(e) => setEmail(e.target.value)}\n                type=\"email\"\n                placeholder=\"engineer@company.com\"\n                required\n                autoComplete=\"email\"\n                aria-label=\"Email address\"\n                className=\"border-border bg-background focus-visible:ring-primary h-11 text-sm shadow-xs focus-visible:ring-2\"\n              />\n\n              <Button\n                type=\"submit\"\n                size=\"lg\"\n                className=\"h-11 w-full justify-center gap-2 text-sm font-semibold shadow-xs\"\n              >\n                Claim My {discountPercent}% Discount\n                <ArrowRight className=\"size-4\" />\n              </Button>\n            </form>\n\n            {/* Social Proof Line */}\n            <div className=\"text-muted-foreground flex items-center justify-center gap-1.5 text-xs\">\n              <div className=\"text-warning flex items-center gap-0.5\" aria-hidden=\"true\">\n                <Star className=\"size-3.5 fill-current\" />\n                <Star className=\"size-3.5 fill-current\" />\n                <Star className=\"size-3.5 fill-current\" />\n                <Star className=\"size-3.5 fill-current\" />\n                <Star className=\"size-3.5 fill-current\" />\n              </div>\n              <span className=\"text-foreground font-medium\">{socialProofRating}</span>\n              <span>rating by {socialProofCount}</span>\n            </div>\n\n            {/* Dismiss / Decline link */}\n            <div className=\"text-center\">\n              <button\n                type=\"button\"\n                className=\"text-muted-foreground hover:text-foreground focus-visible:ring-ring min-h-6 rounded text-xs underline underline-offset-4 transition-colors focus-visible:ring-2 focus-visible:outline-hidden\"\n                onClick={handleDismiss}\n              >\n                No thanks, I prefer paying full price\n              </button>\n            </div>\n          </div>\n        ) : (\n          /* SUCCESS STATE */\n          <div className=\"relative z-10 space-y-5 text-center\">\n            <div className=\"bg-success/10 text-success mx-auto flex size-12 items-center justify-center rounded-full\">\n              <CheckCircle2 className=\"size-6\" />\n            </div>\n\n            <div className=\"space-y-1.5\">\n              <Badge variant=\"outline\" className=\"border-success/30 bg-success/10 text-success font-medium\">\n                {discountPercent}% Discount Unlocked\n              </Badge>\n              <h3 className=\"text-foreground text-2xl font-bold tracking-tight sm:text-3xl\">You&rsquo;re all set!</h3>\n              <p className=\"text-muted-foreground text-xs sm:text-sm\">\n                We&rsquo;ve dispatched your code and welcome gift to{' '}\n                <span className=\"text-foreground font-medium\">{email || 'engineer@company.com'}</span>.\n              </p>\n            </div>\n\n            {/* Coupon Card Box */}\n            <div className=\"border-border bg-muted/40 relative space-y-3 rounded-xl border-2 border-dashed p-4\">\n              <span className=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n                Your Exclusive Coupon Code\n              </span>\n              <div className=\"flex items-center justify-center gap-2\">\n                <code className=\"border-border bg-background text-foreground rounded-lg border px-3 py-1.5 font-mono text-xl font-bold tracking-widest sm:text-2xl\">\n                  {discountCode}\n                </code>\n                <Button\n                  variant=\"secondary\"\n                  size=\"sm\"\n                  className=\"gap-1.5 shadow-xs\"\n                  aria-label={copied ? 'Copied code' : 'Copy discount code'}\n                  onClick={copyCoupon}\n                >\n                  {copied ? <Check className=\"text-success size-3.5\" /> : <Copy className=\"size-3.5\" />}\n                  <span>{copied ? 'Copied!' : 'Copy Code'}</span>\n                </Button>\n              </div>\n              <p className=\"text-muted-foreground text-xs\">\n                Valid for the next <span className=\"font-mono font-medium\">{formattedTime}</span> at checkout.\n              </p>\n            </div>\n\n            <div className=\"space-y-2 pt-2\">\n              <Button\n                className=\"h-11 w-full justify-center gap-2 text-sm font-semibold shadow-xs\"\n                onClick={handleDismiss}\n              >\n                Start Exploring Components\n                <ArrowRight className=\"size-4\" />\n              </Button>\n              <button\n                type=\"button\"\n                className=\"text-muted-foreground hover:text-foreground focus-visible:ring-ring min-h-6 rounded text-xs underline underline-offset-4 transition-colors focus-visible:ring-2 focus-visible:outline-hidden\"\n                onClick={handleReset}\n              >\n                Enter a different email\n              </button>\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/LeadCapturePopup.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/input.json",
    "https://uipkge.dev/r/react/badge.json"
  ],
  "description": "High-conversion exit-intent discount popup and newsletter lead generator with live ticking countdown timer, emerald value props, star rating social proof, and coupon code reveal.",
  "categories": [
    "marketing"
  ]
}