// sections.jsx — All homepage sections const { useState, useEffect, useRef } = React; function useInView(threshold = 0.12) { const ref = useRef(null); const [visible, setVisible] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setVisible(true); obs.disconnect(); } }, { threshold }); obs.observe(el); return () => obs.disconnect(); }, []); return [ref, visible]; } function useCountUp(target, duration = 1600, started = false) { const [val, setVal] = useState(0); useEffect(() => { if (!started) return; let start = null; const isNum = typeof target === 'number'; if (!isNum) return; const step = (ts) => { if (!start) start = ts; const p = Math.min((ts - start) / duration, 1); const ease = 1 - Math.pow(1 - p, 3); setVal(Math.floor(ease * target)); if (p < 1) requestAnimationFrame(step); }; requestAnimationFrame(step); }, [started, target, duration]); return val; } function Eyebrow({ children, light }) { return (
{children}
); } // ── Logo SVG ────────────────────────────────────────────────────── // Tight 32×28 viewBox. Solid dot at left, then three concentric arcs. // Each arc is the right-opening half-circle of its radius. Radii grow in // arithmetic 5 → 8 → 11 so the stroke spacing stays visually even. // Anchor x for each arc = (16 - r/2) so they share a center column near // x=16 and read as one tightening wave. Endpoints (cx, cy±r) lie exactly // on each circle so the arc geometry is mathematically clean. function EchoLogo({ size = 28 }) { // Brand mark — uses the canonical Echo logo image asset. return ( Echo ); } // (DemoSection removed — demo is now embedded inside the Agents section.) // ── Problem ─────────────────────────────────────────────────────── function StatCard({ prefix = '', value, suffix = '', label, source, started }) { const count = useCountUp(typeof value === 'number' ? value : 0, 1800, started); const isNum = typeof value === 'number'; const display = isNum ? `${prefix}${count.toLocaleString()}${suffix}` : value; return (
{ e.currentTarget.style.borderColor = 'var(--accent)'; e.currentTarget.style.transform = 'translateY(-2px)'; }} onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--hairline)'; e.currentTarget.style.transform = 'none'; }} >
{display}
{label}
{source}
); } function Problem() { const [ref, visible] = useInView(0.12); const stats = [ { value: '45 days', label: 'Average AR cycle, private-pay regenerative.', source: 'MGMA · 2024' }, { value: '23%', label: 'High-ticket plans uncollected past 60 days.', source: 'Kareo · specialty practice' }, { value: '40%', label: 'No-shows with no reminder in the prior 48hrs.', source: 'Accenture Health · 2024' }, { value: '1 in 4', label: 'Consent doc errors in specialty audits.', source: 'OIG · 2023' }, ]; return (
The problem

Where time
and money leak.

Private-pay clinic back-offices run on manual intake, paper chases, and slow AR.

{stats.map((s, i) => )}
); } // ── Agent glyphs ────────────────────────────────────────────────── const glyphs = { Intake: , Ledger: , Cal: , Docs: , }; function AgentCard({ num, name, domain, tagline, outcome, href, delay = 0 }) { const [hovered, setHovered] = useState(false); return ( setHovered(true)} onMouseLeave={() => setHovered(false)} style={{ background: 'var(--bg)', border: `1px solid ${hovered ? 'var(--accent)' : 'var(--hairline)'}`, borderRadius: 12, padding: '28px 24px', display: 'flex', flexDirection: 'column', gap: 16, cursor: 'pointer', textDecoration: 'none', color: 'inherit', transform: hovered ? 'translateY(-3px)' : 'none', boxShadow: hovered ? '0 12px 40px var(--accent-glow)' : 'none', transition: 'all 0.28s cubic-bezier(0.4,0,0.2,1)', }}>
{num} {glyphs[name]}
{domain}
{name}

{tagline}

