// Orbital continuity engine + multi-access diagrams

function Architecture() {
  return (
    <section id="engine" className="section section--dark" data-screen-label="05 Continuity Engine">
      <div className="section__eyebrow">
        <span className="section__eyebrow-dot"></span>
        <span>System architecture · Continuity Engine</span>
      </div>

      <h2 className="section__title serif" style={{ color: '#F5F2EC' }}>
        One intelligence layer.<br/>
        <em style={{ fontStyle: 'italic', color: 'var(--accent-fg)' }}>Six connected motions.</em>
      </h2>

      <p className="section__lede" style={{ maxWidth: '58ch' }}>
        Jessie is not a diagnostic AI. It is a continuity loop — six operations running between every encounter, each one built for auditability, configurability, and integration with the workflows the ED already uses.
      </p>

      <OrbitalDiagram />

      {/* Integration layer band */}
      <div style={{
        marginTop: 60,
        padding: '28px 40px',
        border: '1px solid rgba(255,255,255,0.1)',
        borderRadius: 20,
        display: 'grid',
        gridTemplateColumns: '200px 1fr',
        gap: 40,
        alignItems: 'center',
      }}>
        <div>
          <div className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)', marginBottom: 6 }}>Integration layer</div>
          <div className="serif" style={{ fontSize: 24, color: '#F5F2EC', letterSpacing: '-0.01em' }}>Built for what's already there.</div>
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12 }}>
          {['FHIR R4', 'HL7 v2', 'REST APIs', 'Epic', 'Cerner', 'Meditech', 'Existing care workflows', 'SMART on FHIR', 'SSO / SAML', 'Audit + PHI logging'].map(t => (
            <span key={t} style={{
              padding: '8px 14px',
              border: '1px solid rgba(255,255,255,0.14)',
              borderRadius: 999,
              fontSize: 12,
              color: 'rgba(255,255,255,0.75)',
              fontFamily: 'var(--mono)',
              letterSpacing: '0.02em',
            }}>{t}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

function OrbitalDiagram() {
  const [hovered, setHovered] = React.useState(null);
  const nodes = [
    { id: 'collect', label: 'Collect', angle: -90, body: 'Conversational check-ins via app, facility device, or SMS. Voice, text, or tap. Configurable prompts.' },
    { id: 'compare', label: 'Compare', angle: -30, body: 'Every new response is compared against the patient\'s prior state — triage, previous check-ins, EHR baseline.' },
    { id: 'detect', label: 'Detect change', angle: 30, body: 'Meaningful change is defined by the organization: pain deltas, new symptoms, LWBS intent, custom thresholds.' },
    { id: 'structure', label: 'Structure', angle: 90, body: 'Natural language becomes structured data — codified against the organization\'s existing schema.' },
    { id: 'route', label: 'Route', angle: 150, body: 'Change is delivered into the configured workflow — priority queue, escalation, notifications, EHR entry.' },
    { id: 'followup', label: 'Follow-up loop', angle: 210, body: 'The loop closes and re-arms. Cadence adapts based on acuity, elapsed time, and prior response.' },
  ];

  const R = 240; // orbit radius
  const cx = 400, cy = 400;

  return (
    <div style={{ position: 'relative', width: '100%', maxWidth: 900, margin: '60px auto 0', aspectRatio: '1 / 1' }}>
      <svg viewBox="0 0 800 800" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
        {/* Concentric orbits */}
        <circle cx={cx} cy={cy} r={R} fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth="1" strokeDasharray="3 5"/>
        <circle cx={cx} cy={cy} r={R - 60} fill="none" stroke="rgba(255,255,255,0.05)" strokeWidth="1"/>
        <circle cx={cx} cy={cy} r={R + 90} fill="none" stroke="rgba(255,255,255,0.04)" strokeWidth="1" strokeDasharray="2 8"/>

        {/* Connecting arcs from each node to center */}
        {nodes.map((n, i) => {
          const rad = (n.angle * Math.PI) / 180;
          const nx = cx + R * Math.cos(rad);
          const ny = cy + R * Math.sin(rad);
          const active = hovered === n.id;
          return (
            <line
              key={n.id}
              x1={nx} y1={ny} x2={cx} y2={cy}
              stroke={active ? 'var(--accent)' : 'rgba(255,255,255,0.1)'}
              strokeWidth={active ? 1.5 : 1}
              strokeDasharray={active ? "" : "2 4"}
              style={{ transition: 'all 200ms ease' }}
            />
          );
        })}

        {/* Center — Jessie Core */}
        <circle cx={cx} cy={cy} r="90" fill="rgba(245,242,236,0.03)" stroke="rgba(245,242,236,0.15)" strokeWidth="1"/>
        <circle cx={cx} cy={cy} r="66" fill="#0E1116" stroke="var(--accent)" strokeWidth="1.5"/>

        {/* Center label */}
        <text x={cx} y={cy - 6} textAnchor="middle" fill="#F5F2EC" style={{ fontFamily: 'var(--serif)', fontSize: 24, letterSpacing: '-0.01em' }}>Jessie</text>
        <text x={cx} y={cy + 14} textAnchor="middle" fill="rgba(255,255,255,0.55)" style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase' }}>Core</text>
        <text x={cx} y={cy + 30} textAnchor="middle" fill="var(--accent)" style={{ fontFamily: 'var(--mono)', fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase' }}>Continuity Engine</text>

        {/* Nodes */}
        {nodes.map((n, i) => {
          const rad = (n.angle * Math.PI) / 180;
          const nx = cx + R * Math.cos(rad);
          const ny = cy + R * Math.sin(rad);
          const active = hovered === n.id;
          return (
            <g key={n.id}
               onMouseEnter={() => setHovered(n.id)}
               onMouseLeave={() => setHovered(null)}
               style={{ cursor: 'pointer' }}
            >
              <circle cx={nx} cy={ny} r="46" fill={active ? 'var(--accent)' : '#1A1E27'} stroke={active ? 'var(--accent)' : 'rgba(255,255,255,0.2)'} strokeWidth="1" style={{ transition: 'all 200ms ease' }}/>
              <text x={nx} y={ny - 2} textAnchor="middle" fill={active ? 'white' : '#F5F2EC'} style={{ fontFamily: 'var(--mono)', fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase' }}>
                {`0${i+1}`}
              </text>
              <text x={nx} y={ny + 14} textAnchor="middle" fill={active ? 'white' : '#F5F2EC'} style={{ fontFamily: 'var(--serif)', fontSize: 15, letterSpacing: '-0.01em' }}>
                {n.label}
              </text>
            </g>
          );
        })}

        {/* Rotating direction arrow */}
        <path
          d={`M ${cx + R + 30} ${cy} A ${R + 30} ${R + 30} 0 0 1 ${cx + (R + 30) * Math.cos(0.3)} ${cy + (R + 30) * Math.sin(0.3)}`}
          fill="none" stroke="var(--accent)" strokeWidth="1.2" strokeLinecap="round"
        />
      </svg>

      {/* Node detail on hover — floating panel */}
      <div style={{
        position: 'absolute',
        left: '50%',
        bottom: -140,
        transform: 'translateX(-50%)',
        width: 460,
        padding: '20px 24px',
        border: '1px solid rgba(255,255,255,0.12)',
        borderRadius: 16,
        background: 'rgba(20,24,32,0.6)',
        backdropFilter: 'blur(8px)',
        textAlign: 'center',
        opacity: hovered ? 1 : 0.5,
        transition: 'opacity 200ms ease',
      }}>
        <div className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: hovered ? 'var(--accent)' : 'rgba(255,255,255,0.4)', marginBottom: 6 }}>
          {hovered ? nodes.find(n => n.id === hovered).label : 'Hover a node to inspect'}
        </div>
        <div style={{ fontSize: 14, color: hovered ? 'rgba(255,255,255,0.85)' : 'rgba(255,255,255,0.5)', lineHeight: 1.5, textWrap: 'pretty' }}>
          {hovered ? nodes.find(n => n.id === hovered).body : 'Each operation is auditable, configurable per organization, and integrates with existing systems.'}
        </div>
      </div>
    </div>
  );
}

/* ============================================
   Multi-access diagram
   ============================================ */

function MultiAccess() {
  return (
    <section id="access" className="section" data-screen-label="06 Multi-Access">
      <div className="section__eyebrow">
        <span className="section__eyebrow-dot"></span>
        <span>Access points · One engine, many surfaces</span>
      </div>

      <h2 className="section__title serif">
        Meet the patient where they are.
      </h2>

      <p className="section__lede">
        The app is the primary surface. Continuity shouldn't depend on a patient owning a phone — Jessie also runs on shared facility devices and secure SMS. All three connect to the same continuity engine, which speaks to the customer's existing Epic estate through published integration surfaces.
      </p>

      {/* ────── Three-lane architecture ────── */}
      <div style={{
        padding: '32px 32px 24px',
        background: 'var(--bg-elevated)',
        border: '1px solid var(--line-1)',
        borderRadius: 20,
      }}>

        {/* Target-architecture status callout */}
        <div style={{
          padding: '14px 18px',
          background: 'var(--accent-tint)',
          border: '1px solid rgba(212,255,58,0.4)',
          borderRadius: 12,
          marginBottom: 28,
          display: 'grid',
          gridTemplateColumns: '160px 1fr',
          gap: 20,
          alignItems: 'center',
        }}>
          <div className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--accent-ink)', fontWeight: 700 }}>
            Status · Read this first
          </div>
          <div style={{ fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.5 }}>
            <strong style={{ color: 'var(--ink-1)' }}>Proposed target architecture.</strong> No Epic environment connected to date. Designed with HIPAA-aligned safeguards; BAA at contracting.
          </div>
        </div>

        {/* Lane headers */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr 1fr', gap: 24, marginBottom: 14 }}>
          <LaneHeader label="Patient surfaces" />
          <LaneHeader label={<>Atronics · Jessie platform <span style={{ color: 'var(--accent-ink)', fontWeight: 700 }}>— vendor side</span></>} />
          <LaneHeader label="Epic EHR — customer side" />
        </div>

        {/* Lane content */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1.4fr 1fr',
          gap: 24,
          alignItems: 'stretch',
        }}>

          {/* ────── LANE 1: PATIENT SURFACES ────── */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <ArchNode
              icon="phone"
              tag="Primary"
              title="Jessie app"
              body="iOS · Android · TLS 1.3 · OAuth 2.0 + PKCE"
            />
            <ArchNode
              icon="tablet"
              tag="Facility"
              title="Shared device"
              body="Kiosk client, MDM-managed · auto-wipe on handoff"
            />
            <ArchNode
              icon="sms"
              tag="Fallback"
              title="Secure messaging"
              body="Two-way SMS · no app install needed"
            />
          </div>

          {/* ────── LANE 2: JESSIE PLATFORM ────── */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <ArchNode
              icon="gateway"
              tag="A · Ingress"
              title="Jessie API gateway"
              inline="TLS termination · tenant routing · rate limits · WAF"
            />
            <ArchNode
              icon="jessie"
              tag="B · Continuity engine · Our core IP"
              title="Jessie"
              accent
              body={<>
                <div style={{ marginBottom: 12 }}>
                  Collect → compare vs. prior state → detect meaningful Δ → structure to FHIR → route to care team
                </div>

                {/* How the change gets detected — two-layer stack */}
                <div style={{
                  padding: '10px 12px',
                  background: 'rgba(10,10,10,0.04)',
                  border: '1px solid rgba(10,10,10,0.14)',
                  borderRadius: 8,
                  marginBottom: 10,
                }}>
                  <div style={{
                    fontFamily: 'var(--mono)',
                    fontSize: 9.5,
                    letterSpacing: '0.14em',
                    textTransform: 'uppercase',
                    color: 'var(--ink-3)',
                    fontWeight: 700,
                    marginBottom: 8,
                  }}>
                    How the change gets detected
                  </div>
                  <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '6px 10px', fontSize: 12, lineHeight: 1.45 }}>
                    <div style={{ fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--accent-ink)', fontWeight: 700, letterSpacing: '0.06em', paddingTop: 1 }}>L1 · Rules</div>
                    <div style={{ color: 'var(--ink-2)' }}>Org-configured thresholds (Δpain ≥ 2, red-flag symptom set, elapsed-time rules)</div>
                    <div style={{ fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--accent-ink)', fontWeight: 700, letterSpacing: '0.06em', paddingTop: 1 }}>L2 · Model</div>
                    <div style={{ color: 'var(--ink-2)' }}>Symptom extraction + rationale trace on free text · fine-tuned open-weights or BAA'd API, per deployment</div>
                    <div style={{ fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--accent-ink)', fontWeight: 700, letterSpacing: '0.06em', paddingTop: 1 }}>Runtime</div>
                    <div style={{ color: 'var(--ink-2)' }}>On-prem inference OR BAA'd vendor · PHI never leaves the tenant boundary</div>
                  </div>
                </div>

                <div style={{ paddingTop: 10, borderTop: '1px solid rgba(10,10,10,0.14)', fontSize: 12, color: 'var(--ink-3)' }}>
                  <strong style={{ color: 'var(--ink-1)' }}>Guardrail:</strong> no autonomous action. Rationale trace on every update; human review required on the Epic side. Red-flag symptoms bypass In Basket and page a nurse directly.
                </div>
              </>}
            />
            <ArchNode
              icon="lock"
              tag="C · Auth layer"
              title="SMART on FHIR client"
              inline="standalone launch · backend OAuth 2.0 + JWT"
            />
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
              <ArchMini icon="vault"   tag="D" label="Encrypted at rest" />
              <ArchMini icon="audit"   tag="E" label="Immutable audit log" />
              <ArchMini icon="console" tag="F" label="Admin console" note="customer-owned" />
            </div>
          </div>

          {/* ────── LANE 3: EPIC EHR ────── */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <ArchNode
              icon="registration"
              tag="G · Registration"
              title="Vendor Services · Showroom"
              inline="app registration · scope approval"
            />
            <ArchNode
              icon="interconnect"
              tag="H · Gateway"
              title="Interconnect"
              body="Customer-hosted TLS + OAuth gateway in front of Chronicles · US Core 6.1.0"
            />
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
              <ArchNode
                compact
                icon="hyperspace"
                tag="I · Clinician surface"
                title="Hyperspace"
                body="Launch, authenticate, enroll"
              />
              <ArchNode
                compact
                icon="database"
                tag="J · Data"
                title="FHIR R4 server"
                body="GET Patient, Encounter"
              />
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
              <ArchNode
                compact
                icon="hl7"
                tag="K · Fallback"
                title="HL7 v2"
                body="For sites without a FHIR write path"
              />
              <ArchNode
                compact
                icon="inbox"
                tag="L · Clinician output"
                title="In Basket"
                body="Where every update lands for human review"
                dark
              />
            </div>
          </div>
        </div>
      </div>

      {/* ────── Six-step path strip ────── */}
      <div style={{ marginTop: 24 }}>
        <div className="mono" style={{ fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--ink-4)', marginBottom: 14, fontWeight: 600 }}>
          The path, in six steps
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 12 }}>
          <PathStep n={1} label="Patient sends an update" />
          <PathStep n={2} label="Jessie gateway ingests it" />
          <PathStep n={3} label="Engine structures the Δ" hero />
          <PathStep n={4} label="OAuth 2.0 authorizes" />
          <PathStep n={5} label="Epic context is set" />
          <PathStep n={6} label="A clinician reviews it" />
        </div>
      </div>

      {/* Footer note — matches the reference sample */}
      <div className="mono" style={{
        fontSize: 10,
        letterSpacing: '0.06em',
        color: 'var(--ink-4)',
        textTransform: 'uppercase',
        marginTop: 20,
        lineHeight: 1.5,
      }}>
        Epic-side components (G–L) reflect published Epic developer documentation, Aug 2026 · Jessie components (A–F) are Atronics' own design and not independently verifiable · Target state, not a live integration
      </div>
    </section>
  );
}

/* ────── Sub-components for the architecture diagram ────── */

function LaneHeader({ label }) {
  return (
    <div style={{
      paddingBottom: 10,
      borderBottom: '1px solid var(--line-2)',
      fontFamily: 'var(--mono)',
      fontSize: 11,
      letterSpacing: '0.16em',
      textTransform: 'uppercase',
      color: 'var(--ink-3)',
      fontWeight: 600,
    }}>
      {label}
    </div>
  );
}

function ArchNode({ tag, title, body, inline, accent, dark, compact, icon }) {
  const styleBase = {
    padding: compact ? '12px 14px' : '16px 18px',
    background: dark ? 'var(--ink-1)' : accent ? 'var(--accent-tint)' : 'var(--bg-card)',
    color: dark ? 'var(--bg-elevated)' : 'var(--ink-1)',
    border: accent
      ? '1.5px solid var(--accent)'
      : dark
        ? '1.5px solid var(--ink-1)'
        : '1px solid var(--line-1)',
    borderRadius: 12,
  };
  const tagColor = dark
    ? 'var(--accent)'
    : accent
      ? 'var(--accent-ink)'
      : 'var(--ink-4)';
  return (
    <div style={styleBase}>
      {/* Top row — icon chip + tag */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
        {icon && <ArchIcon icon={icon} accent={accent} dark={dark} compact={compact} />}
        <div className="mono" style={{
          fontSize: 9.5,
          letterSpacing: '0.16em',
          textTransform: 'uppercase',
          color: tagColor,
          fontWeight: 700,
        }}>
          {tag}
        </div>
      </div>
      <div style={{
        fontSize: compact ? 14 : 17,
        fontWeight: 600,
        color: dark ? 'var(--bg-elevated)' : 'var(--ink-1)',
        letterSpacing: '-0.005em',
        marginBottom: inline ? 0 : (body ? 6 : 0),
      }}>
        {title}
        {inline && (
          <span style={{
            fontSize: 12,
            fontWeight: 400,
            color: dark ? 'rgba(255,255,255,0.7)' : 'var(--ink-3)',
            marginLeft: 8,
            fontFamily: 'var(--mono)',
            letterSpacing: '0.01em',
          }}>
            · {inline}
          </span>
        )}
      </div>
      {body && (
        <div style={{
          fontSize: 12.5,
          color: dark ? 'rgba(255,255,255,0.72)' : 'var(--ink-3)',
          lineHeight: 1.5,
        }}>
          {body}
        </div>
      )}
    </div>
  );
}

/* Small inline SVG icons rendered inside a rounded chip.
   Consistent 32×32 chip, 18×18 line-icon inside — matches the
   surface-icon language from earlier iterations of this section. */
function ArchIcon({ icon, accent, dark, compact }) {
  const chipSize = compact ? 28 : 32;
  const chipStyle = {
    width: chipSize,
    height: chipSize,
    borderRadius: 8,
    display: 'grid',
    placeItems: 'center',
    background: dark ? 'rgba(255,255,255,0.08)' : accent ? 'rgba(10,10,10,0.06)' : 'var(--bg-inset)',
    flexShrink: 0,
  };
  const stroke = dark ? 'var(--bg-elevated)' : 'var(--ink-1)';
  const iconSize = compact ? 16 : 18;
  const common = { width: iconSize, height: iconSize, viewBox: '0 0 24 24', fill: 'none', stroke, strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' };
  const glyph = {
    /* Patient surfaces */
    phone: (
      <svg {...common}>
        <rect x="6" y="2" width="12" height="20" rx="3"/>
        <line x1="10" y1="18.5" x2="14" y2="18.5"/>
      </svg>
    ),
    tablet: (
      <svg {...common}>
        <rect x="3" y="4" width="18" height="15" rx="2"/>
        <line x1="3" y1="16" x2="21" y2="16"/>
        <line x1="10" y1="21" x2="14" y2="21"/>
      </svg>
    ),
    sms: (
      <svg {...common}>
        <path d="M4 5C4 3.9 4.9 3 6 3H18C19.1 3 20 3.9 20 5V14C20 15.1 19.1 16 18 16H9L5 20V5Z"/>
        <circle cx="9" cy="10" r="0.9" fill={stroke} stroke="none"/>
        <circle cx="12" cy="10" r="0.9" fill={stroke} stroke="none"/>
        <circle cx="15" cy="10" r="0.9" fill={stroke} stroke="none"/>
      </svg>
    ),
    /* Jessie platform */
    gateway: (
      <svg {...common}>
        <path d="M3 12h4l2-3 6 6 2-3h4"/>
      </svg>
    ),
    jessie: (
      /* The delta glyph — matches the product's core symbol */
      <svg {...common}>
        <path d="M12 4L20 20H4L12 4Z"/>
      </svg>
    ),
    lock: (
      <svg {...common}>
        <rect x="5" y="10" width="14" height="10" rx="2"/>
        <path d="M8 10V7a4 4 0 018 0v3"/>
      </svg>
    ),
    vault: (
      <svg {...common}>
        <rect x="3" y="5" width="18" height="14" rx="2"/>
        <circle cx="12" cy="12" r="3.5"/>
        <line x1="12" y1="12" x2="12" y2="8"/>
      </svg>
    ),
    audit: (
      <svg {...common}>
        <path d="M6 3h9l4 4v14a1 1 0 01-1 1H6a1 1 0 01-1-1V4a1 1 0 011-1z"/>
        <path d="M15 3v4h4"/>
        <line x1="8" y1="12" x2="16" y2="12"/>
        <line x1="8" y1="16" x2="14" y2="16"/>
      </svg>
    ),
    console: (
      <svg {...common}>
        <rect x="3" y="4" width="18" height="16" rx="2"/>
        <path d="M7 10l3 2-3 2"/>
        <line x1="13" y1="15" x2="17" y2="15"/>
      </svg>
    ),
    /* Epic side */
    registration: (
      <svg {...common}>
        <path d="M12 2l3 3-3 3-3-3 3-3z"/>
        <path d="M7 12a5 5 0 0110 0v6a2 2 0 01-2 2H9a2 2 0 01-2-2v-6z"/>
      </svg>
    ),
    interconnect: (
      <svg {...common}>
        <circle cx="6" cy="12" r="2.5"/>
        <circle cx="18" cy="12" r="2.5"/>
        <circle cx="12" cy="6" r="2.5"/>
        <circle cx="12" cy="18" r="2.5"/>
        <line x1="8.5" y1="12" x2="15.5" y2="12"/>
        <line x1="12" y1="8.5" x2="12" y2="15.5"/>
      </svg>
    ),
    hyperspace: (
      <svg {...common}>
        <rect x="3" y="4" width="18" height="14" rx="2"/>
        <line x1="3" y1="9" x2="21" y2="9"/>
        <line x1="9" y1="18" x2="15" y2="18"/>
        <line x1="12" y1="18" x2="12" y2="21"/>
      </svg>
    ),
    database: (
      <svg {...common}>
        <ellipse cx="12" cy="6" rx="7" ry="2.5"/>
        <path d="M5 6v6c0 1.4 3.1 2.5 7 2.5s7-1.1 7-2.5V6"/>
        <path d="M5 12v6c0 1.4 3.1 2.5 7 2.5s7-1.1 7-2.5v-6"/>
      </svg>
    ),
    hl7: (
      <svg {...common}>
        <path d="M4 8h4l3 8 3-12 3 8h3"/>
      </svg>
    ),
    inbox: (
      <svg {...common}>
        <path d="M4 13l2-8h12l2 8"/>
        <path d="M4 13v6a1 1 0 001 1h14a1 1 0 001-1v-6"/>
        <path d="M4 13h5l1 2h4l1-2h5"/>
      </svg>
    ),
  };
  return <div style={chipStyle}>{glyph[icon] || null}</div>;
}

function ArchMini({ tag, label, note, icon }) {
  return (
    <div style={{
      padding: '10px 12px',
      background: 'var(--bg-card)',
      border: '1px solid var(--line-1)',
      borderRadius: 10,
      display: 'flex',
      gap: 10,
      alignItems: 'center',
    }}>
      {icon && <ArchIcon icon={icon} compact />}
      <div style={{ minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 2 }}>
          <span className="mono" style={{ fontSize: 9.5, color: 'var(--ink-4)', fontWeight: 700, letterSpacing: '0.08em' }}>
            {tag}
          </span>
          <span style={{ fontSize: 12.5, color: 'var(--ink-1)', fontWeight: 500 }}>
            {label}
          </span>
        </div>
        {note && (
          <div className="mono" style={{ fontSize: 10, color: 'var(--ink-4)', letterSpacing: '0.02em' }}>
            {note}
          </div>
        )}
      </div>
    </div>
  );
}

function PathStep({ n, label, hero }) {
  return (
    <div style={{
      padding: '14px 14px',
      background: hero ? 'var(--accent-tint)' : 'var(--bg-card)',
      border: hero ? '1.5px solid var(--accent)' : '1px solid var(--line-1)',
      borderRadius: 10,
      display: 'flex',
      gap: 12,
      alignItems: 'flex-start',
    }}>
      <div style={{
        flexShrink: 0,
        width: 22,
        height: 22,
        borderRadius: 999,
        background: hero ? 'var(--ink-1)' : 'var(--bg-inset)',
        color: hero ? 'var(--accent)' : 'var(--ink-2)',
        fontFamily: 'var(--mono)',
        fontSize: 11,
        fontWeight: 700,
        display: 'grid',
        placeItems: 'center',
      }}>
        {n}
      </div>
      <div style={{
        fontSize: 12.5,
        color: 'var(--ink-1)',
        lineHeight: 1.35,
        fontWeight: hero ? 600 : 500,
      }}>
        {label}
      </div>
    </div>
  );
}

function SurfaceCard({ icon, label, title, body, examples }) {
  return (
    <div style={{
      padding: '28px 24px',
      background: 'var(--bg-card)',
      border: '1px solid var(--line-1)',
      borderRadius: 18,
      display: 'flex',
      flexDirection: 'column',
      gap: 16,
      minHeight: 300,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <SurfaceIcon icon={icon} />
        <span className="pill pill--neutral" style={{ fontSize: 9 }}>
          <span className="pill__dot"></span>
          {label}
        </span>
      </div>
      <div>
        <div className="serif" style={{ fontSize: 26, letterSpacing: '-0.01em', marginBottom: 6 }}>{title}</div>
        <p style={{ fontSize: 13, color: 'var(--ink-3)', lineHeight: 1.5, margin: 0 }}>{body}</p>
      </div>
      <div style={{ marginTop: 'auto', display: 'flex', flexWrap: 'wrap', gap: 6 }}>
        {examples.map(e => (
          <span key={e} style={{
            fontSize: 10.5,
            padding: '4px 8px',
            background: 'var(--bg-inset)',
            borderRadius: 6,
            color: 'var(--ink-3)',
            fontFamily: 'var(--mono)',
            letterSpacing: '0.01em',
          }}>{e}</span>
        ))}
      </div>
    </div>
  );
}

function SurfaceIcon({ icon }) {
  const box = { width: 44, height: 44, borderRadius: 12, background: 'var(--bg-inset)', display: 'grid', placeItems: 'center' };
  if (icon === 'app') {
    return (
      <div style={box}>
        <svg width="20" height="26" viewBox="0 0 20 26" fill="none">
          <rect x="1" y="1" width="18" height="24" rx="4" stroke="var(--ink-1)" strokeWidth="1.5"/>
          <circle cx="10" cy="21" r="1" fill="var(--ink-1)"/>
          <line x1="8" y1="4" x2="12" y2="4" stroke="var(--ink-1)" strokeWidth="1" strokeLinecap="round"/>
        </svg>
      </div>
    );
  }
  if (icon === 'device') {
    return (
      <div style={box}>
        <svg width="26" height="22" viewBox="0 0 26 22" fill="none">
          <rect x="1" y="1" width="24" height="18" rx="2.5" stroke="var(--ink-1)" strokeWidth="1.5"/>
          <line x1="1" y1="18" x2="25" y2="18" stroke="var(--ink-1)" strokeWidth="1.5"/>
          <line x1="10" y1="21" x2="16" y2="21" stroke="var(--ink-1)" strokeWidth="1.5" strokeLinecap="round"/>
        </svg>
      </div>
    );
  }
  return (
    <div style={box}>
      <svg width="24" height="20" viewBox="0 0 24 20" fill="none">
        <path d="M2 4C2 2.9 2.9 2 4 2H20C21.1 2 22 2.9 22 4V14C22 15.1 21.1 16 20 16H8L4 19V4Z" stroke="var(--ink-1)" strokeWidth="1.5" strokeLinejoin="round"/>
        <circle cx="8" cy="9" r="1" fill="var(--ink-1)"/>
        <circle cx="12" cy="9" r="1" fill="var(--ink-1)"/>
        <circle cx="16" cy="9" r="1" fill="var(--ink-1)"/>
      </svg>
    </div>
  );
}

function DownstreamStep({ label, primary }) {
  return (
    <div style={{
      padding: '10px 22px',
      background: primary ? 'var(--accent)' : 'var(--bg-card)',
      color: primary ? 'white' : 'var(--ink-2)',
      border: primary ? 'none' : '1px solid var(--line-2)',
      borderRadius: 999,
      fontSize: 12,
      fontFamily: 'var(--mono)',
      letterSpacing: '0.08em',
      textTransform: 'uppercase',
      fontWeight: 600,
    }}>
      {label}
    </div>
  );
}

window.Architecture = Architecture;
window.MultiAccess = MultiAccess;
