// HubChrome.jsx — TMS Hub top bar + sub-header.
// Same visual structure as the design kit; agent/agency name now comes
// from the verified JWT claims instead of being hardcoded.
function HubChrome() {
  const claims = window.TMS_AUTH.getClaims() || {};
  const agentLabel = claims.name || claims.brand_id || 'agent';
  const agencyLabel = claims.agency_name || '';

  return (
    <>
      <header className="sp-topbar">
        <div className="sp-topbar-inner">
          <button className="sp-burger" aria-label="Menu"><i data-lucide="menu"></i></button>
          <span className="sp-wordmark">TMS Hub</span>
          <span className="sp-topbar-spacer"></span>
          <span className="sp-topbar-acct">{agencyLabel}</span>
        </div>
      </header>
      <div className="sp-subhead">
        <div className="sp-subhead-inner">
          <div className="sp-subhead-left">
            <img className="sp-subhead-logo" src="/assets/tms-logo.png" alt="Travel Marketing Systems" />
            <span className="sp-subhead-title">Social Posting</span>
          </div>
          <div className="sp-subhead-right">
            Signed in as <b>{agentLabel}</b>{agencyLabel ? ' · ' + agencyLabel : ''}
          </div>
        </div>
      </div>
    </>
  );
}
window.HubChrome = HubChrome;