{outcome}
); } function Agents() { const agents = [ { num: '01 · INTAKE · AUTHORIZATION', name: 'Intake', domain: 'Patient Intake', tagline: 'Collects intake forms, verifies ID, checks prior auth, and posts the record to your EHR.', outcome: 'Intake complete before the first appointment.', href: 'agents/intake.html' }, { num: '02 · AR · COLLECTIONS', name: 'Ledger', domain: 'AR & Collections', tagline: 'Tracks balances, sends reminders, posts cash, and flags overdue accounts before they age.', outcome: 'AR cycle cut from 45 days to under 14.', href: 'agents/ledger.html' }, { num: '03 · SCHEDULING · TREATMENT', name: 'Cal', domain: 'Treatment Scheduling', tagline: 'Books follow-ups, sends HIPAA-compliant SMS reminders, and keeps the treatment calendar full.', outcome: 'Every follow-up booked. Calendar stays full.', href: 'agents/cal.html' }, { num: '04 · CONSENT · COMPLIANCE', name: 'Docs', domain: 'Consent Documentation', tagline: 'Sends consents, tracks signatures, and files documents in your EHR before treatment.', outcome: 'Every consent signed and filed before treatment.', href: 'agents/docs.html' }, ]; return (
Meet the agents

Four agents.
One unified back-office.

{ e.currentTarget.style.color = 'var(--ink)'; e.currentTarget.style.borderColor = 'var(--ink)'; }} onMouseLeave={e => { e.currentTarget.style.color = 'var(--muted)'; e.currentTarget.style.borderColor = 'var(--hairline)'; }} > All agents
{agents.map((a, i) => )}
); } // ── How It Works ────────────────────────────────────────────────── function HowItWorks() { const steps = [ { tag: 'Step 01 · Connect', title: 'Point Echo at your stack', body: 'HIPAA-compliant deployment inside your Azure subscription. Agents connect to your EHR, billing, and scheduling via secure APIs. Patient data never leaves your environment.', items: ['Azure AD / Entra SSO', 'EHR API access', 'Azure OpenAI (your tenant)', 'HIPAA-compliant'], }, { tag: 'Step 02 · Configure', title: 'Assign agents to channels', body: 'Each agent runs in Teams, SMS, or email. Set escalation rules, approval thresholds, and override controls.', items: ['Teams / SMS / Email', 'Escalation thresholds', 'Human-in-the-loop controls', 'Role-based overrides'], }, { tag: 'Step 03 · Operate', title: 'Atlas keeps watch', body: 'Every action is logged and auditable. Atlas shows what each agent did, why, and when.', items: ['Streaming audit log', 'Atlas dashboard', 'SLA tracking', '24/7 operation'], }, ]; return (
Deployment

Operational in weeks,
not months.

{steps.map((s, i) => (
{s.tag}

{s.title}

{s.body}

{s.items.map(d => (
{d}
))}
))}
); } // ── Comparison ──────────────────────────────────────────────────── function Comparison() { const [ref, visible] = useInView(0.08); const rows = [ { workflow: 'Patient intake', today: 'Front desk emails forms, chases responses, keys data by hand', echo: 'Intake collects, verifies, posts to EHR before first visit' }, { workflow: 'AR collections', today: 'Biller sends reminders manually, often delayed or skipped', echo: 'Ledger tracks every balance and sends reminders on cadence' }, { workflow: 'Treatment scheduling', today: 'Coordinator calls or texts patients one-by-one for follow-ups', echo: 'Cal books follow-ups and reschedules via SMS' }, { workflow: 'Consent tracking', today: 'Paper chase. Missing consents found day-of treatment', echo: 'Docs flags missing consents 24h before treatment' }, { workflow: 'Collections aging', today: 'Overdue accounts surface in monthly AR review, too late', echo: 'Ledger flags every balance before it hits 30 days' }, ]; return (
Today vs. Echo {/* (Pillar section is 04 · Why Echo) */}

What changes when
agents go to work.

