// why-echo.jsx — "Why Echo" pillar section + AgentsWithDemo merged section
const { useState: useStateW, useEffect: useEffectW, useRef: useRefW } = React;

// ── Visual: Systems-Native diagram ──────────────────────────────
function SystemsVisual() {
  return (
    <div style={{ background: 'var(--bg)', border: '1px solid var(--hairline)', borderRadius: 12, padding: 28, position: 'relative', overflow: 'hidden', minHeight: 280 }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        {/* Echo agents row */}
        <div style={{ display: 'flex', gap: 8 }}>
          {['Docs', 'Ledger', 'Triage', 'Audit'].map((n, i) => (
            <div key={n} style={{ flex: 1, padding: '10px 8px', borderRadius: 8, background: 'var(--accent-dim)', border: '1px solid var(--accent)', textAlign: 'center', fontFamily: 'var(--ff-mono)', fontSize: 10, fontWeight: 600, color: 'var(--accent)', letterSpacing: '0.06em' }}>{n}</div>
          ))}
        </div>
        {/* connectors */}
        <div style={{ display: 'flex', justifyContent: 'space-around', height: 22 }}>
          {[0,1,2,3].map(i => (
            <div key={i} style={{ width: 1, height: '100%', background: 'linear-gradient(var(--accent), transparent)' }} />
          ))}
        </div>
        {/* Your System API row */}
        <div style={{ background: 'var(--surface)', border: '1px solid var(--hairline)', borderRadius: 10, padding: '14px 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div>
            <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 9, letterSpacing: '0.1em', color: 'var(--muted)', marginBottom: 4 }}>YOUR INFRASTRUCTURE</div>
            <div style={{ fontFamily: 'var(--ff-display)', fontSize: 18, fontWeight: 500, color: 'var(--ink)' }}>Oracle REST API</div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '4px 10px', borderRadius: 12, background: 'rgba(29,219,184,0.15)', border: '1px solid rgba(29,219,184,0.4)' }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#1DDBB8' }} />
            <span style={{ fontFamily: 'var(--ff-mono)', fontSize: 9, color: '#0a8569', fontWeight: 600 }}>READ + WRITE</span>
          </div>
        </div>
        {/* Endpoint chips */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6 }}>
          {['FUSION AP', 'NETSUITE', 'ORACLE AR', 'FUSION GL', 'ORACLE GRC', 'JD EDWARDS'].map(label => (
            <div key={label} style={{ padding: '6px 8px', background: 'var(--bg)', border: '1px solid var(--hairline)', borderRadius: 6, textAlign: 'center', fontFamily: 'var(--ff-mono)', fontSize: 9, color: 'var(--muted)', letterSpacing: '0.08em' }}>{label}</div>
          ))}
        </div>
      </div>
      <div style={{ position: 'absolute', top: 14, right: 14, fontFamily: 'var(--ff-mono)', fontSize: 9, color: 'var(--muted)', letterSpacing: '0.1em' }}>AZURE TENANT · YOUR DATA</div>
    </div>
  );
}

