import React, { useState, useEffect, useRef } from 'react'; import { Sparkles, Brain, Cpu, TrendingUp, ShieldCheck, Users, Phone, Mail, MessageSquare, Mic, MicOff, Volume2, VolumeX, Play, Pause, Plus, Send, CheckCircle2, ArrowRight, ChevronRight, Layers, Award, BarChart3, Globe, Briefcase, FileText, Code, Copy, Check, RefreshCw, Video, Headphones, Zap, Target, Lock, ExternalLink, X, Menu, Sliders, DollarSign, HeartHandshake, Activity, Bot, Building2, Calendar } from 'lucide-react'; // ========================================== // GEMINI API HELPER WITH EXPONENTIAL BACKOFF // ========================================== const apiKey = ""; // Provided by runtime environment async function callGeminiAI(prompt, systemInstruction, jsonSchema = null) { const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-3-flash-preview:generateContent?key=${apiKey}`; const payload = { contents: [{ parts: [{ text: prompt }] }], systemInstruction: { parts: [{ text: systemInstruction }] } }; if (jsonSchema) { payload.generationConfig = { responseMimeType: "application/json", responseSchema: jsonSchema }; } const delays = [1000, 2000, 4000]; for (let attempt = 0; attempt <= delays.length; attempt++) { try { const response = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }); if (!response.ok) { throw new Error(`HTTP status ${response.status}`); } const data = await response.json(); const text = data?.candidates?.[0]?.content?.parts?.[0]?.text; if (!text) throw new Error("Empty response from AI"); return jsonSchema ? JSON.parse(text) : text; } catch (err) { if (attempt === delays.length) { throw err; } await new Promise(res => setTimeout(res, delays[attempt])); } } } // ========================================== // INITIAL DATA & INDUSTRY SCENARIOS // ========================================== const INDUSTRY_SCENARIOS = [ { id: 'hightech', name: 'Enterprise SaaS & Cloud Tech', icon: Cpu, customerTier: 'Enterprise Platinum ($180K ARR)', inquiry: '"Our global marketing team is hitting API rate limits during our Q4 product launch campaign, and two regional webhooks failed to sync."', agentforceAction: [ 'Queries Salesforce Data Cloud &实时 telemetry logs in 180ms', 'Executes Flow to temporarily burst API quota by +25% for 48 hours', 'Re-queues failed webhook payloads automatically & verifies 200 OK status' ], claudeReasoning: [ 'Detects high-stakes launch urgency and apologizes with executive empathy', 'Synthesizes root cause clearly without technical jargon overload', 'Identifies pattern: customer usage grew 42% YoY—ideal fit for Dedicated Throughput Add-On' ], outcomeResponse: `"I've immediately lifted your API rate ceiling by 25% for the next 48 hours so your Q4 launch runs uninterrupted, and re-synced the 2 failed regional webhooks (both confirmed active). Because your campaign volume has grown 42% this quarter, I can also lock in our Dedicated Event Stream Tier at a 15% loyalty discount—preventing future throttling and adding priority SLA coverage. Would you like me to activate a complimentary 14-day trial of that tier now?"`, metrics: { resolutionTime: '14 Seconds', csatScore: '99.4%', upsellValue: '+$28,500 ARR', retentionImpact: '+34% Renewal Probability' } }, { id: 'fieldservice', name: 'Industrial & Agentic Field Service', icon: Sliders, customerTier: 'Commercial Fleet Partner (42 Sites)', inquiry: '"HVAC Chiller Unit #4 at our Phoenix distribution hub is throwing Fault Code E-409 and warehouse temperatures are rising."', agentforceAction: [ 'Pulls IoT Digital Twin diagnostics via Salesforce Field Service', 'Identifies compressor valve actuator wear; checks local van inventory', 'Reschedules nearest certified technician (ETA 45 mins) via Autonomous Dispatch' ], claudeReasoning: [ 'Cross-references 3-year maintenance history across all 42 client sites', 'Finds 4 other units in the Southwest region running the same legacy valve series', 'Crafts a proactive predictive-maintenance bundle proposal to prevent summer downtime' ], outcomeResponse: `"I've diagnosed Fault Code E-409 on Phoenix Chiller #4 as a compressor valve actuator issue and dispatched Senior Tech Marcus V. with the exact replacement part in stock—he arrives in 45 minutes. While reviewing your fleet telemetry, I noticed 4 sister units in Tucson and Las Vegas share the same valve batch. We can upgrade all 4 during routine visits next week under our Predictive Shield Plan, saving you $14,200 in emergency dispatch fees. Shall I reserve those parts for your fleet?"`, metrics: { resolutionTime: '22 Seconds', csatScore: '98.8%', upsellValue: '+$46,000 Service Contract', retentionImpact: 'Zero Unplanned Downtime' } }, { id: 'financial', name: 'Wealth & Commercial Banking', icon: DollarSign, customerTier: 'Private Commercial Client', inquiry: '"We need to wire €240,000 to a new German supplier today, but our international wire limit is flagging a hold in the portal."', agentforceAction: [ 'Verifies biometric KYC token & Einstein Trust Layer compliance rules', 'Runs instant OFAC/sanctions check on the German IBAN recipient', 'Prepares temporary limit elevation approval workflow in Financial Services Cloud' ], claudeReasoning: [ 'Recognizes client has executed 6 European supplier wires in the past 60 days paying spot FX fees', 'Calculates that client lost $4,100 in FX spread inefficiencies', 'Positions a zero-fee Multi-Currency Treasury Account + FX Forward Lock during resolution' ], outcomeResponse: `"Your KYC and recipient compliance checks have cleared, and I have raised your daily international wire limit so your €240,000 transfer to Munich is now processing for same-day settlement. I also noticed this is your sixth Euro transfer in two months—by activating a Cloud Care Commercial Euro Treasury sub-account today, we can waive today's $85 wire fee and save your firm roughly $18,000 annually on FX spreads. Would you like me to apply that fee waiver and open the Euro sub-account?"`, metrics: { resolutionTime: '19 Seconds', csatScore: '99.7%', upsellValue: '+$1.2M Deposit Expansion', retentionImpact: 'Multi-Product Lock-In' } } ]; const INITIAL_VIDEOS = [ { id: 'vid-1', title: 'Transforming Support Cost Centers into Revenue Engines with Agentforce & Claude', duration: '04:18', category: 'Service-to-Sales Architecture', views: '1,840 Executive Views', description: 'See how Cloud Care Consulting blends Salesforce Agentforce autonomous actions with AI Force for Claude consultative reasoning to resolve complex issues while unlocking 3.2x higher cross-sell conversion.', chapters: [ { time: '00:00', label: 'The Death of Traditional Call Center Deflection' }, { time: '01:12', label: 'Architecture: Data Cloud + Agentforce + Claude 3.7/4' }, { time: '02:35', label: 'Live Demo: Real-Time Empathy & Contextual Upsell' }, { time: '03:40', label: 'Measuring CFO-Grade EBITDA & NRR Lift' } ], transcriptSnippet: 'When a customer reaches out with a problem, you have their undivided attention. Traditional bots try to deflect them as cheaply as possible. Cloud Care Consulting flips the paradigm: we use Agentforce to solve the problem in seconds, and AI Force for Claude to turn that moment of relief into a high-trust consultative sales conversation...', customUrl: '' }, { id: 'vid-2', title: 'Executive Advisory: Navigating the C-Suite AI Roadmap in 90 Days', duration: '05:45', category: 'C-Suite Strategy', views: '2,410 Executive Views', description: 'An inside look at our Executive Advisory Engagements for CEOs, CIOs, and COOs—moving from board-level AI mandates to governed, production-grade digital labor in under 90 days.', chapters: [ { time: '00:00', label: 'Why 70% of Enterprise AI Pilots Stall in Sandbox' }, { time: '01:30', label: 'The Einstein Trust Layer & Zero-Data-Retention Guardrails' }, { time: '03:15', label: 'Aligning Digital Labor KPIs with Board Revenue Goals' }, { time: '04:50', label: 'Our 90-Day Concept-to-Cash Blueprint' } ], transcriptSnippet: 'Boards are asking every CEO and CIO the same question: What is our agentic AI strategy? In our Executive Advisory engagements, we sit side-by-side with your leadership team to architect governance, select high-ROI service-to-sales workflows, and deploy measurable digital labor without risking brand trust...', customUrl: '' }, { id: 'vid-3', title: 'Agentic Field Service & Omnichannel Voice/Chat/Email AI in Action', duration: '03:52', category: 'Omnichannel Demo', views: '1,590 Executive Views', description: 'Watch a unified autonomous agent handle an inbound voice call, dispatch a field technician, send an proactive email brief, and close a preventative maintenance contract upgrade.', chapters: [ { time: '00:00', label: 'Omnichannel Continuity: Voice, Chat, and Email' }, { time: '01:05', label: 'IoT Telemetry & Autonomous Field Dispatch' }, { time: '02:20', label: 'Claude-Powered Fleet Analysis & Contract Expansion' }, { time: '03:15', label: 'Live CRM Telemetry & Executive Dashboard' } ], transcriptSnippet: 'Customers do not think in channels—they might email you in the morning, reply via chat at noon, and call from their car at 4 PM. Here is how our unified Agentforce + Claude fabric maintains complete memory and sales context across every single touchpoint...', customUrl: '' } ]; const SAMPLE_INBOUND_EMAILS = [ { id: 'email-1', senderName: 'Victoria Sterling, VP of Operations', senderEmail: 'v.sterling@apexlogistics-global.com', subject: 'Urgent: Seasonal license seats & SLA coverage for Q4 peak', body: `Hi Support Team,\n\nWe are onboarding 85 seasonal dispatch coordinators next Monday for our holiday freight surge, but our current Salesforce portal only shows 12 available user seats. Also, we had a 2-hour delay on a ticket last weekend and cannot afford any downtime in November. Can someone help us add temporary seats quickly?\n\nBest,\nVictoria Sterling\nVP of Operations, Apex Logistics` }, { id: 'email-2', senderName: 'Marcus Vance, Chief Information Officer', senderEmail: 'mvance@horizonmeddevices.io', subject: 'Question on API security compliance & automating our field warranty claims', body: `Hello Cloud Care team,\n\nOur board is reviewing our 2027 digital transformation budget. Right now, our 140 field engineers spend 90 minutes a day manually logging medical device warranty RMA claims, and our call center misses cross-selling extended calibration plans. How quickly could we pilot Agentforce and Claude with strict HIPAA/zero-data-retention security?\n\nRegards,\nMarcus Vance, CIO` } ]; // ========================================== // INTERACTIVE NEURAL ENGINE GRAPHIC COMPONENT // ========================================== const InteractiveNeuralGraphic = ({ onOpenBot }) => { const [activeNode, setActiveNode] = useState('claude'); const [pulseStep, setPulseStep] = useState(0); useEffect(() => { const timer = setInterval(() => { setPulseStep((prev) => (prev + 1) % 4); }, 2800); return () => clearInterval(timer); }, []); const nodeDetails = { ingest: { title: '1. Omnichannel Customer Signal Ingestion', subtitle: 'Voice, Live Chat, Email, SMS, IoT & Field Telemetry', description: 'Captures customer intent, sentiment, and real-time frustration cues across every channel instantly—zero hold times, zero IVR trees.', metric: '< 150ms Signal Latency', color: 'from-cyan-400 to-blue-500' }, agentforce: { title: '2. Salesforce Agentforce Execution Fabric', subtitle: 'Service Cloud • Data Cloud • Field Service • Apex/Flows', description: 'Autonomously executes multi-step enterprise workflows: checks entitlements, processes RMAs, schedules technicians, and updates CRM records.', metric: '65% Autonomous Resolution', color: 'from-blue-500 to-indigo-500' }, claude: { title: '3. AI Force for Claude Reasoning Core', subtitle: 'Anthropic Claude Enterprise Intelligence + Einstein Trust Layer', description: 'Brings human-grade empathy, complex policy synthesis, and consultative sales reasoning—identifying the exact moment to offer a high-value upgrade.', metric: '3.2x Consultative Upsell Rate', color: 'from-indigo-500 to-purple-500' }, revenue: { title: '4. Revenue Lift & Brand Loyalty Engine', subtitle: 'Automated Cross-Sell, Renewal Expansion & 99%+ CSAT', description: 'Turns every support ticket into a relationship-building revenue event, increasing Net Revenue Retention (NRR) and lifetime brand advocacy.', metric: '+28% Net Retention Lift', color: 'from-emerald-400 to-cyan-500' } }; const currentInfo = nodeDetails[activeNode]; return (
{/* Ambient Background Glows */}
{/* Top Header Bar */}
Live Architecture: Service-to-Sales Neural Engine
Click any node to inspect AI layer
{/* Animated SVG Neural Diagram */}
{/* Subtle Grid Lines */} {/* Neural Synaptic Paths */} {/* Animated Traveling Data Packets */} {/* NODE 1: OMNICHANNEL INGEST */} setActiveNode('ingest')} className="cursor-pointer transition-transform duration-300" > OMNICHANNEL Voice • Chat • Email Customer Inquiry {/* NODE 2: SALESFORCE AGENTFORCE */} setActiveNode('agentforce')} className="cursor-pointer transition-transform duration-300" > AGENTFORCE Data Cloud & Autonomous Flow Instant Issue Resolution {/* NODE 3: AI FORCE FOR CLAUDE */} setActiveNode('claude')} className="cursor-pointer transition-transform duration-300" > AI FORCE FOR CLAUDE Empathy & Deep Reasoning Next-Best-Offer Synthesis {/* Bi-directional Synergy Badge in Center */} ⚡ TRUST LAYER {/* NODE 4: REVENUE & BRAND LOYALTY */} setActiveNode('revenue')} className="cursor-pointer transition-transform duration-300" > SALES + CARE +3.2x Conversion Brand Loyalty Revenue Realized
{/* Selected Node Inspector Panel */}

