// t24-screens-1.jsx — onboarding, auth, role select, home (taker/giver), categories, services, search

// ── 0. Splash ────────────────────────────────────────────────────────────────
function ScreenSplash({ dark }) {
  return (
    <T24Phone dark={dark} hideStatus>
      <div style={{
        position: 'absolute', inset: 0, background: 'var(--t24-grad-hero)',
        display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column',
      }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 18 }}>
          <div style={{
            width: 96, height: 96, borderRadius: 28, background: 'rgba(255,255,255,0.08)',
            border: '1px solid rgba(255,255,255,0.18)', display: 'flex', alignItems: 'center', justifyContent: 'center',
            backdropFilter: 'blur(20px)',
          }}>
            <TaskerMark size={62} color="#fff"/>
          </div>
          <div style={{ color: '#fff', textAlign: 'center' }}>
            <div style={{ font: '800 32px/1 var(--t24-font-en)', letterSpacing: -0.5 }}>Tasker<span style={{ color: '#22D3EE' }}>24</span></div>
            <div style={{ font: '500 11px/1 var(--t24-font-en)', letterSpacing: 2, marginTop: 6, opacity: 0.7 }}>SOLUTIONS · 24/7</div>
          </div>
        </div>
        <div style={{
          position: 'absolute', bottom: 56, left: 0, right: 0, textAlign: 'center',
          color: 'rgba(255,255,255,0.6)', font: '500 12px/1 var(--t24-font-en)',
        }}>
          সারাদেশের সেবা · এক অ্যাপে
        </div>
      </div>
    </T24Phone>
  );
}

// ── 1. Onboarding carousel (page 2 of 3) ─────────────────────────────────────
function ScreenOnboarding({ dark }) {
  return (
    <T24Phone dark={dark}>
      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 20px' }}>
          <TaskerLogo size={18} compact/>
          <button style={{ background: 'transparent', border: 'none', font: '600 13px var(--t24-font-en)', color: 'var(--t24-muted)' }}>Skip</button>
        </div>
        <div style={{ flex: 1, padding: '20px 24px', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
          <div style={{
            width: 220, height: 220, borderRadius: 32, background: 'var(--t24-grad-sky)',
            border: '1px solid var(--t24-border)', position: 'relative', overflow: 'hidden',
            display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 28,
          }}>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, padding: 18 }}>
              {['electrician','plumbing','housecleaning','ac','tuition','sadevelopment','doctor','fdelivery','driver'].map(s => (
                <div key={s} style={{
                  width: 50, height: 50, borderRadius: 12, background: '#fff',
                  border: '1px solid var(--t24-border)', display: 'flex', alignItems: 'center', justifyContent: 'center',
                  boxShadow: 'var(--t24-sh-1)',
                }}><TaskerIcon kind="svc" name={s} size={36}/></div>
              ))}
            </div>
            <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 60%, var(--t24-grad-sky) 100%)' }}/>
          </div>
          <h2 className="t24-title-l" style={{ textAlign: 'center', color: 'var(--t24-text)', margin: '0 0 8px' }}>
            One app for every service
          </h2>
          <p className="t24-body-l" style={{ textAlign: 'center', color: 'var(--t24-muted)', margin: 0, maxWidth: 280 }}>
            From electricians to tutors to fresh groceries — find verified service-givers across Bangladesh.
          </p>
          <div style={{ display: 'flex', gap: 6, marginTop: 24 }}>
            {[0,1,2].map(i => (
              <div key={i} style={{
                width: i === 1 ? 22 : 6, height: 6, borderRadius: 3,
                background: i === 1 ? 'var(--t24-blue)' : 'var(--t24-border)',
              }}/>
            ))}
          </div>
        </div>
        <div style={{ padding: '0 24px 30px' }}>
          <T24Button full kind="primary">Continue</T24Button>
        </div>
      </div>
    </T24Phone>
  );
}

