// screens-onboarding.jsx — Group 1: Onboarding & KYC

/* ── Screen 1: Splash / Age Gate ── */
function SplashScreen({ navigate }) {
  const [blocked, setBlocked] = React.useState(false);
  if (blocked) {
    return (
      <div style={{ height:'100%', display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', background:'#0F111A', padding:32, textAlign:'center' }}>
        <div style={{ width:60, height:60, borderRadius:18, background:'rgba(239,91,91,0.15)', border:'1px solid var(--color-danger)', display:'flex', alignItems:'center', justifyContent:'center', marginBottom:20 }}>
          <i className="ph ph-prohibit" style={{ fontSize:28, color:'var(--color-danger)' }} />
        </div>
        <h2 style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:22, color:'var(--color-text-primary)', marginBottom:12 }}>Access restricted</h2>
        <p style={{ fontFamily:'var(--font-body)', fontSize:14, color:'var(--color-text-secondary)', lineHeight:1.6, marginBottom:24 }}>
          You must be 18 or older to use VantageBet. If you need support, please contact GamCare or BeGambleAware.
        </p>
        <a href="#" style={{ fontFamily:'var(--font-body)', fontSize:13, color:'var(--color-primary)', fontWeight:500 }}>gamcare.org.uk</a>
      </div>
    );
  }
  return (
    <div style={{ height:'100%', display:'flex', flexDirection:'column', background:'linear-gradient(160deg,#080C1A,#0F1520,#101826)' }}>
      {/* Brand area */}
      <div style={{ flex:1, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', padding:32 }}>
        <div style={{ width:80, height:80, borderRadius:24, background:'var(--color-primary)', display:'flex', alignItems:'center', justifyContent:'center', marginBottom:20, boxShadow:'0 0 60px rgba(91,138,245,0.35)' }}>
          <i className="ph ph-poker-chip" style={{ fontSize:40, color:'#fff' }} />
        </div>
        <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:34, color:'#fff', letterSpacing:-0.5, marginBottom:8 }}>
          Vantage<span style={{ color:'var(--color-primary)' }}>Bet</span>
        </div>
        <div style={{ fontFamily:'var(--font-body)', fontSize:14, color:'var(--color-text-muted)', letterSpacing:1, textTransform:'uppercase' }}>Experience Elite Betting</div>
        <div style={{ marginTop:32, display:'flex', gap:8 }}>
          {['Football','Casino','Live Games'].map(tag => (
            <span key={tag} style={{ background:'rgba(255,255,255,0.08)', border:'1px solid rgba(255,255,255,0.12)', borderRadius:20, padding:'4px 12px', fontFamily:'var(--font-body)', fontSize:11, color:'rgba(255,255,255,0.6)' }}>{tag}</span>
          ))}
        </div>
      </div>

      {/* Age gate */}
      <div style={{ padding:'24px 24px 48px', background:'rgba(255,255,255,0.03)', borderTop:'1px solid rgba(255,255,255,0.06)' }}>
        <div style={{ fontFamily:'var(--font-display)', fontWeight:600, fontSize:18, color:'#fff', textAlign:'center', marginBottom:6 }}>Are you 18 or older?</div>
        <div style={{ fontFamily:'var(--font-body)', fontSize:13, color:'var(--color-text-muted)', textAlign:'center', marginBottom:20 }}>You must confirm your age to continue.</div>
        <button onClick={() => navigate('signup')} style={{ width:'100%', height:52, borderRadius:12, background:'var(--color-primary)', border:'none', cursor:'pointer', fontFamily:'var(--font-body)', fontSize:15, fontWeight:600, color:'#fff', marginBottom:14 }}>
          Yes, I'm 18 or older
        </button>
        <div style={{ textAlign:'center' }}>
          <button onClick={() => setBlocked(true)} style={{ background:'none', border:'none', cursor:'pointer', fontFamily:'var(--font-body)', fontSize:13, color:'var(--color-text-muted)' }}>
            No, I'm under 18
          </button>
        </div>
        <div style={{ fontFamily:'var(--font-body)', fontSize:10, color:'var(--color-text-muted)', textAlign:'center', marginTop:20, lineHeight:1.6 }}>
          By continuing you agree to our Terms & Conditions and confirm you're in a jurisdiction where online gambling is legal. Please gamble responsibly.
        </div>
      </div>
    </div>
  );
}

