// t24-screens-6.jsx — admin (mobile view) + extras: filter sheet, reviews-write, refer-earn, empty/error

// ── 26. Admin · Overview (mobile) ────────────────────────────────────────────
function ScreenAdminOverview({ 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)' }}>ADMIN · TASKER 24</div>
          <div className="t24-title-l" style={{ color: 'var(--t24-text)', fontSize: 20 }}>Operations</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-navy)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', font: '700 14px var(--t24-font-en)' }}>MD</div>
        </div>
      </div>

      <div style={{ padding: '0 16px 120px', overflow: 'auto', height: 'calc(100% - 70px)' }}>
        {/* Live counters */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8 }}>
          {[
            { l: 'Total users',     v: '24,108', d: '+312 today', a: 'var(--t24-blue)' },
            { l: 'Active bookings', v: '1,084',  d: '+82',        a: 'var(--t24-cyan)' },
            { l: 'GMV today',       v: 'BDT 8.4L', d: '+12.4%',  a: 'var(--t24-success)' },
            { l: 'Pending KYC',     v: '47',     d: 'Action req.', a: 'var(--t24-warning)' },
          ].map(s => (
            <div key={s.l} className="t24-card" style={{ padding: 14 }}>
              <div className="t24-caption" style={{ color: 'var(--t24-muted)' }}>{s.l}</div>
              <div style={{ font: '800 22px/1 var(--t24-font-en)', color: s.a, marginTop: 6 }}>{s.v}</div>
              <div style={{ font: '600 11px/1 var(--t24-font-en)', color: 'var(--t24-muted)', marginTop: 4 }}>{s.d}</div>
            </div>
          ))}
        </div>

        {/* Map / heatmap */}
        <T24SectionTitle title="Live demand · Dhaka"/>
        <div className="t24-card" style={{ padding: 14 }}>
          <div style={{ position: 'relative', height: 160, borderRadius: 14, background: 'var(--t24-sky)', overflow: 'hidden' }}>
            <svg viewBox="0 0 320 160" width="100%" height="100%">
              <defs>
                <pattern id="ag" 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="160" fill="url(#ag)"/>
              {[
                [60, 50, 26, '#1E63D6', 0.45],
                [120, 80, 38, '#22D3EE', 0.32],
                [220, 60, 30, '#1E63D6', 0.5],
                [180, 110, 22, '#F59E0B', 0.4],
                [260, 120, 18, '#16A34A', 0.45],
              ].map(([cx,cy,r,c,o], i) => (
                <circle key={i} cx={cx} cy={cy} r={r} fill={c} opacity={o}/>
              ))}
              {[
                [60, 50], [120, 80], [220, 60], [180, 110], [260, 120],
              ].map(([cx,cy], i) => (
                <circle key={'c'+i} cx={cx} cy={cy} r="4" fill="#fff" stroke="#0B1F3A" strokeWidth="2"/>
              ))}
            </svg>
            <div style={{ position: 'absolute', bottom: 8, left: 8, display: 'flex', gap: 6 }}>
              {[['#1E63D6','High'],['#F59E0B','Med'],['#16A34A','Low']].map(([c,t]) => (
                <span key={t} style={{ display: 'inline-flex', alignItems: 'center', gap: 4, font: '600 10px/1 var(--t24-font-en)', color: 'var(--t24-text)', background: '#fff', padding: '4px 8px', borderRadius: 999, boxShadow: 'var(--t24-sh-1)' }}>
                  <span style={{ width: 8, height: 8, borderRadius: 4, background: c }}/>{t}
                </span>
              ))}
            </div>
          </div>
        </div>

        {/* Categories volume */}
        <T24SectionTitle title="Top categories" action="Manage"/>
        <div className="t24-card" style={{ padding: 0, overflow: 'hidden' }}>
          {[
            { c: 'household',  v: '4,180', pct: 78, t: 'House cleaning, electrician, plumbing' },
            { c: 'food',       v: '3,540', pct: 66, t: 'Catering, vegetables, grocery' },
            { c: 'healthcare', v: '2,210', pct: 41, t: 'Doctor, ambulance, pharmacy' },
            { c: 'transport',  v: '1,830', pct: 34, t: 'Driver, courier, bazar' },
            { c: 'it',         v: '1,140', pct: 21, t: 'Dev, design, marketing' },
          ].map((row, i, a) => {
            const cat = T24_CATEGORIES.find(c => c.id === row.c);
            return (
              <div key={row.c} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px', borderBottom: i === a.length - 1 ? 'none' : '1px solid var(--t24-divider)' }}>
                <TaskerIcon kind="cat" name={cat.icon} size={36}/>
                <div style={{ flex: 1 }}>
                  <div className="t24-title-s" style={{ color: 'var(--t24-text)' }}>{cat.name.split(',')[0]}</div>
                  <div className="t24-body-m" style={{ color: 'var(--t24-muted)', fontSize: 11, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: 180 }}>{row.t}</div>
                  <div style={{ marginTop: 5, height: 4, background: 'var(--t24-divider)', borderRadius: 2, position: 'relative' }}>
                    <div style={{ width: row.pct + '%', height: 4, borderRadius: 2, background: 'var(--t24-grad-cyan)' }}/>
                  </div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{ font: '700 13px/1 var(--t24-font-en)', color: 'var(--t24-deep)' }}>{row.v}</div>
                  <div style={{ font: '500 10px/1 var(--t24-font-en)', color: 'var(--t24-muted)', marginTop: 3 }}>this wk</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <T24BottomNav dark={dark} items={[
        { key: 'home',  icon: LineIcons.home(22),      label: 'Overview', active: true },
        { key: 'users', icon: LineIcons.user(22),      label: 'Users' },
        { key: 'svcs',  icon: LineIcons.grid(22),      label: 'Catalog' },
        { key: 'fin',   icon: LineIcons.briefcase(22), label: 'Finance' },
        { key: 'me',    icon: LineIcons.gear(20),     label: 'More' },
      ]}/>
    </T24Phone>
  );
}

// ── 27. Admin · User management (mobile) ─────────────────────────────────────
function ScreenAdminUsers({ dark }) {
  const rows = [
    { name: 'Md. Rafiq Hasan',   role: 'Giver',  st: 'Active',    city: 'Dhanmondi',     verified: true,  bal: 'BDT 14,260' },
    { name: 'Ayesha Rahman',     role: 'Taker',  st: 'Active',    city: 'Dhanmondi',     verified: true,  bal: '—' },
    { name: 'Jahanara Begum',    role: 'Giver',  st: 'Pending KYC', city: 'Mirpur 10',    verified: false, bal: 'BDT 4,820' },
    { name: 'Sajid Rahman',      role: 'Giver',  st: 'Active',    city: 'Gulshan',       verified: true,  bal: 'BDT 28,140' },
    { name: 'Tania Akter',       role: 'Giver',  st: 'Suspended', city: 'Banani',        verified: true,  bal: 'BDT 0' },
    { name: 'Imran Hossain',     role: 'Taker',  st: 'Active',    city: 'Mirpur DOHS',   verified: true,  bal: '—' },
  ];
  const STATUS = {
    'Active':       { bg: 'rgba(22,163,74,0.1)',  fg: 'var(--t24-success)' },
    'Pending KYC':  { bg: 'rgba(245,158,11,0.14)',fg: '#B45309' },
    'Suspended':    { bg: 'rgba(220,38,38,0.1)',  fg: 'var(--t24-danger)' },
  };
  return (
    <T24Phone dark={dark}>
      <T24AppBar leading={false} large title="User management" subtitle="24,108 users · 47 pending"/>
      <div style={{ padding: '0 16px' }}>
        <T24SearchBar placeholder="Search name, phone, or NID…" trailing={LineIcons.filter(16)}/>
        <div style={{ display: 'flex', gap: 6, paddingTop: 10, paddingBottom: 12, overflowX: 'auto' }}>
          <T24Chip active>All · 24,108</T24Chip>
          <T24Chip>Givers · 8,402</T24Chip>
          <T24Chip>Takers · 15,706</T24Chip>
          <T24Chip danger>Suspended · 28</T24Chip>
        </div>
      </div>
      <div style={{ padding: '0 16px 110px', overflow: 'auto', height: 'calc(100% - 200px)' }}>
        <div className="t24-card" style={{ padding: 0, overflow: 'hidden' }}>
          {rows.map((u, i) => {
            const s = STATUS[u.st];
            return (
              <div key={u.name} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px', borderBottom: i === rows.length - 1 ? 'none' : '1px solid var(--t24-divider)' }}>
                <div style={{ width: 40, height: 40, borderRadius: 12, background: u.role === 'Giver' ? 'var(--t24-grad-cyan)' : 'var(--t24-navy)', color: '#fff', font: '700 14px var(--t24-font-en)', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
                  {u.name[0]}
                  {u.verified && <span className="t24-verified" style={{ position: 'absolute', bottom: -2, right: -2, width: 14, height: 14, fontSize: 8, border: '2px solid var(--t24-surface)' }}>✓</span>}
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
                    <span className="t24-title-s" style={{ color: 'var(--t24-text)', fontSize: 13.5, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: 130 }}>{u.name}</span>
                    <span style={{ font: '600 9px/1 var(--t24-font-en)', color: 'var(--t24-muted)', background: 'var(--t24-sky)', padding: '3px 6px', borderRadius: 4, textTransform: 'uppercase' }}>{u.role}</span>
                  </div>
                  <div className="t24-body-m" style={{ color: 'var(--t24-muted)', fontSize: 11, marginTop: 2 }}>{u.city} · {u.bal}</div>
                </div>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, height: 22, padding: '0 8px', borderRadius: 11, background: s.bg, color: s.fg, font: '700 9.5px/1 var(--t24-font-en)' }}>
                  <span style={{ width: 5, height: 5, borderRadius: 3, background: s.fg }}/>{u.st}
                </span>
              </div>
            );
          })}
        </div>
      </div>
      <T24BottomNav dark={dark} items={[
        { key: 'home',  icon: LineIcons.home(22),      label: 'Overview' },
        { key: 'users', icon: LineIcons.user(22),      label: 'Users', active: true },
        { key: 'svcs',  icon: LineIcons.grid(22),      label: 'Catalog' },
        { key: 'fin',   icon: LineIcons.briefcase(22), label: 'Finance' },
        { key: 'me',    icon: LineIcons.gear(20),     label: 'More' },
      ]}/>
    </T24Phone>
  );
}

// ── 28. Filter sheet (modal) ─────────────────────────────────────────────────
function ScreenFilterSheet({ dark }) {
  return (
    <T24Phone dark={dark}>
      {/* Faded behind */}
      <T24AppBar title="Search results" subtitle="electrician"/>
      <div style={{ padding: '0 16px', filter: 'blur(2px)', opacity: 0.6, pointerEvents: 'none' }}>
        <T24ProviderCard p={T24_PROVIDERS[0]}/>
        <div style={{ height: 10 }}/>
        <T24ProviderCard p={T24_PROVIDERS[5]}/>
      </div>
      <T24Sheet>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
          <h3 className="t24-title-m" style={{ margin: 0, color: 'var(--t24-text)' }}>Filters</h3>
          <button style={{ background: 'transparent', border: 'none', color: 'var(--t24-blue)', font: '600 12px var(--t24-font-en)' }}>Reset</button>
        </div>
        <label className="t24-label-l" style={{ color: 'var(--t24-muted)' }}>DISTANCE</label>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 8, marginBottom: 16 }}>
          <div style={{ flex: 1, height: 6, borderRadius: 3, background: 'var(--t24-divider)', position: 'relative' }}>
            <div style={{ position: 'absolute', left: 0, width: '55%', height: 6, borderRadius: 3, background: 'var(--t24-grad-cyan)' }}/>
            <div style={{ position: 'absolute', left: 'calc(55% - 11px)', top: -8, width: 22, height: 22, borderRadius: 11, background: '#fff', border: '3px solid var(--t24-blue)', boxShadow: 'var(--t24-sh-2)' }}/>
          </div>
          <span style={{ font: '700 13px var(--t24-font-en)', color: 'var(--t24-deep)' }}>5 km</span>
        </div>

        <label className="t24-label-l" style={{ color: 'var(--t24-muted)' }}>RATING</label>
        <div style={{ display: 'flex', gap: 6, marginTop: 8, marginBottom: 16 }}>
          {[5,4,3,2,1].map(n => (
            <span key={n} style={{ display: 'inline-flex', alignItems: 'center', gap: 4, height: 34, padding: '0 12px', borderRadius: 999, background: n === 4 ? 'var(--t24-blue)' : 'var(--t24-surface)', color: n === 4 ? '#fff' : 'var(--t24-text)', border: '1px solid var(--t24-border)', font: '600 12px/1 var(--t24-font-en)' }}>{n}+ {LineIcons.star(11, n === 4 ? '#fff' : '#F59E0B')}</span>
          ))}
        </div>

        <label className="t24-label-l" style={{ color: 'var(--t24-muted)' }}>AVAILABILITY</label>
        <div style={{ display: 'flex', gap: 6, marginTop: 8, marginBottom: 16 }}>
          <T24Chip active>Now</T24Chip>
          <T24Chip>Today</T24Chip>
          <T24Chip>This week</T24Chip>
          <T24Chip>Any time</T24Chip>
        </div>

        <label className="t24-label-l" style={{ color: 'var(--t24-muted)' }}>PRICE RANGE</label>
        <div style={{ display: 'flex', gap: 8, marginTop: 8, marginBottom: 20 }}>
          {['Budget','Standard','Premium'].map((t, i) => (
            <div key={t} style={{ flex: 1, padding: 10, borderRadius: 12, textAlign: 'center', border: i === 1 ? '2px solid var(--t24-blue)' : '1px solid var(--t24-border)', background: 'var(--t24-surface)' }}>
              <div className="t24-title-s" style={{ color: i === 1 ? 'var(--t24-blue)' : 'var(--t24-text)' }}>{t}</div>
              <div className="t24-body-m" style={{ color: 'var(--t24-muted)', fontSize: 11 }}>{['< 500','500–1.5k','> 1.5k'][i]}</div>
            </div>
          ))}
        </div>
        <T24Button full kind="primary" size="lg">Show 14 results</T24Button>
      </T24Sheet>
    </T24Phone>
  );
}