// ── 2. Sign-in ───────────────────────────────────────────────────────────────
function ScreenSignIn({ dark }) {
  return (
    <T24Phone dark={dark}>
      <div style={{ padding: '12px 24px 24px', height: '100%', boxSizing: 'border-box', display: 'flex', flexDirection: 'column' }}>
        <TaskerLogo size={20}/>
        <div style={{ marginTop: 38 }}>
          <h1 className="t24-display-l" style={{ margin: 0, color: 'var(--t24-text)' }}>Welcome back</h1>
          <p className="t24-body-l" style={{ color: 'var(--t24-muted)', marginTop: 6 }}>Sign in to continue · আপনার অ্যাকাউন্টে প্রবেশ করুন</p>
        </div>
        <div style={{ marginTop: 28, display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div>
            <label className="t24-label-l" style={{ color: 'var(--t24-muted)' }}>Phone or Email</label>
            <div style={{ marginTop: 6 }}>
              <input className="t24-input" placeholder="+880 1XXX-XXXXXX" defaultValue="+880 1712-345 678"/>
            </div>
          </div>
          <div>
            <label className="t24-label-l" style={{ color: 'var(--t24-muted)' }}>Password</label>
            <div style={{ marginTop: 6, position: 'relative' }}>
              <input type="password" className="t24-input" defaultValue="•••••••••••"/>
              <span style={{ position: 'absolute', right: 14, top: '50%', transform: 'translateY(-50%)', color: 'var(--t24-muted)' }}>{LineIcons.eye(16)}</span>
            </div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 2 }}>
            <label style={{ display: 'inline-flex', alignItems: 'center', gap: 8, font: '500 13px var(--t24-font-en)', color: 'var(--t24-text)' }}>
              <span style={{ width: 18, height: 18, borderRadius: 5, background: 'var(--t24-blue)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: '#fff' }}>{LineIcons.check(12)}</span>
              Remember me
            </label>
            <button style={{ background: 'transparent', border: 'none', font: '600 13px var(--t24-font-en)', color: 'var(--t24-blue)' }}>Forgot?</button>
          </div>
        </div>
        <div style={{ marginTop: 'auto', display: 'flex', flexDirection: 'column', gap: 12 }}>
          <T24Button full kind="primary" size="lg">Sign In</T24Button>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, color: 'var(--t24-muted)' }}>
            <div style={{ flex: 1, height: 1, background: 'var(--t24-divider)' }}/>
            <span className="t24-caption">or continue with</span>
            <div style={{ flex: 1, height: 1, background: 'var(--t24-divider)' }}/>
          </div>
          <div style={{ display: 'flex', gap: 10 }}>
            {['G','f','','OTP'].slice(0,3).map((l,i) => (
              <button key={i} style={{
                flex: 1, height: 48, borderRadius: 14, border: '1.5px solid var(--t24-border)',
                background: 'var(--t24-surface)', font: '700 16px var(--t24-font-en)',
                color: i === 0 ? '#EA4335' : i === 1 ? '#1877F2' : 'var(--t24-text)', cursor: 'pointer',
              }}>{l || LineIcons.phone(18)}</button>
            ))}
          </div>
          <p className="t24-body-m" style={{ textAlign: 'center', color: 'var(--t24-muted)', margin: '8px 0 0' }}>
            New to Tasker 24? <span style={{ color: 'var(--t24-blue)', fontWeight: 700 }}>Create account</span>
          </p>
        </div>
      </div>
    </T24Phone>
  );
}

