// H2Learn — Match Detail screen
// Three layouts: Side-by-side · Narrative · Signal dashboard

(function() {
  const D = window.H2Data;
  const { useState } = React;

  const MatchScreen = () => {
    const [layout, setLayout] = useState('side');
    const [matchId, setMatchId] = useState('m_01');
    const match = D.MATCHES.find(m => m.id === matchId) || D.MATCHES[0];
    const a = D.byId(match.a), b = D.byId(match.b);
    const ka = D.kindOf(match.a), kb = D.kindOf(match.b);
    const meta = window.RelMeta[match.type] || window.RelMeta.Similarity;

    return (
      <div className="col" style={{padding: '32px 40px', gap: 24, maxWidth: 1400, margin: '0 auto'}}>

        {/* breadcrumb */}
        <div className="row items-center gap-2" style={{fontSize:'var(--t-xs)', color:'var(--ink-3)', textTransform:'uppercase', letterSpacing:'0.1em'}}>
          <a href="#dashboard" style={{color:'inherit'}}>Dashboard</a>
          <Icon name="chevronRight" size={11}/>
          <a href="#network" style={{color:'inherit'}}>Network</a>
          <Icon name="chevronRight" size={11}/>
          <span style={{color:'var(--ink)'}}>Match · {a?.name} × {b?.name}</span>
        </div>

        {/* === HEADER === */}
        <Card variant="elevated" style={{padding: 28}}>
          <div className="row items-start justify-between gap-6 flex-wrap">
            <div className="col gap-3" style={{flex: '1 1 480px'}}>
              <div className="row items-center gap-2">
                <RelChip type={match.type} size="lg"/>
                {match.curated && <Badge level="curated">Curator-reviewed</Badge>}
                <Badge level={match.confidence > 0.9 ? 'high' : match.confidence > 0.75 ? 'med' : 'low'}>
                  Confidence {Math.round(match.confidence*100)}%
                </Badge>
              </div>
              <h1 style={{fontFamily:'var(--font-display)', fontSize: 'var(--t-3xl)', fontWeight: 400, margin: 0, letterSpacing:'-0.015em', lineHeight: 1.1}}>
                {a?.name} <span style={{color:'var(--ink-3)'}}>×</span> {b?.name}
              </h1>
              <div className="row items-center gap-3" style={{fontSize:'var(--t-sm)', color:'var(--ink-3)'}}>
                <span>{a?.role || a?.type} · {a?.org}</span>
                <span style={{color:'var(--line-2)'}}>—</span>
                <span>{b?.role || b?.type} · {b?.org}</span>
              </div>
              <p style={{fontSize:'var(--t-md)', color:'var(--ink-2)', lineHeight: 1.55, margin: '8px 0 0', maxWidth: 700}}>{match.summary}</p>
            </div>

            <div className="row items-center gap-4" style={{flex: '0 0 auto'}}>
              <ScoreRing value={match.score} color={meta.color} sub="match score"/>
              <div className="col gap-1" style={{minWidth: 130}}>
                <Btn variant="accent" icon="send">Send signal</Btn>
                <div className="row gap-1">
                  <Btn variant="ghost" size="sm" icon="bookmark" className="icon"/>
                  <Btn variant="ghost" size="sm" icon="layers" className="icon"/>
                  <Btn variant="ghost" size="sm" icon="x" className="icon"/>
                </div>
                <Btn variant="ghost" size="sm" icon="arrowUpRight" onClick={() => location.hash='network'} style={{justifyContent:'center'}}>Open in network</Btn>
              </div>
            </div>
          </div>
        </Card>

        {/* layout switcher */}
        <div className="row items-center justify-between flex-wrap gap-3">
          <div className="row items-center gap-2">
            <span style={{fontSize:'var(--t-xs)', color:'var(--ink-3)', textTransform:'uppercase', letterSpacing:'0.1em'}}>Match view</span>
            <div className="segmented">
              <button className={layout==='side'?'on':''} onClick={() => setLayout('side')}>Side-by-side</button>
              <button className={layout==='narrative'?'on':''} onClick={() => setLayout('narrative')}>Narrative</button>
              <button className={layout==='signals'?'on':''} onClick={() => setLayout('signals')}>Signal dashboard</button>
            </div>
          </div>
          <div className="row items-center gap-2">
            <span style={{fontSize:'var(--t-xs)', color:'var(--ink-3)'}}>Switch match:</span>
            <select className="select" value={matchId} onChange={e => setMatchId(e.target.value)} style={{width:'auto'}}>
              {D.MATCHES.map(m => {
                const ax = D.byId(m.a), bx = D.byId(m.b);
                return <option key={m.id} value={m.id}>{ax?.name} × {bx?.name} — {m.type} {m.score}%</option>;
              })}
            </select>
          </div>
        </div>

        {/* === Body — pick layout === */}
        {layout === 'side' && <SideLayout match={match} a={a} b={b} ka={ka} kb={kb}/>}
        {layout === 'narrative' && <NarrativeLayout match={match} a={a} b={b}/>}
        {layout === 'signals' && <SignalsLayout match={match} a={a} b={b} ka={ka} kb={kb}/>}

        {/* === Path preview · footer === */}
        <Card>
          <div className="row items-center justify-between flex-wrap gap-4">
            <div className="col gap-1">
              <div className="eyebrow">Connection in network</div>
              <h3 className="card-title">Why these two are linked through the graph</h3>
            </div>
            <Btn variant="ghost" icon="arrowUpRight" onClick={() => location.hash='network'}>Open shortest path</Btn>
          </div>
          <div style={{marginTop: 16}}>
            <PathStrip a={a} ka={ka} b={b} kb={kb}/>
          </div>
        </Card>

        <div className="row gap-3 flex-wrap" style={{justifyContent:'center', padding: 24}}>
          <Btn variant="accent" icon="send">Send introduction</Btn>
          <Btn variant="ghost" icon="bookmark">Save for later</Btn>
          <Btn variant="ghost" icon="layers">Compare profiles</Btn>
          <Btn variant="ghost" icon="bot">Request curator review</Btn>
          <Btn variant="ghost" icon="x">Dismiss</Btn>
        </div>
      </div>
    );
  };

  // ============ Side-by-side layout ============
  const SideLayout = ({match, a, b, ka, kb}) => (
    <div className="grid cols-12" style={{gap: 16}}>
      <div className="col-span-4"><EntityPanel e={a} kind={ka} side="A" match={match} other={b}/></div>
      <div className="col-span-4"><WhyPanel match={match}/></div>
      <div className="col-span-4"><EntityPanel e={b} kind={kb} side="B" match={match} other={a}/></div>
    </div>
  );

  const EntityPanel = ({e, kind, side, match, other}) => {
    const isPerson = kind === 'person';
    const sharedDomains = (e.domains || []).filter(d => (other.domains || []).includes(d));
    const sharedMethods = (e.methods || []).filter(m => (other.methods || []).includes(m));
    return (
      <Card style={{padding: 22}}>
        <div className="col gap-4">
          <div className="row items-center gap-3">
            <Avatar initials={e.initials} kind={kind} size="lg"/>
            <div className="col">
              <div className="eyebrow">Entity {side}</div>
              <div style={{fontFamily:'var(--font-display)', fontSize: 22, lineHeight: 1.1, letterSpacing:'-0.015em'}}>{e.name}</div>
              <div style={{fontSize:'var(--t-sm)', color:'var(--ink-3)', marginTop: 2}}>{e.role || e.type} · {e.org}</div>
            </div>
          </div>

          {e.fingerprint && (
            <div className="col gap-2">
              <div className="label-hr">Top expertise</div>
              <Fingerprint data={e.fingerprint.slice(0,5)} compact/>
            </div>
          )}

          {e.domains && (
            <div className="col gap-2">
              <div className="label-hr">Domains</div>
              <div className="row gap-1 flex-wrap">
                {e.domains.slice(0,6).map(d => (
                  <Chip key={d} variant={sharedDomains.includes(d)?'accent':'outline'}>
                    {sharedDomains.includes(d) && <Icon name="check" size={10}/>}
                    {d}
                  </Chip>
                ))}
              </div>
            </div>
          )}

          {e.methods && (
            <div className="col gap-2">
              <div className="label-hr">Methods</div>
              <div className="row gap-1 flex-wrap">
                {e.methods.map(m => (
                  <Chip key={m} variant={sharedMethods.includes(m)?'accent':'outline'} size="xs">
                    {sharedMethods.includes(m) && <Icon name="check" size={9}/>}
                    {m}
                  </Chip>
                ))}
              </div>
            </div>
          )}

          {e.needs && e.needs.length > 0 && (
            <div className="col gap-2">
              <div className="label-hr">Needs</div>
              <div className="col gap-1">
                {e.needs.map((n,i) => {
                  const compl = (other.offers || []).some(o => o.toLowerCase().includes(n.toLowerCase().split(' ')[0]) || n.toLowerCase().includes(o.toLowerCase().split(' ')[0]));
                  return (
                    <div key={i} className="row items-center gap-2" style={{padding:'6px 10px', background: compl?'var(--accent-soft)':'var(--surface-3)', borderRadius:'var(--r-2)'}}>
                      <Icon name="arrowRight" size={11} color={compl?'var(--accent)':'var(--ink-3)'}/>
                      <span style={{fontSize:'var(--t-sm)'}}>{n}</span>
                      {compl && <Badge level="curated" style={{marginLeft:'auto'}}>Match</Badge>}
                    </div>
                  );
                })}
              </div>
            </div>
          )}

          {e.offers && e.offers.length > 0 && (
            <div className="col gap-2">
              <div className="label-hr">Offers</div>
              <div className="col gap-1">
                {e.offers.map((o,i) => {
                  const compl = (other.needs || []).some(n => n.toLowerCase().includes(o.toLowerCase().split(' ')[0]) || o.toLowerCase().includes(n.toLowerCase().split(' ')[0]));
                  return (
                    <div key={i} className="row items-center gap-2" style={{padding:'6px 10px', background: compl?'var(--moss-soft)':'var(--surface-3)', borderRadius:'var(--r-2)'}}>
                      <Icon name="arrowLeft" size={11} color={compl?'var(--moss)':'var(--ink-3)'}/>
                      <span style={{fontSize:'var(--t-sm)'}}>{o}</span>
                      {compl && <Badge level="high" style={{marginLeft:'auto'}}>Match</Badge>}
                    </div>
                  );
                })}
              </div>
            </div>
          )}

          {e.bottlenecks && (
            <div className="col gap-2">
              <div className="label-hr">Bottlenecks</div>
              {e.bottlenecks.map((b,i) => (
                <div key={i} style={{fontSize:'var(--t-sm)'}}>{b.label} <span style={{color:'var(--e-antidup)', fontWeight:600}}>· severity {b.severity}/5</span></div>
              ))}
            </div>
          )}

          {e.evidence && (
            <div className="row items-center gap-2" style={{padding:'8px 10px', background:'var(--surface-3)', borderRadius:'var(--r-2)'}}>
              <Icon name="book" size={12} color="var(--ink-3)"/>
              <span style={{fontSize:'var(--t-xs)', color:'var(--ink-3)'}}>{e.evidence} evidence anchors attached</span>
            </div>
          )}
        </div>
      </Card>
    );
  };

  const WhyPanel = ({match}) => (
    <Card variant="elevated" style={{padding: 22, background:'var(--surface-2)'}}>
      <div className="col gap-4">
        <div className="col gap-1">
          <div className="eyebrow">Why this match</div>
          <h3 style={{fontFamily:'var(--font-display)', fontSize: 22, fontWeight: 400, margin:0, letterSpacing:'-0.015em', lineHeight:1.15}}>
            Six contributing signals
          </h3>
        </div>

        <div className="col gap-3">
          {match.signals.map((s, i) => (
            <SignalRow key={i} s={s}/>
          ))}
        </div>

        <div className="divider"/>

        <div className="col gap-2">
          <div className="label-hr">Plain-English summary</div>
          <p style={{fontSize:'var(--t-sm)', color:'var(--ink-2)', lineHeight: 1.6, margin: 0}}>{match.summary}</p>
        </div>

        <Btn variant="ghost" icon="bot" onClick={() => location.hash='algorithms'} size="sm" style={{justifyContent:'center'}}>How matching works</Btn>
      </div>
    </Card>
  );

  const SignalRow = ({s, expanded:initial=false}) => {
    const [open, setOpen] = useState(initial);
    return (
      <div className="col" style={{gap: 6}}>
        <div className="row justify-between items-center cursor-pointer" style={{gap: 12}} onClick={() => setOpen(!open)}>
          <div className="row items-center" style={{gap: 6, minWidth: 0, flex: 1}}>
            <Icon name={open?'chevronDown':'chevronRight'} size={11} color="var(--ink-3)"/>
            <span style={{fontSize:'var(--t-sm)', fontWeight: 600, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis', minWidth: 0}}>{s.name}</span>
          </div>
          <div className="row items-center" style={{gap: 8, flexShrink: 0}}>
            <span style={{fontSize: 10, color:'var(--ink-3)', textTransform:'uppercase', letterSpacing:'0.06em'}}>w {Math.round(s.weight*100)}%</span>
            <span className="tnum" style={{fontSize:'var(--t-sm)', color:'var(--accent)', fontWeight: 600, minWidth: 32, textAlign:'right'}}>{s.score}%</span>
          </div>
        </div>
        <div className="bar"><div className="fill" style={{width: s.score + '%'}}/></div>
        {open && (
          <div className="col gap-1 fade-up" style={{padding: '8px 0 4px 18px'}}>
            <div style={{fontSize:'var(--t-xs)', color:'var(--ink-2)', lineHeight: 1.55}}>{s.expl}</div>
            <div style={{fontSize: 10, color:'var(--muted)', textTransform:'uppercase', letterSpacing:'0.08em'}}>source · {s.source}</div>
          </div>
        )}
      </div>
    );
  };

  // ============ Narrative layout ============
  const NarrativeLayout = ({match, a, b}) => (
    <div className="grid cols-12" style={{gap: 24}}>
      <div className="col-span-8 col gap-5">
        <NarrativeStep n={1} title="The core reason"
          body={`${b?.name} ${(b.needs || ['needs something specific'])[0] ? `lists "${(b.needs||['durability data'])[0]}" as a missing resource.` : 'has an open need.'} ${a?.name} offers exactly that capability — ${(a.offers||['the matching method'])[0]}. This is the heart of the match.`}
          chip="Need ↔ Offer · 95%"
          chipVariant="rel-needoffer"/>
        <NarrativeStep n={2} title="They share the same language"
          body={`Both have meaningful weight on PEM electrolysis and membrane chemistry, and both have LCA in their methods stack. That overlap means they don't have to translate concepts to collaborate.`}
          chip="Subdomain similarity · 78%"
          chipVariant="rel-similar"/>
        <NarrativeStep n={3} title="Project-readiness aligns"
          body={`HYDRO-NL is at TRL 5, pilot scale, in the NL ecosystem. Sara's research is exactly at the right maturity to be validated on a pilot rig. No mismatch in stage or scale.`}
          chip="Project compatibility · 70%"
          chipVariant="rel-comp"/>
        <NarrativeStep n={4} title="A shared blocker reinforces the case"
          body={`Both flagged "pilot data sharing" as a high-severity bottleneck. A direct connection here also helps unblock both sides — which is a stronger signal than need-offer alone.`}
          chip="Shared bottleneck · 65%"
          chipVariant="rel-antidup"/>
        <NarrativeStep n={5} title="Suggested next step"
          body={`Send an introduction signal, share Sara's most recent durability dataset, and propose a 30-minute call to scope a joint validation block on the HYDRO-NL pilot.`}
          chip="Action"
          chipVariant="solid"/>
      </div>

      <div className="col-span-4 col gap-4">
        <Card>
          <div className="card-title">Score breakdown</div>
          <div className="card-sub">Weighted contribution per signal</div>
          <div className="col gap-3" style={{marginTop: 14}}>
            {match.signals.map((s,i) => (
              <div key={i} className="col gap-1">
                <div className="row justify-between" style={{fontSize:'var(--t-xs)'}}>
                  <span>{s.name}</span>
                  <span className="tnum" style={{color:'var(--accent)', fontWeight:600}}>{s.score}%</span>
                </div>
                <div className="bar"><div className="fill" style={{width: s.score + '%'}}/></div>
              </div>
            ))}
          </div>
        </Card>
        <Card>
          <div className="card-title">Confidence</div>
          <div className="card-sub">How sure the system is about this match</div>
          <div className="row items-center gap-3" style={{marginTop: 14}}>
            <ScoreRing value={Math.round(match.confidence*100)} color="var(--moss)" sub="confidence" size={88}/>
            <div className="col" style={{flex:1, fontSize:'var(--t-xs)', color:'var(--ink-2)', lineHeight:1.5}}>
              <div>· 6 distinct signals contributing</div>
              <div>· 3 of 5 backed by evidence anchors</div>
              <div>· {match.curated ? 'Curator-reviewed' : 'System-generated'}</div>
            </div>
          </div>
        </Card>
        <Card>
          <div className="card-title">Match metadata</div>
          <div className="col gap-1" style={{marginTop:10, fontSize:'var(--t-sm)'}}>
            <Meta k="Type" v={match.type}/>
            <Meta k="Score" v={match.score + '%'}/>
            <Meta k="Confidence" v={Math.round(match.confidence*100) + '%'}/>
            <Meta k="Source" v={match.curated ? 'Curator-reviewed' : 'System-generated'}/>
            <Meta k="Generated" v="Mar 14, 2026"/>
            <Meta k="Last edit" v="—"/>
          </div>
        </Card>
      </div>
    </div>
  );

  const NarrativeStep = ({n, title, body, chip, chipVariant}) => (
    <Card>
      <div className="row items-start gap-4">
        <div style={{flex:'0 0 56px'}}>
          <div style={{fontFamily:'var(--font-display)', fontSize: 44, lineHeight:1, color:'var(--accent)', letterSpacing:'-0.02em'}}>{n}</div>
        </div>
        <div className="col gap-2 flex-1">
          <div className="row items-center gap-2 justify-between flex-wrap">
            <h3 style={{fontFamily:'var(--font-display)', fontSize: 22, fontWeight: 400, margin: 0, letterSpacing:'-0.015em'}}>{title}</h3>
            <Chip variant={chipVariant}>{chip}</Chip>
          </div>
          <p style={{fontSize:'var(--t-md)', color:'var(--ink-2)', margin: 0, lineHeight: 1.55, textWrap:'pretty'}}>{body}</p>
        </div>
      </div>
    </Card>
  );

  const Meta = ({k, v}) => (
    <div className="row justify-between" style={{padding:'4px 0', borderBottom:'1px solid var(--line)'}}>
      <span style={{color:'var(--ink-3)'}}>{k}</span>
      <span style={{fontWeight:500}}>{v}</span>
    </div>
  );

  // ============ Signal dashboard layout ============
  const SignalsLayout = ({match, a, b, ka, kb}) => (
    <div className="grid cols-12" style={{gap: 16}}>
      <div className="col-span-3">
        <Card>
          <div className="row items-center gap-3">
            <Avatar initials={a.initials} kind={ka}/>
            <div className="col">
              <div className="eyebrow">Source</div>
              <div style={{fontWeight:600, fontSize:'var(--t-md)'}}>{a.name}</div>
              <div style={{fontSize:'var(--t-xs)', color:'var(--ink-3)'}}>{a.role || a.type}</div>
            </div>
          </div>
          {a.fingerprint && <div style={{marginTop: 14}}><Fingerprint data={a.fingerprint.slice(0,4)} compact/></div>}
          {a.methods && (
            <div style={{marginTop:12}}>
              <div className="label-hr" style={{marginBottom:6}}>Methods</div>
              <div className="row gap-1 flex-wrap">{a.methods.map(m => <Chip key={m} variant="outline" size="xs">{m}</Chip>)}</div>
            </div>
          )}
        </Card>
      </div>
      <div className="col-span-6 col gap-3">
        <Card variant="elevated" style={{padding: 22}}>
          <div className="row items-center justify-between" style={{marginBottom: 14}}>
            <h3 className="card-title">Signal contribution</h3>
            <Chip variant="outline" size="xs">total weight {match.signals.reduce((s,x) => s+x.weight, 0).toFixed(2)}</Chip>
          </div>
          <div className="col gap-3">
            {match.signals.map((s, i) => (
              <div key={i} className="grid" style={{gridTemplateColumns: '180px 1fr 56px 80px', gap: 12, alignItems:'center'}}>
                <div style={{fontSize:'var(--t-sm)', fontWeight:600}}>{s.name}</div>
                <div className="bar thick"><div className="fill" style={{width: s.score + '%'}}/></div>
                <div className="tnum" style={{fontSize:'var(--t-sm)', color:'var(--accent)', fontWeight: 600, textAlign:'right'}}>{s.score}%</div>
                <Chip variant="outline" size="xs">w {s.weight.toFixed(2)}</Chip>
              </div>
            ))}
          </div>
          <div className="divider"/>
          <div className="grid cols-3" style={{gap: 12}}>
            <div className="col"><div className="eyebrow">Composite score</div><div style={{fontFamily:'var(--font-display)', fontSize: 32, lineHeight:1}}>{match.score}<span style={{fontSize:14, color:'var(--ink-3)'}}>%</span></div></div>
            <div className="col"><div className="eyebrow">Confidence</div><div style={{fontFamily:'var(--font-display)', fontSize: 32, lineHeight:1}}>{Math.round(match.confidence*100)}<span style={{fontSize:14, color:'var(--ink-3)'}}>%</span></div></div>
            <div className="col"><div className="eyebrow">Algorithm family</div><div style={{fontFamily:'var(--font-display)', fontSize: 22, lineHeight:1.1, letterSpacing:'-0.01em'}}>{match.type}</div></div>
          </div>
        </Card>

        <Card>
          <div className="card-title">Audit trail</div>
          <div className="card-sub">Every signal traces back to questionnaire data</div>
          <table style={{width:'100%', marginTop: 14, borderCollapse: 'collapse', fontSize:'var(--t-xs)'}}>
            <thead>
              <tr style={{textAlign:'left', color:'var(--ink-3)', textTransform:'uppercase', letterSpacing:'0.08em', fontSize: 10}}>
                <th style={{padding:'6px 8px', borderBottom:'1px solid var(--line)'}}>Signal</th>
                <th style={{padding:'6px 8px', borderBottom:'1px solid var(--line)'}}>Source data</th>
                <th style={{padding:'6px 8px', borderBottom:'1px solid var(--line)', textAlign:'right'}}>Score</th>
                <th style={{padding:'6px 8px', borderBottom:'1px solid var(--line)', textAlign:'right'}}>Weight</th>
              </tr>
            </thead>
            <tbody>
              {match.signals.map((s,i) => (
                <tr key={i} style={{borderBottom:'1px solid var(--line)'}}>
                  <td style={{padding:'8px', fontWeight:500}}>{s.name}</td>
                  <td style={{padding:'8px', color:'var(--ink-3)', fontFamily:'var(--font-mono)', fontSize: 11}}>{s.source}</td>
                  <td style={{padding:'8px', textAlign:'right', fontWeight:600, color:'var(--accent)'}} className="tnum">{s.score}%</td>
                  <td style={{padding:'8px', textAlign:'right'}} className="tnum">{s.weight.toFixed(2)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card>
      </div>
      <div className="col-span-3">
        <Card>
          <div className="row items-center gap-3">
            <Avatar initials={b.initials} kind={kb}/>
            <div className="col">
              <div className="eyebrow">Target</div>
              <div style={{fontWeight:600, fontSize:'var(--t-md)'}}>{b.name}</div>
              <div style={{fontSize:'var(--t-xs)', color:'var(--ink-3)'}}>{b.role || b.type}</div>
            </div>
          </div>
          {b.needs && (
            <div style={{marginTop: 14}}>
              <div className="label-hr" style={{marginBottom:6}}>Needs</div>
              <div className="col gap-1">{b.needs.map(n => <Chip key={n} variant="warm" size="xs">{n}</Chip>)}</div>
            </div>
          )}
          {b.bottlenecks && (
            <div style={{marginTop:12}}>
              <div className="label-hr" style={{marginBottom:6}}>Bottlenecks</div>
              {b.bottlenecks.map((bn,i) => <div key={i} style={{fontSize:'var(--t-xs)'}}>{bn.label} · sev {bn.severity}/5</div>)}
            </div>
          )}
        </Card>
      </div>
    </div>
  );

  const PathStrip = ({a, ka, b, kb}) => (
    <div className="row items-center gap-2 flex-wrap">
      {[
        {l: a.name, i: a.initials, k: ka},
        {l: 'PEM', i: 'P', k: 'domain'},
        {l: 'LCA method', i: 'L', k: 'method'},
        {l: 'TRL 5 · pilot', i: 'P5', k: 'project'},
        {l: b.name, i: b.initials, k: kb},
      ].map((step, i, arr) => (
        <React.Fragment key={i}>
          <div className="row items-center gap-2" style={{padding:'8px 12px', background:'var(--surface-2)', border:'1px solid var(--line)', borderRadius:'var(--r-3)'}}>
            <Avatar initials={step.i} size="sm" kind={step.k}/>
            <span style={{fontSize:'var(--t-sm)', fontWeight:500}}>{step.l}</span>
          </div>
          {i < arr.length - 1 && <Icon name="arrowRight" size={14} color="var(--ink-3)"/>}
        </React.Fragment>
      ))}
    </div>
  );

  Object.assign(window, { MatchScreen });
})();