import { useState, useEffect, useRef, useCallback } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Link } from "react-router-dom"; import { Send, ArrowUpRight, Volume2, Mic, Bot, User, Headphones, CircleUser, CheckCircle2, RotateCcw, Thermometer, Wrench, Zap, Home, TreePine, SprayCan, AlertTriangle, Bug, Palette, Hammer, Settings, Lock, Trees, Snowflake, DoorOpen, MoreHorizontal } from "lucide-react"; import type { LucideIcon } from "lucide-react"; import SEOHead from "@/components/SEOHead"; import DemoHero from "@/components/demo/DemoHero"; import MissedCallDemo from "@/components/demo/MissedCallDemo"; import DashboardMockup from "@/components/demo/DashboardMockup"; import DemoBenefits from "@/components/demo/DemoBenefits"; import VoiceDemonstration from "@/components/VoiceDemonstration"; /* ─── TYPES ─── */ interface ChatMessage { role: "bot" | "user"; text: string; } /* ─── VOICE ID MAPPING ─── */ const voiceIdMap: Record = { rachel: "EXAVITQu4vr4xnSDxMaL", // Sarah adam: "onwK4e9ZLuTAKqWW03F9", // Daniel josh: "TX3LPaxmHKxFdv7VOQHJ", // Liam bella: "XrExE9yKIg1WjnnlVkGX", // Matilda elli: "pFZP5JQG7iQjIQuC4Bku", // Lily }; /* ─── DATA ─── */ const industries: { id: string; Icon: LucideIcon; label: string }[] = [ { id: "hvac", Icon: Thermometer, label: "HVAC & AC" }, { id: "plumbing", Icon: Wrench, label: "Plumbing" }, { id: "electrical", Icon: Zap, label: "Electrical" }, { id: "roofing", Icon: Home, label: "Roofing" }, { id: "landscaping", Icon: TreePine, label: "Landscaping" }, { id: "cleaning", Icon: SprayCan, label: "Cleaning" }, { id: "pest_control", Icon: Bug, label: "Pest Control" }, { id: "painting", Icon: Palette, label: "Painting" }, { id: "carpentry", Icon: Hammer, label: "Carpentry" }, { id: "appliance_repair", Icon: Settings, label: "Appliance Repair" }, { id: "locksmith", Icon: Lock, label: "Locksmith" }, { id: "tree_service", Icon: Trees, label: "Tree Service" }, { id: "snow_removal", Icon: Snowflake, label: "Snow Removal" }, { id: "garage_doors", Icon: DoorOpen, label: "Garage Doors" }, { id: "handyman", Icon: Hammer, label: "Handyman" }, { id: "other", Icon: MoreHorizontal, label: "Other" }, ]; const voices: { id: string; Icon: LucideIcon; name: string; desc: string }[] = [ { id: "rachel", Icon: CircleUser, name: "Rachel", desc: "Calm, professional" }, { id: "adam", Icon: User, name: "Adam", desc: "Deep, authoritative" }, { id: "josh", Icon: Headphones, name: "Josh", desc: "Friendly, young" }, { id: "bella", Icon: CircleUser, name: "Bella", desc: "Warm, soft" }, { id: "elli", Icon: Mic, name: "Elli", desc: "Energetic, bright" }, ]; const conversations: Record = { hvac: [ { role: "bot", text: "Hi, thanks for calling Comfort Zone HVAC! This is Vox, your AI assistant. How can I help you today?" }, { role: "user", text: "Hi, I need my AC fixed ASAP — it stopped working this morning." }, { role: "bot", text: "I understand, I can help! We have a technician available today at 2PM or 4PM in your area. Which works better for you?" }, { role: "user", text: "2PM works great." }, { role: "bot", text: "Perfect! I've booked your appointment for today at 2PM. You'll receive a confirmation text shortly. Is there anything else?" }, { role: "user", text: "No, that's all. Thanks!" }, { role: "bot", text: "Great, have a wonderful day! We'll see you at 2PM. Goodbye!" }, ], plumbing: [ { role: "bot", text: "Hello! Thanks for calling Quick Fix Plumbing. I'm Vox, your AI assistant. What can I do for you?" }, { role: "user", text: "I have a burst pipe in my kitchen — water everywhere!" }, { role: "bot", text: "I'm sorry to hear that! Let me dispatch an emergency plumber right away. Can you confirm your address?" }, { role: "user", text: "123 Oak Street, Houston." }, { role: "bot", text: "Got it! A plumber is on the way and should arrive within 45 minutes. Please shut off the main water valve if you can." }, { role: "user", text: "Thank you so much!" }, { role: "bot", text: "You're welcome! Stay safe, help is on the way. Goodbye!" }, ], electrical: [ { role: "bot", text: "Hi, you've reached Spark Electric! I'm Vox, your AI assistant. How can I assist you?" }, { role: "user", text: "I need a panel upgrade for my house." }, { role: "bot", text: "Sure! I can schedule an estimate visit. Is your home single or multi-story? And what's the current panel amperage?" }, { role: "user", text: "Single story, 100 amp panel." }, { role: "bot", text: "Perfect. I have an opening this Thursday at 10AM. Would that work?" }, { role: "user", text: "Yes, that works." }, { role: "bot", text: "You're all set for Thursday at 10AM! Confirmation text on the way. Have a great day!" }, ], roofing: [ { role: "bot", text: "Thanks for calling Lone Star Roofing! I'm Vox. How can I help you today?" }, { role: "user", text: "We had a storm last night and I think my roof is damaged." }, { role: "bot", text: "I'm sorry about that. I can schedule a free inspection. Are you available tomorrow morning?" }, { role: "user", text: "Yes, anytime before noon." }, { role: "bot", text: "I've booked your free roof inspection for tomorrow at 9AM. Our inspector will document everything for your insurance claim." }, { role: "user", text: "Perfect, thanks." }, { role: "bot", text: "You're welcome! We'll take care of it. Have a good evening!" }, ], landscaping: [ { role: "bot", text: "Hello! Green Valley Landscaping here. I'm Vox. What can I do for you?" }, { role: "user", text: "I need a quote for weekly lawn maintenance." }, { role: "bot", text: "Happy to help! Can you tell me the lot size and your address?" }, { role: "user", text: "About half an acre, 456 Elm Drive, Austin." }, { role: "bot", text: "Our weekly service starts at $65/week. I can schedule a site visit this Friday at 3PM for an exact quote. Would that work?" }, { role: "user", text: "Yes, let's do it." }, { role: "bot", text: "Booked! Confirmation text on its way. See you Friday!" }, ], cleaning: [ { role: "bot", text: "Hi! Thanks for calling Shine Bright Cleaning. I'm Vox. How can I help?" }, { role: "user", text: "I need a deep cleaning for my apartment — moving out next week." }, { role: "bot", text: "We specialize in move-out cleanings! How many bedrooms and bathrooms?" }, { role: "user", text: "2 bedrooms, 1 bathroom." }, { role: "bot", text: "For a 2bed/1bath move-out deep clean, the price is $220. I can schedule Monday at 9AM. Does that work?" }, { role: "user", text: "Monday works. Let's do it." }, { role: "bot", text: "You're booked for Monday at 9AM! Checklist and confirmation coming via text. Have a great day!" }, ], pest_control: [ { role: "bot", text: "Hello! Thanks for calling Safe Guard Pest Control. I'm Vox. What's bothering you today?" }, { role: "user", text: "I've been seeing roaches in my kitchen lately." }, { role: "bot", text: "I'm sorry to hear that. We can help! Are you a renter or homeowner?" }, { role: "user", text: "I'm renting." }, { role: "bot", text: "We offer a comprehensive treatment. We can inspect tomorrow at 10AM or Thursday at 2PM. Which works?" }, { role: "user", text: "Tomorrow at 10AM is good." }, { role: "bot", text: "Perfect! Inspection scheduled for tomorrow at 10AM. Confirmation text coming shortly. We'll get this resolved quickly!" }, ], painting: [ { role: "bot", text: "Hi! Welcome to Premier Painters. I'm Vox. How can I help with your painting needs?" }, { role: "user", text: "I want to repaint my living room and bedroom." }, { role: "bot", text: "Great! How many rooms total, and do you have a color in mind?" }, { role: "user", text: "Just those 2 rooms, and I'm thinking a light gray." }, { role: "bot", text: "Light gray is beautiful. I can schedule a free quote visit this week. Are you available Saturday at 2PM?" }, { role: "user", text: "Yes, Saturday at 2PM works perfectly." }, { role: "bot", text: "Excellent! Appointment confirmed for Saturday at 2PM. Our painter will bring color samples. See you then!" }, ], carpentry: [ { role: "bot", text: "Hello! Thanks for calling Master Carpentry. I'm Vox. What project are we discussing?" }, { role: "user", text: "I need new shelving units built in my garage." }, { role: "bot", text: "Shelving is one of our specialties! How much wall space are we talking about?" }, { role: "user", text: "About 12 feet of wall space." }, { role: "bot", text: "Perfect. I can schedule a free consultation to discuss materials and design. Tuesday at 4PM?" }, { role: "user", text: "Tuesday works for me." }, { role: "bot", text: "Great! Consultation booked for Tuesday at 4PM. Bring any photos or ideas you have. See you soon!" }, ], appliance_repair: [ { role: "bot", text: "Hi! Thanks for calling Quick Fix Appliances. I'm Vox. What appliance needs repair?" }, { role: "user", text: "My washing machine won't drain properly." }, { role: "bot", text: "That's a common issue we fix regularly. Is it a front-loader or top-loader?" }, { role: "user", text: "It's a front-loader." }, { role: "bot", text: "We can send a technician tomorrow between 10AM and 2PM, or Thursday morning. Which works?" }, { role: "user", text: "Tomorrow afternoon would be great." }, { role: "bot", text: "You're all set for tomorrow between 10AM and 2PM. We'll text you 30 minutes before arrival. Thanks!" }, ], locksmith: [ { role: "bot", text: "Hello! You've reached Premier Locksmith Services. I'm Vox. How can I help?" }, { role: "user", text: "I lost my house keys and I'm locked out." }, { role: "bot", text: "I can help with that immediately. Are you currently at the property?" }, { role: "user", text: "Yes, I'm at the front door." }, { role: "bot", text: "Great! Our technician is 15 minutes away. They'll have you inside within the hour. Confirmation text coming now." }, { role: "user", text: "Thank you, I appreciate the fast service." }, { role: "bot", text: "You're welcome! We specialize in quick responses. See you shortly!" }, ], tree_service: [ { role: "bot", text: "Hi! Thanks for calling Green Tree Services. I'm Vox. What can we help you with?" }, { role: "user", text: "I have a large oak tree that needs trimming." }, { role: "bot", text: "Tree trimming is perfect for late fall! Is the tree healthy or showing signs of disease?" }, { role: "user", text: "It looks healthy, just overgrown." }, { role: "bot", text: "Excellent! I can schedule a free inspection this Friday at 10AM. Does that work for you?" }, { role: "user", text: "Friday morning is perfect." }, { role: "bot", text: "Inspection booked for Friday at 10AM! Our arborist will give you a detailed estimate. See you then!" }, ], snow_removal: [ { role: "bot", text: "Hello! Welcome to Snow Clear Services. I'm Vox. Are you ready for winter?" }, { role: "user", text: "Yes! I need snow removal for my driveway and sidewalk." }, { role: "bot", text: "Perfect! Do you want per-service billing or a seasonal contract?" }, { role: "user", text: "Seasonal contract would be better." }, { role: "bot", text: "Great choice! Our seasonal plans start at $300. I can send you details and schedule a walkthrough tomorrow." }, { role: "user", text: "That sounds good." }, { role: "bot", text: "Excellent! Contract details and walkthrough scheduled. You're all set for winter now!" }, ], garage_doors: [ { role: "bot", text: "Hi! Thanks for calling Garage Door Pros. I'm Vox. What's the issue?" }, { role: "user", text: "My garage door opener is making a strange noise." }, { role: "bot", text: "That could be a motor or spring issue. Is the door still opening and closing?" }, { role: "user", text: "Yes, it works fine, just sounds weird." }, { role: "bot", text: "Good. We can diagnose it quickly. We have same-day appointments available at 2PM or 5PM today." }, { role: "user", text: "2PM works for me." }, { role: "bot", text: "Appointment confirmed for 2PM today! Technician will bring common parts. See you soon!" }, ], handyman: [ { role: "bot", text: "Hello! Welcome to All-Pro Handyman Services. I'm Vox. What needs fixing?" }, { role: "user", text: "I have several small repairs around my house." }, { role: "bot", text: "That's what we do best! How many projects are we talking about?" }, { role: "user", text: "Maybe 5 or 6 different things." }, { role: "bot", text: "No problem! We offer multi-task scheduling. I can book a consultation this Saturday at 10AM to see everything." }, { role: "user", text: "Saturday works great." }, { role: "bot", text: "Perfect! Consultation scheduled for Saturday at 10AM. We'll give you a full estimate. See you then!" }, ], other: [ { role: "bot", text: "Hi there! Thanks for calling us. I'm Vox, your AI assistant. How can we help you today?" }, { role: "user", text: "I'm calling about a service inquiry." }, { role: "bot", text: "Absolutely, I'm here to help! Can you tell me a bit more about what you need?" }, { role: "user", text: "I need more information about your services and pricing." }, { role: "bot", text: "I'd be happy to help! Let me get some details from you and connect you with our team." }, { role: "user", text: "That sounds great." }, { role: "bot", text: "Perfect! A specialist will reach out within 2 hours with all the details. Thank you for contacting us!" }, ], }; /* ─── TTS FUNCTION ─── */ async function speakText(text: string, voiceId: string): Promise { try { const response = await fetch(`/api/tts`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ text, voiceId }), }); if (!response.ok) { console.error("TTS failed:", response.status); return null; } const audioBlob = await response.blob(); const audioUrl = URL.createObjectURL(audioBlob); const audio = new Audio(audioUrl); await audio.play(); return audio; } catch (err) { console.error("TTS error:", err); return null; } } /* ─── AUDIO VISUALIZER BARS ─── */ const VisualizerBars = ({ active, color = "bg-foreground/20" }: { active: boolean; color?: string }) => (
{Array.from({ length: 32 }).map((_, i) => ( ))}
); /* ─── MAIN DEMO PAGE ─── */ const Demo = () => { const [step, setStep] = useState(1); const [selectedIndustry, setSelectedIndustry] = useState(null); const [selectedVoice, setSelectedVoice] = useState("rachel"); const [userName, setUserName] = useState(""); // Step 2 state const [messages, setMessages] = useState([]); const [timer, setTimer] = useState(0); const [isTyping, setIsTyping] = useState(false); const [agentSpeaking, setAgentSpeaking] = useState(false); const [convoIndex, setConvoIndex] = useState(0); const [textInput, setTextInput] = useState(""); const [callActive, setCallActive] = useState(false); const [liveTranscript, setLiveTranscript] = useState(""); const [ttsError, setTtsError] = useState(false); const chatRef = useRef(null); const timerRef = useRef | null>(null); const currentAudioRef = useRef(null); const getElevenLabsVoiceId = useCallback(() => { return voiceIdMap[selectedVoice] || voiceIdMap.rachel; }, [selectedVoice]); const startCall = useCallback(() => { if (!selectedIndustry) return; setStep(2); setMessages([]); setConvoIndex(0); setTimer(0); setCallActive(true); setTtsError(false); }, [selectedIndustry]); // Timer useEffect(() => { if (callActive) { timerRef.current = setInterval(() => setTimer((t) => t + 1), 1000); } return () => { if (timerRef.current) clearInterval(timerRef.current); }; }, [callActive]); // Auto-play conversation with real TTS useEffect(() => { if (!callActive || !selectedIndustry) return; const convo = conversations[selectedIndustry]; if (!convo || convoIndex >= convo.length) { setTimeout(() => { setCallActive(false); if (timerRef.current) clearInterval(timerRef.current); setStep(3); }, 2000); return; } const msg = convo[convoIndex]; const delay = convoIndex === 0 ? 1500 : 2200 + Math.random() * 1000; const timeout = setTimeout(async () => { if (msg.role === "bot") { // Show typing setIsTyping(true); setLiveTranscript(msg.text); // Start TTS fetch while "typing" const voiceId = getElevenLabsVoiceId(); setTimeout(async () => { setIsTyping(false); setAgentSpeaking(true); setMessages((prev) => [...prev, msg]); // Play real TTS audio const audio = await speakText(msg.text, voiceId); if (audio) { currentAudioRef.current = audio; audio.onended = () => { setAgentSpeaking(false); setLiveTranscript(""); currentAudioRef.current = null; setConvoIndex((i) => i + 1); }; audio.onerror = () => { setAgentSpeaking(false); setLiveTranscript(""); setTtsError(true); currentAudioRef.current = null; // Fallback: continue after timeout setTimeout(() => setConvoIndex((i) => i + 1), 1500); }; } else { // TTS failed — fallback to timed simulation setTtsError(true); setTimeout(() => { setAgentSpeaking(false); setLiveTranscript(""); setConvoIndex((i) => i + 1); }, 2000); } }, 1200); } else { setLiveTranscript(msg.text); setMessages((prev) => [...prev, msg]); setTimeout(() => { setLiveTranscript(""); setConvoIndex((i) => i + 1); }, 1200); } }, delay); return () => clearTimeout(timeout); }, [callActive, convoIndex, selectedIndustry, getElevenLabsVoiceId]); // Scroll chat useEffect(() => { if (chatRef.current) chatRef.current.scrollTop = chatRef.current.scrollHeight; }, [messages, isTyping]); // Cleanup audio on unmount useEffect(() => { return () => { if (currentAudioRef.current) { currentAudioRef.current.pause(); currentAudioRef.current = null; } }; }, []); const formatTime = (s: number) => `${String(Math.floor(s / 60)).padStart(2, "0")}:${String(s % 60).padStart(2, "0")}`; const handleSendText = () => { if (!textInput.trim() || !callActive) return; setMessages((prev) => [...prev, { role: "user", text: textInput.trim() }]); setTextInput(""); }; const sentiment = messages.length > 4 ? "Positive" : messages.length > 2 ? "Neutral" : "—"; const leadScore = messages.length > 4 ? "Hot" : messages.length > 2 ? "Warm" : "—"; const intent = messages.length > 2 ? "Booking" : "—"; const resetAll = () => { if (currentAudioRef.current) { currentAudioRef.current.pause(); currentAudioRef.current = null; } setStep(1); setMessages([]); setTimer(0); setSelectedIndustry(null); setUserName(""); setConvoIndex(0); setCallActive(false); setLiveTranscript(""); setAgentSpeaking(false); setIsTyping(false); setTtsError(false); }; return (
{/* Ambient radial glow */}
{/* ─── NAV ─── */} {/* ─── HERO SECTION ─── */}
{/* ─── VOICE AI DEMO ─── */}
{/* ═══════════════ STEP 1: CONFIGURE ═══════════════ */} {step === 1 && ( {/* Eyebrow */}

Voice AI Demo

Hear your{" "} AI Agent {" "} speak.

Ultra-realistic voice powered by ElevenLabs. Pick a voice, choose your industry, and listen to your agent in action.

{/* ── Voice Picker ── */}

Select Agent Voice — ElevenLabs

{voices.map((v) => ( ))}
{/* ── Industry Picker ── */}

Business Type

{industries.map((ind) => ( ))}
{/* ── Name Input ── */}

Your Name (you'll play the customer)

setUserName(e.target.value)} className="w-full bg-card border border-border text-foreground rounded-xl px-4 py-3 text-sm outline-none focus:border-foreground/20 transition-colors mb-6 placeholder:text-muted-foreground font-mono" /> {/* ── Start Button ── */} )} {/* ═══════════════ STEP 2: LIVE CALL ═══════════════ */} {step === 2 && ( {/* Call Bar */}
Live Call
{formatTime(timer)}

Vox Agent

ElevenLabs

{/* ── Orbs Area ── */}
{/* Agent Orb */}
Vox Agent {agentSpeaking ? "Speaking..." : isTyping ? "Thinking..." : "Listening"}
VS {/* User Orb */}
You {userName || "Customer"}
{/* ── Audio Visualizer ── */}
{agentSpeaking ? "ELEVENLABS" : "IDLE"}
{/* ── Live Transcript ── */}

{liveTranscript ? liveTranscript : "Live transcript will appear here..."}

{/* ── TTS Error Banner ── */} {ttsError && (
TTS unavailable — falling back to text-only mode
)} {/* ── Chat ── */}
{messages.map((msg, i) => (
{msg.role === "bot" ? : (userName?.[0]?.toUpperCase() || "U")}
{msg.text}
))} {isTyping && (
{[0, 1, 2].map((d) => ( ))}
)}
{/* ── Text Input ── */}
setTextInput(e.target.value)} onKeyDown={(e) => e.key === "Enter" && handleSendText()} disabled={!callActive} className="flex-1 bg-background/60 border border-border text-foreground rounded-lg px-3.5 py-2 text-sm outline-none focus:border-foreground/15 transition-colors placeholder:text-muted-foreground font-mono disabled:opacity-30 disabled:cursor-not-allowed" />
{/* ── Metrics ── */}
{[ { label: "Sentiment", value: sentiment }, { label: "Lead Score", value: leadScore }, { label: "Intent", value: intent }, { label: "TTS", value: ttsError ? "Fallback" : "ElevenLabs" }, ].map((m) => (

{m.label}

{m.value}

))}
{/* Hint */}

🔊 Agent is speaking with ElevenLabs voice — listen!

)} {/* ═══════════════ STEP 3: COMPLETED ═══════════════ */} {step === 3 && (

Call Completed.

The agent conducted the entire conversation with realistic ElevenLabs voice — qualified the lead, built rapport, and booked the service with zero human involvement.

{/* Summary Card */}

Call Summary

{[ { k: "Lead", v: userName || "Customer" }, { k: "Industry", v: industries.find((i) => i.id === selectedIndustry)?.label || "—" }, { k: "Messages", v: String(messages.length) }, { k: "Duration", v: formatTime(timer) }, { k: "Voice", v: voices.find(v => v.id === selectedVoice)?.name || "—" }, { k: "TTS", v: "ElevenLabs" }, { k: "Result", v: "Demo Completed", highlight: true }, ].map((r) => (
{r.k} {r.v}
))}
{/* CTAs */} )}
{/* ─── ADDITIONAL SECTIONS ─── */}
); }; export default Demo;