// auth.jsx — Login + Registration
const { useState: useStateA } = React;

/* ---- Animated truck (simple line-art, drives across) ---- */
function TruckScene({ width = '100%' }) {
  return (
    <div style={{ position:'absolute', left:0, right:0, bottom:0, height:120, overflow:'hidden', pointerEvents:'none' }}>
      {/* road */}
      <div style={{ position:'absolute', bottom:34, left:0, right:0, height:1.5, background:'rgba(245,239,227,.16)' }} />
      <div style={{ position:'absolute', bottom:34, left:0, right:0, height:1.5,
        backgroundImage:'repeating-linear-gradient(90deg, rgba(245,239,227,.4) 0 16px, transparent 16px 34px)', opacity:.5 }} />
      <div className="truck-anim" style={{ position:'absolute', bottom:30, left:-170 }}>
        <svg width="132" height="74" viewBox="0 0 132 74" fill="none" stroke="#F5EFE3" strokeWidth="2.4"
          strokeLinecap="round" strokeLinejoin="round">
          {/* box body */}
          <rect x="4" y="14" width="78" height="42" rx="3" fill="rgba(245,239,227,.06)" />
          {/* cab */}
          <path d="M82 30 h18 l14 14 v12 h-32 z" fill="rgba(224,65,31,.14)" stroke="#E0411F" />
          <path d="M86 34 h12 l9 9 h-21 z" fill="none" stroke="#F5EFE3" strokeWidth="2" />
          {/* side detail */}
          <path d="M16 30 h40 M16 40 h28" stroke="#F5EFE3" strokeWidth="2" opacity=".5" />
          {/* asterisk emblem */}
          <text x="60" y="40" fontFamily="Geist, sans-serif" fontSize="13" fontWeight="800" fill="#E0411F" stroke="none" textAnchor="middle">*</text>
          {/* wheels */}
          <g>
            <circle cx="28" cy="60" r="9" fill="#0E2A3B" />
            <circle cx="28" cy="60" r="3.5" />
          </g>
          <g>
            <circle cx="100" cy="60" r="9" fill="#0E2A3B" />
            <circle cx="100" cy="60" r="3.5" />
          </g>
        </svg>
      </div>
    </div>
  );
}

/* ---- Brand panel (shared left side) ---- */
function BrandPanel({ children, compact }) {
  return (
    <div style={{ position:'relative', background:'var(--navy)', color:'var(--cream)',
      overflow:'hidden', display:'flex', flexDirection:'column',
      padding: compact ? '26px 24px 0' : '46px 48px 0', minHeight: compact ? 'auto' : '100%' }}>
      <div style={{ position:'absolute', top:0, left:0, right:0, height:4, background:'linear-gradient(90deg,var(--brand),var(--brand-bright))' }} />
      <div style={{ position:'absolute', top:'-12%', right:'-14%', width:320, height:320, borderRadius:'50%',
        background:'radial-gradient(circle, rgba(224,65,31,.16), transparent 68%)' }} />
      {children}
      {!compact && <TruckScene />}
    </div>
  );
}

