function AuthShell({ mode, go }) {
  const isLogin = mode === 'login';
  const [rut, setRut] = React.useState('');
  const [pw, setPw] = React.useState('');
  const [email, setEmail] = React.useState('');
  return (
    <div className="auth-shell" style={{minHeight:'100vh', display:'grid', gridTemplateColumns:'1fr 1fr'}}>
      <div className="auth-left" style={{background:'var(--accent)', color:'#fff', padding:'48px 56px', display:'flex', flexDirection:'column', justifyContent:'space-between', position:'relative', overflow:'hidden'}}>
        <a className="logo" href="#" onClick={(e)=>{e.preventDefault(); go('home');}} style={{color:'#fff'}}>
          <span className="logo-mark"><Beagle/></span><span style={{color:'#fff'}}>Hol<span className="logo-ai on-dark">ai</span></span>
        </a>
        <div style={{position:'relative', zIndex: 2}}>
          <div className="chip white" style={{marginBottom: 20}}><I.sparkle size={12}/> Tu Insurance Score</div>
          <h2 className="display display-l" style={{margin: 0, color:'#fff'}}>
            "Tengo un<br/>seguro de vida<br/><span style={{fontStyle:'italic', fontWeight: 400}}>que ni sabía<br/>que existía</span>."
          </h2>
          <div className="hstack" style={{marginTop: 36}}>
            <div style={{width: 48, height: 48, borderRadius:'50%', background:'#fff', color:'var(--accent)', display:'grid', placeItems:'center', fontWeight: 800, fontSize: 20}}>F</div>
            <div>
              <div style={{fontSize: 15, fontWeight: 700}}>Francisca León</div>
              <div className="mono" style={{fontSize: 11, opacity: 0.8}}>USUARIA HOLAI · CONCEPCIÓN</div>
            </div>
          </div>
        </div>
        <div className="mono" style={{fontSize: 11, opacity: 0.8, letterSpacing:'0.08em'}}>CMF AUTORIZADO · DATOS ENCRIPTADOS</div>
        <div style={{position:'absolute', right:-80, top: 120, width: 260, height: 260, borderRadius:'50%', background:'rgba(255,255,255,0.1)'}}/>
        <div style={{position:'absolute', right: 100, bottom: 120, width: 80, height: 80, borderRadius:'50%', background:'rgba(255,255,255,0.15)'}}/>
      </div>

      <div className="auth-right" style={{padding:'80px 72px', display:'flex', flexDirection:'column', justifyContent:'center', maxWidth: 580}}>
        <div className="eyebrow">{isLogin ? 'Hola de nuevo' : 'Crea tu cuenta'}</div>
        <h1 className="display display-m" style={{margin:'12px 0 40px'}}>
          {isLogin ? 'Entra a Holai' : <>Conecta tu <span className="grad-text">RUT</span></>}
        </h1>

        <div className="vstack" style={{gap: 18}}>
          {!isLogin && (
            <div className="card-soft" style={{display:'flex', gap: 12, alignItems:'center'}}>
              <div style={{width: 36, height: 36, borderRadius:'50%', background:'var(--accent)', color:'#fff', display:'grid', placeItems:'center', flexShrink: 0}}><I.shield size={18}/></div>
              <div style={{fontSize: 13, color:'var(--ink-2)'}}>Con tu RUT buscamos tus pólizas en la CMF. <b>Nada más.</b></div>
            </div>
          )}
          <div>
            <label className="eyebrow" style={{display:'block', marginBottom: 8}}>RUT</label>
            <input className="field" placeholder="12.345.678-9" value={rut} onChange={(e)=>setRut(e.target.value)}/>
          </div>
          {!isLogin && (
            <div>
              <label className="eyebrow" style={{display:'block', marginBottom: 8}}>Email</label>
              <input className="field" placeholder="tu@email.cl" value={email} onChange={(e)=>setEmail(e.target.value)}/>
            </div>
          )}
          <div>
            <label className="eyebrow" style={{display:'block', marginBottom: 8}}>{isLogin ? 'Contraseña' : 'Crear contraseña'}</label>
            <input className="field" type="password" placeholder="••••••••" value={pw} onChange={(e)=>setPw(e.target.value)}/>
          </div>
          <button className="btn btn-accent btn-lg" style={{justifyContent:'center', marginTop: 8}} onClick={()=>go('dashboard')}>
            {isLogin ? 'Ingresar' : 'Crear cuenta y conectar'} <I.arrow size={18}/>
          </button>
          <div style={{textAlign:'center', fontSize: 14, color:'var(--muted)', marginTop: 4}}>
            {isLogin ? (
              <>¿Primera vez? <a href="#" onClick={(e)=>{e.preventDefault(); go('signup');}} style={{color:'var(--accent)', fontWeight: 600}}>Crear cuenta</a></>
            ) : (
              <>¿Ya tienes cuenta? <a href="#" onClick={(e)=>{e.preventDefault(); go('login');}} style={{color:'var(--accent)', fontWeight: 600}}>Ingresar</a></>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}
window.AuthShell = AuthShell;