// ── Visual: Multi-channel device stack ────────────────────────────
function ChannelsVisual() {
  return (
    <div style={{ background: 'var(--bg)', border: '1px solid var(--hairline)', borderRadius: 12, padding: 24, minHeight: 280, display: 'flex', flexDirection: 'column', gap: 10 }}>
      {/* Teams row */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px', background: 'var(--surface)', borderRadius: 10, border: '1px solid var(--hairline)' }}>
        <div style={{ width: 32, height: 32, borderRadius: 8, background: '#5059C9', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, color: 'white', fontSize: 14 }}>T</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink)' }}>Microsoft Teams</div>
          <div style={{ fontSize: 11, color: 'var(--muted)' }}>Finance, AR, onboarding</div>
        </div>
        <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 9, color: 'var(--accent)', letterSpacing: '0.08em' }}>DOCS · LEDGER</div>
      </div>
      {/* Email row */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px', background: 'var(--surface)', borderRadius: 10, border: '1px solid var(--hairline)' }}>
        <div style={{ width: 32, height: 32, borderRadius: 8, background: '#0078D4', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="white"><path d="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6zm-2 0l-8 5-8-5h16zm0 12H4V8l8 5 8-5v10z"/></svg>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink)' }}>Email · ERP</div>
          <div style={{ fontSize: 11, color: 'var(--muted)' }}>Remittances, onboarding packets</div>
        </div>
        <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 9, color: 'var(--accent)', letterSpacing: '0.08em' }}>LEDGER</div>
      </div>
      {/* Slack row */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px', background: 'var(--surface)', borderRadius: 10, border: '1px solid var(--hairline)' }}>
        <div style={{ width: 32, height: 32, borderRadius: 8, background: '#4A154B', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="white"><path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z"/></svg>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink)' }}>Slack</div>
          <div style={{ fontSize: 11, color: 'var(--muted)' }}>Support, compliance</div>
        </div>
        <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 9, color: 'var(--accent)', letterSpacing: '0.08em' }}>TRIAGE · AUDIT</div>
      </div>
      {/* Call out */}
      <div style={{ marginTop: 'auto', paddingTop: 14, borderTop: '1px solid var(--hairline)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <span style={{ fontFamily: 'var(--ff-mono)', fontSize: 9, color: 'var(--muted)', letterSpacing: '0.1em' }}>RUNS INSIDE TEAMS</span>
        <span style={{ fontFamily: 'var(--ff-mono)', fontSize: 10, color: 'var(--ink)', fontWeight: 600 }}>NO NEW LICENSES</span>
      </div>
    </div>
  );
}

// ── Visual: Atlas Audit Log ───────────────────────────────────────
function AtlasVisual() {
  const entries = [
    { agent: 'DOCS',   action: 'Posted Apex Supply Co. to Fusion AP',                t: '11:42:08', conf: '0.97', kind: 'auto' },
    { agent: 'LEDGER', action: 'Matched INV-4421 · $18,400 · Oracle AR',             t: '11:39:14', conf: '0.95', kind: 'auto' },
    { agent: 'TRIAGE', action: 'Routed billing dispute · Oracle context attached',   t: '11:36:51', conf: '0.93', kind: 'auto' },
    { agent: 'AUDIT',  action: 'Pulled SOC 2 CC6.1 from Oracle GRC · binder live',   t: '11:31:02', conf: '0.98', kind: 'auto' },
    { agent: 'DOCS',   action: 'Escalated vendor packet · EIN mismatch in Oracle',   t: '11:28:46', conf: '0.61', kind: 'esc' },
  ];
  return (
    <div style={{ background: 'var(--bg)', border: '1px solid var(--hairline)', borderRadius: 12, minHeight: 280, overflow: 'hidden' }}>
      <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--hairline)', background: 'var(--surface)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#1DDBB8', animation: 'pulse 2s ease-in-out infinite' }} />
          <span style={{ fontFamily: 'var(--ff-mono)', fontSize: 10, color: 'var(--muted)', letterSpacing: '0.1em' }}>ATLAS · LIVE AUDIT LOG</span>
        </div>
        <span style={{ fontFamily: 'var(--ff-mono)', fontSize: 9, color: 'var(--muted)' }}>04 / 30 / 2026</span>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        {entries.map((e, i) => (
          <div key={i} style={{ padding: '11px 16px', borderBottom: i < entries.length - 1 ? '1px solid var(--hairline)' : 'none', display: 'grid', gridTemplateColumns: '54px 1fr auto', gap: 12, alignItems: 'center' }}>
            <span style={{ fontFamily: 'var(--ff-mono)', fontSize: 10, color: 'var(--accent)', fontWeight: 600, letterSpacing: '0.05em' }}>{e.agent}</span>
            <span style={{ fontSize: 12, color: 'var(--ink)', lineHeight: 1.4 }}>{e.action}</span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ fontFamily: 'var(--ff-mono)', fontSize: 9, color: e.kind === 'esc' ? '#C45A00' : 'var(--muted)', padding: '2px 6px', border: `1px solid ${e.kind === 'esc' ? '#C45A00' : 'var(--hairline)'}`, borderRadius: 4 }}>{e.conf}</span>
              <span style={{ fontFamily: 'var(--ff-mono)', fontSize: 9, color: 'var(--muted)' }}>{e.t}</span>
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ── Visual: Human-in-the-loop slider ──────────────────────────────
function HITLVisual() {
  const [thr, setThr] = useStateW(85);
  return (
    <div style={{ background: 'var(--bg)', border: '1px solid var(--hairline)', borderRadius: 12, padding: 24, minHeight: 280, display: 'flex', flexDirection: 'column', gap: 18 }}>
      <div>
        <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 9, letterSpacing: '0.1em', color: 'var(--muted)', marginBottom: 6 }}>LEDGER · APPROVAL THRESHOLD</div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
          <span style={{ fontFamily: 'var(--ff-display)', fontSize: 36, fontWeight: 400, color: 'var(--ink)', letterSpacing: '-0.02em' }}>{thr}%</span>
          <span style={{ fontSize: 12, color: 'var(--muted)' }}>auto-post confidence</span>
        </div>
      </div>
      <div style={{ position: 'relative', height: 6, background: 'var(--surface)', borderRadius: 3, overflow: 'hidden' }}>
        <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: `${thr}%`, background: 'var(--accent)' }} />
      </div>
      <input type="range" min="50" max="100" value={thr} onChange={e => setThr(+e.target.value)} style={{ width: '100%', accentColor: 'var(--accent)' }} />
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 'auto' }}>
        <div style={{ padding: '12px 14px', background: 'var(--surface)', borderRadius: 8, border: '1px solid var(--hairline)' }}>
          <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 9, color: 'var(--muted)', letterSpacing: '0.08em', marginBottom: 4 }}>BELOW THRESHOLD</div>
          <div style={{ fontSize: 12, color: 'var(--ink)', fontWeight: 500 }}>Routes to AR in Teams with full context</div>
        </div>
        <div style={{ padding: '12px 14px', background: 'var(--accent-dim)', borderRadius: 8, border: '1px solid var(--accent)' }}>
          <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 9, color: 'var(--accent)', letterSpacing: '0.08em', marginBottom: 4 }}>ABOVE THRESHOLD</div>
          <div style={{ fontSize: 12, color: 'var(--ink)', fontWeight: 500 }}>Auto-posts and pings you in Teams.</div>
        </div>
      </div>
    </div>
  );
}