// ── 29. Write review ─────────────────────────────────────────────────────────
function ScreenWriteReview({ dark }) {
  return (
    <T24Phone dark={dark}>
      <T24AppBar title="Rate your experience"/>
      <div style={{ padding: '0 16px 30px', height: 'calc(100% - 70px)', overflow: 'auto' }}>
        <div className="t24-card" style={{ padding: 14, display: 'flex', gap: 12, alignItems: 'center' }}>
          <div style={{ width: 52, height: 52, 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 className="t24-title-s" style={{ color: 'var(--t24-text)' }}>Md. Rafiq Hasan</div>
            <div className="t24-body-m" style={{ color: 'var(--t24-muted)' }}>Electrician · Job #r-2401 · 13 May</div>
          </div>
        </div>

        <h3 className="t24-title-m" style={{ margin: '24px 0 12px', color: 'var(--t24-text)', textAlign: 'center' }}>How was your service?</h3>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 8 }}>
          {[1,2,3,4,5].map(i => (
            <svg key={i} width="42" height="42" viewBox="0 0 24 24">
              <path d="m12 3 2.7 5.7 6.3.9-4.5 4.4 1 6.2L12 17l-5.5 3 1-6.2L3 9.6l6.3-.9z" fill={i <= 4 ? '#F59E0B' : '#E2E8F0'} stroke={i <= 4 ? '#F59E0B' : '#CBD5E1'} strokeWidth="1.5" strokeLinejoin="round"/>
            </svg>
          ))}
        </div>
        <div style={{ textAlign: 'center', font: '700 14px/1 var(--t24-font-en)', color: 'var(--t24-success)', marginTop: 8 }}>Great service! 🎉</div>

        <h3 className="t24-caption" style={{ color: 'var(--t24-muted)', margin: '24px 4px 8px' }}>WHAT WENT WELL?</h3>
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          {['On time', 'Polite', 'Skilled', 'Fair price', 'Cleaned up', 'Will rebook'].map((t, i) => (
            <T24Chip key={t} active={i < 4}>{t}</T24Chip>
          ))}
        </div>

        <h3 className="t24-caption" style={{ color: 'var(--t24-muted)', margin: '20px 4px 8px' }}>WRITE YOUR REVIEW</h3>
        <textarea defaultValue="Very professional. Arrived on time, finished the job cleanly. Will definitely book again." style={{
          width: '100%', minHeight: 90, padding: 14, borderRadius: 16,
          border: '1.5px solid var(--t24-border)', background: 'var(--t24-surface)', color: 'var(--t24-text)',
          font: '500 13.5px/1.45 var(--t24-font-en)', resize: 'none', outline: 'none', boxSizing: 'border-box',
        }}/>
      </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">Submit review</T24Button>
      </div>
    </T24Phone>
  );
}

