// t24-screens-2.jsx — home, categories, services, search, provider profile, request flow

// ── 6. Home — Service Taker ──────────────────────────────────────────────────
function ScreenHomeTaker({ dark, lang = 'en' }) {
  const popular = T24_SERVICES.filter(s => s.hot).slice(0, 4);
  const cats = T24_CATEGORIES.slice(0, 8);
  return (
    <T24Phone dark={dark}>
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
        {/* Hero header */}
        <div style={{ background: 'var(--t24-grad-hero)', color: '#fff', padding: '8px 20px 78px', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', top: -30, right: -40, width: 200, height: 200, borderRadius: '50%', background: 'radial-gradient(circle, rgba(34,211,238,0.35), transparent 70%)' }}/>
          <div style={{ position: 'absolute', bottom: -60, left: -40, width: 200, height: 200, borderRadius: '50%', background: 'radial-gradient(circle, rgba(30,99,214,0.5), transparent 70%)' }}/>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', position: 'relative' }}>
            <div>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 4, font: '500 11px/1 var(--t24-font-en)', color: 'rgba(255,255,255,0.7)' }}>
                {LineIcons.pin(11)} Dhanmondi · Dhaka <span style={{ marginLeft: 4 }}>{LineIcons.chev(10)}</span>
              </div>
              <div style={{ marginTop: 4, font: '700 19px/1.2 var(--t24-font-en)' }}>
                {lang === 'bn' ? 'হ্যালো, আয়েশা 👋' : 'Hello, Ayesha 👋'}
              </div>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <button style={{ width: 40, height: 40, borderRadius: 12, background: 'rgba(255,255,255,0.12)', border: '1px solid rgba(255,255,255,0.18)', color: '#fff', position: 'relative' }}>
                {LineIcons.bell(18)}
                <span style={{ position: 'absolute', top: 6, right: 7, width: 8, height: 8, borderRadius: 4, background: '#22D3EE', border: '2px solid var(--t24-deep)' }}/>
              </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)' }}>A</div>
            </div>
          </div>
          <div style={{ marginTop: 16, position: 'relative' }}>
            <T24SearchBar placeholder={lang === 'bn' ? 'যেকোনো সেবা খুঁজুন…' : 'Try "electrician" or "tuition"…'} trailing={LineIcons.filter(16)}/>
          </div>
          <div style={{ display: 'flex', gap: 6, marginTop: 14, overflowX: 'auto', position: 'relative' }}>
            {['Trending','Near me','24/7','Top rated','Verified'].map((t,i) => (
              <span key={t} style={{
                display: 'inline-flex', alignItems: 'center', gap: 4, height: 28, padding: '0 12px',
                borderRadius: 999, background: i === 0 ? '#fff' : 'rgba(255,255,255,0.12)',
                color: i === 0 ? 'var(--t24-deep)' : '#fff', font: '600 11px/1 var(--t24-font-en)',
                border: i === 0 ? 'none' : '1px solid rgba(255,255,255,0.2)', whiteSpace: 'nowrap',
              }}>{t}</span>
            ))}
          </div>
        </div>
        {/* Content */}
        <div style={{ flex: 1, overflow: 'auto', marginTop: -54, paddingBottom: 100 }}>
          <div style={{ margin: '0 16px', padding: 14, borderRadius: 22, background: 'var(--t24-surface)', boxShadow: 'var(--t24-sh-3)', border: '1px solid var(--t24-border)' }}>
            <div className="t24-caption" style={{ color: 'var(--t24-muted)' }}>QUICK ACTIONS</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 6, marginTop: 8 }}>
              {popular.map(s => (
                <button key={s.s} style={{
                  display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
                  padding: '6px 2px', background: 'transparent', border: 'none', cursor: 'pointer',
                }}>
                  <TaskerIcon kind="svc" name={s.s} size={44}/>
                  <span style={{ font: '600 10px/1.2 var(--t24-font-en)', color: 'var(--t24-text)', textAlign: 'center' }}>{s.name}</span>
                </button>
              ))}
            </div>
          </div>
          {/* Promo */}
          <div style={{ margin: '16px 16px 0', borderRadius: 22, overflow: 'hidden',
            background: 'linear-gradient(110deg, #123A73 0%, #1E63D6 60%, #22D3EE 100%)',
            color: '#fff', position: 'relative', padding: '16px 18px',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 4, font: '600 10px/1 var(--t24-font-en)', color: '#FDE68A' }}>
              <span style={{ width: 16, height: 16, background: 'rgba(253,230,138,0.2)', borderRadius: 4, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>✦</span>
              LIMITED OFFER · ENDS SOON
            </div>
            <div style={{ font: '700 17px/1.25 var(--t24-font-en)', marginTop: 6 }}>Get 20% off on your first booking</div>
            <div style={{ font: '500 11px/1.3 var(--t24-font-en)', opacity: 0.85, marginTop: 4 }}>Use code <strong style={{ color: '#FDE68A' }}>TASK24</strong> · Min order BDT 500</div>
            <div style={{ position: 'absolute', right: 8, bottom: 8, opacity: 0.18 }}>
              <TaskerMark size={80} color="#fff"/>
            </div>
          </div>
          {/* Categories grid */}
          <div style={{ margin: '20px 16px 0' }}>
            <T24SectionTitle title="Categories" action="See all"/>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 6 }}>
              {cats.map(c => <T24CategoryTile key={c.id} cat={c}/>)}
            </div>
          </div>
          {/* Featured providers */}
          <div style={{ margin: '20px 16px 0' }}>
            <T24SectionTitle title="Top rated near you" action="See all"/>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {T24_PROVIDERS.slice(0, 2).map(p => (
                <T24ProviderCard key={p.id} p={p} action={<T24Button kind="secondary" size="sm">Book</T24Button>}/>
              ))}
            </div>
          </div>
        </div>
        <T24BottomNav dark={dark} fab onTap={() => {}} items={[
          { key: 'home',     icon: LineIcons.home(22),   label: 'Home',     active: true },
          { key: 'browse',   icon: LineIcons.grid(22),   label: 'Explore' },
          { key: 'tasks',    icon: LineIcons.task(22),   label: 'Bookings', badge: 3 },
          { key: 'profile',  icon: LineIcons.user(22),   label: 'Profile' },
        ]}/>
      </div>
    </T24Phone>
  );
}

