/* ───────────────────────────────────────────────────────────
   auth.jsx — welcome / login (Google·Microsoft·Apple) + lead capture
   Exports: AuthScreen, SignupScreen
   ─────────────────────────────────────────────────────────── */

function AuthScreen({ onProvider }) {
  const providers=[
    { id:'google', label:'Continua con Google', icon:Icon.google, style:{ background:'#fff', color:'#1c1c1e', boxShadow:'0 1px 3px rgba(0,0,0,.12), inset 0 0 0 1px rgba(0,0,0,.08)' } },
    { id:'apple',  label:'Continua con Apple',  icon:(p)=>Icon.apple({...p,color:'#fff'}), style:{ background:'#000', color:'#fff' } },
    { id:'ms',     label:'Continua con Microsoft', icon:Icon.ms, style:{ background:'#fff', color:'#1c1c1e', boxShadow:'0 1px 3px rgba(0,0,0,.12), inset 0 0 0 1px rgba(0,0,0,.08)' } },
  ];
  return (
    <div className="app-scroll" style={{ minHeight:'100%', position:'relative',
      background:'radial-gradient(120% 80% at 50% -8%, #143a78 0%, #002255 52%, #001a44 100%)' }}>
      {/* concentric ring motif */}
      <svg viewBox="0 0 400 400" style={{ position:'absolute', top:-40, left:'50%', transform:'translateX(-50%)', width:520, opacity:.16, pointerEvents:'none' }}>
        {[60,110,160,200].map((r,i)=>(<circle key={i} cx="200" cy="200" r={r} fill="none" stroke="#a8d2e0" strokeWidth="1"/>))}
      </svg>

      <div style={{ padding:'72px 26px 36px', position:'relative', display:'flex', flexDirection:'column', minHeight:'100%' }}>
        <div className="fade-up" style={{ display:'flex', justifyContent:'center', marginBottom:46 }}>
          <Wordmark color="#fff" size={15}/>
        </div>

        <div className="fade-up" style={{ flex:1, animationDelay:'.08s' }}>
          <div className="eyebrow" style={{ color:'var(--sky)', marginBottom:18 }}>Decluttering Semplice</div>
          <h1 className="serif" style={{ color:'#fff', fontSize:38, lineHeight:1.08, margin:0, fontWeight:500 }}>
            Il tuo stile è<br/><span style={{ fontStyle:'italic', color:'var(--sky)' }}>già qui.</span><br/>Impara a liberarlo.
          </h1>
          <p style={{ color:'rgba(255,255,255,.74)', fontSize:15.5, lineHeight:1.5, marginTop:20, maxWidth:300 }}>
            Benvenuta. Un capo alla volta, lasciamo andare il superfluo e facciamo spazio a ciò che ti somiglia.
          </p>
        </div>

        <div className="fade-up" style={{ display:'flex', flexDirection:'column', gap:11, animationDelay:'.16s' }}>
          {providers.map(p=>(
            <button key={p.id} onClick={()=>onProvider(p.id)} className="btn btn-block"
              style={{ ...p.style, fontWeight:600, fontSize:15.5, padding:'15px 20px' }}>
              {p.icon({ size:20 })}{p.label}
            </button>
          ))}
          <button onClick={()=>onProvider('email')} style={{
            background:'none', border:'none', color:'rgba(255,255,255,.7)', fontSize:14.5,
            fontFamily:'var(--font-body)', cursor:'pointer', marginTop:6, fontWeight:600 }}>
            Registrati con email
          </button>
          <p style={{ color:'rgba(255,255,255,.4)', fontSize:11.5, textAlign:'center', lineHeight:1.5, marginTop:8 }}>
            Continuando accetti i Termini e la Privacy Policy di Scuola di Stile.
          </p>
        </div>
      </div>
    </div>
  );
}

const PROVIDER_META={
  google:{ name:'Anna', email:'anna.rossi@gmail.com', label:'Google' },
  apple:{ name:'Anna', email:'anna.rossi@icloud.com', label:'Apple' },
  ms:{ name:'Anna', email:'anna.rossi@outlook.com', label:'Microsoft' },
  email:{ name:'', email:'', label:'email' },
};

