{[1,2,3].map(i => (

))}

SERVICE

Electrician

Household & Utility Services

WHAT DO YOU NEED?

<label className="t24-label-l" style={{ color: 'var(--t24-muted)', display: 'block', marginTop: 14 }}>URGENCY</label>
        <div style={{ display: 'flex', gap: 8, marginTop: 6 }}>
          {[
            { k: 'now',   t: 'ASAP',    s: 'Within 2 hrs',  active: false },
            { k: 'today', t: 'Today',   s: 'By evening',    active: true  },
            { k: 'sched', t: 'Schedule',s: 'Pick date',     active: false },
          ].map(o => (
            <div key={o.k} className="t24-card" style={{
              flex: 1, padding: 10, textAlign: 'center', cursor: 'pointer',
              border: o.active ? '2px solid var(--t24-blue)' : '1px solid var(--t24-border)',
              boxShadow: o.active ? '0 6px 12px rgba(30,99,214,0.12)' : 'var(--t24-sh-1)',
            }}>
              <div className="t24-title-s" style={{ color: o.active ? 'var(--t24-blue)' : 'var(--t24-text)' }}>{o.t}</div>
              <div className="t24-body-m" style={{ color: 'var(--t24-muted)', fontSize: 11, marginTop: 2 }}>{o.s}</div>
            </div>
          ))}
        </div>

<label className="t24-label-l" style={{ color: 'var(--t24-muted)', display: 'block', marginTop: 14 }}>LOCATION</label>
        <div className="t24-card" style={{ padding: 12, marginTop: 6, display: 'flex', gap: 10, alignItems: 'center' }}>
          <div className="t24-icon-tile" style={{ width: 36, height: 36, color: 'var(--t24-blue)' }}>{LineIcons.pin(18)}</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div className="t24-title-s" style={{ color: 'var(--t24-text)' }}>Home · Apt 4B</div>
            <div className="t24-body-m" style={{ color: 'var(--t24-muted)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>House 12, Road 27, Dhanmondi, Dhaka 1209</div>
          </div>
          <button style={{ background: 'transparent', border: 'none', color: 'var(--t24-blue)', font: '600 12px var(--t24-font-en)' }}>Edit</button>
        </div>

<label className="t24-label-l" style={{ color: 'var(--t24-muted)', display: 'block', marginTop: 14 }}>ADD PHOTOS (OPTIONAL)</label>
        <div style={{ display: 'flex', gap: 8, marginTop: 6 }}>
          {[1,2].map(i => (
            <div key={i} style={{ flex: 1, height: 78, borderRadius: 14, background: 'var(--t24-sky)', border: '1px solid var(--t24-border)' }}/>
          ))}
          <div style={{ width: 78, height: 78, borderRadius: 14, background: 'var(--t24-surface)', border: '1.5px dashed var(--t24-border)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--t24-muted)' }}>{LineIcons.camera(22)}</div>
        </div>
      </div>
      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '12px 16px 22px', background: 'linear-gradient(180deg, transparent, var(--t24-bg) 25%)' }}>
        <T24Button full kind="primary" size="lg">Continue → Choose Provider</T24Button>
      </div>
    </T24Phone>
  );
}

