// Pages — part 5: Auth + onboarding (full-screen, rendered outside the shell).
(function () {
const { useState } = React;
const { cx, wash } = LMTXUtil;
const I = window.LMTIcons;

function PageAuth({ go }) {
  const [step, setStep] = useState(0); // 0 = welcome/signin, 1..3 onboarding
  const steps = [
    { k:'Capture', icon:I.Mic, title:'Speak it, and it grows', body:'Voice or text — a memory becomes a leaf. The Weaver transcribes, dates, and finds where it belongs.' },
    { k:'Connect', icon:I.Link, title:'Your life, rewired', body:'The Weaver proposes links between memories — what caused what, who echoes whom — and you decide what\'s true.' },
    { k:'Together', icon:I.People, title:'Remember as a family', body:'Share a scene, weave a story together, and keep what\'s fragile private. Consent is yours, per memory.' },
  ];
  return (
    <div className="lmtx-auth" style={{ position:'absolute', inset:0, display:'flex', background:'var(--bg)' }}>
      {/* left — breathing tree */}
      <div className="lmtx-auth-art" style={{ flex:'1 1 50%', position:'relative', overflow:'hidden', background:'var(--tree-bg)', borderRight:'1px solid var(--hair)' }}>
        <div style={{ position:'absolute', inset:0 }}><LifeTree height={900} width={760} showLabels={false}/></div>
        <div style={{ position:'absolute', inset:0, background:'radial-gradient(70% 60% at 50% 40%, transparent, var(--bg2) 130%)', pointerEvents:'none' }}/>
        <div style={{ position:'absolute', left:36, top:34, display:'flex', alignItems:'center', gap:11, zIndex:2 }}>
          <span style={{ width:38, height:38, borderRadius:12, background:'linear-gradient(150deg, var(--accent), color-mix(in oklab, var(--accent) 60%, #000))', display:'grid', placeItems:'center', boxShadow:'0 6px 18px -6px var(--accent)' }}><I.Tree style={{ fontSize:22, color:'var(--accent-fg)' }}/></span>
          <div><div className="disp" style={{ fontSize:16, fontWeight:650 }}>Life Memory Tree</div><div className="mono" style={{ fontSize:9.5, color:'var(--faint)', letterSpacing:'0.1em' }}>THE COLLABORATIVE WEAVER</div></div>
        </div>
        <div className="serif" style={{ position:'absolute', left:36, bottom:38, right:36, fontSize:21, lineHeight:1.45, color:'var(--ink)', maxWidth:420, zIndex:2 }}>
          "A place where memory isn't stored, but <span style={{ color:'var(--accent)' }}>grown</span> — leaf by leaf, season by season."
        </div>
      </div>
      {/* right — form / onboarding */}
      <div className="scroll" style={{ flex:'1 1 50%', display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', padding:'40px 30px', overflowY:'auto' }}>
        <div style={{ width:'100%', maxWidth:380 }} key={step} className="rise">
          {step === 0 ? (
            <>
              <h1 className="disp" style={{ fontSize:32, fontWeight:600, margin:0, letterSpacing:'-0.03em' }}>Welcome back</h1>
              <p style={{ color:'var(--muted)', fontSize:14.5, margin:'10px 0 26px', lineHeight:1.5 }}>Your tree has grown 2 leaves since you were last here.</p>
              <div style={{ display:'flex', flexDirection:'column', gap:11 }}>
                <label className="mono" style={{ fontSize:10.5, letterSpacing:'0.08em', textTransform:'uppercase', color:'var(--faint)' }}>Email</label>
                <input className="input" defaultValue="prabhat@weaver.life" style={{ padding:'12px 14px', fontSize:15 }}/>
                <label className="mono" style={{ fontSize:10.5, letterSpacing:'0.08em', textTransform:'uppercase', color:'var(--faint)', marginTop:6 }}>Password</label>
                <input className="input" type="password" defaultValue="............" style={{ padding:'12px 14px', fontSize:15 }}/>
                <button className="btn btn-pri press" onClick={() => go('today')} style={{ marginTop:10, padding:'13px', fontSize:14.5 }}>Enter your tree <I.ArrowRight style={{ fontSize:16 }}/></button>
                <button className="btn btn-out press" onClick={() => setStep(1)} style={{ padding:'12px' }}>Create an account</button>
              </div>
              <div style={{ display:'flex', alignItems:'center', gap:10, margin:'22px 0' }}><div style={{ flex:1, height:1, background:'var(--hair)' }}/><span className="mono" style={{ fontSize:10, color:'var(--faint)' }}>OR</span><div style={{ flex:1, height:1, background:'var(--hair)' }}/></div>
              <div style={{ display:'flex', gap:10 }}>
                {['Apple','Google'].map(p => <button key={p} className="btn btn-out press" style={{ flex:1, padding:'11px' }}>{p}</button>)}
              </div>
            </>
          ) : (
            <>
              <div style={{ display:'flex', gap:6, marginBottom:26 }}>
                {steps.map((_,i) => <div key={i} style={{ flex:1, height:4, borderRadius:2, background: i <= step-1 ? 'var(--accent)' : 'var(--sunken)', transition:'background .3s' }}/>)}
              </div>
              {(() => { const s = steps[step-1]; const Ic = s.icon; return <>
                <span style={{ width:54, height:54, borderRadius:16, background:'var(--accent-wash)', border:'1px solid var(--accent-line)', display:'grid', placeItems:'center', color:'var(--accent)', fontSize:26, marginBottom:18 }} className="floaty"><Ic/></span>
                <div className="mono" style={{ fontSize:10.5, letterSpacing:'0.12em', textTransform:'uppercase', color:'var(--accent)', marginBottom:8 }}>{s.k} · step {step} of 3</div>
                <h1 className="disp" style={{ fontSize:30, fontWeight:600, margin:0, letterSpacing:'-0.03em', lineHeight:1.05 }}>{s.title}</h1>
                <p style={{ color:'var(--muted)', fontSize:15, margin:'14px 0 30px', lineHeight:1.6 }}>{s.body}</p>
                <div style={{ display:'flex', gap:10 }}>
                  <button className="btn btn-ghost press" onClick={() => setStep(step === 1 ? 0 : step-1)}>Back</button>
                  <div style={{ flex:1 }}/>
                  {step < 3 ? <button className="btn btn-pri press" onClick={() => setStep(step+1)} style={{ padding:'12px 22px' }}>Continue <I.ArrowRight style={{ fontSize:16 }}/></button>
                    : <button className="btn btn-pri press" onClick={() => go('capture')} style={{ padding:'12px 22px' }}>Plant your first leaf <I.Leaf style={{ fontSize:16 }}/></button>}
                </div>
              </>; })()}
            </>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PageAuth });
})();