/* ---- LOGIN ---- */
function LoginScreen({ mobile, onLogin, go }) {
  const [email, setEmail] = useStateA('camille.mercier@riviera-immo.fr');
  const [pw, setPw] = useStateA('••••••••••');
  const [showPw, setShowPw] = useStateA(false);

  const form = (
    <div style={{ width:'100%', maxWidth:360, margin:'0 auto', display:'flex', flexDirection:'column', gap:0 }}>
      <div style={{ marginBottom:28 }}>
        <h1 style={{ fontSize:24, fontWeight:600, margin:'0 0 6px', letterSpacing:'-.02em' }}>Bon retour 👋</h1>
        <p style={{ margin:0, fontSize:14, color:'var(--muted)' }}>Connectez-vous à votre espace partenaire.</p>
      </div>
      <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
        <div className="field">
          <label className="label">Email</label>
          <div className="input-wrap">
            <span className="lead-icon"><Icon name="mail" size={17} /></span>
            <input className="input has-icon" value={email} onChange={e=>setEmail(e.target.value)} placeholder="vous@societe.fr" />
          </div>
        </div>
        <div className="field">
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', gap:12 }}>
            <label className="label" style={{ whiteSpace:'nowrap' }}>Mot de passe</label>
            <a style={{ fontSize:12.5, color:'var(--brand)', fontWeight:500, whiteSpace:'nowrap', cursor:'pointer' }}>Mot de passe oublié ?</a>
          </div>
          <div className="input-wrap">
            <span className="lead-icon"><Icon name="lock" size={17} /></span>
            <input className="input has-icon" type={showPw?'text':'password'} value={pw} onChange={e=>setPw(e.target.value)} style={{ paddingRight:42 }} />
            <button onClick={()=>setShowPw(s=>!s)} style={{ position:'absolute', right:12, color:'var(--faint)', display:'flex' }}>
              <Icon name={showPw?'eyeOff':'eye'} size={17} /></button>
          </div>
        </div>
        <button className="btn btn-primary btn-block btn-lg" style={{ marginTop:4 }} onClick={onLogin}>Se connecter</button>
      </div>
      <div style={{ textAlign:'center', marginTop:26, fontSize:13.5, color:'var(--muted)' }}>
        Pas encore partenaire ?{' '}
        <a onClick={()=>go('register')} style={{ color:'var(--brand)', fontWeight:600, cursor:'pointer' }}>Rejoindre le réseau →</a>
      </div>
    </div>
  );

  if (mobile) {
    return (
      <div style={{ minHeight:'100%', background:'var(--card)', display:'flex', flexDirection:'column' }}>
        <BrandPanel compact>
          <div style={{ paddingTop:36, paddingBottom:30 }}>
            <Logo size={24} />
            <p style={{ fontSize:14, lineHeight:1.5, color:'rgba(245,239,227,.78)', margin:'20px 0 4px', maxWidth:280 }}>
              L'écosystème logistique de vos clients qui déménagent.</p>
          </div>
        </BrandPanel>
        <div style={{ flex:1, padding:'32px 24px 40px' }}>{form}</div>
      </div>
    );
  }

  return (
    <div style={{ height:'100%', display:'grid', gridTemplateColumns:'1.05fr 1fr' }}>
      <BrandPanel>
        <Logo size={26} />
        <div style={{ marginTop:'auto', marginBottom:150, maxWidth:380, position:'relative', zIndex:2 }}>
          <h2 style={{ fontSize:30, fontWeight:600, lineHeight:1.25, margin:'0 0 16px', letterSpacing:'-.02em' }}>
            L'écosystème logistique de vos clients qui déménagent.</h2>
          <p style={{ fontSize:14.5, lineHeight:1.6, color:'rgba(245,239,227,.7)', margin:0 }}>
            Recommandez LBC, suivez vos leads en temps réel et percevez vos commissions automatiquement.</p>
        </div>
      </BrandPanel>
      <div style={{ background:'var(--card)', display:'flex', alignItems:'center', justifyContent:'center', padding:48 }}>
        {form}
      </div>
    </div>
  );
}

