"use client" /** * @name Contact 04 * @description Contact section with live chat option and FAQ quick links. * Multiple contact channels with chat widget launcher. * * @slots contact, contact-container, contact-header, contact-heading, * contact-description, contact-content, contact-channels, * contact-channel, contact-channel-icon, contact-channel-info, * contact-channel-title, contact-channel-description, contact-channel-action, * contact-divider, contact-faq-section, contact-faq-heading, * contact-faq-list, contact-faq-item, contact-faq-link * @variant multichannel * * @registryDependencies button card * @dependencies lucide-react */ import * as React from "react" import { Card, CardContent } from "@/registry/ui/card" import { Button } from "@/registry/ui/button" import { MessageCircle, Mail, Phone, Calendar, ArrowRight, HelpCircle, } from "lucide-react" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface ContactChannel { id: string icon: React.ElementType title: string description: string action: string highlight?: boolean } interface FAQItem { id: string question: string href: string } interface Contact04Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Contact channels */ channels?: ContactChannel[] /** FAQ items */ faqItems?: FAQItem[] /** Callback for chat */ onStartChat?: () => void /** Additional CSS classes */ className?: string /** Base ID for multi-instance safety */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultChannels: ContactChannel[] = [ { id: "chat", icon: MessageCircle, title: "Live Chat", description: "Chat with our support team in real-time. Average response time: 2 minutes.", action: "Start Chat", highlight: true, }, { id: "email", icon: Mail, title: "Email Support", description: "Send us an email and we'll respond within 24 hours.", action: "Send Email", }, { id: "phone", icon: Phone, title: "Phone Support", description: "Call us Monday to Friday, 9am - 6pm EST.", action: "Call Now", }, { id: "schedule", icon: Calendar, title: "Schedule a Call", description: "Book a time that works for you with our team.", action: "Schedule", }, ] const defaultFAQItems: FAQItem[] = [ { id: "faq-1", question: "How do I reset my password?", href: "#" }, { id: "faq-2", question: "What payment methods do you accept?", href: "#" }, { id: "faq-3", question: "How can I cancel my subscription?", href: "#" }, { id: "faq-4", question: "Where can I find my invoices?", href: "#" }, ] // ============================================================================ // COMPONENT // ============================================================================ function Contact04({ heading = "How can we help?", description = "Choose the best way to reach us. We're here to help you succeed.", channels = defaultChannels, faqItems = defaultFAQItems, onStartChat, className, idBase = "contact-04", }: Contact04Props) { const headingId = `${idBase}-heading` return (

{/* Header */}

{heading}

{description && (

{description}

)}

{/* Contact Channels */}

{channels.map((channel) => { const Icon = channel.icon return ( {channel.highlight && (

Fastest

)}

{channel.title}

{channel.description}

) })}

{/* Divider */}

or check our FAQ

{/* FAQ Section */}

{faqItems.map((item) => ( {item.question} ))}

) } export default Contact04 export { Contact04, type Contact04Props }

{heading}

{channel.title}

Frequently Asked Questions