/* ── Screen 2: Sign Up Step 1 ── */
function SignUpScreen({ navigate, goBack }) {
  const [email, setEmail] = React.useState('');
  const [pass, setPass] = React.useState('');
  const [showPass, setShowPass] = React.useState(false);
  const [terms, setTerms] = React.useState(false);
  const valid = email.includes('@') && pass.length >= 8 && terms;
  return (
    <div style={{ height:'100%', display:'flex', flexDirection:'column', background:'var(--color-bg)' }}>
      <div style={{ background:'var(--color-nav-bg)', borderBottom:'1px solid var(--color-border-subtle)', padding:'10px 16px' }}>
        <button onClick={goBack} style={{ background:'none', border:'none', cursor:'pointer', padding:0, display:'flex', alignItems:'center', gap:6, marginBottom:12 }}>
          <i className="ph ph-caret-left" style={{ fontSize:16, color:'var(--color-text-secondary)' }} />
          <span style={{ fontFamily:'var(--font-body)', fontSize:13, color:'var(--color-text-secondary)' }}>Back</span>
        </button>
        {/* Progress */}
        <div style={{ display:'flex', gap:4, marginBottom:10 }}>
          {[1,2,3].map(n => <div key={n} style={{ flex:1, height:4, borderRadius:2, background:n===1?'var(--color-primary)':'var(--color-border)' }} />)}
        </div>
        <div style={{ fontFamily:'var(--font-body)', fontSize:11, color:'var(--color-text-muted)', marginBottom:4 }}>Step 1 of 3</div>
        <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:22, color:'var(--color-text-primary)' }}>Create your account</div>
      </div>
      <div style={{ flex:1, overflowY:'auto', padding:'24px 16px' }}>
        {/* Email */}
        <div style={{ marginBottom:16 }}>
          <label style={{ fontFamily:'var(--font-body)', fontSize:12, fontWeight:600, color:'var(--color-text-secondary)', display:'block', marginBottom:6 }}>Email address</label>
          <div style={{ height:52, borderRadius:12, background:'var(--color-surface)', border:`1.5px solid ${email.includes('@')?'var(--color-primary)':'var(--color-border)'}`, display:'flex', alignItems:'center', padding:'0 14px', gap:10, transition:'border-color 0.15s' }}>
            <i className="ph ph-envelope" style={{ fontSize:16, color:'var(--color-text-muted)' }} />
            <input value={email} onChange={e => setEmail(e.target.value)} placeholder="you@example.com" style={{ flex:1, background:'none', border:'none', outline:'none', fontFamily:'var(--font-body)', fontSize:15, color:'var(--color-text-primary)' }} />
          </div>
        </div>
        {/* Password */}
        <div style={{ marginBottom:16 }}>
          <label style={{ fontFamily:'var(--font-body)', fontSize:12, fontWeight:600, color:'var(--color-text-secondary)', display:'block', marginBottom:6 }}>Password</label>
          <div style={{ height:52, borderRadius:12, background:'var(--color-surface)', border:`1.5px solid ${pass.length>=8?'var(--color-primary)':'var(--color-border)'}`, display:'flex', alignItems:'center', padding:'0 14px', gap:10, transition:'border-color 0.15s' }}>
            <i className="ph ph-lock" style={{ fontSize:16, color:'var(--color-text-muted)' }} />
            <input type={showPass?'text':'password'} value={pass} onChange={e => setPass(e.target.value)} placeholder="Min. 8 characters" style={{ flex:1, background:'none', border:'none', outline:'none', fontFamily:'var(--font-body)', fontSize:15, color:'var(--color-text-primary)' }} />
            <button onClick={() => setShowPass(s=>!s)} style={{ background:'none', border:'none', cursor:'pointer', padding:0 }}>
              <i className={`ph ${showPass?'ph-eye-slash':'ph-eye'}`} style={{ fontSize:16, color:'var(--color-text-muted)' }} />
            </button>
          </div>
          {pass.length > 0 && pass.length < 8 && <div style={{ fontFamily:'var(--font-body)', fontSize:11, color:'var(--color-danger)', marginTop:5 }}>Password must be at least 8 characters</div>}
        </div>
        {/* Terms */}
        <div style={{ display:'flex', alignItems:'flex-start', gap:10, marginBottom:24, cursor:'pointer' }} onClick={() => setTerms(t=>!t)}>
          <div style={{ width:20, height:20, borderRadius:5, border:`1.5px solid ${terms?'var(--color-primary)':'var(--color-border)'}`, background:terms?'var(--color-primary)':'transparent', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0, marginTop:1 }}>
            {terms && <i className="ph ph-check" style={{ fontSize:12, color:'#fff' }} />}
          </div>
          <span style={{ fontFamily:'var(--font-body)', fontSize:12, color:'var(--color-text-secondary)', lineHeight:1.5 }}>
            I agree to the <span style={{ color:'var(--color-primary)' }}>Terms & Conditions</span> and <span style={{ color:'var(--color-primary)' }}>Privacy Policy</span>. I confirm I am 18+.
          </span>
        </div>
        <div style={{ textAlign:'center', marginBottom:20 }}>
          <span style={{ fontFamily:'var(--font-body)', fontSize:13, color:'var(--color-text-muted)' }}>Already have an account? </span>
          <button style={{ background:'none', border:'none', cursor:'pointer', fontFamily:'var(--font-body)', fontSize:13, color:'var(--color-primary)', fontWeight:500 }}>Log in</button>
        </div>
      </div>
      <div style={{ padding:'12px 16px 24px', background:'var(--color-nav-bg)', borderTop:'1px solid var(--color-border)' }}>
        <button onClick={() => valid && navigate('kyc-capture')} style={{ width:'100%', height:52, borderRadius:12, background:valid?'var(--color-primary)':'var(--color-border)', border:'none', cursor:valid?'pointer':'default', fontFamily:'var(--font-body)', fontSize:15, fontWeight:600, color:valid?'#fff':'var(--color-text-muted)', transition:'background 0.15s' }}>
          Continue →
        </button>
      </div>
    </div>
  );
}