{[['WORKFLOW', false], ['TODAY', false], ['WITH ECHO', true]].map(([h, accent]) => (
{h}
))}
{rows.map((r, i) => (
{r.workflow}
{r.today}
{r.echo}
))}
); } // ── Vertical Teasers ────────────────────────────────────────────── // Cross-links to Echo's other industry verticals. Each card carries // its own accent so the section reads as "same shape, different domain" // at a glance — no need to read every word. function VerticalCard({ tag, accent, name, sub, body, href }) { const [hovered, setHovered] = useState(false); return ( setHovered(true)} onMouseLeave={() => setHovered(false)} style={{ position: 'relative', background: 'var(--bg)', border: `1px solid ${hovered ? accent : 'var(--hairline)'}`, borderRadius: 12, padding: '26px 24px 22px', display: 'flex', flexDirection: 'column', gap: 14, cursor: 'pointer', textDecoration: 'none', color: 'inherit', transform: hovered ? 'translateY(-3px)' : 'none', boxShadow: hovered ? `0 14px 40px ${accent}33` : 'none', transition: 'border-color 0.28s, transform 0.28s, box-shadow 0.28s', overflow: 'hidden', }} > {/* Accent corner bar — sits flush against top-left, signature mark */}
{tag}
{name}
{sub}

{body}

View
); } function VerticalTeasers() { const verticals = [ { tag: 'Carriers', accent: '#60A5FA', name: 'Carriers', sub: 'LTL · Truckload · 3PL fleets', body: 'Email, PODs, dispatch, and detention claims handled inside Teams and TruckMate.', href: '/', }, { tag: 'Oracle ERP', accent: '#0EA5E9', name: 'Oracle ERP', sub: 'Fusion · NetSuite · JD Edwards', body: 'Agents that close the books faster inside Fusion and NetSuite.', href: '/erp', }, { tag: 'Freight Brokers', accent: '#F59E0B', name: 'Freight Brokers & 3PLs', sub: 'Brokers · Tender-to-cash', body: 'Load posting, carrier check-calls, and settlement on autopilot.', href: '/freight', }, ]; return (
More verticals

Echo runs on
other stacks too.

One playbook. Carriers, finance, and brokerage.

{verticals.map(v => )}
); } // ── FAQ ─────────────────────────────────────────────────────────── // Single-open accordion. Click a question to expand its answer; opening // a new one closes the rest. Chevron rotates 180° on the open row. function FaqItem({ q, a, open, onToggle, isLast }) { return (

{a}

); } function FAQ() { const [openIdx, setOpenIdx] = useState(-1); const items = [ { q: 'How long does Echo take to deploy?', a: 'Your first agent goes live in 2 to 3 weeks. The full suite is running within 6.', }, { q: 'Does Echo replace my front-desk or AR staff?', a: 'No. Echo takes the repetitive work off your intake coordinators and AR team: insurance verification, claims follow-up, patient communications. Your team gets back to patient care.', }, { q: 'Does it integrate with my EHR or PMS?', a: 'Yes. Echo works with the major EHR and PMS platforms via API. Read-write access stays in your tenant. Your patient data never leaves your systems.', }, { q: 'What if an agent gets it wrong?', a: 'Every action needs human approval by default, and you set the confidence threshold. Atlas logs every decision with full context for your compliance audit trail.', }, { q: 'Who owns the patient data?', a: 'You do. Echo runs inside your Microsoft Azure tenant. Patient records, claims, and intake forms stay where they already live.', }, { q: 'What does it cost?', a: 'Pricing is per agent. One flat rate per agent per month. Book a demo for the number on your clinic volume.', }, ]; return (
Frequently asked

What clinic teams
usually ask.

Don't see your question? Book a call and we'll answer it directly.

{items.map((it, i) => ( setOpenIdx(openIdx === i ? -1 : i)} isLast={i === items.length - 1} /> ))}
); } // ── Solutions row (footer vertical nav) ─────────────────────────── function SolutionsRow({ current }) { const items = [ { href: '/', label: 'Carriers', key: 'carriers' }, { href: '/erp', label: 'Oracle ERP', key: 'erp' }, { href: '/freight', label: 'Freight & Logistics', key: 'freight' }, { href: '/health', label: 'Regenerative Health', key: 'health' }, ]; return (
Verticals
{items.map((v, i) => ( {v.key === current ? ( {v.label} ) : ( {v.label} )} {i < items.length - 1 && ·} ))}
); } // ── Footer ──────────────────────────────────────────────────────── function Footer() { return ( ); } Object.assign(window, { EchoLogo, Problem, Agents, HowItWorks, Comparison, VerticalTeasers, FAQ, Footer });