// mockups.jsx — Interactive visuals for the Sarah marketing site // Components: HeroMockup, DemoPlayer, DemoTranscript, WhiteLabelVisual const { useState, useEffect, useRef, useMemo } = React; /* ───────────────────────────────────────────────────────────── HERO MOCKUP Animated phone showing the call lifecycle: ringing → Sarah answers (live waveform) → SMS arrives on owner's phone Cycles continuously. ───────────────────────────────────────────────────────────── */ function HeroMockup() { // 0: ringing, 1: in-call (waveform), 2: SMS arriving const [stage, setStage] = useState(0); const [elapsed, setElapsed] = useState(0); useEffect(() => { let frame; const t0 = performance.now(); const tick = (t) => { const dt = (t - t0) / 1000; setElapsed(dt); frame = requestAnimationFrame(tick); }; frame = requestAnimationFrame(tick); return () => cancelAnimationFrame(frame); }, []); useEffect(() => { // Stage 0 (ringing) 2.4s → Stage 1 (call) 5.5s → Stage 2 (sms) 4.5s → loop const seq = [2400, 5500, 4500]; const id = setTimeout(() => setStage((s) => (s + 1) % 3), seq[stage]); return () => clearTimeout(id); }, [stage]); return (
{/* Subtle decorative dots */} {/* Caller phone (left) */} {/* Owner phone (right) — receives SMS */} {/* Floating annotation */}
); } function DotGrid() { return ( ); } function FloatingLabel({ text, accent, style }) { return (
{text}
); } function Phone({ children, style }) { return (
{children}
); } function CallerScreen({ stage, elapsed }) { // Stage 0: ringing UI; Stage 1: in-call with Sarah; Stage 2: call ended return (
{/* Status bar */}
11:47
{/* Body */}
{stage === 0 && ( <>
Incoming call
S
Sarah
Anchor Plumbing · Receptionist
)} {stage === 1 && ( <>
Connected · 00:{String(Math.min(Math.floor(elapsed * 60) % 60, 59)).padStart(2,'0')}
Sarah
“Of course. I can have someone out by 8 AM. What’s the address?”
)} {stage === 2 && ( <>
Call ended · 02:14
Booked for tomorrow
Anchor Plumbing · 8:00 AM
)}
{/* Bottom actions / hint */}
{stage === 0 && ( <> } /> } pulse /> )} {stage === 1 && ( <> } /> } /> } /> )} {stage === 2 && (
Summary sent →
)}
); } function Waveform({ elapsed }) { // 22 bars; vary heights with multiple sine components to feel like speech const bars = 22; const data = useMemo(() => Array.from({ length: bars }, (_, i) => ({ a: 0.5 + Math.random() * 0.4, phase: Math.random() * Math.PI * 2, freq: 1.5 + Math.random() * 2.2, })), []); return (
{data.map((d, i) => { const v = 0.18 + 0.82 * Math.abs(Math.sin(elapsed * d.freq + d.phase + i * 0.35)) * d.a; return (
); })}
); } function RoundBtn({ color, icon, pulse }) { return (
{icon}
); } function CheckBadge() { return (
); } /* Owner phone — SMS arriving */ function OwnerScreen({ stage }) { const show = stage === 2; return (
{/* Status bar */}
11:49
{/* SMS card */}
6
Sarah · Anchor Plumbing
now
New lead · Emergency
Jordan Reyes · (415) 555‑0117
Burst pipe under kitchen sink. Water shut off.
✓ Booked: Tue 8:00 AM
Call back View transcript
{/* Second smaller toast for layered feel */}
Calendar · Tue 8:00 AM Confirmed
); } function Chip({ children }) { return ( {children} ); } /* Tiny icons */ function SignalIcon({ dark }) { const c = dark ? '#0F0F0F' : 'white'; return ( ); } function WifiIcon({ dark }) { const c = dark ? '#0F0F0F' : 'white'; return ( ); } function BatteryIcon({ dark }) { const c = dark ? '#0F0F0F' : 'white'; return ( ); } function AcceptIcon() { return ; } function DeclineIcon() { return ; } function MuteIcon() { return ; } function KeypadIcon() { return ; } /* ───────────────────────────────────────────────────────────── DEMO PLAYER + TRANSCRIPT (dark section) ───────────────────────────────────────────────────────────── */ const TRANSCRIPT = [ { t: 0, speaker: 'sarah', text: "Hi, thanks for calling DMV Plumbing and HVAC. This is Sarah. What's going on?" }, { t: 4, speaker: 'caller', text: "Hi. So I'm currently having a problem with my bathroom sink. It's been draining slowly for, like, a few days now — are you guys able to handle something like that?" }, { t: 15, speaker: 'sarah', text: "Absolutely. We handle slow and clogged drains all the time. Can I get your name?" }, { t: 20, speaker: 'caller', text: "Yeah. My name is Taylor." }, { t: 22, speaker: 'sarah', text: "Thanks, Taylor. What's the best phone number for you just in case we get disconnected?" }, { t: 26, speaker: 'caller', text: "This number that I'm currently calling you at." }, { t: 32, speaker: 'sarah', text: "I'll use the number you're calling from. Now, what's the service address for where the sink is clogged?" }, { t: 36, speaker: 'caller', text: "It is Maple Drive, Bethesda, Maryland." }, { t: 40, speaker: 'sarah', text: "Perfect. Got it. Just to double-check — there isn't any water coming out onto the floor or overflowing right now, right?" }, { t: 46, speaker: 'caller', text: "No, it's not an emergency. There's no water spilling out. It's just slowly getting worse. I'd like someone to come out this week, in the afternoon." }, { t: 55, speaker: 'sarah', text: "Does any day this week work better for you, or do you have a specific afternoon in mind for the appointment?" }, { t: 60, speaker: 'caller', text: "This Thursday afternoon." }, { t: 62, speaker: 'sarah', text: "All right. Let me check on that. We've got Thursday afternoon open. Would you prefer the tech to arrive closer to 1 PM or more like 4 PM?" }, { t: 70, speaker: 'caller', text: "Closer to 1 PM would be perfect." }, { t: 72, speaker: 'sarah', text: "Great. You're set for Thursday afternoon, arrival around 1 PM. The tech will text you when they're about thirty minutes away. Sound good?" }, { t: 80, speaker: 'caller', text: "Yeah. Thank you so much." }, { t: 82, speaker: 'sarah', text: "Perfect. You're all set, Taylor. Thanks for calling DMV Plumbing and HVAC. Have a good one." }, ]; const DEMO_AUDIO_SRC = 'assets/audio/sarah-demo.mp3'; function DemoPlayer() { const audioRef = useRef(null); const [playing, setPlaying] = useState(false); const [pos, setPos] = useState(0); const [duration, setDuration] = useState(0); const [waveform, setWaveform] = useState(null); // null = loading, [] = failed const [ready, setReady] = useState(false); // Decode the audio file once and extract peaks for the waveform. useEffect(() => { let cancelled = false; (async () => { try { const res = await fetch(DEMO_AUDIO_SRC); const buf = await res.arrayBuffer(); const AC = window.AudioContext || window.webkitAudioContext; const ctx = new AC(); const audioBuf = await ctx.decodeAudioData(buf); if (cancelled) return; const bars = 64; const ch = audioBuf.getChannelData(0); const block = Math.floor(ch.length / bars); const peaks = new Array(bars); let max = 0; for (let i = 0; i < bars; i++) { let sum = 0; for (let j = 0; j < block; j++) { const v = ch[i * block + j] || 0; sum += v * v; } peaks[i] = Math.sqrt(sum / block); // RMS if (peaks[i] > max) max = peaks[i]; } // Normalize & lift floor so very quiet sections still show a bar const normalized = peaks.map(v => Math.max(0.12, Math.min(1, (v / (max || 1)) * 1.1))); setWaveform(normalized); ctx.close && ctx.close(); } catch (err) { // Fall back to synthetic waveform so the UI still works. console.warn('[Sarah demo] Could not decode audio:', err); const fallback = Array.from({ length: 64 }, (_, i) => { const v = 0.5 + 0.32 * Math.sin(i * 0.55) + 0.22 * Math.sin(i * 1.31 + 1.7) + 0.18 * Math.sin(i * 2.07 + 0.4); return Math.max(0.18, Math.min(1, v)); }); if (!cancelled) setWaveform(fallback); } })(); return () => { cancelled = true; }; }, []); // Hook up the