// ── Why Echo Section ──────────────────────────────────────────────
function WhyEcho() {
  const pillars = [
    {
      eyebrow: '01 · SYSTEMS-NATIVE',
      title: 'Lives in your tenant.',
      sub: 'Your data stays in your Azure subscription.',
      body: 'Echo deploys inside your Azure subscription. Agents read and write to Fusion Cloud, NetSuite, or JD Edwards via Oracle REST APIs. ERP data never leaves your environment.',
      Visual: SystemsVisual,
    },
    {
      eyebrow: '02 · IN YOUR CHANNELS',
      title: 'Lives in Teams, Email, and Slack.',
      sub: 'Your team works where they already do.',
      body: 'Finance works in Teams. Onboarding packets arrive by email. Support tickets live in Slack. Echo shows up in the channels you already use.',
      Visual: ChannelsVisual,
    },
    {
      eyebrow: '03 · AUDITABLE',
      title: 'Every action, traceable.',
      sub: 'One timeline for finance and audit.',
      body: 'Every decision logged with the input read, confidence score, and action taken. Queryable in Teams, exportable on demand, structured for SOC 2.',
      Visual: AtlasVisual,
    },
    {
      eyebrow: '04 · HUMAN-IN-THE-LOOP',
      title: 'You set the autonomy.',
      sub: 'Tunable per agent and per workflow.',
      body: 'Set a confidence threshold per agent. Above it, agents act and post the result. Below it, they route to a human with full context and a draft reply ready.',
      Visual: HITLVisual,
    },
  ];

  return (
    <section id="why-echo" className="plate-section" style={{ padding: '40px 0' }}>
      <div className="glass-plate glass-plate--rounded plate-pad" style={{ maxWidth: 1240, margin: '0 auto', padding: '52px 56px' }}>
        <div style={{ marginBottom: 48, maxWidth: 720 }}>
          <Eyebrow>Why Echo</Eyebrow>
          <h2 style={{ fontFamily: 'var(--ff-display)', fontSize: 'clamp(32px, 3.6vw, 50px)', fontWeight: 400, letterSpacing: '-0.025em', lineHeight: 1.05, color: 'var(--ink)', marginBottom: 20 }}>
            How Echo is different.
          </h2>
          <p style={{ fontSize: 15, color: 'var(--muted)', lineHeight: 1.7, maxWidth: 480 }}>
            Built for how Oracle finance teams run.
          </p>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          {pillars.map((p, i) => (
            <PillarRow key={i} index={i} pillar={p} />
          ))}
        </div>
      </div>
    </section>
  );
}