// ── 30. Refer & earn ─────────────────────────────────────────────────────────
function ScreenReferEarn({ dark }) {
  return (
    <T24Phone dark={dark}>
      <T24AppBar title="Refer & earn"/>
      <div style={{ padding: '0 16px 30px', overflow: 'auto', height: 'calc(100% - 70px)' }}>
        <div style={{
          padding: 22, borderRadius: 24, background: 'var(--t24-grad-hero)', color: '#fff',
          textAlign: 'center', position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 80% 0%, rgba(34,211,238,0.45), transparent 50%)' }}/>
          <div style={{ position: 'relative' }}>
            <div style={{ width: 70, height: 70, borderRadius: 22, margin: '0 auto', background: 'rgba(255,255,255,0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <span style={{ font: '800 32px var(--t24-font-en)', color: '#fff' }}>🎁</span>
            </div>
            <div style={{ font: '700 24px/1.15 var(--t24-font-en)', marginTop: 14 }}>Invite friends.<br/>Earn BDT 200 each.</div>
            <p style={{ font: '500 13px/1.4 var(--t24-font-en)', color: 'rgba(255,255,255,0.75)', margin: '8px 0 18px' }}>
              Both you and your friend get BDT 200 when they complete their first booking.
            </p>
            <div style={{ display: 'flex', gap: 8, alignItems: 'center', background: 'rgba(255,255,255,0.12)', borderRadius: 14, padding: '12px 14px', border: '1px dashed rgba(255,255,255,0.25)' }}>
              <span style={{ flex: 1, font: '700 18px/1 var(--t24-font-en)', letterSpacing: 1.5 }}>AYESHA24</span>
              <button style={{ background: '#fff', color: 'var(--t24-deep)', border: 'none', borderRadius: 10, padding: '8px 14px', font: '700 12px var(--t24-font-en)' }}>Copy</button>
            </div>
          </div>
        </div>

        <h3 className="t24-caption" style={{ color: 'var(--t24-muted)', margin: '20px 4px 8px' }}>SHARE VIA</h3>
        <div style={{ display: 'flex', gap: 8 }}>
          {[
            { t: 'WhatsApp', c: '#25D366' },
            { t: 'SMS',      c: 'var(--t24-blue)' },
            { t: 'Email',    c: 'var(--t24-warning)' },
            { t: 'Copy',     c: 'var(--t24-muted)' },
          ].map(o => (
            <div key={o.t} className="t24-card" style={{ flex: 1, padding: 12, textAlign: 'center' }}>
              <div style={{ width: 36, height: 36, margin: '0 auto', borderRadius: 12, background: `color-mix(in srgb, ${o.c} 14%, transparent)`, color: o.c, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{LineIcons.send(16)}</div>
              <div style={{ font: '600 11px/1 var(--t24-font-en)', color: 'var(--t24-text)', marginTop: 6 }}>{o.t}</div>
            </div>
          ))}
        </div>

        <h3 className="t24-caption" style={{ color: 'var(--t24-muted)', margin: '20px 4px 8px' }}>YOUR REFERRALS</h3>
        <div className="t24-card" style={{ padding: 14 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div>
              <div className="t24-title-s" style={{ color: 'var(--t24-text)' }}>4 friends joined</div>
              <div className="t24-body-m" style={{ color: 'var(--t24-muted)' }}>2 completed their first booking</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{ font: '800 22px/1 var(--t24-font-en)', color: 'var(--t24-success)' }}>BDT 400</div>
              <div style={{ font: '500 10px/1 var(--t24-font-en)', color: 'var(--t24-muted)' }}>earned</div>
            </div>
          </div>
        </div>
      </div>
    </T24Phone>
  );
}

// ── 31. Empty state ──────────────────────────────────────────────────────────
function ScreenEmpty({ dark }) {
  return (
    <T24Phone dark={dark}>
      <T24AppBar leading={false} large title="My Bookings"/>
      <div style={{ padding: '0 16px 8px' }}>
        <div style={{ display: 'flex', gap: 8 }}>
          {['Active', 'Pending', 'Completed'].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={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: '40px 30px', flex: 1, height: 'calc(100% - 156px)' }}>
        <div style={{ width: 140, height: 140, borderRadius: '50%', background: 'var(--t24-grad-sky)', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
          <div style={{ position: 'absolute', inset: 16, borderRadius: '50%', border: '1.5px dashed var(--t24-border)' }}/>
          <span style={{ color: 'var(--t24-blue)' }}>{LineIcons.task(56)}</span>
        </div>
        <h2 className="t24-title-l" style={{ margin: '20px 0 6px', color: 'var(--t24-text)' }}>No active bookings</h2>
        <p className="t24-body-l" style={{ color: 'var(--t24-muted)', margin: 0, maxWidth: 240 }}>
          When you book a service, you'll see it here with live status and chat.
        </p>
        <T24Button kind="primary" size="lg" style={{ marginTop: 22 }}>Browse services</T24Button>
      </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>
  );
}

Object.assign(window, { ScreenAdminOverview, ScreenAdminUsers, ScreenFilterSheet, ScreenWriteReview, ScreenReferEarn, ScreenEmpty });