/* ---- REGISTRATION ---- */
function RegisterScreen({ mobile, onLogin, go }) {
  const benefits = [
    { icon:'zap',        t:'Suivi de vos leads en temps réel' },
    { icon:'euroCircle', t:'Commissions versées automatiquement' },
    { icon:'download',   t:'Accès à vos ressources marketing' },
  ];
  const [type, setType] = useStateA('');

  const form = (
    <div style={{ width:'100%', maxWidth:520, margin:'0 auto' }}>
      <div style={{ marginBottom:24 }}>
        <h1 style={{ fontSize:24, fontWeight:600, margin:'0 0 6px', letterSpacing:'-.02em' }}>Rejoindre le réseau LBC</h1>
        <p style={{ margin:0, fontSize:14, color:'var(--muted)' }}>Quelques informations et votre dossier part en validation.</p>
      </div>
      <div style={{ display:'grid', gridTemplateColumns: mobile?'1fr':'1fr 1fr', gap:16 }}>
        <div className="field" style={{ gridColumn:'1/-1' }}>
          <label className="label">Nom de la société</label>
          <div className="input-wrap"><span className="lead-icon"><Icon name="building" size={17} /></span>
            <input className="input has-icon" placeholder="Ex. Agence Riviera Immobilier" /></div>
        </div>
        <div className="field"><label className="label">Prénom</label><input className="input" placeholder="Camille" /></div>
        <div className="field"><label className="label">Nom</label><input className="input" placeholder="Mercier" /></div>
        <div className="field"><label className="label">Email professionnel</label>
          <div className="input-wrap"><span className="lead-icon"><Icon name="mail" size={17} /></span>
            <input className="input has-icon" placeholder="vous@societe.fr" /></div></div>
        <div className="field"><label className="label">Téléphone</label>
          <div className="input-wrap"><span className="lead-icon"><Icon name="phone" size={17} /></span>
            <input className="input has-icon" placeholder="06 12 34 56 78" /></div></div>
        <div className="field"><label className="label">Ville</label>
          <div className="input-wrap"><span className="lead-icon"><Icon name="pin" size={17} /></span>
            <input className="input has-icon" placeholder="Nice" /></div></div>
        <div className="field"><label className="label">Type de partenaire</label>
          <select className="select" value={type} onChange={e=>setType(e.target.value)} style={{ color: type?'var(--ink)':'var(--faint)' }}>
            <option value="" disabled>Sélectionner…</option>
            <option>Agence immobilière</option><option>Notaire</option><option>Syndic</option>
            <option>Gestionnaire de patrimoine</option><option>Designer d'intérieur</option><option>Autre</option>
          </select></div>
        <div className="field" style={{ gridColumn:'1/-1' }}><label className="label">IBAN <span style={{ color:'var(--faint)', fontWeight:400 }}>· pour le versement des commissions</span></label>
          <input className="input mono" placeholder="FR76 ____ ____ ____ ____ ____ ___" style={{ letterSpacing:'.04em' }} /></div>
        <div className="field" style={{ gridColumn:'1/-1' }}><label className="label">Comment avez-vous connu LBC ? <span style={{ color:'var(--faint)', fontWeight:400 }}>· optionnel</span></label>
          <input className="input" placeholder="Bouche à oreille, recherche, événement…" /></div>
      </div>
      <button className="btn btn-primary btn-block btn-lg" style={{ marginTop:22 }} onClick={onLogin}>Soumettre ma candidature</button>
      <p style={{ textAlign:'center', fontSize:12.5, color:'var(--muted)', margin:'14px 0 0' }}>
        Votre dossier sera examiné sous 24h ouvrées.</p>
      <div style={{ textAlign:'center', marginTop:18, fontSize:13.5, color:'var(--muted)' }}>
        Déjà partenaire ? <a onClick={()=>go('login')} style={{ color:'var(--brand)', fontWeight:600, cursor:'pointer' }}>Se connecter</a>
      </div>
    </div>
  );

  const brandContent = (compact) => (
    <>
      <Logo size={compact?24:26} />
      <div style={{ marginTop: compact?24:'auto', position:'relative', zIndex:2, maxWidth:400 }}>
        <h2 style={{ fontSize: compact?22:30, fontWeight:600, lineHeight:1.22, margin:'0 0 28px', letterSpacing:'-.02em' }}>
          Générez des revenus en recommandant LBC à vos clients.</h2>
        <div style={{ display:'flex', flexDirection:'column', gap:16, marginBottom: compact?8:0 }}>
          {benefits.map((b,i)=>(
            <div key={i} style={{ display:'flex', alignItems:'center', gap:13 }}>
              <span style={{ width:38, height:38, borderRadius:10, background:'rgba(224,65,31,.16)',
                color:'var(--cream)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
                <Icon name={b.icon} size={19} /></span>
              <span style={{ fontSize:14.5, color:'rgba(245,239,227,.92)' }}>{b.t}</span>
            </div>
          ))}
        </div>
      </div>
      {!compact && (
        <div style={{ marginTop:'auto', display:'flex', alignItems:'flex-end', gap:14, paddingBottom:30, position:'relative', zIndex:2 }}>
          <Mascot size={84} />
          <div style={{ background:'rgba(245,239,227,.08)', border:'1px solid rgba(245,239,227,.14)', borderRadius:'14px 14px 14px 4px', padding:'12px 16px', marginBottom:14, fontSize:13, color:'rgba(245,239,227,.85)', maxWidth:230 }}>
            « Bienvenue chez LBC — ravi de bosser avec vous ! »</div>
        </div>
      )}
    </>
  );

  if (mobile) {
    return (
      <div style={{ minHeight:'100%', background:'var(--card)', display:'flex', flexDirection:'column' }}>
        <BrandPanel compact><div style={{ paddingTop:36, paddingBottom:24 }}>{brandContent(true)}</div></BrandPanel>
        <div style={{ flex:1, padding:'28px 22px 40px' }}>{form}</div>
      </div>
    );
  }

  return (
    <div style={{ height:'100%', display:'grid', gridTemplateColumns:'1fr 1.12fr' }}>
      <BrandPanel><div style={{ display:'flex', flexDirection:'column', height:'100%' }}>{brandContent(false)}</div></BrandPanel>
      <div className="scroll" style={{ background:'var(--card)', overflowY:'auto', padding:'48px 56px', display:'flex', alignItems:'center' }}>
        {form}
      </div>
    </div>
  );
}

Object.assign(window, { LoginScreen, RegisterScreen });