// ====================================================================
// Tasker24 — Home + Catalog pages (Home, Categories, Services, Detail)
// ====================================================================
const { useState: useStateH, useMemo: useMemoH, useEffect: useEffectH } = React;

function HomePage({ lang, go, openService }) {
  const { cats, services, banners, providers, opinions } = window.T24;
  const popularServices = useMemoH(() => {
    const picks = ['it-graphics','household-electrician','healthcare-doctor','food-grocery','transport-courier','engineering-ac','education-tuition','creative-artpaint','household-plumbing','professional-photography'];
    return picks.map(id => services.find(s=>s.id===id)).filter(Boolean);
  }, []);
  const heroSub   = t(lang,'hero.subtitle');
  return (
    <main>
      {/* ===== Sample-style: Rail + Hero banner ===== */}
      <section className="py-4">
        <div className="container">
          <div className="row g-3">
            <div className="col-lg-3 d-none d-lg-block">
              <CategoryRail lang={lang} openService={openService}/>
            </div>
            <div className="col-lg-9">
              <div className="t24-card overflow-hidden p-0" style={{borderRadius:'20px'}}>
                <HeroCarousel banners={banners}/>
              </div>
              {/* Quick role chips below banner */}
              <div className="d-flex flex-wrap gap-2 mt-3">
                <a href="#/services" className="t24-pill"><i className="bi bi-search" style={{color:'var(--t24-blue)'}}></i> {lang==='bn'?'সেবা খুঁজুন':'Find a service'}</a>
                <a href="#/registration" className="t24-pill"><i className="bi bi-briefcase" style={{color:'var(--t24-blue)'}}></i> {lang==='bn'?'প্রোভাইডার হোন':'Become a provider'}</a>
                <a href="#/process" className="t24-pill"><i className="bi bi-diagram-3" style={{color:'var(--t24-blue)'}}></i> {lang==='bn'?'প্রক্রিয়া':'How it works'}</a>
                <span className="t24-pill"><i className="bi bi-patch-check-fill" style={{color:'var(--t24-blue)'}}></i> Verified providers</span>
                <span className="t24-pill"><i className="bi bi-lock-fill" style={{color:'var(--t24-blue)'}}></i> NID stays private</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Service Categories (horizontal cards — sample direction) */}
      <section className="py-4">
        <div className="container">
          <SectionTitle title={lang==='bn'?'সেবা ক্যাটাগরি':'Service Categories'}
            action={<a href="#/categories" className="fw-bold" style={{color:'var(--t24-blue)', textDecoration:'underline'}}>{lang==='bn'?'সব দেখুন':'See All'}</a>} />
          <div className="t24-scroll-row" style={{gridAutoColumns:'minmax(180px, 1fr)'}}>
            {cats.map(c => (
              <a key={c.id} href={"#/category/"+c.id} className="t24-card text-decoration-none p-3 d-flex flex-column align-items-center text-center">
                <div className="t24-iconbox t24-iconbox--lg mb-2"><img src={c.icon} alt=""/></div>
                <div className="fw-semibold" style={{color:'var(--t24-text-1)', fontSize:13.5, lineHeight:1.25}}>{lang==='bn'?c.nameBn:c.name}</div>
                <div className="small text-muted mt-1">{c.count} {lang==='bn'?'টি':'services'}</div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* All Services (horizontal scroller — sample direction) */}
      <section className="py-4">
        <div className="container">
          <SectionTitle title={lang==='bn'?'সকল সেবা':'All Services'}
            action={<a href="#/services" className="fw-bold" style={{color:'var(--t24-blue)', textDecoration:'underline'}}>{lang==='bn'?'সব দেখুন':'See All'}</a>} />
          <div className="t24-scroll-row" style={{gridAutoColumns:'minmax(260px, 1fr)'}}>
            {popularServices.map(s => (<ServiceCard key={s.id} svc={s} onOpen={openService} />))}
          </div>
        </div>
      </section>

      {/* Our Features (trust strip from sample) */}
      <section className="py-5">
        <div className="container">
          <SectionTitle eyebrow={lang==='bn'?'আমাদের বৈশিষ্ট্য':'Our features'}
            title={lang==='bn'?'কেন Tasker24 আলাদা':'What makes Tasker24 unique'} />
          <div className="row g-3 row-cols-1 row-cols-md-3">
            {[
              ['Direct negotiation', 'Talk and pay the provider directly — Tasker24 takes no cut per task.', 'bi-cash-coin'],
              ['Verified providers',  'Profile reviews and identity verification across categories.',          'bi-patch-check'],
              ['24/7 support',        'Reach our team any time of day — for safety or help with a task.',     'bi-headset'],
            ].map(([t1,t2,ic],i)=>(
              <div className="col" key={i}>
                <div className="t24-card p-4 h-100 text-center">
                  <div className="t24-iconbox mx-auto mb-3" style={{background:'var(--t24-grad-blue)', border:0}}>
                    <i className={"bi "+ic} style={{color:'#fff', fontSize:28}}></i>
                  </div>
                  <strong className="d-block">{t1}</strong>
                  <div className="small text-muted mt-1">{t2}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Tasker24 Process — dark band from sample */}
      <section className="py-5" style={{background:'linear-gradient(135deg, #0B1F3A 0%, #112A55 100%)', color:'#fff'}}>
        <div className="container">
          <div className="text-center mb-4">
            <h2 style={{color:'#fff'}}>Tasker24 <span className="t24-grad-text">Process</span></h2>
            <p style={{color:'#C7D6F1', maxWidth: 720, margin:'10px auto 0'}}>
              From role selection to a five-star review — Tasker24 stays out of the way and lets the right people meet directly.
            </p>
          </div>
          <div className="row g-3">
            {[
              ['Come in contact',  'Pick a category, message a provider, share your need.',     '01'],
              ['Choose a provider','Compare profiles, ratings, areas and certificates.',         '02'],
              ['Enjoy the service','Negotiate, schedule, finish the work and leave a review.', '03'],
            ].map(([t1,t2,n],i)=>(
              <div className="col-md-4" key={i}>
                <div className="p-4 position-relative" style={{background:'rgba(255,255,255,.05)', border:'1px solid rgba(255,255,255,.08)', borderRadius:20, minHeight:170}}>
                  <strong className="d-block mb-1" style={{fontSize:18, color:'#fff'}}>{t1}</strong>
                  <p className="mb-0" style={{color:'#C7D6F1', fontSize:14}}>{t2}</p>
                  <div className="position-absolute" style={{right:18, bottom:-18, width:46, height:46, borderRadius:'50%', background:'var(--t24-grad-cyan)', display:'grid', placeItems:'center', color:'var(--t24-navy)', fontWeight:800}}>
                    {n}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Service plans (pricing) */}
      <section className="py-5" style={{background:'var(--t24-surface-2)'}}>
        <div className="container">
          <SectionTitle title="Tasker24 service plans" subtitle="One-time registration. No commission per task. Direct negotiation between parties." />
          <div className="row g-3 justify-content-center">
            {[
              { id:'taker', title:'Service Taker',   price:200, sub:'Free for 2 weeks', tag:'Great for everyday needs', bullets:['Browse 94+ services','Direct messaging','Save providers','Review after task'] },
              { id:'provider', title:'Service Provider', price:200, sub:'Free for 2 weeks', tag:'Recommended for freelancers', bullets:['Public service profile','Multiple service categories','Direct payouts','Verified badge'], featured:true },
              { id:'both', title:'Marketplace (Both)', price:400, sub:'Free for 2 weeks', tag:'Ideal for active community', bullets:['Both roles, one profile','Priority listing','Switch contexts','Earn while you spend'] },
            ].map(p => (
              <div className="col-md-4" key={p.id}>
                <div className={"t24-card p-4 h-100 text-center "+(p.featured?'t24-card--active':'')}>
                  <div className="text-muted small mb-2">{p.title}</div>
                  <div className="display-5 fw-bold" style={{color: p.featured?'var(--t24-blue)':'var(--t24-text-1)'}}>৳{p.price}</div>
                  <div className="small text-success mb-1">{p.sub}</div>
                  <div className="small text-muted mb-3">{p.tag}</div>
                  <ul className="list-unstyled d-flex flex-column gap-2 mb-3 text-start" style={{maxWidth:240, marginInline:'auto'}}>
                    {p.bullets.map((b,i)=>(<li key={i} className="d-flex gap-2 small"><i className="bi bi-check-circle-fill" style={{color:'var(--t24-success)'}}></i>{b}</li>))}
                  </ul>
                  <a href="#/registration" className={"btn "+(p.featured?'btn-t24':'btn-t24-outline')+" w-100"}>Pick & Register Now</a>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Animated counter strip */}
      <CounterSection />

      {/* Reviews */}
      <section className="py-5">
        <div className="container">
          <h2 className="text-center mb-2">Our clients <span className="t24-grad-text">opinions</span></h2>
          <p className="text-center text-muted mb-4" style={{maxWidth:680, margin:'0 auto'}}>
            Real reviews from Service Takers and Providers using Tasker24 every day across Bangladesh.
          </p>
          <div className="row g-3">
            {opinions.map((o,i)=>(
              <div className="col-md-6" key={i}>
                <div className="t24-card t24-review p-4 h-100">
                  <div className="d-flex align-items-center gap-2 mb-2">
                    {Array.from({length:5}).map((_,k)=>(
                      <i key={k} className={"bi "+(k<o.rating?'bi-star-fill':'bi-star')} style={{color:'var(--t24-warning)', fontSize:13}}></i>
                    ))}
                  </div>
                  <p className="mb-3" style={{fontSize:15, lineHeight:1.6}}>“{o.text}”</p>
                  <div className="d-flex align-items-center gap-2">
                    <div className="t24-iconbox t24-iconbox--sm" style={{background:'var(--t24-grad-cyan)', border:0, fontWeight:800, color:'var(--t24-navy)'}}>{o.who[0]}</div>
                    <div>
                      <strong style={{fontSize:14}}>{o.who}</strong>
                      <div className="small text-muted">{o.role}</div>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Role cards */}
      <section className="py-5" style={{background:'var(--t24-surface-2)'}}>
        <div className="container">
          <SectionTitle eyebrow="Three roles · One platform"
            title="Choose how you want to use Tasker24" />
          <div className="row g-4">
            {[
              { id:'taker', title: t(lang,'role.taker'), icon:'bi-person-heart', bullets:['Find verified providers near you','Negotiate price directly','Track jobs in one place','Leave reviews & opinions'], cta:'Join as Service Taker', tone:'blue' },
              { id:'provider', title: t(lang,'role.provider'), icon:'bi-briefcase', bullets:['Build a public service profile','Add multiple service categories','Direct payment, no commission per task','Grow with verified reviews'], cta:'Become a Provider', tone:'cyan', featured:true },
              { id:'both', title: t(lang,'role.both'), icon:'bi-arrow-left-right', bullets:['One profile, both roles','Switch contexts in dashboard','Best for active community members','Earn while you spend'], cta:'Join as Both', tone:'navy' },
            ].map(card => (
              <div className="col-md-4" key={card.id}>
                <div className={"t24-card t24-card--lift h-100 p-4 d-flex flex-column "+(card.featured?'border-2':'')}
                     style={card.featured?{borderColor:'var(--t24-blue)', boxShadow:'0 24px 60px -22px rgba(30,99,214,.3)'}:null}>
                  {card.featured && <div className="t24-chip t24-chip--cyan mb-3 align-self-start"><i className="bi bi-stars"></i> Most active</div>}
                  <div className="t24-iconbox mb-3" style={card.tone==='cyan'?{background:'var(--t24-grad-cyan)', border:0}:card.tone==='navy'?{background:'var(--t24-grad-blue)',border:0}:null}>
                    <i className={"bi "+card.icon} style={{fontSize:30, color: card.tone==='blue'?'var(--t24-blue)':(card.tone==='cyan'?'var(--t24-navy)':'#fff')}}></i>
                  </div>
                  <h4 className="mb-3">{card.title}</h4>
                  <ul className="list-unstyled d-flex flex-column gap-2 flex-grow-1 mb-3">
                    {card.bullets.map((b,i)=>(<li key={i} className="d-flex align-items-start gap-2"><i className="bi bi-check-circle-fill" style={{color:'var(--t24-success)'}}></i><span>{b}</span></li>))}
                  </ul>
                  <a className={"btn "+(card.featured?'btn-t24':'btn-t24-outline')} href="#/registration">{card.cta}</a>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ preview */}
      <section className="py-5">
        <div className="container">
          <div className="row g-4 align-items-start">
            <div className="col-lg-4">
              <h2 className="mb-3">Frequently asked <span className="t24-grad-text">questions</span></h2>
              <p className="text-muted">Can't find the answer you're looking for? Reach out to our support team — we reply within 24 hours.</p>
              <a href="#/contact" className="btn btn-t24 mt-2">Contact support</a>
            </div>
            <div className="col-lg-8">
              {window.T24.faqs[0].items.concat(window.T24.faqs[2].items.slice(0,1)).slice(0,5).map((it, i)=>(
                <details key={i} className="t24-acc-item" open={i===0}>
                  <summary>{it.q}<i className="bi bi-chevron-down chev"></i></summary>
                  <div className="body">{it.a}</div>
                </details>
              ))}
              <div className="text-center mt-3"><a href="#/faq" className="btn btn-t24-outline">Read more questions</a></div>
            </div>
          </div>
        </div>
      </section>

      {/* Safety + final CTA */}
      <section className="py-5">
        <div className="container">
          <div className="t24-card p-4 p-md-5" style={{background:'var(--t24-grad-blue)', color:'#fff', border:0}}>
            <div className="row align-items-center g-4">
              <div className="col-lg-8">
                <div className="t24-chip t24-chip--cyan mb-3"><i className="bi bi-stars"></i> Bridge of Service Taker & Provider</div>
                <h2 className="mb-2" style={{color:'#fff'}}>Ready to join the Tasker24 bridge?</h2>
                <p className="mb-0" style={{color:'#C7D6F1'}}>Take a service, offer a service, or do both — all on one platform built for Bangladesh.</p>
              </div>
              <div className="col-lg-4 d-flex gap-2 justify-content-lg-end flex-wrap">
                <a href="#/registration" className="btn btn-t24-cyan btn-lg">Start free trial</a>
                <a href="#/login" className="btn btn-t24-outline btn-lg" style={{color:'#fff', borderColor:'rgba(255,255,255,.6)'}}>Login</a>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

// =====================================================================
// All Categories — premium directory matching sample landing
// =====================================================================
function CategoriesPage({ lang, iconMode, setIconMode, openService }) {
  const { cats } = window.T24;
  const [q, setQ] = useStateH('');
  const [activeId, setActiveId] = useStateH(cats[0].id);
  const filtered = cats.filter(c => {
    if (!q) return true;
    const v = q.toLowerCase();
    return c.name.toLowerCase().includes(v) || c.services.some(s => s.name.toLowerCase().includes(v));
  });
  const active = cats.find(c => c.id === activeId);
  return (
    <main className={"icon-mode-"+iconMode}>
      <PageHero eyebrow="11 categories" title="All categories"
        subtitle="Browse every service category Tasker24 supports. Click any category to see its services and start a request."
        crumbs={[{label:'Home', href:'#/'}, {label:'All categories'}]}>
        <div className="row align-items-center g-3 mt-3">
          <div className="col-lg-7"><SearchBox value={q} onChange={setQ} placeholder="Search a category or a service…" /></div>
          <div className="col-lg-5 d-flex align-items-center gap-2 flex-wrap">
            <span className="small text-muted">Icon style:</span>
            <div className="t24-seg">
              <button className={iconMode==='colored'?'active':''} onClick={()=>setIconMode('colored')}>Colored</button>
              <button className={iconMode==='current'?'active':''} onClick={()=>setIconMode('current')}>Current</button>
              <button className={iconMode==='white'?'active':''} onClick={()=>setIconMode('white')}>White</button>
            </div>
          </div>
        </div>
      </PageHero>

      <section className="py-4 py-md-5">
        <div className="container">
          <div className="row g-3 row-cols-2 row-cols-md-3 row-cols-lg-4">
            {filtered.map(c => (
              <div className="col" key={c.id}>
                <CategoryCard cat={c} lang={lang} active={c.id===activeId} onClick={(cc)=>setActiveId(cc.id)} />
              </div>
            ))}
            {filtered.length===0 && <div className="col-12"><EmptyState text="No categories match your search."/></div>}
          </div>
        </div>
      </section>

      {/* Selected category — services preview */}
      <section className="py-4 pb-5">
        <div className="container">
          <div className="t24-card p-3 p-md-4">
            <div className="d-flex flex-wrap align-items-center gap-3 mb-4">
              <CatIcon cat={active} size="lg"/>
              <div className="flex-grow-1">
                <div className="small text-muted text-uppercase" style={{letterSpacing:'.12em', fontSize:11}}>Selected category</div>
                <h3 className="mb-1">{lang==='bn'?active.nameBn:active.name}</h3>
                <p className="text-muted mb-0">{lang==='bn'?active.descBn:active.desc}</p>
              </div>
              <a href={"#/category/"+active.id} className="btn btn-t24">View category page <i className="bi bi-arrow-right ms-1"></i></a>
            </div>
            <div className="row g-3 row-cols-1 row-cols-md-2 row-cols-lg-3">
              {active.services.map(s => {
                const svc = window.T24.services.find(x=>x.short===s.short && x.catId===active.id);
                return <div className="col" key={svc.id}><ServiceCard svc={svc} onOpen={openService}/></div>;
              })}
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

// =====================================================================
// All Services
// =====================================================================
function ServicesPage({ lang, openService, initialQuery }) {
  const { cats, services } = window.T24;
  const [q, setQ] = useStateH(initialQuery || '');
  const [cat, setCat] = useStateH('all');
  const [unit, setUnit] = useStateH('all'); // all | Retail | Wholesale
  const [mode, setMode] = useStateH('all'); // all | online | offline — heuristic
  const [page, setPage] = useStateH(1);
  const perPage = 12;

  // Online services (heuristic): IT, Creative, parts of Education/Professional
  const onlineCats = new Set(['it','creative']);

  const list = useMemoH(() => {
    return services.filter(s => {
      if (cat !== 'all' && s.catId !== cat) return false;
      if (q) {
        const v = q.toLowerCase();
        if (!(s.name.toLowerCase().includes(v) || s.description.toLowerCase().includes(v))) return false;
      }
      if (unit !== 'all') {
        if (!s.unit || !s.unit.some(u => u.name.toLowerCase()===unit.toLowerCase())) return false;
      }
      if (mode==='online' && !onlineCats.has(s.catId)) return false;
      if (mode==='offline' && onlineCats.has(s.catId)) return false;
      return true;
    });
  }, [q, cat, unit, mode]);

  const totalPages = Math.max(1, Math.ceil(list.length / perPage));
  const paged = list.slice((page-1)*perPage, page*perPage);
  useEffectH(()=>{ setPage(1); }, [q, cat, unit, mode]);

  return (
    <main>
      <PageHero eyebrow="94+ services" title="All services"
        subtitle="Search across every service on Tasker24. Filter by category, retail/wholesale, or online/offline availability."
        crumbs={[{label:'Home', href:'#/'}, {label:'All services'}]}>
        <div className="row g-3 mt-2">
          <div className="col-lg-7"><SearchBox value={q} onChange={setQ} placeholder="Search by keyword e.g. plumbing, tuition, fish wholesale…" /></div>
          <div className="col-lg-5 d-flex gap-2 flex-wrap">
            <select className="form-select" style={{maxWidth:200}} value={cat} onChange={e=>setCat(e.target.value)}>
              <option value="all">All categories</option>
              {cats.map(c=>(<option key={c.id} value={c.id}>{c.name}</option>))}
            </select>
            <div className="t24-seg">
              <button className={mode==='all'?'active':''} onClick={()=>setMode('all')}>All</button>
              <button className={mode==='online'?'active':''} onClick={()=>setMode('online')}>Online</button>
              <button className={mode==='offline'?'active':''} onClick={()=>setMode('offline')}>Offline</button>
            </div>
            <div className="t24-seg">
              <button className={unit==='all'?'active':''} onClick={()=>setUnit('all')}>Any</button>
              <button className={unit==='Retail'?'active':''} onClick={()=>setUnit('Retail')}>Retail</button>
              <button className={unit==='Wholesale'?'active':''} onClick={()=>setUnit('Wholesale')}>Wholesale</button>
            </div>
          </div>
        </div>
      </PageHero>

      <section className="py-4 py-md-5">
        <div className="container">
          <div className="d-flex flex-wrap align-items-center justify-content-between mb-3">
            <div className="text-muted small">Showing <strong style={{color:'var(--t24-text-1)'}}>{list.length}</strong> services</div>
            <div className="d-flex gap-2 flex-wrap">
              <a href="#/registration" className="btn btn-t24 btn-sm"><i className="bi bi-plus-circle me-1"></i> {t(lang,'common.becomeProvider')}</a>
              <button className="btn btn-t24-ghost btn-sm" onClick={()=>{ setQ(''); setCat('all'); setUnit('all'); setMode('all'); }}>Reset filters</button>
            </div>
          </div>
          <div className="row g-3 row-cols-1 row-cols-md-2 row-cols-lg-3">
            {paged.map(s => (
              <div className="col" key={s.id}><ServiceCard svc={s} onOpen={openService}/></div>
            ))}
            {list.length===0 && <div className="col-12"><EmptyState text="No services match — try clearing filters."/></div>}
          </div>
          {totalPages>1 && (
            <div className="t24-pager">
              <button onClick={()=>setPage(p=>Math.max(1,p-1))} disabled={page===1}><i className="bi bi-chevron-left"></i></button>
              {Array.from({length: totalPages}).slice(0, 6).map((_,i)=>{
                const n = i+1;
                return <button key={n} className={page===n?'active':''} onClick={()=>setPage(n)}>{n}</button>;
              })}
              {totalPages>6 && <span className="px-2 text-muted">…</span>}
              {totalPages>6 && <button className={page===totalPages?'active':''} onClick={()=>setPage(totalPages)}>{totalPages}</button>}
              <button onClick={()=>setPage(p=>Math.min(totalPages,p+1))} disabled={page===totalPages}><i className="bi bi-chevron-right"></i></button>
            </div>
          )}
        </div>
      </section>
    </main>
  );
}

// Empty state
function EmptyState({ text }) {
  return (
    <div className="t24-card p-4 text-center">
      <div className="t24-iconbox mx-auto mb-3"><i className="bi bi-search" style={{fontSize:28, color:'var(--t24-blue)'}}></i></div>
      <div className="fw-semibold">Nothing here yet</div>
      <div className="small text-muted">{text}</div>
    </div>
  );
}

// =====================================================================
// Category Detail
// =====================================================================
function CategoryDetailPage({ catId, lang, openService }) {
  const { cats, services, providers } = window.T24;
  const cat = cats.find(c=>c.id===catId);
  if (!cat) return <div className="container py-5"><EmptyState text="Category not found." /></div>;
  const catServices = services.filter(s=>s.catId===catId);
  return (
    <main>
      <PageHero eyebrow={lang==='bn'?'বিভাগ':'Category'}
        title={lang==='bn'?cat.nameBn:cat.name}
        subtitle={lang==='bn'?cat.descBn:cat.desc}
        crumbs={[{label:'Home', href:'#/'}, {label:'Categories', href:'#/categories'}, {label: cat.name}]}>
        <div className="d-flex flex-wrap gap-2 mt-3">
          <a href="#/registration" className="btn btn-t24"><i className="bi bi-plus-circle me-2"></i>{t(lang,'common.becomeProvider')}</a>
          <a href="#/services" className="btn btn-t24-outline"><i className="bi bi-grid me-2"></i>All services</a>
        </div>
      </PageHero>

      <section className="py-4 py-md-5">
        <div className="container">
          <SectionTitle title="Services in this category" subtitle={`${catServices.length} services available`} />
          <div className="row g-3 row-cols-1 row-cols-md-2 row-cols-lg-3">
            {catServices.map(s => (<div className="col" key={s.id}><ServiceCard svc={s} onOpen={openService}/></div>))}
          </div>
        </div>
      </section>

      <section className="py-4 py-md-5" style={{background:'var(--t24-surface-2)'}}>
        <div className="container">
          <SectionTitle eyebrow="Top providers" title="Verified specialists in this category" />
          <div className="row g-3 row-cols-1 row-cols-md-2">
            {providers.slice(0,4).map((p,i)=>(<div className="col" key={i}><ProviderCard p={p}/></div>))}
          </div>
        </div>
      </section>

      <section className="py-4 py-md-5">
        <div className="container">
          <SectionTitle eyebrow="FAQ" title="Common questions for this category" />
          <div className="row g-3">
            <div className="col-lg-8">
              <details className="t24-acc-item" open>
                <summary>How are providers verified in {cat.name}?<i className="bi bi-chevron-down chev"></i></summary>
                <div className="body">Providers submit identity documents and category-specific certificates where applicable (e.g. medical license for healthcare, professional certificates for engineering). Documents are reviewed internally; nothing is shown publicly.</div>
              </details>
              <details className="t24-acc-item">
                <summary>Do prices vary by area or time?<i className="bi bi-chevron-down chev"></i></summary>
                <div className="body">Tasker24 does not set prices. Taker and provider negotiate directly. Many providers list a typical price range on their profile.</div>
              </details>
              <details className="t24-acc-item">
                <summary>Are retail and wholesale options available?<i className="bi bi-chevron-down chev"></i></summary>
                <div className="body">Where applicable (e.g. groceries, agro, food), services include Retail and Wholesale sub-units. Filter the All Services page by unit to find them.</div>
              </details>
            </div>
            <div className="col-lg-4"><SafetyCard lang={lang}/></div>
          </div>
        </div>
      </section>
    </main>
  );
}

// =====================================================================
// Service Detail (modal preview & full page)
// =====================================================================
function ServiceDetailModal({ svc, onClose }) {
  const { providers, cats } = window.T24;
  if (!svc) return null;
  const cat = cats.find(c=>c.id===svc.catId);
  return (
    <div className="t24-modal-bd" onClick={onClose}>
      <div className="t24-modal" onClick={e=>e.stopPropagation()}>
        <div className="p-4 p-md-5 position-relative">
          <button className="t24-icon-btn position-absolute" style={{right:14, top:14}} onClick={onClose}><i className="bi bi-x-lg"></i></button>
          <div className="d-flex flex-wrap align-items-center gap-3 mb-3">
            <div className="t24-iconbox t24-iconbox--lg"><img src={cat.icon} alt=""/></div>
            <div>
              <div className="t24-chip mb-1">{cat.name}</div>
              <h3 className="mb-1">{svc.name}</h3>
              <div className="text-muted">{svc.description}</div>
            </div>
          </div>

          {svc.unit && svc.unit.length>0 && (
            <div className="mb-3">
              <small className="text-muted d-block mb-1">Sub-service options</small>
              <div className="d-flex flex-wrap gap-2">
                {svc.unit.map((u,i)=>(<span key={i} className="t24-chip t24-chip--cyan"><i className="bi bi-stack"></i>{u.name} — <span className="text-muted ms-1">{u.description}</span></span>))}
              </div>
            </div>
          )}

          <div className="row g-3 mt-2">
            <div className="col-md-6">
              <div className="t24-card p-3 h-100">
                <div className="d-flex align-items-center gap-2 mb-2"><i className="bi bi-search-heart"></i><strong>Find a provider</strong></div>
                <p className="small text-muted mb-3">Filter by area, availability and rating — then message the provider directly.</p>
                <a href="#/services" className="btn btn-t24 w-100">Search providers</a>
              </div>
            </div>
            <div className="col-md-6">
              <div className="t24-card p-3 h-100">
                <div className="d-flex align-items-center gap-2 mb-2"><i className="bi bi-briefcase"></i><strong>Provide this service</strong></div>
                <p className="small text-muted mb-3">List this service on your provider profile in minutes.</p>
                <a href="#/registration" className="btn btn-t24-outline w-100">Become a provider</a>
              </div>
            </div>
          </div>

          <hr className="my-4"/>
          <strong className="d-block mb-2">Top providers</strong>
          <div className="d-flex flex-column gap-2">
            {providers.slice(0,3).map((p,i)=>(<ProviderCard key={i} p={p}/>))}
          </div>

          <div className="mt-3">
            <SafetyCard lang="en" compact />
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  HomePage, CategoriesPage, ServicesPage, CategoryDetailPage, ServiceDetailModal, EmptyState,
});