// agent-detail.jsx — Shared agent page template (consumes window.ECHO_AGENTS[window.AGENT_ID]) const { useState, useEffect, useRef } = React; // ── Logo ───────────────────────────────────────────────────────── function LogoMark({ size = 26 }) { const w = size * (24 / 28); return ( ); } // ── Nav ────────────────────────────────────────────────────────── function Nav({ theme, setTheme, scrolled }) { const links = [ { label: 'Agents', href: '../index.html#agents' }, { label: 'How It Works', href: '../index.html#how-it-works' }, { label: 'About', href: '#' }, ]; 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 in your own tenant. No data egress. Your TruckMate, your Azure, 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 commitment, 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({ theme, setTheme }) { const links = { Product: ['Agents', 'How It Works', 'Changelog'], Company: ['About', 'Contact', 'Privacy', 'Terms'], }; 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 Maritime`; }, [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 ( <>