// ── 12. Choose provider (step 2) ─────────────────────────────────────────────
function ScreenChooseProvider({ dark }) {
  return (
    <T24Phone dark={dark}>
      <T24AppBar title="Choose provider" subtitle="Step 2 of 3 · 6 nearby matches"/>
      <div style={{ padding: '0 16px' }}>
        <div style={{ display: 'flex', gap: 6, marginBottom: 12 }}>
          {[1,2,3].map(i => (
            <div key={i} style={{ flex: 1, height: 4, borderRadius: 2, background: i <= 2 ? 'var(--t24-blue)' : 'var(--t24-border)' }}/>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 6, paddingBottom: 12, overflowX: 'auto' }}>
          <T24Chip active>Best match</T24Chip>
          <T24Chip>Nearest</T24Chip>
          <T24Chip>Lowest price</T24Chip>
          <T24Chip>Top rated</T24Chip>
        </div>
      </div>
      <div style={{ padding: '0 16px 110px', overflow: 'auto', height: 'calc(100% - 152px)' }}>
        {/* Auto-match card */}
        <div style={{
          padding: 16, borderRadius: 20, background: 'var(--t24-grad-cyan)', color: '#fff',
          display: 'flex', gap: 12, alignItems: 'center', marginBottom: 12, boxShadow: 'var(--t24-sh-blue)',
        }}>
          <div style={{ width: 48, height: 48, borderRadius: 14, background: 'rgba(255,255,255,0.18)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <TaskerMark size={26} color="#fff"/>
          </div>
          <div style={{ flex: 1 }}>
            <div className="t24-title-s" style={{ color: '#fff' }}>Auto-match · Recommended</div>
            <div className="t24-body-m" style={{ color: 'rgba(255,255,255,0.85)', marginTop: 2 }}>We'll assign the best available giver in your zone</div>
          </div>
          <button style={{ background: '#fff', border: 'none', borderRadius: 12, padding: '8px 14px', font: '700 12px var(--t24-font-en)', color: 'var(--t24-blue)' }}>Use</button>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {T24_PROVIDERS.filter(p => p.services.includes('electrician')).map((p, i) => (
            <div key={p.id} className="t24-card" style={{ padding: 14, border: i === 0 ? '2px solid var(--t24-blue)' : '1px solid var(--t24-border)' }}>
              <div style={{ display: 'flex', gap: 12 }}>
                <div style={{ width: 52, height: 52, borderRadius: 16, background: 'var(--t24-grad-cyan)', color: '#fff', font: '700 22px var(--t24-font-en)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, position: 'relative' }}>
                  {p.avatar}
                  {p.online && <span style={{ position: 'absolute', bottom: -2, right: -2, width: 13, height: 13, borderRadius: 7, background: 'var(--t24-success)', border: '2.5px solid var(--t24-surface)' }}/>}
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
                    <span className="t24-title-s" style={{ color: 'var(--t24-text)' }}>{p.name}</span>
                    {p.verified && <span className="t24-verified">✓</span>}
                  </div>
                  <div style={{ display: 'flex', gap: 10, marginTop: 4, alignItems: 'center', flexWrap: 'wrap' }}>
                    <span style={{ font: '600 11px/1 var(--t24-font-en)', color: 'var(--t24-text)', display: 'inline-flex', alignItems: 'center', gap: 3 }}>{LineIcons.star(11)} {p.rating} ({p.jobs})</span>
                    <span style={{ font: '500 11px/1 var(--t24-font-en)', color: 'var(--t24-muted)' }}>· {p.experience}</span>
                    <span style={{ font: '500 11px/1 var(--t24-font-en)', color: 'var(--t24-muted)', display: 'inline-flex', alignItems: 'center', gap: 2 }}>{LineIcons.pin(10)} 1.2 km</span>
                  </div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{ font: '800 16px/1 var(--t24-font-en)', color: 'var(--t24-deep)' }}>BDT 600</div>
                  <div className="t24-body-m" style={{ color: 'var(--t24-muted)', fontSize: 10 }}>starting</div>
                </div>
              </div>
              {i === 0 && (
                <div style={{ display: 'flex', gap: 6, marginTop: 12, paddingTop: 12, borderTop: '1px dashed var(--t24-divider)' }}>
                  <span style={{ font: '600 10px/1 var(--t24-font-en)', color: 'var(--t24-success)', background: 'rgba(22,163,74,0.1)', padding: '5px 9px', borderRadius: 7 }}>● Online now</span>
                  <span style={{ font: '600 10px/1 var(--t24-font-en)', color: 'var(--t24-blue)', background: 'rgba(30,99,214,0.1)', padding: '5px 9px', borderRadius: 7 }}>FAST RESPONDER</span>
                  <span style={{ font: '600 10px/1 var(--t24-font-en)', color: '#B45309', background: 'rgba(245,158,11,0.14)', padding: '5px 9px', borderRadius: 7 }}>BEST MATCH</span>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '12px 16px 22px', background: 'linear-gradient(180deg, transparent, var(--t24-bg) 25%)' }}>
        <T24Button full kind="primary" size="lg">Continue → Review & Confirm</T24Button>
      </div>
    </T24Phone>
  );
}

// ── 13. Confirmation success ─────────────────────────────────────────────────
function ScreenRequestSuccess({ 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: 110, height: 110, borderRadius: '50%', background: 'var(--t24-grad-cyan)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 20px 50px rgba(34,211,238,0.4)' }}>
            <svg width="48" height="48" viewBox="0 0 24 24"><path d="m5 12 5 5 9-12" stroke="#fff" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" fill="none"/></svg>
          </div>
          <h1 className="t24-display-l" style={{ margin: '24px 0 6px', color: 'var(--t24-text)', textAlign: 'center' }}>Request sent!</h1>
          <p className="t24-body-l" style={{ color: 'var(--t24-muted)', textAlign: 'center', margin: 0, maxWidth: 280 }}>
            Md. Rafiq Hasan has been notified. You'll get a confirmation in ~5 minutes.
          </p>
          <div className="t24-card" style={{ marginTop: 22, width: '100%', boxSizing: 'border-box', padding: '14px 16px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
              <span className="t24-caption" style={{ color: 'var(--t24-muted)' }}>REQUEST</span>
              <span style={{ font: '700 12px/1 var(--t24-font-en)', color: 'var(--t24-blue)' }}>#r-2401</span>
            </div>
            <div style={{ display: 'flex', gap: 12, alignItems: 'center', paddingBottom: 12, borderBottom: '1px dashed var(--t24-divider)' }}>
              <TaskerIcon kind="svc" name="electrician" size={40}/>
              <div style={{ flex: 1 }}>
                <div className="t24-title-s" style={{ color: 'var(--t24-text)' }}>Electrician · Today by 6 PM</div>
                <div className="t24-body-m" style={{ color: 'var(--t24-muted)' }}>House 12, Dhanmondi · Apt 4B</div>
              </div>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 12 }}>
              <span className="t24-body-m" style={{ color: 'var(--t24-muted)' }}>Estimated cost</span>
              <span style={{ font: '800 16px/1 var(--t24-font-en)', color: 'var(--t24-deep)' }}>BDT 600–1,200</span>
            </div>
          </div>
        </div>
        <T24Button full kind="primary" size="lg">Track Provider</T24Button>
        <button style={{ background: 'transparent', border: 'none', marginTop: 12, color: 'var(--t24-muted)', font: '600 13px var(--t24-font-en)' }}>Back to Home</button>
      </div>
    </T24Phone>
  );
}

// ── 14. My bookings list ─────────────────────────────────────────────────────
function ScreenBookings({ dark }) {
  return (
    <T24Phone dark={dark}>
      <T24AppBar leading={false} large title="My Bookings" trailing={
        <button style={{ width: 40, height: 40, borderRadius: 12, border: '1px solid var(--t24-border)', background: 'var(--t24-surface)', color: 'var(--t24-text)' }}>{LineIcons.search(18)}</button>
      }/>
      <div style={{ padding: '0 16px 8px' }}>
        <div style={{ display: 'flex', gap: 8 }}>
          {['Active · 2', 'Pending · 1', 'Completed · 2'].map((t, i) => (
            <div key={t} style={{
              flex: 1, height: 38, borderRadius: 12,
              background: i === 0 ? 'var(--t24-navy)' : 'var(--t24-surface)',
              color: i === 0 ? '#fff' : 'var(--t24-muted)',
              border: i === 0 ? 'none' : '1px solid var(--t24-border)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              font: `${i === 0 ? 700 : 600} 12px var(--t24-font-en)`,
            }}>{t}</div>
          ))}
        </div>
      </div>
      <div style={{ padding: '12px 16px 100px', overflow: 'auto', height: 'calc(100% - 156px)' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {T24_REQUESTS.map(r => {
            const svc = T24_SERVICES.find(s => s.s === r.service);
            return <T24RequestRow key={r.id} r={r} svc={svc}/>;
          })}
        </div>
      </div>
      <T24BottomNav dark={dark} fab items={[
        { key: 'home', icon: LineIcons.home(22), label: 'Home' },
        { key: 'browse', icon: LineIcons.grid(22), label: 'Explore' },
        { key: 'tasks', icon: LineIcons.task(22), label: 'Bookings', active: true },
        { key: 'profile', icon: LineIcons.user(22), label: 'Profile' },
      ]}/>
    </T24Phone>
  );
}

// ── 15. Booking detail w/ live tracking ──────────────────────────────────────
function ScreenBookingDetail({ dark }) {
  return (
    <T24Phone dark={dark}>
      <T24AppBar title="Booking #r-2401" subtitle="In progress · ETA 12 min" trailing={
        <span><T24StatusPill status="inprogress"/></span>
      }/>
      <div style={{ padding: '0 16px 110px', overflow: 'auto', height: 'calc(100% - 70px)' }}>
        {/* Map */}
        <div style={{
          height: 180, borderRadius: 20, background: 'var(--t24-sky)', position: 'relative', overflow: 'hidden',
          border: '1px solid var(--t24-border)',
        }}>
          <svg viewBox="0 0 320 180" width="100%" height="100%" style={{ position: 'absolute', inset: 0 }}>
            <defs>
              <pattern id="mapgrid" width="32" height="32" patternUnits="userSpaceOnUse">
                <path d="M 32 0 L 0 0 0 32" fill="none" stroke="#DDEBFA" strokeWidth="1"/>
              </pattern>
            </defs>
            <rect width="320" height="180" fill="url(#mapgrid)"/>
            <path d="M40 140 Q 90 130 140 110 T 240 60" stroke="#1E63D6" strokeWidth="4" fill="none" strokeDasharray="6 4"/>
            <path d="M40 140 Q 90 130 140 110 T 170 95" stroke="#1E63D6" strokeWidth="4" fill="none"/>
            <circle cx="40" cy="140" r="10" fill="#22D3EE" stroke="#fff" strokeWidth="3"/>
            <circle cx="240" cy="60" r="10" fill="#1E63D6" stroke="#fff" strokeWidth="3"/>
            <circle cx="170" cy="95" r="14" fill="var(--t24-navy)" stroke="#fff" strokeWidth="3"/>
            <path d="M163 93 L177 93 L170 87 Z" fill="#fff"/>
          </svg>
          <div style={{ position: 'absolute', top: 12, right: 12, padding: '6px 12px', borderRadius: 999, background: '#fff', boxShadow: 'var(--t24-sh-2)', font: '700 11px/1 var(--t24-font-en)', color: 'var(--t24-text)' }}>
            ETA · 12 min
          </div>
        </div>
        {/* Provider */}
        <div className="t24-card" style={{ padding: 14, marginTop: 12, display: 'flex', gap: 12, alignItems: 'center' }}>
          <div style={{ width: 50, height: 50, borderRadius: 14, background: 'var(--t24-grad-cyan)', color: '#fff', font: '700 22px var(--t24-font-en)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>R</div>
          <div style={{ flex: 1 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
              <span className="t24-title-s" style={{ color: 'var(--t24-text)' }}>Md. Rafiq Hasan</span>
              <span className="t24-verified">✓</span>
            </div>
            <div className="t24-body-m" style={{ color: 'var(--t24-muted)' }}>Electrician · 4.9 ★ · 5 yrs</div>
          </div>
          <button style={{ width: 40, height: 40, borderRadius: 12, background: 'var(--t24-sky)', border: '1px solid var(--t24-border)', color: 'var(--t24-blue)' }}>{LineIcons.phone(16)}</button>
          <button style={{ width: 40, height: 40, borderRadius: 12, background: 'var(--t24-blue)', border: 'none', color: '#fff' }}>{LineIcons.chat(16)}</button>
        </div>
        {/* Timeline */}
        <div className="t24-card" style={{ padding: 14, marginTop: 12 }}>
          <div className="t24-caption" style={{ color: 'var(--t24-muted)', marginBottom: 10 }}>STATUS</div>
          {[
            { t: 'Request placed',     d: '10:42 AM · Today',     done: true },
            { t: 'Provider accepted',  d: '10:48 AM',              done: true },
            { t: 'On the way',         d: 'Now · 12 min ETA',      done: true, current: true },
            { t: 'Work in progress',   d: 'Pending',                done: false },
            { t: 'Completed & paid',   d: 'Pending',                done: false },
          ].map((s, i, a) => (
            <div key={s.t} style={{ display: 'flex', gap: 12, paddingBottom: i === a.length - 1 ? 0 : 12, position: 'relative' }}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <div style={{
                  width: 22, height: 22, borderRadius: 11,
                  background: s.done ? 'var(--t24-blue)' : 'var(--t24-surface)',
                  border: s.done ? 'none' : '2px solid var(--t24-border)',
                  color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
                  boxShadow: s.current ? '0 0 0 4px rgba(30,99,214,0.18)' : 'none',
                }}>{s.done && LineIcons.check(11)}</div>
                {i < a.length - 1 && <div style={{ width: 2, flex: 1, background: s.done ? 'var(--t24-blue)' : 'var(--t24-border)', marginTop: 2 }}/>}
              </div>
              <div style={{ flex: 1 }}>
                <div className="t24-title-s" style={{ color: s.done ? 'var(--t24-text)' : 'var(--t24-muted)', font: '600 13px/1.2 var(--t24-font-en)' }}>{s.t}</div>
                <div className="t24-body-m" style={{ color: 'var(--t24-muted)', marginTop: 2, fontSize: 11 }}>{s.d}</div>
              </div>
            </div>
          ))}
        </div>
        {/* Cost breakdown */}
        <div className="t24-card" style={{ padding: 14, marginTop: 12 }}>
          <div className="t24-caption" style={{ color: 'var(--t24-muted)', marginBottom: 10 }}>COST ESTIMATE</div>
          {[
            ['Service charge', 'BDT 600'],
            ['Materials (est.)', 'BDT 400'],
            ['Platform fee', 'BDT 60'],
          ].map(([k,v]) => (
            <div key={k} style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0', font: '500 13px/1.6 var(--t24-font-en)' }}>
              <span style={{ color: 'var(--t24-muted)' }}>{k}</span>
              <span style={{ color: 'var(--t24-text)' }}>{v}</span>
            </div>
          ))}
          <div style={{ height: 1, background: 'var(--t24-divider)', margin: '8px 0' }}/>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span style={{ font: '700 14px/1 var(--t24-font-en)', color: 'var(--t24-text)' }}>Total</span>
            <span style={{ font: '800 18px/1 var(--t24-font-en)', color: 'var(--t24-deep)' }}>BDT 1,060</span>
          </div>
        </div>
      </div>
      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '12px 16px 22px', background: 'linear-gradient(180deg, transparent, var(--t24-bg) 25%)' }}>
        <T24Button full kind="danger" size="lg">Cancel Booking</T24Button>
      </div>
    </T24Phone>
  );
}

Object.assign(window, { ScreenRequestForm, ScreenChooseProvider, ScreenRequestSuccess, ScreenBookings, ScreenBookingDetail });