/* Écrans d'accès du design (dev-auth.jsx) : panneau de marque, cadre, saisie du code à 6 chiffres. */
function AuthSide({sub='Dev', badge='API v1 · Sénégal', titre='Une nouvelle ère pour distribuer vos services.', texte='Une API, un contrat, un solde prépayé. Testez en sandbox, passez en production quand vous êtes prêt.'}){
  return <div style={{flex:'0 0 46%', background:'#113025', color:'#fff', padding:'40px 48px', display:'flex', flexDirection:'column', position:'relative', overflow:'hidden'}}>
    <div aria-hidden="true" style={{position:'absolute', inset:0, backgroundImage:'radial-gradient(rgba(159,224,198,.16) 1.2px, transparent 1.2px)', backgroundSize:'22px 22px', maskImage:'linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.25))', WebkitMaskImage:'linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.25))'}}></div>
    <div aria-hidden="true" style={{position:'absolute', right:-180, top:-180, width:520, height:520, borderRadius:'50%', border:'1px solid rgba(159,224,198,.12)', boxShadow:'0 0 0 60px rgba(159,224,198,.03), 0 0 0 120px rgba(159,224,198,.02)'}}></div>
    <div style={{position:'relative'}}><Brand light sub={sub}/></div>
    <div style={{position:'relative', marginTop:44}}>
      <span style={{display:'inline-flex', alignItems:'center', gap:8, height:28, padding:'0 12px', borderRadius:999, background:'rgba(159,224,198,.12)', color:'#9FE0C6', fontWeight:700, fontSize:12}}><I n="sparkle" s={14} fill/>{badge}</span>
      <span style={{display:'block', marginTop:16, fontFamily:V.disp, fontWeight:800, fontSize:40, lineHeight:1.05, letterSpacing:'-0.03em', maxWidth:480}}>{titre}</span>
      <span style={{display:'block', marginTop:14, fontSize:15, lineHeight:1.55, color:'rgba(255,255,255,.68)', maxWidth:440}}>{texte}</span>
    </div>
    <div style={{position:'relative', flex:1, display:'flex', flexDirection:'column', justifyContent:'center', marginTop:28}}>
      <div aria-hidden="true" style={{position:'absolute', inset:'-10% -14%', pointerEvents:'none'}}>
        {[['#5CCB9A',8,14,220],['#3CC0DA',58,4,190],['#5B9BF5',64,52,210],['#A77CF5',18,58,200],['#F6B04A',40,82,170]].map((b,i)=><span key={i} style={{position:'absolute', left:b[1]+'%', top:b[2]+'%', width:b[3], height:b[3], borderRadius:'50%', background:b[0], opacity:.3, filter:'blur(50px)', animation:`lfloat ${9+i*2}s ease-in-out ${i*-1.7}s infinite alternate`}}></span>)}
      </div>
      <div style={{position:'relative', borderRadius:28, padding:8, background:'linear-gradient(160deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.06) 42%, rgba(255,255,255,.03) 100%)', backdropFilter:'blur(28px) saturate(170%)', WebkitBackdropFilter:'blur(28px) saturate(170%)', border:'1px solid rgba(255,255,255,.16)', boxShadow:'inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(255,255,255,.05), inset 0 0 24px rgba(255,255,255,.04), 0 30px 60px rgba(0,0,0,.28)', overflow:'hidden'}}>
        <span aria-hidden="true" style={{position:'absolute', left:'8%', right:'8%', top:0, height:1, background:'linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent)'}}></span>
        <span aria-hidden="true" style={{position:'absolute', left:-40, top:-80, width:260, height:160, borderRadius:'50%', background:'radial-gradient(closest-side, rgba(255,255,255,.14), transparent)', pointerEvents:'none'}}></span>
        {['assurance','voyage','billet','esim','sms'].map((k,i)=>{ const v = SVCS[k]; return <div key={k} style={{position:'relative', display:'flex', alignItems:'center', gap:14, padding:'10px 12px', borderRadius:18, borderTop:i?'1px solid rgba(255,255,255,.08)':'none'}}>
          <span style={{display:'block', width:40, height:40, lineHeight:0, flex:'none', filter:'drop-shadow(0 4px 8px rgba(0,0,0,.28))'}} dangerouslySetInnerHTML={{__html:window.lmsIcon?lmsIcon(k,40):''}}></span>
          <span style={{flex:1, minWidth:0}}><span style={{display:'block', fontWeight:700, fontSize:14}}>{v.n}</span><span style={{display:'block', marginTop:2, fontSize:12, color:'rgba(255,255,255,.62)'}}>{({assurance:'Devis, souscription, avenants', voyage:'Couverture par zone et durée', billet:'Recherche et émission de billets', esim:'Forfaits data internationaux', sms:'Envoi unitaire et en masse'})[k]}</span></span>
          {v.on ? <span style={{display:'inline-flex', alignItems:'center', gap:6, height:26, padding:'0 10px', borderRadius:999, background:'rgba(159,224,198,.14)', color:'#9FE0C6', fontWeight:700, fontSize:11.5}}><span style={{width:6, height:6, borderRadius:99, background:'#6EE7B7'}}></span>Disponible</span>
            : <span style={{height:26, display:'inline-flex', alignItems:'center', padding:'0 10px', borderRadius:999, background:'rgba(255,255,255,.06)', color:'rgba(255,255,255,.5)', fontWeight:700, fontSize:11.5}}>Bientôt</span>}</div>; })}
      </div>
    </div>
    <span style={{position:'relative', marginTop:18, fontSize:12, color:'rgba(255,255,255,.45)'}}>JOKKO TECH AI SAS · Dakar, Sénégal</span>
  </div>;
}
function AuthFrame({children, w=400, side={}}){
  const m = useMob();
  return <div style={{display:'flex', height:'100%', background:V.card}}>{!m && <AuthSide {...side}/>}
    <div style={{flex:1, overflowY:'auto', display:'flex', flexDirection:'column'}}>
      {m && <div style={{padding:'18px 20px'}}><Brand sub={side.sub||'Dev'}/></div>}
      <div style={{flex:1, display:'grid', placeItems:'center', padding:m?'8px 20px 40px':'40px'}}><div className="lpage" style={{width:'100%', maxWidth:w, display:'flex', flexDirection:'column', gap:18}}>{children}</div></div></div></div>;
}
function OTP({n=6, value, set, err}){
  const refs = React.useRef([]);
  return <div style={{display:'flex', gap:8}}>{Array.from({length:n}).map((_,i)=><input key={i} ref={e=>refs.current[i]=e} className="li" inputMode="numeric" maxLength={1} aria-label={`Chiffre ${i+1}`} value={value[i]||''}
    onChange={e=>{ const d = e.target.value.replace(/\D/g,''); const v = value.split(''); v[i]=d; set(v.join('').slice(0,n)); if(d && refs.current[i+1]) refs.current[i+1].focus(); }}
    onKeyDown={e=>{ if(e.key==='Backspace' && !value[i] && refs.current[i-1]) refs.current[i-1].focus(); }}
    onPaste={e=>{ const d = (e.clipboardData.getData('text')||'').replace(/\D/g,'').slice(0,n); if(d.length>1){ e.preventDefault(); set(d); refs.current[Math.min(d.length,n)-1]?.focus(); } }}
    style={{...inpCss, width:'100%', height:56, padding:0, textAlign:'center', fontFamily:V.mono, fontSize:22, fontWeight:700, borderColor:err?V.bad:undefined}}/>)}</div>;
}
const Link2 = ({children, onClick}) => <button type="button" className="lb" onClick={onClick} style={{border:0, background:'none', padding:0, fontFamily:V.body, fontWeight:700, fontSize:13.5, color:V.accD, cursor:'pointer'}}>{children}</button>;

Object.assign(window, {AuthSide, AuthFrame, OTP, Link2});