// Building detail — right-side drawer with KPIs + audit timeline.
function BuildingDetail({ name, open, onClose }) {
  const b = BUILDINGS.find(x => x.nm === name) || BUILDINGS[0];
  return (
    <React.Fragment>
      <div className={`scrim ${open ? 'open' : ''}`} onClick={onClose} />
      <div className={`drawer ${open ? 'open' : ''}`}>
        <div className="drawer-h">
          <div className="top">
            <Tag track={b.health === 'resolved' ? 'on-track' : b.health === 'warning' ? 'at-risk' : 'breached'} sub={b.health === 'resolved' ? 'Healthy' : b.health === 'warning' ? 'Watch' : 'At risk'} />
            <button className="icon-btn" onClick={onClose}><Icon name="x" /></button>
          </div>
          <h2>{b.addr.replace(/,?\s+[A-Z]{2,3}$/, '')}</h2>
          <div className="addr">{b.sp} · {b.nm} · {b.addr.match(/[A-Z]{2,3}$/) ? b.addr.match(/[A-Z]{2,3}$/)[0] : ''}</div>
        </div>
        <div className="drawer-body">
          <BuildingLocation address={`${b.addr}, ${b.sp}`} size="card" />
          <div className="kpis">
            <div className="k"><div className="n">{b.units}</div><div className="l">Units</div></div>
            <div className="k"><div className="n">{b.open}</div><div className="l">Open jobs</div></div>
            <div className="k"><div className="n">{b.compliance}%</div><div className="l">Compliant</div></div>
          </div>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)', marginBottom: 12 }}>
              <Icon name="alarm-clock" />NEXT DEADLINE
            </div>
            <div className="card" style={{ padding: '14px 16px', fontSize: 13.5, color: 'var(--fg-1)' }}>{b.next}</div>
          </div>
          <div>
            <h4 style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--fg-3)', margin: '0 0 16px' }}>Audit trail</h4>
            <div className="tl">
              {BLDG_TIMELINE.map(([mint, t, m], i) => (
                <div className="tl-item" key={i}>
                  <div className="rail">
                    <div className={`dot ${mint}`} />
                    {i < BLDG_TIMELINE.length - 1 && <div className="line" />}
                  </div>
                  <div className="c"><div className="t">{t}</div><div className="m">{m}</div></div>
                </div>
              ))}
            </div>
          </div>
        </div>
        <div className="drawer-foot">
          <button className="btn btn-primary" style={{ flex: 1, justifyContent: 'center' }} onClick={() => act('Audit pack generating', { kind: 'auto', icon: 'download', sub: b.addr.replace(/,?\s+[A-Z]{2,3}$/, '') + ' · compliant hardcopy' })}><Icon name="download" />Audit pack</button>
          <button className="btn btn-ghost" style={{ flex: 1, justifyContent: 'center' }} onClick={() => act('Sending logbook to print', { kind: 'info', icon: 'printer' })}><Icon name="printer" />Print logbook</button>
        </div>
      </div>
    </React.Fragment>
  );
}
Object.assign(window, { BuildingDetail });