function SignupScreen({ provider, onDone, onBack }) {
  const meta=PROVIDER_META[provider]||PROVIDER_META.email;
  const [f,setF]=useState({ nome:meta.name, email:meta.email, citta:'', fonte:'', news:true });
  const set=(k,v)=>setF(s=>({...s,[k]:v}));
  const sources=['Instagram','YouTube','Una amica','Il sito web','Altro'];
  const ok = f.nome.trim() && /\S+@\S+\.\S+/.test(f.email);

  return (
    <Screen bg="var(--cream)">
      <BackBar onBack={onBack}/>
      <div className="fade-up">
        <div className="eyebrow" style={{ color:'var(--magenta)', marginBottom:10 }}>Crea il tuo profilo</div>
        <h1 className="serif" style={{ fontSize:29, margin:'0 0 6px', color:'var(--navy)', fontWeight:500 }}>Piacere, raccontati</h1>
        <p style={{ color:'var(--ink-soft)', fontSize:14.5, lineHeight:1.5, margin:'0 0 24px' }}>
          {provider!=='email' ? `Accesso con ${meta.label} riuscito. Completa i dettagli per personalizzare il percorso.` : 'Bastano pochi dettagli per personalizzare il tuo percorso di decluttering.'}
        </p>

        <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
          <div>
            <label className="field-label">Nome</label>
            <input className="field" value={f.nome} onChange={e=>set('nome',e.target.value)} placeholder="Come ti chiami?"/>
          </div>
          <div>
            <label className="field-label">Email</label>
            <input className="field" type="email" value={f.email} onChange={e=>set('email',e.target.value)} placeholder="tua@email.com"/>
          </div>
          <div>
            <label className="field-label">Città <span style={{color:'var(--ink-faint)',fontWeight:500}}>· facoltativo</span></label>
            <input className="field" value={f.citta} onChange={e=>set('citta',e.target.value)} placeholder="Bologna"/>
          </div>
          <div>
            <label className="field-label">Come ci hai conosciute?</label>
            <div style={{ display:'flex', flexWrap:'wrap', gap:8 }}>
              {sources.map(s=>(
                <button key={s} onClick={()=>set('fonte',s)} style={{
                  padding:'9px 14px', borderRadius:999, fontSize:13.5, fontWeight:600, cursor:'pointer',
                  fontFamily:'var(--font-body)',
                  border:'1.5px solid '+(f.fonte===s?'var(--magenta)':'var(--line-2)'),
                  background: f.fonte===s?'var(--magenta-050)':'var(--paper)',
                  color: f.fonte===s?'var(--magenta-600)':'var(--ink)' }}>{s}</button>
              ))}
            </div>
          </div>

          <label style={{ display:'flex', gap:11, alignItems:'flex-start', cursor:'pointer', marginTop:2 }}>
            <span onClick={()=>set('news',!f.news)} style={{
              width:24, height:24, borderRadius:7, flexShrink:0, marginTop:1,
              border:'1.5px solid '+(f.news?'var(--magenta)':'var(--line-2)'),
              background: f.news?'var(--magenta)':'transparent',
              display:'flex', alignItems:'center', justifyContent:'center' }}>
              {f.news && Icon.check({ size:15, color:'#fff', sw:2.6 })}
            </span>
            <span style={{ fontSize:13, color:'var(--ink-soft)', lineHeight:1.45 }}>
              Voglio ricevere consigli di stile e le nuove masterclass da Anna. Niente spam.
            </span>
          </label>
        </div>

        <button className="btn btn-primary btn-block" disabled={!ok} onClick={()=>onDone(f)} style={{ marginTop:28 }}>
          Inizia il quiz {Icon.arrowR({ size:18, color:'#fff' })}
        </button>
      </div>
    </Screen>
  );
}

Object.assign(window, { AuthScreen, SignupScreen, PROVIDER_META });