// Encabezado del equipo activo (logo + nombre + escuela + Team colors). Fuente
// unica: window.DATA.activeTeam. Lo comparten Templates y Ask Bruce, asi que
// cambiarlo en un sitio lo cambia en el otro.
function ActiveTeamHeader(){
  const {isMobile}=useBreakpoint();
  const t=window.DATA.activeTeam;
  return <div style={{position:"relative",padding:isMobile?"24px 16px 20px":"48px 48px 32px",display:"flex",alignItems:"flex-start",gap:isMobile?20:40,flexWrap:"wrap"}}>
    <div style={{width:200,aspectRatio:"1 / 1",background:"var(--surface-sunken)",borderRadius:6,flex:"0 0 auto",
      border:"var(--border-width-hairline) solid var(--border-hairline)",display:"flex",alignItems:"center",justifyContent:"center"}}>
      <img src={t.logo} alt="" style={{width:"100%",height:"100%",objectFit:"contain",padding:20,boxSizing:"border-box"}}/>
    </div>
    <div style={{display:"flex",flexDirection:"column",gap:16,minWidth:280,flex:1}}>
      <div>
        <div style={{fontSize:isMobile?32:52,fontWeight:800,color:"var(--text-body)",textTransform:"uppercase",lineHeight:1.02,letterSpacing:"-.01em"}}>{t.name}</div>
        <div style={{fontSize:20,color:"var(--text-muted)",fontWeight:700}}>{t.school}</div>
      </div>
      <ColorField label="Team colors" value={t.colors[0]} swatches={t.colors} style={{maxWidth:320}}/>
    </div>
  </div>;
}
window.ActiveTeamHeader=ActiveTeamHeader;