// t24-screens-5.jsx — service-giver: dashboard, requests inbox, earnings, reviews, my services, KYC

// ── 20. Giver dashboard ──────────────────────────────────────────────────────
function ScreenGiverDashboard({ dark }) {
  return (
    <T24Phone dark={dark}>
      <div style={{ padding: '6px 16px 8px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <div className="t24-caption" style={{ color: 'var(--t24-muted)' }}>SERVICE GIVER</div>
          <div className="t24-title-l" style={{ color: 'var(--t24-text)', fontSize: 20 }}>Hi, Rafiq</div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button style={{ width: 40, height: 40, borderRadius: 12, background: 'var(--t24-surface)', border: '1px solid var(--t24-border)', color: 'var(--t24-text)', position: 'relative' }}>
            {LineIcons.bell(18)}
            <span style={{ position: 'absolute', top: 7, right: 7, width: 8, height: 8, borderRadius: 4, background: 'var(--t24-danger)' }}/>
          </button>
          <div style={{ width: 40, height: 40, borderRadius: 12, background: 'var(--t24-grad-cyan)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', font: '700 15px var(--t24-font-en)' }}>R</div>
        </div>
      </div>
      <div style={{ padding: '0 16px 110px', overflow: 'auto', height: 'calc(100% - 70px)' }}>
        {/* Availability toggle */}
        <div className="t24-card" style={{ padding: 14, display: 'flex', alignItems: 'center', gap: 12, background: 'var(--t24-grad-cyan)', color: '#fff', border: 'none', boxShadow: 'var(--t24-sh-blue)' }}>
          <div style={{ width: 42, height: 42, borderRadius: 12, background: 'rgba(255,255,255,0.2)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <span style={{ width: 12, height: 12, borderRadius: 6, background: '#fff' }}/>
          </div>
          <div style={{ flex: 1 }}>
            <div className="t24-title-s" style={{ color: '#fff' }}>You're Available</div>
            <div className="t24-body-m" style={{ color: 'rgba(255,255,255,0.85)' }}>Visible to takers · 4 km radius</div>
          </div>
          <span style={{ width: 50, height: 30, borderRadius: 15, background: 'rgba(255,255,255,0.3)', position: 'relative' }}>
            <span style={{ position: 'absolute', right: 2, top: 2, width: 26, height: 26, borderRadius: 13, background: '#fff' }}/>
          </span>
        </div>

        {/* Today metrics */}
        <h3 className="t24-caption" style={{ color: 'var(--t24-muted)', margin: '18px 4px 10px' }}>TODAY · 15 MAY</h3>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
          <T24StatTile label="Earnings"     value="BDT 3,400" delta="+22%"/>
          <T24StatTile label="Jobs done"    value="4"  delta="+1"/>
          <T24StatTile label="Active leads" value="3"  accent="var(--t24-warning)"/>
          <T24StatTile label="Avg. rating"  value="4.9★" accent="var(--t24-success)"/>
        </div>

        {/* Mini chart */}
        <div className="t24-card" style={{ padding: 14, marginTop: 14 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <div>
              <div className="t24-title-s" style={{ color: 'var(--t24-text)' }}>This week</div>
              <div className="t24-body-m" style={{ color: 'var(--t24-muted)' }}>BDT 18,420 earned</div>
            </div>
            <div style={{ display: 'flex', gap: 4 }}>
              {['W','M','3M'].map((t,i) => (
                <span key={t} style={{ padding: '4px 10px', borderRadius: 8, background: i === 0 ? 'var(--t24-blue)' : 'transparent', color: i === 0 ? '#fff' : 'var(--t24-muted)', font: '600 11px/1 var(--t24-font-en)' }}>{t}</span>
              ))}
            </div>
          </div>
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8, marginTop: 16, height: 90 }}>
            {[40, 65, 50, 80, 95, 70, 88].map((h, i) => (
              <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
                <div style={{
                  width: '100%', height: `${h}%`, borderRadius: 6,
                  background: i === 4 ? 'var(--t24-grad-cyan)' : 'var(--t24-sky)',
                  border: i === 4 ? 'none' : '1px solid var(--t24-border)',
                }}/>
                <span style={{ font: '500 10px/1 var(--t24-font-en)', color: 'var(--t24-muted)' }}>{['M','T','W','T','F','S','S'][i]}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Pending requests */}
        <T24SectionTitle title="New requests" action="See all"/>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {T24_REQUESTS.filter(r => r.status === 'pending' || r.status === 'discuss').slice(0, 2).map(r => {
            const svc = T24_SERVICES.find(s => s.s === r.service);
            return (
              <div key={r.id} className="t24-card" style={{ padding: 14 }}>
                <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                  <TaskerIcon kind="svc" name={svc.s} size={44}/>
                  <div style={{ flex: 1 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                      <span className="t24-title-s" style={{ color: 'var(--t24-text)' }}>{svc.name}</span>
                      <T24StatusPill status={r.status}/>
                    </div>
                    <div className="t24-body-m" style={{ color: 'var(--t24-muted)', marginTop: 2 }}>{r.taker} · {r.area}</div>
                    <div className="t24-body-m" style={{ color: 'var(--t24-muted)', marginTop: 4 }}>{r.note}</div>
                  </div>
                </div>
                <div style={{ display: 'flex', gap: 8, marginTop: 12, paddingTop: 12, borderTop: '1px dashed var(--t24-divider)' }}>
                  <T24Button kind="secondary" size="sm">Decline</T24Button>
                  <T24Button kind="primary" size="sm">Accept · {r.amount}</T24Button>
                </div>
              </div>
            );
          })}
        </div>
      </div>
      <T24BottomNav dark={dark} fab onTap={() => {}} items={[
        { key: 'home',    icon: LineIcons.home(22), label: 'Dashboard', active: true },
        { key: 'inbox',   icon: LineIcons.task(22), label: 'Inbox',     badge: 3 },
        { key: 'earn',    icon: LineIcons.briefcase(22), label: 'Earnings' },
        { key: 'profile', icon: LineIcons.user(22), label: 'Profile' },
      ]}/>
    </T24Phone>
  );
}

// ── 21. Giver — Requests inbox ───────────────────────────────────────────────
function ScreenGiverInbox({ dark }) {
  return (
    <T24Phone dark={dark}>
      <T24AppBar leading={false} large title="Request inbox" subtitle="3 awaiting your response"/>
      <div style={{ padding: '0 16px 8px' }}>
        <div style={{ display: 'flex', gap: 8 }}>
          {[{t:'New · 3',a:true},{t:'In progress · 2'},{t:'Done'}].map((o, i) => (
            <div key={o.t} style={{ flex: 1, height: 38, borderRadius: 12, background: o.a ? 'var(--t24-navy)' : 'var(--t24-surface)', color: o.a ? '#fff' : 'var(--t24-muted)', border: o.a ? 'none' : '1px solid var(--t24-border)', display: 'flex', alignItems: 'center', justifyContent: 'center', font: `${o.a ? 700 : 600} 12px var(--t24-font-en)` }}>{o.t}</div>
          ))}
        </div>
      </div>
      <div style={{ padding: '14px 16px 110px', overflow: 'auto', height: 'calc(100% - 158px)', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {[
          { ...T24_REQUESTS[1], status: 'pending', detail: 'Mirpur DOHS · 3 km away' },
          { id: 'r-2406', service: 'plumbing', taker: 'Rumana Akter', amount: 'BDT 1,800', area: 'Dhanmondi 32', note: 'Kitchen sink leak — urgent', date: 'In 30 mins', status: 'pending', detail: '0.8 km · ASAP' },
          { ...T24_REQUESTS[2], status: 'discuss', detail: 'Quote shared · waiting for taker' },
        ].map(r => {
          const svc = T24_SERVICES.find(s => s.s === r.service);
          return (
            <div key={r.id} className="t24-card" style={{ padding: 14 }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
                <span style={{ font: '700 11px/1 var(--t24-font-en)', color: 'var(--t24-blue)' }}>#{r.id}</span>
                <T24StatusPill status={r.status}/>
              </div>
              <div style={{ display: 'flex', gap: 12 }}>
                <TaskerIcon kind="svc" name={svc.s} size={48}/>
                <div style={{ flex: 1 }}>
                  <div className="t24-title-s" style={{ color: 'var(--t24-text)' }}>{svc.name} · {r.taker}</div>
                  <div className="t24-body-m" style={{ color: 'var(--t24-muted)', marginTop: 2 }}>{r.detail}</div>
                  <div className="t24-body-m" style={{ color: 'var(--t24-muted)', marginTop: 4, fontStyle: 'italic' }}>"{r.note}"</div>
                </div>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 12, paddingTop: 12, borderTop: '1px dashed var(--t24-divider)' }}>
                <div>
                  <div style={{ font: '600 10px/1 var(--t24-font-en)', color: 'var(--t24-muted)' }}>OFFERED</div>
                  <div style={{ font: '800 16px/1 var(--t24-font-en)', color: 'var(--t24-deep)', marginTop: 3 }}>{r.amount}</div>
                </div>
                <div style={{ display: 'flex', gap: 8 }}>
                  <button style={{ width: 38, height: 38, borderRadius: 12, background: 'rgba(220,38,38,0.1)', color: 'var(--t24-danger)', border: 'none' }}>{LineIcons.x(16)}</button>
                  <button style={{ width: 38, height: 38, borderRadius: 12, background: 'var(--t24-sky)', color: 'var(--t24-blue)', border: 'none' }}>{LineIcons.chat(16)}</button>
                  <T24Button size="sm" kind="primary">Accept</T24Button>
                </div>
              </div>
            </div>
          );
        })}
      </div>
      <T24BottomNav dark={dark} fab items={[
        { key: 'home', icon: LineIcons.home(22), label: 'Dashboard' },
        { key: 'inbox', icon: LineIcons.task(22), label: 'Inbox', active: true, badge: 3 },
        { key: 'earn', icon: LineIcons.briefcase(22), label: 'Earnings' },
        { key: 'profile', icon: LineIcons.user(22), label: 'Profile' },
      ]}/>
    </T24Phone>
  );
}

// ── 22. Giver — Earnings ─────────────────────────────────────────────────────
function ScreenGiverEarnings({ dark }) {
  return (
    <T24Phone dark={dark}>
      <T24AppBar leading={false} large title="Earnings"/>
      <div style={{ padding: '0 16px 110px', overflow: 'auto', height: 'calc(100% - 90px)' }}>
        {/* Balance hero */}
        <div style={{ padding: 18, borderRadius: 22, background: 'var(--t24-grad-hero)', color: '#fff', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', right: -40, top: -50, width: 180, height: 180, borderRadius: '50%', background: 'radial-gradient(circle, rgba(34,211,238,0.32), transparent 65%)' }}/>
          <div className="t24-caption" style={{ color: 'rgba(255,255,255,0.7)' }}>AVAILABLE BALANCE</div>
          <div style={{ font: '800 36px/1 var(--t24-font-en)', marginTop: 8, letterSpacing: -1 }}>BDT 14,260</div>
          <div className="t24-body-m" style={{ color: 'rgba(255,255,255,0.7)', marginTop: 4 }}>+ BDT 1,840 pending settlement</div>
          <div style={{ display: 'flex', gap: 8, marginTop: 14, position: 'relative' }}>
            <T24Button kind="primary" size="sm" style={{ background: '#fff', color: 'var(--t24-deep)', boxShadow: 'none' }}>Withdraw</T24Button>
            <T24Button kind="secondary" size="sm" style={{ background: 'rgba(255,255,255,0.15)', color: '#fff', border: '1px solid rgba(255,255,255,0.2)' }}>Statement</T24Button>
          </div>
        </div>

        {/* Range tabs */}
        <div style={{ display: 'flex', gap: 6, marginTop: 14 }}>
          {['Day','Week','Month','Year'].map((t, i) => (
            <T24Chip key={t} active={i === 1}>{t}</T24Chip>
          ))}
        </div>

        {/* Bar + line chart */}
        <div className="t24-card" style={{ padding: 14, marginTop: 14 }}>
          <div className="t24-title-s" style={{ color: 'var(--t24-text)' }}>Earnings vs. jobs</div>
          <svg viewBox="0 0 320 140" width="100%" height="140" style={{ marginTop: 8 }}>
            <defs>
              <linearGradient id="bg-bar" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0" stopColor="#22D3EE"/><stop offset="1" stopColor="#1E63D6"/>
              </linearGradient>
            </defs>
            {[40,70,55,90,110,68,95].map((h, i) => (
              <rect key={i} x={20 + i * 42} y={130 - h} width="28" height={h} rx="5" fill="url(#bg-bar)" opacity={i === 4 ? 1 : 0.5}/>
            ))}
            <path d="M 34 90 L 76 60 L 118 75 L 160 30 L 202 10 L 244 55 L 286 35" stroke="#0B1F3A" strokeWidth="2.5" fill="none"/>
            {[90,60,75,30,10,55,35].map((y, i) => (
              <circle key={i} cx={34 + i * 42} cy={y} r="3.5" fill="#0B1F3A"/>
            ))}
          </svg>
          <div style={{ display: 'flex', justifyContent: 'space-around', font: '500 11px/1 var(--t24-font-en)', color: 'var(--t24-muted)', marginTop: 4 }}>
            {['M','T','W','T','F','S','S'].map((d, i) => <span key={i}>{d}</span>)}
          </div>
        </div>

        {/* Recent payouts */}
        <T24SectionTitle title="Recent payouts" action="History"/>
        <div className="t24-card" style={{ padding: 0, overflow: 'hidden' }}>
          {[
            { svc: 'electrician',   t: 'Job #r-2401 · A. Rahman',     a: '+1,060', day: '13 May · 2:14 PM',  st: 'paid' },
            { svc: 'electrician',   t: 'Job #r-2398 · Imran H.',      a: '+1,800', day: '12 May · 11:30 AM', st: 'paid' },
            { svc: 'ac',            t: 'Job #r-2395 · Sumaiya P.',    a: '+2,400', day: '10 May · 6:02 PM',  st: 'paid' },
            { svc: 'electrician',   t: 'Withdraw to bKash',           a: '−10,000',day: '9 May · 10:00 AM',  st: 'out'  },
          ].map((p, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px', borderBottom: i === 3 ? 'none' : '1px solid var(--t24-divider)' }}>
              <TaskerIcon kind="svc" name={p.svc} size={36}/>
              <div style={{ flex: 1 }}>
                <div className="t24-body-l" style={{ color: 'var(--t24-text)', fontWeight: 600, fontSize: 13.5 }}>{p.t}</div>
                <div className="t24-body-m" style={{ color: 'var(--t24-muted)', fontSize: 11 }}>{p.day}</div>
              </div>
              <span style={{ font: '700 14px/1 var(--t24-font-en)', color: p.st === 'paid' ? 'var(--t24-success)' : 'var(--t24-text)' }}>BDT {p.a}</span>
            </div>
          ))}
        </div>
      </div>
      <T24BottomNav dark={dark} fab items={[
        { key: 'home', icon: LineIcons.home(22), label: 'Dashboard' },
        { key: 'inbox', icon: LineIcons.task(22), label: 'Inbox', badge: 3 },
        { key: 'earn', icon: LineIcons.briefcase(22), label: 'Earnings', active: true },
        { key: 'profile', icon: LineIcons.user(22), label: 'Profile' },
      ]}/>
    </T24Phone>
  );
}

// ── 23. Giver — My services ──────────────────────────────────────────────────
function ScreenGiverServices({ dark }) {
  return (
    <T24Phone dark={dark}>
      <T24AppBar title="My services" subtitle="2 active · earning BDT 14.2k this month" trailing={
        <button style={{ height: 40, padding: '0 14px', borderRadius: 12, background: 'var(--t24-grad-cyan)', color: '#fff', font: '700 12px var(--t24-font-en)', border: 'none', boxShadow: 'var(--t24-sh-blue)', display: 'inline-flex', alignItems: 'center', gap: 5 }}>{LineIcons.plus(14)} Add</button>
      }/>
      <div style={{ padding: '0 16px 80px', overflow: 'auto', height: 'calc(100% - 74px)' }}>
        {/* Service card */}
        {[
          { s: 'electrician', active: true, jobs: 198, rate: 'BDT 600/visit', area: '4 km radius' },
          { s: 'ac', active: true, jobs: 86, rate: 'BDT 1,200/unit', area: '4 km radius' },
        ].map(card => {
          const sv = T24_SERVICES.find(x => x.s === card.s);
          return (
            <div key={card.s} className="t24-card" style={{ padding: 14, marginBottom: 12 }}>
              <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                <TaskerIcon kind="svc" name={sv.s} size={52}/>
                <div style={{ flex: 1 }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <span className="t24-title-s" style={{ color: 'var(--t24-text)' }}>{sv.name}</span>
                    <span style={{ width: 44, height: 26, borderRadius: 13, background: 'var(--t24-success)', position: 'relative' }}>
                      <span style={{ position: 'absolute', right: 2, top: 2, width: 22, height: 22, borderRadius: 11, background: '#fff' }}/>
                    </span>
                  </div>
                  <div className="t24-body-m" style={{ color: 'var(--t24-muted)', marginTop: 2 }}>{card.jobs} jobs · {card.rate}</div>
                  <div style={{ display: 'flex', gap: 6, marginTop: 10, flexWrap: 'wrap' }}>
                    <span className="t24-chip" style={{ height: 26, padding: '0 10px', fontSize: 11 }}>{LineIcons.pin(11)} {card.area}</span>
                    <span className="t24-chip" style={{ height: 26, padding: '0 10px', fontSize: 11 }}>{LineIcons.clock(11)} 9 AM – 9 PM</span>
                  </div>
                </div>
              </div>
            </div>
          );
        })}

        {/* Add more — service picker */}
        <h3 className="t24-caption" style={{ color: 'var(--t24-muted)', margin: '8px 4px 8px' }}>SUGGESTED FOR YOU</h3>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
          {['fridge','plumbing','carpenter','gasstove','welding','tvpc'].map(s => {
            const sv = T24_SERVICES.find(x => x.s === s) || { s, name: s };
            return (
              <div key={s} className="t24-card" style={{ padding: '10px 6px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, position: 'relative' }}>
                <TaskerIcon kind="svc" name={s} size={42}/>
                <span style={{ font: '600 10px/1.2 var(--t24-font-en)', color: 'var(--t24-text)', textAlign: 'center' }}>{sv.name}</span>
                <button style={{ position: 'absolute', top: 6, right: 6, width: 22, height: 22, borderRadius: 6, background: 'var(--t24-sky)', color: 'var(--t24-blue)', border: 'none' }}>{LineIcons.plus(12)}</button>
              </div>
            );
          })}
        </div>
      </div>
    </T24Phone>
  );
}

// ── 24. Reviews (giver-facing) ───────────────────────────────────────────────
function ScreenReviews({ dark }) {
  const stars = [{ n: 5, c: 142 }, { n: 4, c: 38 }, { n: 3, c: 12 }, { n: 2, c: 4 }, { n: 1, c: 2 }];
  const total = stars.reduce((s, x) => s + x.c, 0);
  return (
    <T24Phone dark={dark}>
      <T24AppBar title="Your reviews" subtitle={`${total} ratings · 4.92 average`}/>
      <div style={{ padding: '0 16px 30px', overflow: 'auto', height: 'calc(100% - 70px)' }}>
        <div className="t24-card" style={{ padding: 16, display: 'flex', gap: 16, alignItems: 'center' }}>
          <div style={{ textAlign: 'center', minWidth: 90 }}>
            <div style={{ font: '800 44px/1 var(--t24-font-en)', color: 'var(--t24-deep)' }}>4.9</div>
            <T24Stars n={5} size={14}/>
            <div className="t24-body-m" style={{ color: 'var(--t24-muted)', fontSize: 11, marginTop: 3 }}>{total} reviews</div>
          </div>
          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 5 }}>
            {stars.map(s => (
              <div key={s.n} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <span style={{ font: '600 10px/1 var(--t24-font-en)', color: 'var(--t24-muted)', width: 8 }}>{s.n}</span>
                {LineIcons.star(10)}
                <div style={{ flex: 1, height: 6, borderRadius: 3, background: 'var(--t24-divider)', position: 'relative', overflow: 'hidden' }}>
                  <div style={{ position: 'absolute', inset: 0, width: `${(s.c / total) * 100}%`, background: 'var(--t24-grad-cyan)', borderRadius: 3 }}/>
                </div>
                <span style={{ font: '500 10px/1 var(--t24-font-en)', color: 'var(--t24-muted)', width: 24, textAlign: 'right' }}>{s.c}</span>
              </div>
            ))}
          </div>
        </div>

        <h3 className="t24-caption" style={{ color: 'var(--t24-muted)', margin: '16px 4px 8px' }}>LATEST REVIEWS</h3>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {T24_REVIEWS.map(r => (
            <div key={r.id} className="t24-card" style={{ padding: 14 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
                  <div style={{ width: 36, height: 36, borderRadius: 12, background: 'var(--t24-grad-cyan)', color: '#fff', font: '700 14px var(--t24-font-en)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{r.by[0]}</div>
                  <div>
                    <div className="t24-title-s" style={{ color: 'var(--t24-text)' }}>{r.by}</div>
                    <T24Stars n={r.stars} size={11}/>
                  </div>
                </div>
                <span style={{ font: '500 11px/1 var(--t24-font-en)', color: 'var(--t24-muted)' }}>{r.date}</span>
              </div>
              <p className="t24-body-m" style={{ color: 'var(--t24-muted)', margin: '8px 0 0' }}>{r.text}</p>
              <button style={{ marginTop: 8, background: 'transparent', border: 'none', color: 'var(--t24-blue)', font: '600 11px var(--t24-font-en)' }}>↳ Reply</button>
            </div>
          ))}
        </div>
      </div>
    </T24Phone>
  );
}

// ── 25. KYC / Verification ───────────────────────────────────────────────────
function ScreenKYC({ dark }) {
  return (
    <T24Phone dark={dark}>
      <T24AppBar title="Verify your profile" subtitle="Required to receive bookings"/>
      <div style={{ padding: '0 16px 30px', overflow: 'auto', height: 'calc(100% - 70px)' }}>
        <div className="t24-card" style={{ padding: 14, background: 'var(--t24-grad-soft)', display: 'flex', gap: 12, alignItems: 'center' }}>
          <div style={{
            width: 50, height: 50, borderRadius: '50%', background: 'conic-gradient(var(--t24-blue) 0% 67%, var(--t24-border) 67% 100%)',
            display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative',
          }}>
            <div style={{ position: 'absolute', inset: 5, borderRadius: '50%', background: 'var(--t24-surface)', display: 'flex', alignItems: 'center', justifyContent: 'center', font: '700 14px var(--t24-font-en)', color: 'var(--t24-deep)' }}>67%</div>
          </div>
          <div style={{ flex: 1 }}>
            <div className="t24-title-s" style={{ color: 'var(--t24-text)' }}>2 of 3 steps complete</div>
            <div className="t24-body-m" style={{ color: 'var(--t24-muted)' }}>One more to unlock auto-match</div>
          </div>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 14 }}>
          {[
            { k: 'phone', t: 'Phone & email',      s: '+880 1712-345 678 verified',     done: true,  icon: LineIcons.phone(18) },
            { k: 'nid',   t: 'National ID (NID)',  s: 'NID 1991*****342 · Verified',     done: true,  icon: LineIcons.doc(18) },
            { k: 'addr',  t: 'Address proof',      s: 'Pending review · Uploaded 2 days ago', done: false, current: true, icon: LineIcons.pin(18) },
          ].map(o => (
            <div key={o.k} className="t24-card" style={{ padding: 14, display: 'flex', gap: 12, alignItems: 'center', border: o.current ? '2px solid var(--t24-warning)' : '1px solid var(--t24-border)' }}>
              <div className="t24-icon-tile" style={{ width: 44, height: 44, color: o.done ? 'var(--t24-success)' : 'var(--t24-warning)' }}>
                {o.done ? LineIcons.check(20) : o.icon}
              </div>
              <div style={{ flex: 1 }}>
                <div className="t24-title-s" style={{ color: 'var(--t24-text)' }}>{o.t}</div>
                <div className="t24-body-m" style={{ color: 'var(--t24-muted)' }}>{o.s}</div>
              </div>
              {o.done ? <span style={{ font: '700 10px/1 var(--t24-font-en)', color: 'var(--t24-success)' }}>✓ DONE</span>
                      : <T24Button size="sm" kind="primary">Continue</T24Button>}
            </div>
          ))}
        </div>

        <h3 className="t24-caption" style={{ color: 'var(--t24-muted)', margin: '20px 4px 8px' }}>UPLOAD ADDRESS PROOF</h3>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
          {['Utility bill', 'Lease agreement', 'Bank statement', 'Ward office letter'].map((t, i) => (
            <button key={t} className="t24-card" style={{ padding: 12, display: 'flex', alignItems: 'center', gap: 8, justifyContent: 'flex-start', cursor: 'pointer', background: 'var(--t24-surface)' }}>
              <div className="t24-icon-tile" style={{ width: 36, height: 36, color: 'var(--t24-blue)' }}>{LineIcons.upload(16)}</div>
              <span className="t24-body-l" style={{ color: 'var(--t24-text)', font: '600 12px var(--t24-font-en)' }}>{t}</span>
            </button>
          ))}
        </div>
      </div>
    </T24Phone>
  );
}

Object.assign(window, { ScreenGiverDashboard, ScreenGiverInbox, ScreenGiverEarnings, ScreenGiverServices, ScreenReviews, ScreenKYC });