// ── 7. Categories grid (full) ────────────────────────────────────────────────
function ScreenCategories({ dark }) {
  return (
    <T24Phone dark={dark}>
      <T24AppBar title="Browse categories" subtitle="11 categories · 100+ services" trailing={
        <button style={{ width: 40, height: 40, borderRadius: 12, border: '1px solid var(--t24-border)', background: 'var(--t24-surface)', color: 'var(--t24-text)' }}>{LineIcons.filter(18)}</button>
      }/>
      <div style={{ padding: '0 16px 100px', overflow: 'auto', height: 'calc(100% - 70px)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10 }}>
          {T24_CATEGORIES.map(c => (
            <div key={c.id} className="t24-card" style={{ padding: 14, display: 'flex', flexDirection: 'column', gap: 8 }}>
              <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
                <TaskerIcon kind="cat" name={c.icon} size={48}/>
                <span style={{ font: '600 10px/1 var(--t24-font-en)', color: 'var(--t24-muted)' }}>{c.count} services</span>
              </div>
              <div>
                <div className="t24-title-s" style={{ color: 'var(--t24-text)', lineHeight: 1.25 }}>{c.name.split(',')[0]}</div>
                <div className="t24-body-m" style={{ color: 'var(--t24-muted)', marginTop: 4, fontSize: 11, lineHeight: 1.3, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{c.desc}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <T24BottomNav dark={dark} fab items={[
        { key: 'home', icon: LineIcons.home(22), label: 'Home' },
        { key: 'browse', icon: LineIcons.grid(22), label: 'Explore', active: true },
        { key: 'tasks', icon: LineIcons.task(22), label: 'Bookings', badge: 3 },
        { key: 'profile', icon: LineIcons.user(22), label: 'Profile' },
      ]}/>
    </T24Phone>
  );
}

// ── 8. Service list (one category) ───────────────────────────────────────────
function ScreenServiceList({ dark, catId = 'household' }) {
  const cat = T24_CATEGORIES.find(c => c.id === catId);
  const services = T24_SERVICES.filter(s => s.cat === catId);
  return (
    <T24Phone dark={dark}>
      <T24AppBar title={cat.name.split(',')[0]} subtitle={`${services.length} services in this category`} 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: '4px 16px 0' }}>
        <div style={{ display: 'flex', gap: 6, overflowX: 'auto', paddingBottom: 12 }}>
          <T24Chip active>All</T24Chip>
          <T24Chip>Near me</T24Chip>
          <T24Chip>Top rated</T24Chip>
          <T24Chip>Available now</T24Chip>
        </div>
      </div>
      <div style={{ padding: '0 16px 100px', overflow: 'auto', height: 'calc(100% - 130px)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
          {services.map(s => <T24ServiceTile key={s.s} svc={s}/>)}
        </div>
      </div>
      <T24BottomNav dark={dark} fab items={[
        { key: 'home', icon: LineIcons.home(22), label: 'Home' },
        { key: 'browse', icon: LineIcons.grid(22), label: 'Explore', active: true },
        { key: 'tasks', icon: LineIcons.task(22), label: 'Bookings' },
        { key: 'profile', icon: LineIcons.user(22), label: 'Profile' },
      ]}/>
    </T24Phone>
  );
}

// ── 9. Search results ────────────────────────────────────────────────────────
function ScreenSearch({ dark }) {
  return (
    <T24Phone dark={dark}>
      <div style={{ padding: '8px 16px 12px', display: 'flex', gap: 8, alignItems: 'center' }}>
        <button style={{ width: 40, height: 40, borderRadius: 12, border: '1px solid var(--t24-border)', background: 'var(--t24-surface)', color: 'var(--t24-text)' }}>{LineIcons.back(18)}</button>
        <div style={{ flex: 1 }}>
          <T24SearchBar value="electric" trailing={<span style={{ color: 'var(--t24-muted)' }}>{LineIcons.x(14)}</span>}/>
        </div>
      </div>
      <div style={{ padding: '0 16px' }}>
        <div style={{ display: 'flex', gap: 6, overflowX: 'auto', paddingBottom: 10 }}>
          <T24Chip active icon={LineIcons.filter(12)}>Filters · 2</T24Chip>
          <T24Chip>Within 3 km</T24Chip>
          <T24Chip>4★ & up</T24Chip>
          <T24Chip>Available today</T24Chip>
        </div>
      </div>
      <div style={{ padding: '0 16px 100px', overflow: 'auto', height: 'calc(100% - 120px)' }}>
        <div className="t24-caption" style={{ color: 'var(--t24-muted)', margin: '6px 4px 10px' }}>2 SERVICES MATCHED</div>
        <div style={{ display: 'flex', gap: 10, marginBottom: 14 }}>
          {[T24_SERVICES.find(s => s.s === 'electrician'), T24_SERVICES.find(s => s.s === 'ac')].map(s => (
            <div key={s.s} className="t24-card" style={{ padding: '10px 12px', display: 'flex', gap: 10, alignItems: 'center', flex: 1 }}>
              <TaskerIcon kind="svc" name={s.s} size={36}/>
              <div>
                <div className="t24-title-s" style={{ color: 'var(--t24-text)' }}>{s.name}</div>
                <div className="t24-body-m" style={{ color: 'var(--t24-muted)', fontSize: 11 }}>18 providers</div>
              </div>
            </div>
          ))}
        </div>
        <div className="t24-caption" style={{ color: 'var(--t24-muted)', margin: '6px 4px 10px' }}>NEARBY PROVIDERS</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {T24_PROVIDERS.filter(p => p.services.includes('electrician') || p.services.includes('ac')).map(p => (
            <T24ProviderCard key={p.id} p={p} action={
              <T24Button kind="primary" size="sm">Book</T24Button>
            }/>
          ))}
        </div>
      </div>
    </T24Phone>
  );
}

// ── 10. Provider profile ─────────────────────────────────────────────────────
function ScreenProviderProfile({ dark }) {
  const p = T24_PROVIDERS[0];
  return (
    <T24Phone dark={dark}>
      <div style={{ height: '100%', overflow: 'auto', paddingBottom: 100 }}>
        {/* Header */}
        <div style={{ background: 'var(--t24-grad-hero)', color: '#fff', padding: '8px 20px 30px', position: 'relative' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <button style={{ width: 40, height: 40, borderRadius: 12, background: 'rgba(255,255,255,0.15)', border: 'none', color: '#fff' }}>{LineIcons.back(18)}</button>
            <div style={{ display: 'flex', gap: 8 }}>
              <button style={{ width: 40, height: 40, borderRadius: 12, background: 'rgba(255,255,255,0.15)', border: 'none', color: '#fff' }}>{LineIcons.heart(18)}</button>
              <button style={{ width: 40, height: 40, borderRadius: 12, background: 'rgba(255,255,255,0.15)', border: 'none', color: '#fff' }}>{LineIcons.send(16)}</button>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 14, marginTop: 18, alignItems: 'flex-start' }}>
            <div style={{ width: 80, height: 80, borderRadius: 24, background: 'var(--t24-grad-cyan)', font: '800 36px/1 var(--t24-font-en)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', position: 'relative', boxShadow: '0 8px 24px rgba(0,0,0,0.25)' }}>
              {p.avatar}
              <span style={{ position: 'absolute', bottom: -2, right: -2, width: 18, height: 18, borderRadius: 9, background: 'var(--t24-success)', border: '3px solid var(--t24-navy)' }}/>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <h1 className="t24-title-l" style={{ margin: 0, color: '#fff' }}>{p.name}</h1>
                <span className="t24-verified">✓</span>
              </div>
              <div style={{ font: '500 13px/1.4 var(--t24-font-en)', color: 'rgba(255,255,255,0.85)', marginTop: 2 }}>{p.profession}</div>
              <div style={{ display: 'flex', gap: 10, marginTop: 8, flexWrap: 'wrap' }}>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, font: '600 11px/1 var(--t24-font-en)', color: 'rgba(255,255,255,0.85)' }}>{LineIcons.pin(11)} {p.area}</span>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, font: '600 11px/1 var(--t24-font-en)', color: 'rgba(255,255,255,0.85)' }}>{LineIcons.clock(11)} {p.experience}</span>
              </div>
            </div>
          </div>
        </div>
        {/* Stats */}
        <div style={{ display: 'flex', gap: 10, padding: '14px 16px 0' }}>
          {[
            { l: 'Rating',  v: `${p.rating} ★` },
            { l: 'Jobs',    v: `${p.jobs}+` },
            { l: 'Response',v: '< 10 min' },
            { l: 'Repeat',  v: '68%' },
          ].map(s => (
            <div key={s.l} className="t24-card" style={{ flex: 1, padding: '10px 8px', textAlign: 'center' }}>
              <div className="t24-title-s" style={{ color: 'var(--t24-deep)', font: '800 16px/1 var(--t24-font-en)' }}>{s.v}</div>
              <div className="t24-caption" style={{ color: 'var(--t24-muted)', marginTop: 3, fontSize: 9 }}>{s.l}</div>
            </div>
          ))}
        </div>
        {/* About */}
        <div style={{ padding: '14px 16px 0' }}>
          <T24SectionTitle title="About"/>
          <p className="t24-body-l" style={{ color: 'var(--t24-muted)', margin: 0 }}>
            6+ years of residential and commercial electrical work. Specializing in wiring, ceiling-fan installation, AC line laying, and emergency repair. Speaks Bangla & English.
          </p>
        </div>
        {/* Services offered */}
        <div style={{ padding: '14px 16px 0' }}>
          <T24SectionTitle title="Services offered"/>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            {p.services.map(sid => {
              const sv = T24_SERVICES.find(x => x.s === sid);
              return (
                <span key={sid} className="t24-chip" style={{ height: 34, padding: '0 14px' }}>
                  <TaskerIcon kind="svc" name={sv.s} size={18}/>{sv.name}
                </span>
              );
            })}
          </div>
        </div>
        {/* Reviews */}
        <div style={{ padding: '14px 16px 0' }}>
          <T24SectionTitle title={`Reviews (${T24_REVIEWS.length})`} action="See all"/>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {T24_REVIEWS.slice(0, 2).map(r => (
              <div key={r.id} className="t24-card" style={{ padding: 12 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <span className="t24-title-s" style={{ color: 'var(--t24-text)' }}>{r.by}</span>
                  <span style={{ font: '500 11px/1 var(--t24-font-en)', color: 'var(--t24-muted)' }}>{r.date}</span>
                </div>
                <div style={{ marginTop: 4 }}><T24Stars n={r.stars} size={12}/></div>
                <p className="t24-body-m" style={{ color: 'var(--t24-muted)', margin: '6px 0 0' }}>{r.text}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
      {/* CTA */}
      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '12px 16px 22px', background: 'linear-gradient(180deg, transparent, var(--t24-bg) 30%)' }}>
        <div style={{ display: 'flex', gap: 10 }}>
          <button style={{ width: 56, height: 54, borderRadius: 16, border: '1.5px solid var(--t24-border)', background: 'var(--t24-surface)', color: 'var(--t24-blue)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{LineIcons.chat(20)}</button>
          <button style={{ width: 56, height: 54, borderRadius: 16, border: '1.5px solid var(--t24-border)', background: 'var(--t24-surface)', color: 'var(--t24-blue)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{LineIcons.phone(18)}</button>
          <T24Button full kind="primary" size="lg">Book Now · From BDT 600</T24Button>
        </div>
      </div>
    </T24Phone>
  );
}

Object.assign(window, { ScreenHomeTaker, ScreenCategories, ScreenServiceList, ScreenSearch, ScreenProviderProfile });