// Report header: identity + platform chip + reporting period.
function ReportHeader({ data }) {
  return (
    <>
      <div style={{display:'flex', alignItems:'center', gap:14}}>
        <div style={{flex:'none', width:46, height:46, borderRadius:12, background:'#0A66C2', display:'flex', alignItems:'center', justifyContent:'center', color:'#fff'}}>
          <svg style={{width:26, height:26}} aria-hidden="true"><use href="#li"/></svg>
        </div>
        <div style={{flex:1}}>
          <p style={{margin:0, fontSize:22, fontWeight:800, letterSpacing:'-.02em'}}>{data.name}</p>
          <p style={{margin:'2px 0 0', fontSize:12.5, color:'#8C8A85', fontWeight:600}}>{data.title}</p>
        </div>
        <span className="chip"><svg style={{width:14, height:14}} aria-hidden="true"><use href="#li"/></svg>{data.platform}</span>
      </div>
      <p style={{margin:'14px 0 0', fontSize:12, fontWeight:600, color:'#b11871', letterSpacing:'.1em', textTransform:'uppercase'}}>{data.period}</p>
    </>
  );
}
window.ReportHeader = ReportHeader;