// ── 3. Role select (taker / giver) ───────────────────────────────────────────
function ScreenRoleSelect({ dark }) {
  return (
    <T24Phone dark={dark}>
      <div style={{ padding: '14px 24px 24px', height: '100%', boxSizing: 'border-box', display: 'flex', flexDirection: 'column' }}>
        <button style={{ background: 'transparent', border: 'none', alignSelf: 'flex-start', display: 'inline-flex', alignItems: 'center', gap: 6, color: 'var(--t24-muted)', font: '600 13px var(--t24-font-en)' }}>
          {LineIcons.back(16)} Back
        </button>
        <div style={{ marginTop: 18 }}>
          <h1 className="t24-display-l" style={{ margin: 0, color: 'var(--t24-text)' }}>How will you use Tasker 24?</h1>
          <p className="t24-body-l" style={{ color: 'var(--t24-muted)', marginTop: 6 }}>You can switch roles anytime from your profile.</p>
        </div>
        <div style={{ marginTop: 28, display: 'flex', flexDirection: 'column', gap: 14 }}>
          {[
            { k: 'taker',    icon: LineIcons.user(28),     title: 'I need a service',   tag: 'Service Taker',  desc: 'Book electricians, cleaners, tutors, doctors and more across Bangladesh.', accent: 'var(--t24-blue)' },
            { k: 'giver',    icon: LineIcons.briefcase(28),title: 'I provide a service',tag: 'Service Giver',  desc: 'Earn from your skills. Get matched with takers nearby.',                       accent: 'var(--t24-cyan)' },
            { k: 'both',     icon: LineIcons.swap(28),     title: 'Both — switch anytime', tag: 'Hybrid',     desc: 'Use one account to take and provide services.',                                 accent: '#7C3AED' },
          ].map((o, i) => (
            <div key={o.k} className="t24-card" style={{
              padding: 16, display: 'flex', gap: 14, alignItems: 'flex-start',
              border: i === 0 ? `2px solid ${o.accent}` : '1px solid var(--t24-border)',
              boxShadow: i === 0 ? '0 8px 20px rgba(30,99,214,0.18)' : 'var(--t24-sh-1)',
            }}>
              <div className="t24-icon-tile" style={{ width: 52, height: 52, color: o.accent, background: `color-mix(in srgb, ${o.accent} 12%, var(--t24-sky))` }}>
                {o.icon}
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <span className="t24-title-s" style={{ color: 'var(--t24-text)' }}>{o.title}</span>
                </div>
                <div className="t24-body-m" style={{ color: 'var(--t24-muted)', marginTop: 4 }}>{o.desc}</div>
                <span style={{
                  display: 'inline-block', marginTop: 8, padding: '3px 8px', borderRadius: 6,
                  background: `color-mix(in srgb, ${o.accent} 12%, transparent)`, color: o.accent,
                  font: '700 10px/1 var(--t24-font-en)', letterSpacing: 0.4,
                }}>{o.tag.toUpperCase()}</span>
              </div>
              <div style={{
                width: 22, height: 22, borderRadius: 11, border: `2px solid ${i === 0 ? o.accent : 'var(--t24-border)'}`,
                background: i === 0 ? o.accent : 'transparent', color: '#fff',
                display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
              }}>{i === 0 && LineIcons.check(12)}</div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 'auto' }}>
          <T24Button full kind="primary" size="lg">Continue as Service Taker</T24Button>
        </div>
      </div>
    </T24Phone>
  );
}

// ── 4. OTP verification ──────────────────────────────────────────────────────
function ScreenOTP({ dark }) {
  return (
    <T24Phone dark={dark}>
      <div style={{ padding: '14px 24px 24px', height: '100%', boxSizing: 'border-box', display: 'flex', flexDirection: 'column' }}>
        <button style={{ background: 'transparent', border: 'none', alignSelf: 'flex-start', color: 'var(--t24-muted)' }}>{LineIcons.back(20)}</button>
        <div style={{
          width: 64, height: 64, borderRadius: 18, marginTop: 26,
          background: 'var(--t24-sky)', border: '1px solid var(--t24-border)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--t24-blue)',
        }}>{LineIcons.shield(28)}</div>
        <h1 className="t24-display-l" style={{ margin: '20px 0 6px', color: 'var(--t24-text)' }}>Verify your phone</h1>
        <p className="t24-body-l" style={{ color: 'var(--t24-muted)', margin: 0 }}>
          We sent a 6-digit code to <strong style={{ color: 'var(--t24-text)' }}>+880 1712-345 678</strong>
        </p>
        <div style={{ display: 'flex', gap: 8, marginTop: 28, justifyContent: 'space-between' }}>
          {[2,8,4,9,'',''].map((d, i) => (
            <div key={i} style={{
              flex: 1, height: 60, borderRadius: 14,
              border: `2px solid ${d === '' && i === 4 ? 'var(--t24-blue)' : 'var(--t24-border)'}`,
              background: 'var(--t24-surface)', display: 'flex', alignItems: 'center', justifyContent: 'center',
              font: '700 26px var(--t24-font-en)', color: 'var(--t24-text)',
              boxShadow: i === 4 ? '0 0 0 4px rgba(30,99,214,0.12)' : 'none',
            }}>{d}{d === '' && i === 4 ? <span style={{ width: 2, height: 26, background: 'var(--t24-blue)', animation: 'blink 1s steps(2) infinite' }}/> : ''}</div>
          ))}
        </div>
        <div style={{ marginTop: 24, textAlign: 'center', color: 'var(--t24-muted)' }} className="t24-body-m">
          Resend code in <strong style={{ color: 'var(--t24-text)' }}>00:42</strong>
        </div>
        <div style={{ marginTop: 'auto' }}>
          <T24Button full kind="primary" size="lg">Verify & Continue</T24Button>
          <p className="t24-body-m" style={{ textAlign: 'center', color: 'var(--t24-muted)', marginTop: 12 }}>
            Didn't get it? <span style={{ color: 'var(--t24-blue)', fontWeight: 700 }}>Try via Email</span>
          </p>
        </div>
      </div>
    </T24Phone>
  );
}

// ── 5. Location permission ───────────────────────────────────────────────────
function ScreenLocation({ dark }) {
  return (
    <T24Phone dark={dark}>
      <div style={{ padding: '14px 24px 24px', height: '100%', boxSizing: 'border-box', display: 'flex', flexDirection: 'column' }}>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
          <div style={{
            width: 200, height: 200, borderRadius: '50%', background: 'var(--t24-grad-sky)',
            border: '1px solid var(--t24-border)', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative',
          }}>
            <div style={{
              position: 'absolute', inset: 26, borderRadius: '50%', border: '2px dashed var(--t24-border)',
            }}/>
            <div style={{ color: 'var(--t24-blue)', position: 'relative' }}>
              <svg width="68" height="68" viewBox="0 0 24 24"><path d="M12 22s7-7 7-12a7 7 0 0 0-14 0c0 5 7 12 7 12z" fill="var(--t24-blue)" stroke="var(--t24-deep)" strokeWidth="1.4"/><circle cx="12" cy="10" r="2.8" fill="#fff"/></svg>
            </div>
          </div>
          <h1 className="t24-display-l" style={{ margin: '24px 0 8px', color: 'var(--t24-text)', textAlign: 'center' }}>Allow location</h1>
          <p className="t24-body-l" style={{ color: 'var(--t24-muted)', textAlign: 'center', margin: 0, maxWidth: 280 }}>
            We use your location to find the nearest verified service-givers in your zone.
          </p>
          <div className="t24-card" style={{ marginTop: 22, padding: 14, display: 'flex', gap: 10, alignItems: 'center', width: '100%', boxSizing: 'border-box' }}>
            <div className="t24-icon-tile" style={{ width: 36, height: 36, color: 'var(--t24-success)' }}>{LineIcons.shield(18)}</div>
            <div className="t24-body-m" style={{ color: 'var(--t24-muted)' }}>
              <strong style={{ color: 'var(--t24-text)' }}>Privacy first.</strong> Your exact address is never shared with service-givers until you confirm a booking.
            </div>
          </div>
        </div>
        <T24Button full kind="primary" size="lg">Allow While Using App</T24Button>
        <button style={{ background: 'transparent', border: 'none', marginTop: 12, color: 'var(--t24-muted)', font: '600 13px var(--t24-font-en)' }}>Enter Manually</button>
      </div>
    </T24Phone>
  );
}

Object.assign(window, { ScreenSplash, ScreenOnboarding, ScreenSignIn, ScreenRoleSelect, ScreenOTP, ScreenLocation });