{/* persona hero */}

{a.name} No ar

{a.voice} · {a.language}

{a.answeredPct}%

Atendidas

{a.avgAnswer}

Resposta

24/7

Sempre

{/* greeting / test */}

Como a Riley atende

{a.persona}

Saudação (em inglês)

"{a.greeting}"

{testing && (

Chamando {D.account.ownerPhone}…

)}

{/* catalog */}

Editar}>Catálogo & preços

{D.catalog.map((s) => )}

{/* add-ons */}

Extras (add-ons) {D.addons.map((x, i) => (

{x.label} +${x.price}

))}

{/* hours */}

Horário de atendimento

{a.hours}

Riley nunca deixa o telefone tocar à toa

); } /* ============ SettingRow + group ============ */ function SettingRow({ icon, label, value, onClick, last, danger }) { return (

{label} {value && {value}} {onClick && }

); } /* ============ CONFIGURAÇÕES ============ */ /* Hora local do negócio, ao vivo (fuso IANA da conta). */ function TzLocalTime({ tz }) { const [now, setNow] = React.useState(() => new Date()); React.useEffect(() => { const t = setInterval(() => setNow(new Date()), 30000); return () => clearInterval(t); }, []); let time = ""; try { time = new Intl.DateTimeFormat("pt-BR", { hour: "2-digit", minute: "2-digit", hourCycle: "h23", timeZone: tz }).format(now); } catch (e) {} return time; } function SettingsScreen({ go }) { const ac = D.account; return (

{/* business card */}

{ac.company}

{ac.owner} · {ac.city}

{/* agent number */}

Número do agente

{ac.agentNumber}

Riley atende este número

Ativo

Encaminhar pra você

{ac.forward}

{}} />

{/* timezone & contact window (read-only — concierge) */}

Fuso horário

{ac.tzLabel}

Agora no seu negócio

Janela de contato

SMS e follow-ups da Riley saem só nesse horário local

{ac.contactWindow}

Definido no seu cadastro — manda mensagem pra equipe pra mudar.

{/* preferences */}

Preferências go("notifications")} /> go("billing")} last />

{/* team */}

go("team")} style={{ border: "none", background: "none", color: "var(--text-link)", fontSize: "var(--fs-caption)", fontWeight: "var(--fw-semibold)", cursor: "pointer" }}>Gerenciar}>Equipe & acessos {D.team.map((m, i) => (

go("team")} style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 16px", borderBottom: i < D.team.length - 1 ? "1px solid var(--border-subtle)" : "none", cursor: "pointer" }}>

{m.name}

{m.phone}

{m.role === "dono" ? Dono : m.role === "guest" ? Convidada : Equipe}

))}

{/* security */} {}} /> {}} /> {}} last danger />

FrontCall Hub · v1.0.0

); } /* ============ NOTIFICAÇÕES ============ */ function NotificationsScreen({ go }) { const [notes, setNotes] = React.useState(D.notifications); const channels = [ { key: "push", label: "Push", icon: "bell" }, { key: "sms", label: "SMS", icon: "message-circle" }, { key: "email", label: "Email", icon: "mail" }, ]; const toggle = (id, ch) => setNotes((ns) => ns.map((n) => n.id === id ? { ...n, channels: { ...n.channels, [ch]: !n.channels[ch] } } : n)); return (

Escolha como quer ser avisado. Pra lead quente, recomendamos deixar tudo ligado.

{notes.map((n) => (

{n.id === "hot" && }{n.label}

{n.sub}

{channels.map((c, i) => (

{c.label} toggle(n.id, c.key)} />

))}

); } /* ============ PLANO & COBRANÇA ============ */ function BillingScreen({ go }) { const p = D.plan; const pct = Math.round((p.minsUsed / p.minsTotal) * 100); return (

{/* current plan */}

Plano atual

{p.name}

${p.price} {p.cycle}

{/* usage */}

{p.minsUsed} de {p.minsTotal} min usados{pct}%

Renova em {p.renews}

{/* perks */} O que está incluso

{p.perks.map((perk) => (

{perk}

))}

{/* payment method */}

Forma de pagamento

•••• 4242

Visa · exp 08/27

{/* invoices */}

Faturas {p.invoices.map((inv, i) => (

{inv.date}

${inv.amount}

{inv.status}

))}

); } Object.assign(window, { Toggle, Pill, ServiceCard, AgentScreen, SettingRow, SettingsScreen, NotificationsScreen, BillingScreen });