// VoicePage — Voice Agent product detail page. // Composes: Nav (reused) → Hero → Problem → Workflow → Capabilities → IntegrationsStrip (reused) → CaseStudy → FAQ → FooterCTA (reused) → Footer (reused) const { useState: useVS, useEffect: useVE, useRef: useVR } = React; // --------------------------------------------------------------------------- // HERO // --------------------------------------------------------------------------- function VoiceHero({ t }) { return (
{/* LEFT */}
{t.hero.eyebrow}

{t.hero.h1Pre} {t.hero.h1Accent}

{t.hero.sub}

{t.hero.cta}
{/* stats row */}
{t.hero.stats.map((s, i) => (
{s.value}
{s.label}
))}
{/* RIGHT — incoming call visual */}
); } function VoiceHeroCall() { // simple looped timer const [tick, setTick] = useVS(0); useVE(() => { const id = setInterval(() => setTick(t => (t + 1) % 1000), 100); return () => clearInterval(id); }, []); const seconds = Math.floor(tick / 10) % 90 + 12; const mm = String(Math.floor(seconds / 60)).padStart(2, "0"); const ss = String(seconds % 60).padStart(2, "0"); // halo return (
); } function Line({ who, text, typing }) { return (
{who === "sonaro" ? "S" : "P"} {typing ? ( ) : ( {text} )}
); } function FootCell({ label, value, valueColor }) { return (
{label}
{label === "STATUS" && } {value}
); } // --------------------------------------------------------------------------- // PROBLEM // --------------------------------------------------------------------------- function VoiceProblem({ t }) { const p = t.problem; return (
{p.eyebrow}

{p.h2Pre} {p.h2Accent}

{p.body}

{p.stats.map((s, i) => (
{s.value}
{s.label}
))}
); } // --------------------------------------------------------------------------- // WORKFLOW — 5 steps // --------------------------------------------------------------------------- function VoiceWorkflow({ t }) { const w = t.workflow; return (
{w.eyebrow}

{w.h2Pre} {w.h2Accent}

    {w.steps.map((step, i) => (
  1. {String(i + 1).padStart(2, "0")}
    {step.time}
    {step.title}
    {step.body}
    2. ))}
); } // --------------------------------------------------------------------------- // CAPABILITIES — 2x2 grid // --------------------------------------------------------------------------- function VoiceCapabilities({ t }) { const c = t.capabilities; return (
{c.eyebrow}

{c.h2}

{c.items.map((item, i) => (
{item.kicker}
{item.title}

{item.body}

))}
); } // --------------------------------------------------------------------------- // CASE STUDY (theme-aware: light or dark; quote optional) // --------------------------------------------------------------------------- function ProductCaseStudy({ data, variant, theme = "dark", showQuote = true }) { const accent = "#5B9EAD"; // slate teal — ties to brand const isDark = theme === "dark"; const bgSection = isDark ? "var(--bg-ink)" : "var(--bg-cream)"; const fgHead = isDark ? "var(--fg-cream)" : "var(--fg-ink)"; const fgBody = isDark ? "var(--muted-cream)" : "var(--muted-ink)"; const cardBg = isDark ? "rgba(255,255,255,0.03)" : "var(--bg-white)"; const cardBor = isDark ? "var(--border-dark)" : "var(--border-light)"; const railBg = isDark ? "rgba(255,255,255,0.06)" : "var(--border-light)"; return (
{data.eyebrow}

{data.h2Pre} {data.h2Accent}

{data.clientFull}

{data.body}

{/* metrics row */}
{data.metrics.map((m, i) => (
{m.value}
{m.label}
{m.sub && (
{m.sub}
)}
))}
{/* breakdown — full width when no quote, paired otherwise */}
{showQuote && (
“

{data.quote.text}

— {data.quote.attrib}
)}
BREAKDOWN
{data.breakdown.title}
{data.breakdown.footnote && (
{data.breakdown.footnote}
)}
{data.cta}
); } function BreakdownRows({ rows, accent, railBg, fgHead, fgBody }) { const max = rows.reduce((m, r) => Math.max(m, r.value), 0) || 1; return (
{rows.map((r, i) => { const pct = (r.value / max) * 100; return (
{r.label}
{r.value}{r.eur ? {r.eur} : null}
); })}
); } // --------------------------------------------------------------------------- // PRODUCT FAQ (reuses the same accordion CSS as the main FAQ) // --------------------------------------------------------------------------- function ProductFAQ({ data }) { return (
{data.eyebrow}

{data.h2}

{data.items.map((item, i) => (
{item.q}
{item.a}
))}
); } // --------------------------------------------------------------------------- // PAGE ROOT // --------------------------------------------------------------------------- function VoicePage() { // Lang comes from the HTML wrapper: /it/voice.html inlines // window.__sonaroLang = "it" before loading scripts. Root /voice.html // leaves it undefined → defaults to "en". const lang = (typeof window !== "undefined" && window.__sonaroLang) || "en"; const dict = (window.CONTENT && window.CONTENT[lang]) || window.CONTENT.en; const t = dict.voicePage; return (
); } Object.assign(window, { VoicePage, ProductCaseStudy, ProductFAQ });