/* ============ Login screen — Silkway Sales Console ============ */
function Login({onLogin}){
  const [pw,setPw]=useState('');
  const [show,setShow]=useState(false);
  const [email,setEmail]=useState('n.zhukov@silkway.kz');
  const [remember,setRemember]=useState(true);
  const [lang,setLang]=useState('RU');
  return (
    <div className="login-wrap">
      <div className="login-art">
        <div className="grid-bg"></div>
        <div className="brand" style={{padding:0,position:'relative'}}>
          <div className="brand-mark">S</div>
          <div>
            <div className="brand-name" style={{color:'#fff'}}>Silkway Central Asia</div>
            <div className="brand-sub">Коммерческий контур</div>
          </div>
        </div>
        <div style={{position:'relative',maxWidth:480}}>
          <div style={{fontFamily:'var(--display)',fontWeight:800,fontSize:46,lineHeight:1.05,letterSpacing:'-1.5px'}}>
            Коммерческий контур логистического хаба
          </div>
          <div style={{color:'rgba(255,255,255,.6)',fontSize:17,marginTop:18,lineHeight:1.5}}>
            6 автономных AI-агентов работают внутри 1С: принимают запросы, считают тарифы, генерируют КП, ведут CRM и контролируют исходящую воронку.
          </div>
          <div className="row" style={{gap:28,marginTop:34}}>
            {[['6','агентов в контуре'],['24/7','без выходных'],['80%','автономия по стандарту']].map(([a,b],i)=>(
              <div key={i}>
                <div style={{fontFamily:'var(--display)',fontWeight:800,fontSize:24}}>{a}</div>
                <div style={{color:'rgba(255,255,255,.5)',fontSize:13,marginTop:2}}>{b}</div>
              </div>
            ))}
          </div>
        </div>
        <div className="row" style={{position:'relative',color:'rgba(255,255,255,.5)',fontSize:13,gap:8}}>
          <Icon name="lock" size={15}/> Поддержка: support@silkway.kz · +7 (727) 000-00-00
        </div>
      </div>

      <div className="login-form">
        <div className="login-card">
          <div className="between" style={{marginBottom:30}}>
            <div className="seg">
              {['RU','EN','UZ'].map(l=><button key={l} className={lang===l?'on':''} onClick={()=>setLang(l)}>{l}</button>)}
            </div>
            <span className="muted" style={{fontSize:13}}>Внутренний доступ</span>
          </div>
          <h1 style={{fontFamily:'var(--display)',fontWeight:800,fontSize:32,letterSpacing:'-1px',margin:'0 0 6px'}}>Вход в кабинет</h1>
          <div className="muted" style={{marginBottom:26}}>Корпоративный email Silkway Central Asia</div>

          <div className="field" style={{marginBottom:16}}>
            <label>Email</label>
            <input className="input" value={email} onChange={e=>setEmail(e.target.value)} placeholder="name@silkway.kz"/>
          </div>
          <div className="field" style={{marginBottom:14}}>
            <label>Пароль</label>
            <div className="in-wrap has-ic">
              <input className="input" type={show?'text':'password'} value={pw} onChange={e=>setPw(e.target.value)} placeholder="••••••••"/>
              <span className="in-ic" style={{cursor:'pointer',color:'var(--tx-3)'}} onClick={()=>setShow(s=>!s)}><Icon name={show?'eyeoff':'eye'} size={18}/></span>
            </div>
          </div>
          <div className="between" style={{marginBottom:22}}>
            <div className="row" style={{gap:9,cursor:'pointer'}} onClick={()=>setRemember(r=>!r)}>
              <Checkbox on={remember} onChange={setRemember}/><span style={{fontSize:14}}>Запомнить меня</span>
            </div>
            <button className="link">Забыли пароль?</button>
          </div>

          <button className="btn btn-dark btn-block" onClick={onLogin}>Войти<Icon name="arrow" size={18}/></button>
          <div className="row" style={{gap:14,margin:'18px 0'}}>
            <div style={{flex:1,height:1,background:'var(--line)'}}></div>
            <span className="muted" style={{fontSize:13}}>или</span>
            <div style={{flex:1,height:1,background:'var(--line)'}}></div>
          </div>
          <button className="btn btn-outline btn-block" onClick={onLogin}><Icon name="shield" size={18}/>Войти с 2FA</button>
          <div className="muted" style={{fontSize:12.5,marginTop:12,textAlign:'center'}}>При включённой двухфакторной аутентификации код придёт в приложение или по SMS</div>

          <div className="divline"></div>
          <div className="row" style={{justifyContent:'center',gap:6,fontSize:14}}>
            <span className="muted">Нет доступа?</span>
            <button className="link">Связаться с админом</button>
          </div>
        </div>
      </div>
    </div>
  );
}
window.Login = Login;