{pulse && <>

}

); } // Language card function LanguageCard({ lang, selected, onSelect, variant, broadcast }) { const rtl = lang.script === 'rtl'; const [hover, setHover] = React.useState(false); // Font sizing per script: CJK and Devanagari render smaller at the same px const scriptFs = lang.script === 'cjk' ? 28 : lang.script === 'devanagari' ? 26 : lang.script === 'rtl' ? 30 : lang.native.length > 13 ? 21 : lang.native.length > 9 ? 24 : 28; // In broadcast mode the card swaps its accent to orange (the announcement tone), // so it's clear a tap publishes rather than starts a customer flow. const accent = broadcast ? 'var(--td-orange)' : 'var(--td-blue)'; const accentTintBg = broadcast ? '#FFF3EB' : 'var(--td-blue-50)'; const accentRing = broadcast ? 'rgba(207,99,40,0.18)' : 'rgba(70,137,200,0.15)'; return ( ); } // ──────────────────────────────────────────────────────────── // WELCOME SCREEN // ──────────────────────────────────────────────────────────── function WelcomeScreen({ onSelect, tweaks, brand }) { const [selectedCode, setSelectedCode] = React.useState(null); // Announcement overlay state — staff broadcasts a translated phrase without // entering the conversation flow. // mode: null | 'pickLang' | 'recording' | 'translating' | 'playing' const [announceMode, setAnnounceMode] = React.useState(null); const [announceLang, setAnnounceLang] = React.useState(null); const startAnnouncement = () => setAnnounceMode('pickLang'); const cancelAnnouncement = () => { setAnnounceMode(null); setAnnounceLang(null); }; const pickAnnouncementLang = (lang) => { setAnnounceLang(lang); setAnnounceMode('recording'); }; const handleSelect = (lang) => { // While in announcement mode, taps target the broadcast — not the customer flow if (announceMode === 'pickLang') { pickAnnouncementLang(lang); return; } if (selectedCode || announceMode) return; setSelectedCode(lang.code); setTimeout(() => onSelect(lang), 550); }; const heroTone = tweaks.heroTone; // 'navy' | 'light' const columns = tweaks.columns; // 3 or 4 const showHero = tweaks.showHero; return (

{/* Hero band */} {showHero &&

{/* subtle grid of dots behind */} {heroTone === 'navy' &&

}

{/* Logo lockup — Traduality (default) renders mark + wordmark. White-labeled customers render their logo only. */} {brand && brand.useDefaultMark === false ? (

{brand.tagline && (

{brand.tagline}

)}

) : ( <>

{brand ? brand.name : 'Traduality'}

{(!brand || brand.tagline) && (

{(brand && brand.tagline) || 'Get closer to your people'}

)}

)} {/* Powered by / Fire Lingo badge */}

Fire Lingo · Face-to-Face

{brand && brand.showPoweredBy && (

{brand.partnerType === 'credit-union' ? 'Powered by Traduality CUSO' : 'Powered by Traduality'}

)}

Ready to translate

{/* Greeting ticker + prompt */}

{heroTone === 'navy' ? :

Welcome. Please choose your language.

}

} {/* Instructions row — transforms into announcement bar in announce mode */} {!announceMode ? (

Select your language · Seleccione su idioma · 选择语言

Tap the language you speak most comfortably.

{/* Make announcement — staff broadcasts a translated phrase, in place */}

) : ( )} {/* Language grid — dimmed slightly while a broadcast is being recorded/played */}

{LANGUAGES.map((l) => )}

{/* Footer — employee controls */}

Sat, April 18 · 2:45 PM

Branch: {(brand && brand.branchName) || 'Eastpoint'}

Tablet ID #TRAD-IP02