function PillarRow({ index, pillar }) {
  const reverse = index % 2 === 1;
  const { Visual } = pillar;
  return (
    <div className={`pillar-row ${reverse ? 'pillar-row--reverse' : ''}`} style={{
      display: 'grid',
      gridTemplateColumns: reverse ? '1fr 0.85fr' : '0.85fr 1fr',
      gap: 0,
      border: '1px solid var(--hairline)',
      borderRadius: 16,
      overflow: 'hidden',
      background: 'var(--surface)',
      minHeight: 360,
    }}>
      {/* Text panel */}
      <div className="pillar-text" style={{
        order: reverse ? 2 : 1,
        padding: 'clamp(28px, 4vw, 48px)',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        gap: 18,
        borderRight: reverse ? 'none' : '1px solid var(--hairline)',
        borderLeft: reverse ? '1px solid var(--hairline)' : 'none',
      }}>
        <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.12em', color: 'var(--accent)', fontWeight: 500, textTransform: 'uppercase' }}>{pillar.eyebrow}</div>
        <h3 style={{ fontFamily: 'var(--ff-display)', fontSize: 'clamp(24px, 2.4vw, 32px)', fontWeight: 400, letterSpacing: '-0.025em', lineHeight: 1.05, color: 'var(--ink)' }}>
          {pillar.title}
        </h3>
        <p style={{ fontFamily: 'var(--ff-display)', fontStyle: 'italic', fontSize: 18, color: 'var(--muted)', fontWeight: 300, lineHeight: 1.4 }}>{pillar.sub}</p>
        <p style={{ fontSize: 14, color: 'var(--ink)', lineHeight: 1.7, maxWidth: 440 }}>{pillar.body}</p>
      </div>

      {/* Visual panel */}
      <div className="pillar-visual" style={{ order: reverse ? 1 : 2, padding: 'clamp(24px, 3vw, 40px)', background: 'var(--surface)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <div style={{ width: '100%', maxWidth: 480 }}>
          <Visual />
        </div>
      </div>
    </div>
  );
}

// ── Agents + Demo (merged, side-by-side) ──────────────────────────
// Order MUST match window.ECHO_SURFACES (Teams · Teams · Slack · Slack).
function AgentsAndDemo() {
  const [active, setActive] = useStateW(0);
  const agents = [
    { id: 'docs',   num: '01', name: 'Docs',   domain: 'Vendor & Customer Onboarding',  channel: 'Teams',         accent: '#5059C9', tagline: 'Parses W-9s and vendor packets. Posts to Fusion AP or NetSuite same day.', outcome: 'Every vendor and customer live in Oracle the same day.',    href: 'agents/docs.html' },
    { id: 'ledger', num: '02', name: 'Ledger', domain: 'AR Cash App & Close',            channel: 'Email · ERP',   accent: '#A855F7', tagline: 'Matches remittances to Oracle AR, applies cash, flags disputes, closes in Fusion GL.', outcome: '95%+ auto-applied to Oracle AR. Close in 2 days.',         href: 'agents/ledger.html' },
    { id: 'triage', num: '03', name: 'Triage', domain: 'Finance Support Triage',         channel: 'Slack · Email', accent: '#5B5FC7', tagline: 'Classifies finance tickets, pulls the Oracle record, routes with a draft reply.', outcome: 'Every ticket classified and drafted in under 60 seconds.',  href: 'agents/triage.html' },
    { id: 'audit',  num: '04', name: 'Audit',  domain: 'Audit & Evidence',               channel: 'Slack',         accent: '#0EA5E9', tagline: 'Pulls SOC 2, SOX, and audit evidence from Oracle GRC and Azure AD.', outcome: 'Same-day auditor response. 60% audit prep saved.',            href: 'agents/audit.html' },
  ];

  return (
    <section id="agents" className="plate-section" style={{ padding: '40px 0' }}>
      <div className="glass-plate glass-plate--rounded plate-pad" style={{ maxWidth: 1240, margin: '0 auto', padding: '52px 56px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 44, gap: 40, flexWrap: 'wrap' }}>
          <div>
            <Eyebrow>The agents · Live</Eyebrow>
            <h2 style={{ fontFamily: 'var(--ff-display)', fontSize: 'clamp(32px, 3.6vw, 50px)', fontWeight: 400, letterSpacing: '-0.025em', lineHeight: 1.05 }}>
              Four agents.<br />One unified back-office.
            </h2>
          </div>
        </div>

        {/* Two-column: cards left, live demo right */}
        <div className="agents-demo-grid" style={{
          display: 'grid',
          gridTemplateColumns: '380px 1fr',
          gap: 32,
          alignItems: 'stretch',
        }}>
          {/* LEFT — selectable agent cards stacked vertically */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {agents.map((a, i) => (
              <SelectableAgentCard key={a.id} a={a} active={i === active} onSelect={() => setActive(i)} />
            ))}
          </div>

          {/* RIGHT — live demo, controlled by the cards */}
          <div style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
            <HeroDemo activeIdx={active} onSelect={setActive} hideTabs={true} />
          </div>
        </div>

        <style>{`
          @media (max-width: 1024px) {
            .agents-demo-grid { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

function SelectableAgentCard({ a, active, onSelect }) {
  const [h, setH] = useStateW(false);
  const isHot = active || h;

  // The whole card is a real <a> link to the agent's dedicated page.
  // Hovering the card auto-selects this agent's demo (no click needed) so
  // primary click behavior is "open the page" — what users expect.
  const accent = a.accent || 'var(--accent)';
  return (
    <a href={a.href}
      onMouseEnter={() => { setH(true); onSelect(); }}
      onMouseLeave={() => setH(false)}
      onFocus={() => onSelect()}
      style={{
        background: active ? `${accent}14` : 'var(--bg)',
        border: `1px solid ${isHot ? accent : 'var(--hairline)'}`,
        borderLeft: `3px solid ${isHot ? accent : 'var(--hairline)'}`,
        borderRadius: 12, padding: '20px 22px',
        display: 'flex', flexDirection: 'column', gap: 10,
        cursor: 'pointer', textAlign: 'left', color: 'inherit',
        textDecoration: 'none',
        boxShadow: active ? `0 12px 40px ${accent}33` : (h ? '0 8px 24px rgba(0,0,0,0.06)' : 'none'),
        transition: 'all 0.28s cubic-bezier(0.4,0,0.2,1)',
        fontFamily: 'inherit',
      }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.1em', color: active ? accent : 'var(--muted)' }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: accent, opacity: active ? 1 : 0.55, transition: 'opacity 0.25s' }} />
          {a.num} · {a.channel.toUpperCase()}
        </span>
        {active && <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontFamily: 'var(--ff-mono)', fontSize: 9, letterSpacing: '0.12em', color: accent, textTransform: 'uppercase' }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: accent, animation: 'pulse 1.6s ease-in-out infinite', display: 'inline-block' }}></span>
          Live
        </span>}
      </div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
        <div style={{ fontFamily: 'var(--ff-display)', fontSize: 30, fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1, color: 'var(--ink)' }}>{a.name}</div>
        <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 9.5, letterSpacing: '0.1em', color: 'var(--muted)', textTransform: 'uppercase' }}>{a.domain}</div>
      </div>
      <p style={{ fontSize: 12.5, color: 'var(--muted)', lineHeight: 1.55, margin: 0 }}>{a.tagline}</p>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingTop: 10, borderTop: '1px solid var(--hairline)', gap: 12 }}>
        <span style={{ fontSize: 11.5, color: 'var(--ink)', fontWeight: 500, lineHeight: 1.4, display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }}>
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke={accent} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}><polyline points="9 18 15 12 9 6"/></svg>
          <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{a.outcome}</span>
        </span>
        <span style={{
          fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.08em',
          color: isHot ? accent : 'var(--muted)',
          textTransform: 'uppercase',
          display: 'inline-flex', alignItems: 'center', gap: 5, flexShrink: 0,
          transition: 'color 0.2s',
        }}>
          View {a.name}
          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" style={{ transform: isHot ? 'translateX(3px)' : 'none', transition: 'transform 0.25s' }}><path d="M5 12h14M12 5l7 7-7 7"/></svg>
        </span>
      </div>
    </a>
  );
}

Object.assign(window, { WhyEcho, AgentsAndDemo });
