// agent-detail.jsx — Shared agent page template (consumes window.ECHO_AGENTS[window.AGENT_ID]) const { useState, useEffect, useRef } = React; // ── Logo ───────────────────────────────────────────────────────── function LogoMark({ size = 26 }) { // Brand mark — uses the canonical Echo logo image asset. return ( Echo ); } // ── Solutions dropdown ──────────────────────────────────────────── function SolutionsDropdownDetail() { const [open, setOpen] = useState(false); const ref = useRef(null); useEffect(() => { const close = e => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener('mousedown', close); return () => document.removeEventListener('mousedown', close); }, []); const items = [ { label: 'Oracle ERP', sub: 'Fusion · NetSuite · JD Edwards', href: '/erp' }, { label: 'Freight & Logistics', sub: 'Carriers · Brokers · 3PLs', href: '/freight' }, { label: 'Regenerative Health', sub: 'SUD · Behavioral · Clinics', href: '/health' }, ]; return (
{open && (
{items.map(item => ( setOpen(false)} style={{ display: 'flex', flexDirection: 'column', gap: 2, padding: '11px 14px', borderRadius: 8, textDecoration: 'none', color: 'inherit', transition: 'background 0.15s' }} onMouseEnter={e => e.currentTarget.style.background = 'var(--surface)'} onMouseLeave={e => e.currentTarget.style.background = 'transparent'} > {item.label} {item.sub} ))}
)}
); } // ── Nav ────────────────────────────────────────────────────────── function Nav({ theme, setTheme, scrolled }) { const links = [ { label: 'Agents', href: '../index.html#agents' }, { label: 'How It Works', href: '../index.html#how-it-works' }, ]; return ( ); } // ── Hero ───────────────────────────────────────────────────────── function AgentHero({ agent }) { const accent = agent.accent || 'var(--accent)'; return (
{/* Breadcrumb */}
e.currentTarget.style.color = 'var(--ink)'} onMouseLeave={e => e.currentTarget.style.color = 'var(--muted)'} > All agents
{agent.domain}

{agent.name}

{agent.personality && (

{agent.personality}

)}

{agent.tagline}

Channel
{agent.channel}
{agent.channelSub}
Outcome
{agent.outcome}
); } // ── Overview + Metrics ─────────────────────────────────────────── function AgentOverview({ agent }) { return (
What {agent.name} does

The work, handled.

{agent.description}

{agent.metrics.map((m, i) => (
{m.value}
{m.label}
))}
); } // ── Capabilities ───────────────────────────────────────────────── function AgentCapabilities({ agent }) { const accent = agent.accent || 'var(--accent)'; return (
Capabilities

What {agent.name} ships
out of the box.

{agent.capabilities.map((cap, i) => (
e.currentTarget.style.background = 'var(--surface)'} onMouseLeave={e => e.currentTarget.style.background = 'transparent'} >
{String(i + 1).padStart(2, '0')}

{cap.title}

{cap.body}

))}
); } // ── Workflow ───────────────────────────────────────────────────── function AgentWorkflow({ agent }) { const accent = agent.accent || 'var(--accent)'; return (
How it runs

One workflow,
start to finish.

{agent.workflow.map((w, i) => (
STEP {String(i + 1).padStart(2, '0')} {i < 3 && ( )}

{w.step}

{w.detail}

))}
); } // ── Integrations ───────────────────────────────────────────────── function AgentIntegrations({ agent }) { const accent = agent.accent || 'var(--accent)'; return (
Integrations

Plugs into your stack.

Read-write access inside your tenant. No data egress. Your systems, your audit trail.

{agent.integrations.map((name, i) => (
{name}
))}
Escalation triggers

{agent.escalations}

); } // ── Other agents ───────────────────────────────────────────────── function OtherAgents({ currentId }) { const order = window.ECHO_AGENT_ORDER; const others = order.filter(id => id !== currentId).map(id => window.ECHO_AGENTS[id]); return (
The rest of the team

Three more agents,
all on the same stack.

{ 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
{others.map(a => )}
); } function OtherAgentCard({ agent }) { const [hovered, setHovered] = useState(false); const accent = agent.accent || 'var(--accent)'; return ( setHovered(true)} onMouseLeave={() => setHovered(false)} style={{ background: 'var(--bg)', border: `1px solid ${hovered ? accent : 'var(--hairline)'}`, borderLeft: `3px solid ${hovered ? accent : 'var(--hairline)'}`, borderRadius: 12, padding: '28px 24px', display: 'flex', flexDirection: 'column', gap: 16, cursor: 'pointer', transform: hovered ? 'translateY(-3px)' : 'none', boxShadow: hovered ? `0 12px 40px ${accent}33` : 'none', transition: 'all 0.28s cubic-bezier(0.4,0,0.2,1)', textDecoration: 'none', }}>
{agent.domain.toUpperCase()}
{agent.name}
{agent.channel}

{agent.tagline}

 ); } // ── CTA ────────────────────────────────────────────────────────── function AgentCTA({ agent }) { const accent = agent.accent || 'var(--accent)'; return (

See {agent.name} at work.

A 30-minute walkthrough on your TruckMate data. No slides, no sales theater.

{ e.currentTarget.style.background = 'linear-gradient(180deg, #60A5FA 0%, #3B82F6 100%)'; e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 18px 48px rgba(37,99,235,0.65), inset 0 1px 0 rgba(255,255,255,0.3)'; e.currentTarget.querySelector('.ar').style.transform = 'translateX(4px)'; }} onMouseLeave={e => { e.currentTarget.style.background = 'linear-gradient(180deg, #3B82F6 0%, #2563EB 100%)'; e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 14px 40px rgba(37,99,235,0.5), inset 0 1px 0 rgba(255,255,255,0.22)'; e.currentTarget.querySelector('.ar').style.transform = 'translateX(0)'; }} > Get a demo { e.currentTarget.style.borderColor = accent; e.currentTarget.style.color = accent; }} onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--hairline)'; e.currentTarget.style.color = 'var(--ink)'; }} > Meet the others
); } // ── Footer ─────────────────────────────────────────────────────── function AgentFooter() { return ( ); } // ── App ────────────────────────────────────────────────────────── function AgentApp() { const agent = window.ECHO_AGENTS[window.AGENT_ID]; const [theme, setThemeState] = useState('dark'); const [scrolled, setScrolled] = useState(false); const setTheme = (fn) => setThemeState(t => typeof fn === 'function' ? fn(t) : fn); useEffect(() => { document.documentElement.setAttribute('data-theme', theme); }, [theme]); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 20); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); useEffect(() => { document.title = `${agent.name} · Echo`; }, [agent.name]); // Plate halo + scroll-reveal observers useEffect(() => { const obs = new IntersectionObserver(entries => { entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); obs.unobserve(e.target); } }); }, { threshold: 0.07 }); document.querySelectorAll('.reveal').forEach(el => obs.observe(el)); const plateObs = new IntersectionObserver(entries => { entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in-view'); plateObs.unobserve(e.target); } }); }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' }); document.querySelectorAll('.glass-plate').forEach(el => plateObs.observe(el)); return () => { obs.disconnect(); plateObs.disconnect(); }; }, []); return ( <>