{/* ambient selection flash */} {selectedCode &&

}

); } // ──────────────────────────────────────────────────────────── // ANNOUNCEMENT OVERLAY // Employee taps "Make announcement", picks a target language, // holds the mic to speak in English, then releases — the system // translates and (mock-)plays the audio in the chosen language. // ──────────────────────────────────────────────────────────── const ANNOUNCE_PHRASE = { // English source (employee speaks) source: 'Hi there — I can help you over here at this window.', // Mock translations per language translated: { es: 'Hola, puedo atenderle aquí en esta ventanilla.', zh: '您好,我可以在这个窗口为您服务。', vi: 'Xin chào, tôi có thể phục vụ quý vị ở quầy này.', ko: '안녕하세요, 이쪽 창구에서 도와드릴 수 있습니다.', ht: 'Bonjou — mwen ka ede w bò isit la nan fenèt sa a.', ar: 'مرحباً — يمكنني مساعدتك هنا عند هذا الشباك.', fr: 'Bonjour — je peux vous aider ici à ce guichet.', pt: 'Olá — posso atendê-lo aqui neste guichê.', ru: 'Здравствуйте — я могу помочь вам здесь, у этого окошка.', hi: 'नमस्ते — मैं आपकी इस खिड़की पर सहायता कर सकता हूँ।', tl: 'Kumusta — matutulungan ko po kayo dito sa bintanang ito.', sw: 'Habari — naweza kukusaidia hapa kwenye dirisha hili.', }, }; function AnnouncementBar({ mode, setMode, lang, onCancel }) { // ────────────────────────────────────────────── // Inline announcement strip — replaces the instruction row. // pickLang ➜ recording ➜ translating ➜ playing ➜ auto-close // ────────────────────────────────────────────── // Audio level for the mic-button glow const [level, setLevel] = React.useState(0); const [duration, setDuration] = React.useState(0); // Drive the level meter while recording React.useEffect(() => { if (mode !== 'recording') { setLevel(0); setDuration(0); return; } const start = performance.now(); let raf, last = start; const tick = (now) => { const dt = now - last; last = now; setDuration((now - start) / 1000); setLevel(l => { const target = 0.55 + 0.35 * Math.sin(now / 230) + (Math.random() - 0.5) * 0.4; return Math.max(0.18, Math.min(1, l + (target - l) * (dt / 90))); }); raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [mode]); // Auto-advance translating ➜ playing ➜ done React.useEffect(() => { if (mode === 'translating') { const t = setTimeout(() => setMode('playing'), 1200); return () => clearTimeout(t); } if (mode === 'playing') { const t = setTimeout(() => onCancel(), 4500); return () => clearTimeout(t); } }, [mode]); const recording = mode === 'recording'; const translating = mode === 'translating'; const playing = mode === 'playing'; const pickLang = mode === 'pickLang'; const translated = lang ? ANNOUNCE_PHRASE.translated[lang.code] : ''; const nativeFont = !lang ? 'var(--font-display)' : lang.script === 'cjk' ? '"Noto Sans SC", "Noto Sans KR", system-ui' : lang.script === 'devanagari' ? '"Noto Sans Devanagari", var(--font-display)' : lang.script === 'rtl' ? '"Noto Naskh Arabic", var(--font-display)' : 'var(--font-display)'; // Mic press handlers — only fire while in recording const endRecord = (e) => { if (e) e.preventDefault(); if (recording) setMode('translating'); }; return (

{/* Megaphone badge */}

{/* Center stack — varies by mode */}

{pickLang && ( <>

Make announcement

Tap a language card to broadcast in.

)} {recording && (

{/* lang chip */}

{lang?.english}

Listening · {duration.toFixed(1)}s

Hold the mic and speak. Release to translate.

{/* live waveform */}

{Array.from({ length: 28 }).map((_, i) => { const phase = (i + duration * 8) % 28; const h = 4 + 12 * Math.abs(Math.sin(phase * 0.45)) * level; return (

); })}

)} {translating && (

{lang?.english}

Translating into {lang?.english}…

"{ANNOUNCE_PHRASE.source}"

)} {playing && (

Playing · {lang?.english}

{translated}

"{ANNOUNCE_PHRASE.source}"

)}

{/* Mic / playing button on the right (hidden in pickLang) */} {!pickLang && (

{recording && (

)} {playing && (

)}

)} {/* Cancel — always present */}

); } Object.assign(window, { WelcomeScreen, BrandMark, LANGUAGES });