/* ── Screen 3: KYC Document Capture ── */
function KYCCaptureScreen({ navigate, goBack }) {
  const [state, setState] = React.useState('positioning'); // positioning | capturing | success
  const [tipsOpen, setTipsOpen] = React.useState(false);
  React.useEffect(() => {
    if (state === 'capturing') {
      const t = setTimeout(() => setState('success'), 2000);
      return () => clearTimeout(t);
    }
  }, [state]);
  return (
    <div style={{ height:'100%', display:'flex', flexDirection:'column', background:'var(--color-bg)' }}>
      <div style={{ background:'var(--color-nav-bg)', borderBottom:'1px solid var(--color-border-subtle)', padding:'10px 16px' }}>
        <button onClick={goBack} style={{ background:'none', border:'none', cursor:'pointer', padding:0, display:'flex', alignItems:'center', gap:6, marginBottom:12 }}>
          <i className="ph ph-caret-left" style={{ fontSize:16, color:'var(--color-text-secondary)' }} />
        </button>
        <div style={{ display:'flex', gap:4, marginBottom:10 }}>
          {[1,2,3].map(n => <div key={n} style={{ flex:1, height:4, borderRadius:2, background:n<=2?'var(--color-primary)':'var(--color-border)' }} />)}
        </div>
        <div style={{ fontFamily:'var(--font-body)', fontSize:11, color:'var(--color-text-muted)', marginBottom:4 }}>Step 2 of 3 — Identity verification</div>
        <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:20, color:'var(--color-text-primary)' }}>Scan your ID document</div>
      </div>
      <div style={{ flex:1, overflowY:'auto', padding:'20px 16px' }}>
        {/* Viewfinder */}
        <div style={{ borderRadius:16, overflow:'hidden', background:'#0A0C14', height:200, position:'relative', marginBottom:16, display:'flex', alignItems:'center', justifyContent:'center' }}>
          {/* Corner guides */}
          {[['0%','0%','top','left'],['0%','100%','top','right'],['100%','0%','bottom','left'],['100%','100%','bottom','right']].map(([t,l,vv,hh],i) => (
            <div key={i} style={{ position:'absolute', top:t==='0%'?16:'auto', bottom:t==='100%'?16:'auto', left:l==='0%'?16:'auto', right:l==='100%'?16:'auto', width:24, height:24, borderTop:vv==='top'?`2px solid ${state==='success'?'var(--color-success)':'var(--color-primary)'}`:undefined, borderBottom:vv==='bottom'?`2px solid ${state==='success'?'var(--color-success)':'var(--color-primary)'}`:undefined, borderLeft:hh==='left'?`2px solid ${state==='success'?'var(--color-success)':'var(--color-primary)'}`:undefined, borderRight:hh==='right'?`2px solid ${state==='success'?'var(--color-success)':'var(--color-primary)'}`:undefined }} />
          ))}
          {/* Document frame */}
          <div style={{ width:240, height:150, borderRadius:8, border:`1.5px dashed ${state==='success'?'var(--color-success)':'rgba(91,138,245,0.5)'}`, display:'flex', alignItems:'center', justifyContent:'center' }}>
            {state === 'success'
              ? <i className="ph ph-check-circle" style={{ fontSize:40, color:'var(--color-success)' }} />
              : <i className="ph ph-identification-card" style={{ fontSize:40, color:'rgba(91,138,245,0.4)' }} />}
          </div>
        </div>
        {/* Feedback strip */}
        <div style={{ borderRadius:12, padding:'10px 14px', marginBottom:16, background:state==='success'?'rgba(39,196,132,0.12)':state==='capturing'?'rgba(91,138,245,0.12)':'var(--color-surface)', border:`1px solid ${state==='success'?'rgba(39,196,132,0.3)':state==='capturing'?'rgba(91,138,245,0.3)':'var(--color-border)'}`, display:'flex', alignItems:'center', gap:10 }}>
          <i className={`ph ${state==='success'?'ph-check-circle':state==='capturing'?'ph-spinner':'ph-info'}`} style={{ fontSize:18, color:state==='success'?'var(--color-success)':state==='capturing'?'var(--color-primary)':'var(--color-text-muted)' }} />
          <span style={{ fontFamily:'var(--font-body)', fontSize:13, color:'var(--color-text-primary)' }}>
            {state==='success'?'Document captured successfully!':state==='capturing'?'Capturing — hold steady…':'Position your document within the frame'}
          </span>
        </div>
        {/* Tips */}
        <div style={{ background:'var(--color-surface)', border:'1px solid var(--color-border)', borderRadius:12, overflow:'hidden', marginBottom:20 }}>
          <button onClick={() => setTipsOpen(o=>!o)} style={{ width:'100%', background:'none', border:'none', cursor:'pointer', padding:'12px 14px', display:'flex', alignItems:'center', justifyContent:'space-between' }}>
            <span style={{ fontFamily:'var(--font-body)', fontSize:13, fontWeight:500, color:'var(--color-text-primary)' }}>Tips for a good scan</span>
            <i className={`ph ${tipsOpen?'ph-caret-up':'ph-caret-down'}`} style={{ fontSize:14, color:'var(--color-text-muted)' }} />
          </button>
          {tipsOpen && (
            <div style={{ padding:'0 14px 14px', display:'flex', flexDirection:'column', gap:8 }}>
              {['Ensure good lighting — avoid direct glare','Hold the document flat and steady','Make sure all 4 corners are visible','Avoid covering any text with your fingers'].map(tip => (
                <div key={tip} style={{ display:'flex', gap:8, alignItems:'flex-start' }}>
                  <i className="ph ph-check" style={{ fontSize:12, color:'var(--color-success)', marginTop:2 }} />
                  <span style={{ fontFamily:'var(--font-body)', fontSize:12, color:'var(--color-text-secondary)' }}>{tip}</span>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
      <div style={{ padding:'12px 16px 24px', background:'var(--color-nav-bg)', borderTop:'1px solid var(--color-border)' }}>
        {state === 'success'
          ? <button onClick={() => navigate('kyc-pending')} style={{ width:'100%', height:52, borderRadius:12, background:'var(--color-success)', border:'none', cursor:'pointer', fontFamily:'var(--font-body)', fontSize:15, fontWeight:600, color:'#fff' }}>Continue →</button>
          : <button onClick={() => setState('capturing')} style={{ width:'100%', height:52, borderRadius:12, background:state==='capturing'?'var(--color-border)':'var(--color-primary)', border:'none', cursor:state==='capturing'?'default':'pointer', fontFamily:'var(--font-body)', fontSize:15, fontWeight:600, color:state==='capturing'?'var(--color-text-muted)':'#fff' }}>{state==='capturing'?'Capturing…':'Capture document'}</button>}
      </div>
    </div>
  );
}

/* ── Screen 4: KYC Pending ── */
function KYCPendingScreen({ navigate }) {
  const steps = [
    { icon:'ph-check-circle', label:'Documents submitted', done:true },
    { icon:'ph-spinner', label:'Identity check in progress', done:false, active:true },
    { icon:'ph-lock-open', label:'Account fully unlocked', done:false },
  ];
  return (
    <div style={{ height:'100%', display:'flex', flexDirection:'column', background:'var(--color-bg)' }}>
      <div style={{ flex:1, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', padding:'32px 24px', textAlign:'center' }}>
        <div style={{ width:80, height:80, borderRadius:24, background:'rgba(91,138,245,0.12)', border:'1px solid rgba(91,138,245,0.3)', display:'flex', alignItems:'center', justifyContent:'center', marginBottom:24 }}>
          <i className="ph ph-clock" style={{ fontSize:38, color:'var(--color-primary)' }} />
        </div>
        <h1 style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:24, color:'var(--color-text-primary)', marginBottom:10 }}>Checking your documents</h1>
        <p style={{ fontFamily:'var(--font-body)', fontSize:14, color:'var(--color-text-secondary)', lineHeight:1.6, marginBottom:28 }}>
          We're verifying your identity. This usually takes<br /><strong style={{ color:'var(--color-text-primary)' }}>2–5 minutes</strong>.
        </p>
        {/* Steps */}
        <div style={{ width:'100%', background:'var(--color-surface)', borderRadius:16, border:'1px solid var(--color-border)', padding:'8px 0', marginBottom:28 }}>
          {steps.map((step,i) => (
            <div key={i} style={{ display:'flex', alignItems:'center', gap:12, padding:'12px 16px', borderBottom:i<steps.length-1?'1px solid var(--color-border-subtle)':undefined }}>
              <div style={{ width:32, height:32, borderRadius:'50%', background:step.done?'var(--color-success)':step.active?'rgba(91,138,245,0.15)':'var(--color-border)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
                <i className={`ph ${step.icon}`} style={{ fontSize:16, color:step.done?'#fff':step.active?'var(--color-primary)':'var(--color-text-muted)' }} />
              </div>
              <span style={{ fontFamily:'var(--font-body)', fontSize:13, color:step.done?'var(--color-success)':step.active?'var(--color-text-primary)':'var(--color-text-muted)', fontWeight:step.active?500:400 }}>{step.label}</span>
            </div>
          ))}
        </div>
      </div>
      <div style={{ padding:'12px 24px 40px' }}>
        <button onClick={() => navigate('home')} style={{ width:'100%', height:52, borderRadius:12, background:'var(--color-surface)', border:'1px solid var(--color-border)', cursor:'pointer', fontFamily:'var(--font-body)', fontSize:15, fontWeight:600, color:'var(--color-text-primary)', marginBottom:10 }}>
          Continue to app (limited access)
        </button>
        <div style={{ fontFamily:'var(--font-body)', fontSize:11, color:'var(--color-text-muted)', textAlign:'center', lineHeight:1.5 }}>You can browse games while we verify your account. Deposits unlock once verification is complete.</div>
      </div>
    </div>
  );
}

Object.assign(window, { SplashScreen, SignUpScreen, KYCCaptureScreen, KYCPendingScreen });