"use client" // required for: useState (form state) /** * @name CTA 04 * @description A CTA section with email signup form. * Great for newsletter signups and lead capture. * * @slots cta, cta-container, cta-content, cta-heading, cta-description, * cta-form, cta-input, cta-submit, cta-trust-text, cta-success * @variant newsletter * * @registryDependencies button input * @dependencies lucide-react */ import * as React from "react" import { Send, CheckCircle } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Button } from "@/registry/ui/button" import { Input } from "@/registry/ui/input" // ============================================================================ // TYPES // ============================================================================ interface Cta04Props { /** Main heading */ heading?: string /** Supporting description */ description?: string /** Input placeholder */ placeholder?: string /** Submit button text */ submitText?: string /** Trust text below form */ trustText?: string /** Callback when submitted */ onSubmit?: (email: string) => void /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // COMPONENT // ============================================================================ function Cta04({ heading = "Stay in the loop", description = "Get the latest updates, tips, and exclusive content delivered straight to your inbox. No spam, ever.", placeholder = "Enter your email", submitText = "Subscribe", trustText = "Join 10,000+ subscribers. Unsubscribe anytime.", onSubmit, className, idBase, }: Cta04Props) { const [email, setEmail] = React.useState("") const [isSubmitted, setIsSubmitted] = React.useState(false) const headingId = `${idBase ?? "cta-04"}-heading` const handleSubmit = (e: React.FormEvent) => { e.preventDefault() onSubmit?.(email) setIsSubmitted(true) } return (

{heading}

{description && (

{description}

)} {isSubmitted ? (

) : ( )}

) } export default Cta04 export { Cta04, type Cta04Props }