{currentInfo.title}

{currentInfo.subtitle}

{currentInfo.metric}

{currentInfo.description}

{/* Node Selector Pills */}
{[ { id: 'ingest', label: '1. Signal Ingest' }, { id: 'agentforce', label: '2. Agentforce' }, { id: 'claude', label: '3. AI Force for Claude' }, { id: 'revenue', label: '4. Sales & Loyalty' } ].map((tab) => ( ))}
); }; // ========================================== // MAIN APPLICATION COMPONENT // ========================================== export default function App() { // Navigation State const [activePage, setActivePage] = useState('home'); const [mobileMenuOpen, setMobileMenuOpen] = useState(false); // Solutions Page - Scenario Simulator State const [selectedScenarioId, setSelectedScenarioId] = useState('hightech'); const [simStep, setSimStep] = useState(3); // 1: Ingest, 2: Reasoning, 3: Complete // Executive Advisory - ROI Calculator State const [monthlyTickets, setMonthlyTickets] = useState(25000); const [avgContractValue, setAvgContractValue] = useState(1200); const [costPerTicket, setCostPerTicket] = useState(18); // Video Hub State const [videos, setVideos] = useState(INITIAL_VIDEOS); const [activeVideo, setActiveVideo] = useState(INITIAL_VIDEOS[0]); const [isPlayingSim, setIsPlayingSim] = useState(false); const [videoProgress, setVideoProgress] = useState(24); const [showAddVideoModal, setShowAddVideoModal] = useState(false); const [newVideoForm, setNewVideoForm] = useState({ title: '', category: 'Executive Briefing', description: '', customUrl: '' }); // Contact & Lead Capture State const [leadForm, setLeadForm] = useState({ firstName: '', lastName: '', title: '', company: '', email: '', phone: '', initiative: 'Agentforce & AI Force for Claude Implementation', notes: '' }); const [isGeneratingFollowUp, setIsGeneratingFollowUp] = useState(false); const [capturedLeads, setCapturedLeads] = useState([ { id: 'LEAD-901', timestamp: 'Today, 10:14 AM PST', firstName: 'Eleanor', lastName: 'Vance', title: 'Chief Customer Officer', company: 'Aether Cloud Networks', email: 'evance@aethernetworks.com', phone: '415-890-2311', initiative: 'Service-to-Sales Transformation', notes: 'Looking to integrate Agentforce with Claude to help our 120 support agents drive renewal expansions.', followUpSubject: 'Executive Briefing Follow-Up: Aether Cloud Service-to-Sales Roadmap with Agentforce & Claude', followUpBody: `Dear Eleanor,\n\nThank you for reaching out to Cloud Care Consulting. Turning Aether Cloud Networks' 120-seat support organization into a high-trust renewal and expansion engine using Salesforce Agentforce and AI Force for Claude is right in our wheelhouse.\n\nIn similar Enterprise Cloud deployments, our clients have achieved 65% autonomous tier-1 resolution while increasing service-led upsell conversions by 3.2x.\n\nI have reserved two slots this Thursday for a 30-minute Executive Architecture Briefing where we can review a tailored pilot blueprint for your team.\n\nWarm regards,\nKurt & Principal Advisory Team\nCloud Care Consulting\nPrincipal@CloudCareConsultants.com | 415-347-6288` } ]); const [activeGeneratedLead, setActiveGeneratedLead] = useState(null); const [showWebToLeadModal, setShowWebToLeadModal] = useState(false); const [copiedId, setCopiedId] = useState(null); // Omnichannel AI Bot Widget State const [botOpen, setBotOpen] = useState(false); const [botChannel, setBotChannel] = useState('chat'); // 'chat' | 'voice' | 'email' // 1) Chat Channel State const [chatMessages, setChatMessages] = useState([ { role: 'assistant', text: "Welcome to Cloud Care Consulting! I'm your Agentforce + Claude Executive Concierge. How can we help you automate Customer Care, empower Field Service, or turn every support interaction into new revenue today?", meta: 'Agentforce + Claude • Sales & Care Intent Ready' } ]); const [chatInput, setChatInput] = useState(''); const [isChatLoading, setIsChatLoading] = useState(false); const chatEndRef = useRef(null); // 2) Voice Channel State const [voiceActive, setVoiceActive] = useState(false); const [isListeningMic, setIsListeningMic] = useState(false); const [isSpeakingTTS, setIsSpeakingTTS] = useState(false); const [voiceInputTranscript, setVoiceInputTranscript] = useState( "We handle 40,000 support calls a month. How can Agentforce and Claude reduce our costs while helping us cross-sell premium service plans?" ); const [voiceAiResponse, setVoiceAiResponse] = useState( "With 40,000 monthly calls, Cloud Care Consulting can deploy Autonomous Voice & Chat Agents powered by Salesforce Agentforce and AI Force for Claude. First, we automate up to 65% of routine inquiries instantly via Data Cloud. Second, Claude analyzes caller sentiment and account history in real time—so right after resolving an issue, the agent naturally offers your premium service tier, typically generating a 3.2x lift in service-to-sales conversions. Would you like me to schedule an Executive Advisory session with Principal@CloudCareConsultants.com?" ); const [voiceTelemetry, setVoiceTelemetry] = useState({ sentiment: '96% Positive / High Executive Intent', detectedOpportunity: 'Enterprise Service-to-Sales Transformation + Advisory', estimatedAnnualImpact: '$1.42M Combined Cost Savings & Upsell Lift' }); const [isVoiceProcessing, setIsVoiceProcessing] = useState(false); // 3) Email Channel State const [emailSender, setEmailSender] = useState(SAMPLE_INBOUND_EMAILS[0].senderEmail); const [emailSubject, setEmailSubject] = useState(SAMPLE_INBOUND_EMAILS[0].subject); const [emailBody, setEmailBody] = useState(SAMPLE_INBOUND_EMAILS[0].body); const [emailAiResult, setEmailAiResult] = useState(null); const [isEmailProcessing, setIsEmailProcessing] = useState(false); // Scroll chat to bottom useEffect(() => { if (botOpen && botChannel === 'chat') { chatEndRef.current?.scrollIntoView({ behavior: 'smooth' }); } }, [chatMessages, botOpen, botChannel]); // Simulated Video Player Progress useEffect(() => { let interval; if (isPlayingSim) { interval = setInterval(() => { setVideoProgress((p) => (p >= 100 ? 0 : p + 1)); }, 400); } return () => clearInterval(interval); }, [isPlayingSim]); // Copy Helper const handleCopy = (text, id) => { navigator.clipboard.writeText(text); setCopiedId(id); setTimeout(() => setCopiedId(null), 2000); }; // Navigate Helper const navigateTo = (page) => { setActivePage(page); setMobileMenuOpen(false); window.scrollTo({ top: 0, behavior: 'smooth' }); }; // ========================================== // HANDLERS: OMNICHANNEL AI BOT (CHAT, VOICE, EMAIL) // ========================================== const handleSendChat = async (customPrompt = null) => { const messageText = customPrompt || chatInput.trim(); if (!messageText || isChatLoading) return; const userMsg = { role: 'user', text: messageText }; setChatMessages((prev) => [...prev, userMsg]); if (!customPrompt) setChatInput(''); setIsChatLoading(true); const systemInstruction = `You are the live omnichannel AI Concierge for "Cloud Care Consulting" (www.cloudcareconsultants.com), powered by Salesforce Agentforce and AI Force for Claude. Your mission: 1. Answer the visitor's question with executive authority, warmth, and precision. 2. Demonstrate "Service-to-Sales & Brand Loyalty" in action: resolve their question AND naturally weave in a consultative value-add, cross-sell insight, or recommendation for Cloud Care Consulting's services (such as an Executive Advisory Engagement, a 90-Day Jumpstart Sprint, or our Service-to-Sales Architecture Audit). 3. Reference Cloud Care Consulting's contact details when appropriate: Email Principal@CloudCareConsultants.com or Phone 415-347-6288. Keep responses concise (3-5 sentences), impactful, and formatted clearly.`; try { const reply = await callGeminiAI(messageText, systemInstruction); setChatMessages((prev) => [ ...prev, { role: 'assistant', text: reply, meta: 'Resolved via Agentforce + Claude • Consultative Upsell Applied' } ]); } catch (error) { setChatMessages((prev) => [ ...prev, { role: 'assistant', text: `At Cloud Care Consulting, we combine Salesforce Agentforce's autonomous workflow execution with AI Force for Claude's nuanced reasoning to resolve up to 65% of customer inquiries instantly while converting support moments into a 3.2x lift in expansion sales. We would love to tailor a blueprint for your organization—reach us directly at Principal@CloudCareConsultants.com or 415-347-6288, or use our Contact Us tab to receive an instant AI brief!`, meta: 'Agentforce Fallback Mode' } ]); } finally { setIsChatLoading(false); } }; // Voice Channel: Web Speech API Mic Input + Gemini + SpeechSynthesis Output const toggleMicListening = () => { const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; if (!SpeechRecognition) { setVoiceInputTranscript("How does Cloud Care Consulting help C-suite executives govern Agentforce and Claude AI while increasing sales?"); return; } if (isListeningMic) { setIsListeningMic(false); return; } const recognition = new SpeechRecognition(); recognition.lang = 'en-US'; recognition.interimResults = false; recognition.maxAlternatives = 1; recognition.onstart = () => setIsListeningMic(true); recognition.onresult = (event) => { const transcript = event.results[0][0].transcript; setVoiceInputTranscript(transcript); setIsListeningMic(false); handleRunVoiceAgent(transcript); }; recognition.onerror = () => setIsListeningMic(false); recognition.onend = () => setIsListeningMic(false); recognition.start(); }; const speakVoiceResponse = (textToSpeak) => { if (!('speechSynthesis' in window)) return; window.speechSynthesis.cancel(); const utterance = new SpeechSynthesisUtterance(textToSpeak); utterance.rate = 1.02; utterance.pitch = 1.0; utterance.onstart = () => setIsSpeakingTTS(true); utterance.onend = () => setIsSpeakingTTS(false); utterance.onerror = () => setIsSpeakingTTS(false); window.speechSynthesis.speak(utterance); }; const stopSpeaking = () => { if ('speechSynthesis' in window) { window.speechSynthesis.cancel(); } setIsSpeakingTTS(false); }; const handleRunVoiceAgent = async (overrideText = null) => { const query = overrideText || voiceInputTranscript; if (!query.trim() || isVoiceProcessing) return; setIsVoiceProcessing(true); stopSpeaking(); const schema = { type: "OBJECT", properties: { spokenResponse: { type: "STRING" }, sentiment: { type: "STRING" }, detectedOpportunity: { type: "STRING" }, estimatedAnnualImpact: { type: "STRING" } }, required: ["spokenResponse", "sentiment", "detectedOpportunity", "estimatedAnnualImpact"] }; const sysPrompt = `You are the Voice AI Agent for Cloud Care Consulting (Principal@CloudCareConsultants.com, 415-347-6288). Generate a natural, executive-ready spoken response (3-4 sentences max) that answers the caller's question about Salesforce Agentforce, AI Force for Claude, or Executive Advisory, while demonstrating how every customer care call can drive sales & loyalty. Also return telemetry metrics.`; try { const res = await callGeminiAI(query, sysPrompt, schema); setVoiceAiResponse(res.spokenResponse); setVoiceTelemetry({ sentiment: res.sentiment, detectedOpportunity: res.detectedOpportunity, estimatedAnnualImpact: res.estimatedAnnualImpact }); speakVoiceResponse(res.spokenResponse); } catch (err) { const fallback = "Cloud Care Consulting deploys voice-native Agentforce and Claude solutions that resolve complex customer requests in real time without IVR frustration, while equipping the AI to make smart, empathetic upgrade recommendations. Let's connect you with our Principal Advisory team at 415-347-6288 to model this for your call center."; setVoiceAiResponse(fallback); speakVoiceResponse(fallback); } finally { setIsVoiceProcessing(false); } }; // Email Channel Handler const handleRunEmailTriage = async () => { if (!emailBody.trim() || isEmailProcessing) return; setIsEmailProcessing(true); const schema = { type: "OBJECT", properties: { detectedIntent: { type: "STRING" }, urgencyLevel: { type: "STRING" }, agentforceAutonomousActions: { type: "ARRAY", items: { type: "STRING" } }, claudeUpsellStrategy: { type: "STRING" }, draftedReplySubject: { type: "STRING" }, draftedReplyBody: { type: "STRING" } }, required: [ "detectedIntent", "urgencyLevel", "agentforceAutonomousActions", "claudeUpsellStrategy", "draftedReplySubject", "draftedReplyBody" ] }; const prompt = `Inbound Email from: ${emailSender}\nSubject: ${emailSubject}\nBody:\n${emailBody}`; const sysPrompt = `You are the Cloud Care Consulting Agentforce + AI Force for Claude Email Automation Engine. Analyze the inbound customer/prospect email. Show: 1. The autonomous backend Salesforce Agentforce actions executed immediately. 2. The Claude consultative sales/loyalty strategy identified from the email context. 3. The complete, warm, executive-grade email reply that resolves their request AND introduces a high-value cross-sell, upgrade, or Executive Advisory briefing (signing off from Cloud Care Consulting, Principal@CloudCareConsultants.com | 415-347-6288).`; try { const result = await callGeminiAI(prompt, sysPrompt, schema); setEmailAiResult(result); } catch (err) { setEmailAiResult({ detectedIntent: "Urgent License Scaling & Enterprise SLA Assurance", urgencyLevel: "High Priority (Executive VIP)", agentforceAutonomousActions: [ "Verified account entitlement in Salesforce Data Cloud", "Provisioned 85 burst seats via automated Flow", "Attached Priority SLA monitoring flag to org ID" ], claudeUpsellStrategy: "Position Annual Elastic Enterprise Tier + Proactive Care Shield (Saves 22% vs ad-hoc seasonal seats)", draftedReplySubject: `RESOLVED: 85 Burst Seats Activated + Priority Q4 SLA Protection (${emailSubject})`, draftedReplyBody: `Hello,\n\nI have immediately provisioned the 85 additional user seats in your portal so your onboarding next Monday proceeds seamlessly, and escalated your account to our Q4 Priority SLA Watchlist to guarantee zero ticket delays.\n\nBecause your team scales seasonally, our AI Force for Claude analysis shows you can save 22% by switching these burst licenses to our Elastic Enterprise Tier—which also includes a dedicated Technical Account Manager. Would you like me to apply that credit retroactively to today's order?\n\nBest regards,\nCloud Care Autonomous Concierge\nPrincipal@CloudCareConsultants.com | 415-347-6288` }); } finally { setIsEmailProcessing(false); } }; // ========================================== // HANDLER: CONTACT US LEAD CAPTURE & AI FOLLOW-UP EMAIL // ========================================== const handleLeadSubmit = async (e) => { e.preventDefault(); if (!leadForm.firstName || !leadForm.email) return; setIsGeneratingFollowUp(true); const schema = { type: "OBJECT", properties: { followUpSubject: { type: "STRING" }, followUpBody: { type: "STRING" }, recommendedNextStep: { type: "STRING" }, estimatedRoiFocus: { type: "STRING" } }, required: ["followUpSubject", "followUpBody", "recommendedNextStep", "estimatedRoiFocus"] }; const prompt = `New Executive Lead Submitted on www.cloudcareconsultants.com: Name: ${leadForm.firstName} ${leadForm.lastName} Title: ${leadForm.title || 'Executive Leader'} Company: ${leadForm.company || 'Enterprise Organization'} Email: ${leadForm.email} Phone: ${leadForm.phone || 'Not provided'} Primary Initiative: ${leadForm.initiative} Goals/Notes: ${leadForm.notes || 'Interested in Agentforce, AI Force for Claude, and turning Customer Care into a revenue & loyalty engine.'}`; const sysPrompt = `You are the Principal Executive Advisor AI at Cloud Care Consulting (Principal@CloudCareConsultants.com, 415-347-6288). Generate a highly personalized, impressive automated follow-up email sent immediately to this lead upon submitting the Contact Us form. - Address them by first name and reference their company, executive role, and specific initiative (${leadForm.initiative}). - Explain how Cloud Care Consulting blends Salesforce Agentforce and AI Force for Claude to deliver automated Customer Care that increases sales and brand loyalty, backed by our C-Suite Executive Advisory methodology. - Include a clear call to action for a 30-minute Executive Strategy Briefing and sign off with Principal@CloudCareConsultants.com and 415-347-6288.`; try { const aiFollowUp = await callGeminiAI(prompt, sysPrompt, schema); const newLeadRecord = { id: `LEAD-${Math.floor(100 + Math.random() * 900)}`, timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) + ' PST', ...leadForm, followUpSubject: aiFollowUp.followUpSubject, followUpBody: aiFollowUp.followUpBody, recommendedNextStep: aiFollowUp.recommendedNextStep, estimatedRoiFocus: aiFollowUp.estimatedRoiFocus }; setCapturedLeads((prev) => [newLeadRecord, ...prev]); setActiveGeneratedLead(newLeadRecord); } catch (err) { const fallbackLead = { id: `LEAD-${Math.floor(100 + Math.random() * 900)}`, timestamp: 'Just now', ...leadForm, followUpSubject: `Executive Briefing & Roadmap for ${leadForm.company || 'Your Team'}: ${leadForm.initiative}`, followUpBody: `Dear ${leadForm.firstName},\n\nThank you for contacting Cloud Care Consulting regarding ${leadForm.initiative} at ${leadForm.company || 'your organization'}.\n\nAs organizations move beyond basic chatbots toward autonomous digital labor, blending Salesforce Agentforce with AI Force for Claude allows your team to resolve inquiries faster while turning every support touchpoint into a consultative revenue and loyalty opportunity.\n\nWe have logged your goals (${leadForm.notes || 'Strategic AI & Customer Care transformation'}) and our Principal Advisory team would love to walk you through a tailored architecture and ROI model.\n\nBest regards,\nCloud Care Consulting Executive Team\nPrincipal@CloudCareConsultants.com\n415-347-6288 | www.cloudcareconsultants.com`, recommendedNextStep: '30-Minute C-Suite Architecture & ROI Workshop', estimatedRoiFocus: '65% Autonomous Deflection + 3.2x Service-to-Sales Lift' }; setCapturedLeads((prev) => [fallbackLead, ...prev]); setActiveGeneratedLead(fallbackLead); } finally { setIsGeneratingFollowUp(false); } }; // ========================================== // ROI CALCULATOR COMPUTATIONS // ========================================== const annualTickets = monthlyTickets * 12; const autonomousDeflectionRate = 0.62; // 62% resolved by Agentforce + Claude const annualSupportSavings = Math.round(annualTickets * autonomousDeflectionRate * (costPerTicket * 0.78)); const serviceToSalesConversionRate = 0.035; // 3.5% of interactions convert to upsell/expansion const annualNewRevenueUnlocked = Math.round(annualTickets * serviceToSalesConversionRate * (avgContractValue * 0.25)); const totalAnnualImpact = annualSupportSavings + annualNewRevenueUnlocked; const currentScenario = INDUSTRY_SCENARIOS.find((s) => s.id === selectedScenarioId) || INDUSTRY_SCENARIOS[0]; return (
{/* ========================================== TOP EXECUTIVE ANNOUNCEMENT BAR ========================================== */}
Salesforce Agentforce + AI Force for Claude: Turn Every Customer Care Interaction into Sales & Brand Loyalty
{/* ========================================== MAIN STICKY NAVIGATION HEADER ========================================== */}
{/* Brand Logo */} {/* Desktop Navigation Tabs */} {/* Right CTA Buttons */}
{/* Mobile Menu Button */}
{/* Mobile Drawer */} {mobileMenuOpen && (
{[ { id: 'home', label: 'Home & AI Graphics Showcase' }, { id: 'solutions', label: 'Agentforce & AI Force for Claude' }, { id: 'advisory', label: 'C-Suite Executive Advisory' }, { id: 'videos', label: 'Video Hub & Interactive Demos' }, { id: 'contact', label: 'Contact Us & Automated Lead Capture' } ].map((item) => ( ))}
)}
{/* ========================================== MAIN PAGE CONTENT ROUTER ========================================== */}
{/* ========================================== PAGE 1: HOME & COOL AI GRAPHICS SHOWCASE ========================================== */} {activePage === 'home' && (
{/* Hero Section */}
{/* Futuristic Radial Mesh Backdrop */}
{/* Left Hero Copy (6 Cols) */}
Next-Gen Digital Labor & C-Suite AI Advisory

Automated Customer Care That{' '} Drives Sales & Brand Loyalty

Cloud Care Consulting unites Salesforce Agentforce and{' '} AI Force for Claude to resolve customer and field service inquiries autonomously—while transforming every single interaction into a consultative opportunity to cross-sell, upsell, and deepen customer lifetime value.

{/* Primary Hero CTAs */}
{/* Trust & Quick Contact Strip */}
Concept-to-Deploy Execution
Einstein Trust & Zero Retention
Direct C-Suite Partnership
{/* Right Hero Interactive AI Graphic (6 Cols) */}
setBotOpen(true)} />
{/* Executive Metrics Bar */}
{[ { stat: '65%', label: 'Autonomous Case Resolution', desc: 'Instant multi-step workflow execution across Voice, Chat & Email', color: 'text-cyan-400' }, { stat: '3.2x', label: 'Service-to-Sales Conversion', desc: 'Claude-powered contextual upsell & cross-sell during support moments', color: 'text-purple-400' }, { stat: '+28%', label: 'Net Revenue Retention Lift', desc: 'Proactive churn prevention & lifetime brand loyalty expansion', color: 'text-emerald-400' }, { stat: '90 Days', label: 'Concept-to-Production ROI', desc: 'Guided by our Executive Advisory & Jumpstart deployment sprints', color: 'text-blue-400' } ].map((item, i) => (
{item.stat}
{item.label}
{item.desc}
))}
{/* Three Core Pillars Showcase */}
Why Cloud Care Consulting

Smarter, Leaner Support That Pays for Itself

Traditional support centers focus solely on ticket deflection and cutting costs. We help visionary leaders blend human expertise with digital labor to create a self-funding customer care and revenue powerhouse.

{/* Pillar 1 */}

Salesforce Agentforce Mastery

Unify Service Cloud, Field Service, and Data Cloud with autonomous agents that don't just answer FAQs—they execute complex Flows, process warranties, schedule field technicians, and resolve multi-system bottlenecks 24/7.

  • Autonomous Tier-1 & Tier-2 Resolution
  • Predictive Field Service & IoT Dispatch
  • Real-Time Data Cloud Customer 360
{/* Pillar 2 */}
Revenue Engine

AI Force for Claude (Service-to-Sales)

Pair Anthropic Claude's industry-leading reasoning and emotional intelligence with your CRM. Every support conversation is analyzed for expansion fit, delivering natural, helpful upgrades that customers actually thank you for.

  • Consultative Next-Best-Offer Synthesis
  • Real-Time Churn & Sentiment Recovery
  • Constitutional AI Safety & Brand Voice
{/* Pillar 3 */}

C-Suite Executive Advisory

We partner directly with CEOs, CIOs, CTOs, and COOs on strategic initiatives—helping executive teams cut through AI hype, establish bulletproof governance, redesign workforce KPIs, and realize measurable board-level ROI.

  • Board-Ready AI Roadmaps & ROI Models
  • Digital Labor Change Management
  • Security, Trust & Compliance Guardrails
)} {/* ========================================== PAGE 2: AGENTFORCE & AI FORCE FOR CLAUDE ========================================== */} {activePage === 'solutions' && (
{/* Header */}
Dual-Engine Enterprise AI Architecture

Salesforce Agentforce +{' '} AI Force for Claude

Why choose between workflow automation and deep human-like intelligence? Cloud Care Consulting architectures unite Salesforce's autonomous execution layer with Anthropic Claude's consultative reasoning—creating a closed-loop system that resolves issues and grows customer revenue simultaneously.

{/* Interactive Industry Service-to-Sales Simulator */}
Interactive Showcase

Live Service-to-Sales Transformation Simulator

Select an industry below to see how an inbound support ticket is autonomously resolved while generating new sales and loyalty.

{/* Industry Selector Tabs */}
{INDUSTRY_SCENARIOS.map((scen) => { const Icon = scen.icon; const active = selectedScenarioId === scen.id; return ( ); })}
{/* Simulator Steps Grid */}
{/* Left Column: Customer Inquiry + AI Processing (7 Cols) */}
{/* Step 1: Customer Signal */}
INBOUND CUSTOMER CARE INTERACTION {currentScenario.customerTier}

{currentScenario.inquiry}

{/* Step 2: Parallel Agentforce + Claude Execution */}
{/* Agentforce Box */}
Salesforce Agentforce Action
    {currentScenario.agentforceAction.map((act, idx) => (
  • {act}
    • ))}
{/* Claude Box */}
AI Force for Claude Reasoning
    {currentScenario.claudeReasoning.map((reas, idx) => (
  • {reas}
    • ))}
{/* Right Column: Unified Response & Revenue Outcome (5 Cols) */}
Unified Resolution + Consultative Offer Zero Human Escalation
{currentScenario.outcomeResponse}
{/* Business Impact Metrics */}
Realized Interaction Telemetry
Time to Resolution
{currentScenario.metrics.resolutionTime}
Customer CSAT
{currentScenario.metrics.csatScore}
New Sales Unlocked
{currentScenario.metrics.upsellValue}
Brand Loyalty Impact
{currentScenario.metrics.retentionImpact}
{/* Architectural Comparison Matrix */}

What Salesforce Agentforce Delivers

Deep native integration inside your Salesforce org—giving autonomous agents secure, governed permissions to read data and take real action across your enterprise stack.

{[ 'Service Cloud & Omni-Channel Routing Integration', 'Autonomous Field Service Scheduling & Asset Telemetry', 'Data Cloud Zero-Copy Unified Customer Profiles', 'Flow, Apex & MuleSoft API Action Execution', 'Einstein Trust Layer PII Masking & Audit Trails' ].map((item, i) => (
{item}
))}

What AI Force for Claude Adds

Anthropic Claude's frontier reasoning transforms transactional actions into executive-grade consultative conversations that build trust and grow account value.

{[ 'Nuanced Emotional Empathy & De-Escalation Mastery', '200K+ Context Window for Complex Contracts & Manuals', 'Consultative Cross-Sell & Upgrade Persuasion Without Pushiness', 'Constitutional AI Guardrails Preventing Hallucinations', 'Multi-Turn Strategic Account Expansion Discovery' ].map((item, i) => (
{item}
))}
)} {/* ========================================== PAGE 3: EXECUTIVE ADVISORY (C-SUITE ENGAGEMENTS) ========================================== */} {activePage === 'advisory' && (
{/* Hero Banner */}
C-Suite Strategic Partnership

Executive Advisory Engagements for the AI Era

Cloud Care Consulting works directly with CEOs, CIOs, CTOs, CCOs, and COOs to translate board-level AI ambitions into governed, high-yield realities. We align digital labor strategy, organizational change management, and KPIs so your AI investments drive immediate EBITDA and top-line growth.

Direct Principal Line: 415-347-6288
{/* 4 Pillars of Executive Advisory */}
How We Partner With C-Level Leaders

Four Pillars of Our Executive Advisory Practice

{[ { icon: Target, roleTag: 'For CEOs & COOs', title: '1. C-Suite Vision & AI Value Roadmapping', desc: 'We evaluate your entire customer lifecycle to identify the highest-leverage workflows where autonomous digital labor can compress operating costs while expanding Net Revenue Retention (NRR). Includes board-ready financial modeling.', deliverable: 'Deliverable: 12-Month Board AI Charter & Prioritized ROI Business Case' }, { icon: ShieldCheck, roleTag: 'For CIOs, CTOs & CISOs', title: '2. AI Governance, Trust & Security Architecture', desc: 'Deploy AI with zero compromise on security or compliance. We architect your Salesforce Einstein Trust Layer, Anthropic Claude zero-data-retention policies, PII masking, and human-in-the-loop escalation boundaries.', deliverable: 'Deliverable: Enterprise AI Security & Constitutional Governance Blueprint' }, { icon: TrendingUp, roleTag: 'For CROs & Chief Customer Officers', title: '3. Service-as-a-Revenue-Center Transformation', desc: 'Transition your support and field service teams from defensive cost centers into proactive revenue generators. We redesign agent incentives, prompt engineering, and CRM telemetry around customer lifetime value.', deliverable: 'Deliverable: Service-to-Sales Playbook & Prompt Library' }, { icon: Zap, roleTag: 'Cross-Functional Leadership', title: '4. 90-Day Concept-to-Deploy Jumpstart Sprints', desc: 'Avoid 18-month consulting science projects. We lead rapid, iterative 30/60/90-day implementation sprints that put production Agentforce + Claude agents in front of real customers with measurable weekly telemetry.', deliverable: 'Deliverable: Live Omnichannel Production Agent + Executive KPI Dashboard' } ].map((pillar, idx) => { const Icon = pillar.icon; return (
{pillar.roleTag}

{pillar.title}

{pillar.desc}

{pillar.deliverable}
); })}
{/* Interactive C-Suite ROI & Revenue-Lift Calculator */}
Interactive Financial Modeling Tool

Executive ROI & Service-to-Sales Revenue Calculator

Adjust the sliders below to estimate the combined annual impact of autonomous case resolution (Agentforce) + consultative upsell conversions (AI Force for Claude).

{/* Sliders (6 Cols) */}
{/* Slider 1 */}
Monthly Support Inquiries (Voice/Chat/Email) {monthlyTickets.toLocaleString()} / mo
setMonthlyTickets(Number(e.target.value))} className="w-full accent-cyan-400 cursor-pointer" />
2,000 75,000 150,000+
{/* Slider 2 */}
Average Customer Contract / Order Value ${avgContractValue.toLocaleString()}
setAvgContractValue(Number(e.target.value))} className="w-full accent-purple-400 cursor-pointer" />
$200 $5,000 $10,000+
{/* Slider 3 */}
Current Fully-Loaded Cost Per Support Ticket ${costPerTicket}
setCostPerTicket(Number(e.target.value))} className="w-full accent-emerald-400 cursor-pointer" />
$6 $25 $45
{/* Output Results Card (6 Cols) */}
Projected Annual Value Realization
${totalAnnualImpact.toLocaleString()} / year
Autonomous Support Savings
${annualSupportSavings.toLocaleString()}
Based on 62% Agentforce autonomous resolution
New Service-Led Sales Lift
+${annualNewRevenueUnlocked.toLocaleString()}
Based on 3.5% Claude consultative upsell conversion
)} {/* ========================================== PAGE 4: VIDEO HUB & INTERACTIVE DEMOS ========================================== */} {activePage === 'videos' && (
{/* Header + Add Custom Video CTA */}
Executive Media & Demo Center

Video Showcase: Agentforce, Claude & Advisory in Action

Watch how Cloud Care Consulting transforms customer care into a high-converting revenue and loyalty channel.

{/* Featured Video Player Area */}
{/* Left Video Stage (8 Cols) */}
{/* If user supplied a custom YouTube/Vimeo embed or watch URL */} {activeVideo.customUrl ? (