function LoginScreen({onEnter}){
  const {isMobile}=useBreakpoint();
  return <div style={{display:"flex",flexDirection:isMobile?"column":"row",minHeight:"100dvh",fontFamily:"var(--font-core)"}}>
    <div style={{flex:"1 1 46%",background:"var(--bruce-black)",color:"#fff",display:"flex",flexDirection:"column",justifyContent:"space-between",gap:24,padding:isMobile?"24px":"48px"}}>
      <img src="../../assets/logo-color-on-dark.png" alt="Bruce" style={{height:isMobile?40:48,width:"auto",alignSelf:"flex-start",objectFit:"contain"}}/>
      <div style={{marginTop:isMobile?24:72}}>
        <h1 style={{margin:0,fontSize:isMobile?40:72,lineHeight:1.02,textTransform:"uppercase",fontWeight:700,letterSpacing:"-.01em"}}>All in one canvas</h1>
        <p style={{margin:"20px 0 0",maxWidth:420,fontSize:18,lineHeight:1.5,color:"var(--text-muted-inverse)"}}>Design, configure, quote, approve and order team gear in one place. Bruce keeps the whole job moving.</p>
      </div>
      <img src="../../assets/bruce-character.png" alt="" style={{width:isMobile?120:200,alignSelf:"flex-end"}}/>
    </div>
    <div style={{flex:"1 1 54%",display:"flex",alignItems:"center",justifyContent:"center",padding:isMobile?24:48,background:"var(--bruce-white)"}}>
      <div style={{width:"100%",maxWidth:400,display:"flex",flexDirection:"column",gap:20}}>
        <div>
          <h2 style={{margin:0,fontSize:32,textTransform:"uppercase",fontWeight:700}}>Welcome back</h2>
        </div>
        <Input label="Work email" defaultValue="ana@northsidesports.com"/>
        <Input label="Password" type="password" defaultValue="............"/>
        <div style={{display:"flex",alignItems:"center",justifyContent:"space-between"}}>
          <Checkbox label="Keep me signed in" defaultChecked/>
          <a href="#" style={{fontSize:13,fontWeight:600}}>Forgot password</a>
        </div>
        <Button size="lg" fullWidth onClick={onEnter}>Sign in</Button>
        <div style={{textAlign:"center",fontSize:13,color:"var(--text-muted)"}}>New to Bruce? <a href="#">Request access</a></div>
      </div>
    </div>
  </div>;
}
window.LoginScreen=LoginScreen;