// =====================================================================
// Tasker24 — Info pages
// =====================================================================
const { useState: useStateI } = React;

function AboutPage({ lang }) {
  return (
    <main>
      <PageHero eyebrow="About Tasker24" title="Bridge of Service Taker & Provider"
        subtitle="Tasker24 connects everyday people with verified service providers and freelancers across Bangladesh — building a trusted digital service ecosystem."
        crumbs={[{label:'Home', href:'#/'}, {label:'About'}]} />

      <section className="py-5">
        <div className="container">
          <div className="row g-4 align-items-center">
            <div className="col-lg-6">
              <div className="t24-chip mb-3"><i className="bi bi-flag"></i> Our story</div>
              <h2 className="mb-3">From everyday struggle to a digital marketplace.</h2>
              <p className="text-muted">In Bangladesh, finding a trusted plumber, tutor, or graphics designer often comes down to who you know. We built Tasker24 to change that — a single platform where Service Takers find verified providers and Service Providers reach customers without middlemen.</p>
              <p className="text-muted">We do not run the services. We run the bridge.</p>
              <p className="lang-bn mt-3" style={{fontSize:18, color:'var(--t24-deep-blue)'}}>
                “সেবা গ্রহণকারী এবং প্রদানকারীর সেতুবন্ধন”
              </p>
            </div>
            <div className="col-lg-6">
              <div className="row g-3">
                {[
                  ['Our mission','Make essential services easy to find, transparent to negotiate, and safe to complete — anywhere in Bangladesh.','bi-bullseye'],
                  ['Our vision','A nationwide digital service ecosystem where every skilled Bangladeshi can earn from their craft.','bi-eye'],
                  ['Our values','Trust, privacy, fairness. Direct connection over intermediaries. Respect for both sides.','bi-heart'],
                  ['The bridge','One profile for taking and providing services. Reviews build community-wide trust.','bi-bridge'],
                ].map(([h,b,ic],i)=>(
                  <div className="col-sm-6" key={i}>
                    <div className="t24-card p-3 h-100">
                      <div className="t24-iconbox t24-iconbox--sm mb-2"><i className={"bi "+ic} style={{color:'var(--t24-blue)', fontSize:22}}></i></div>
                      <strong className="d-block">{h}</strong>
                      <div className="small text-muted">{b}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Timeline */}
      <section className="py-5" style={{background:'var(--t24-surface-2)'}}>
        <div className="container">
          <SectionTitle eyebrow="Journey" title="A few milestones along the way" />
          <div className="row g-3">
            {[
              ['2024 · Concept','Bridge concept and category map: 11 categories, 94+ services for Bangladesh.'],
              ['2025 · MVP','Multi-role accounts, NID-private verification, direct messaging.'],
              ['2025 · Coverage','All 8 divisions, retail + wholesale where it matters (food, agro).'],
              ['2026 · Community','Verified reviews, public opinion wall and 24/7 support.'],
            ].map(([h,b],i)=>(
              <div className="col-md-3" key={i}>
                <div className="t24-step">
                  <div className="num">{String(i+1).padStart(2,'0')}</div>
                  <strong>{h}</strong>
                  <div className="small text-muted">{b}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Founders */}
      <section className="py-5">
        <div className="container">
          <SectionTitle eyebrow="People" title="Founders & advisors"
            subtitle="Placeholder profile cards — real names and bios will sit here." />
          <div className="row g-3 row-cols-1 row-cols-sm-2 row-cols-md-4">
            {[['Founder','Co-founder, Product'],['Co-founder','Co-founder, Engineering'],['Advisor','Advisor, Trust & Safety'],['Advisor','Advisor, Community']].map(([role, sub], i)=>(
              <div className="col" key={i}>
                <div className="t24-card p-3 text-center h-100">
                  <div className="t24-iconbox mx-auto mb-3" style={{width:96, height:96, borderRadius:'50%', background:'var(--t24-grad-blue)', border:0}}>
                    <i className="bi bi-person-fill" style={{color:'#fff', fontSize:40}}></i>
                  </div>
                  <strong>{role}</strong>
                  <div className="small text-muted">{sub}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

// =====================================================================
function ProcessPage({ lang }) {
  const steps = [
    ['Choose your role',          'Service Taker, Provider, or Both.', 'bi-person-check'],
    ['Agree to terms',            'Privacy, refund and community guidelines.', 'bi-shield-check'],
    ['Register & verify',         'Form + one-time payment + email verification.', 'bi-envelope-check'],
    ['Complete your profile',     'Add areas, services, and (for providers) certificates.', 'bi-person-vcard'],
    ['Search or list services',   'Find providers, or list services on your profile.', 'bi-search-heart'],
    ['Negotiate directly',        'Talk, agree on price, schedule the task.', 'bi-chat-dots'],
    ['Complete the task',         'Provider performs the service; taker confirms.', 'bi-clipboard-check'],
    ['Review & opinion',          'Both leave a public review. Trust grows.', 'bi-star'],
  ];
  return (
    <main>
      <PageHero eyebrow="Process" title="How Tasker24 works, end to end"
        subtitle="Eight clear steps — from sign-up to reviewing the completed task. Tasker24 is the connector; you negotiate and pay directly."
        crumbs={[{label:'Home', href:'#/'}, {label:'Process'}]} />
      <section className="py-5">
        <div className="container">
          <div className="row g-3 row-cols-1 row-cols-md-2 row-cols-lg-4">
            {steps.map(([t1, t2, ic], i)=>(
              <div className="col" key={i}>
                <div className="t24-card t24-step h-100">
                  <div className="num">STEP {String(i+1).padStart(2,'0')}</div>
                  <div className="t24-iconbox" style={{background:'var(--t24-grad-cyan)', border:0}}>
                    <i className={"bi "+ic} style={{fontSize:26, color:'var(--t24-navy)'}}></i>
                  </div>
                  <strong>{t1}</strong>
                  <div className="small text-muted">{t2}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="py-5" style={{background:'var(--t24-surface-2)'}}>
        <div className="container">
          <div className="row g-4 align-items-center">
            <div className="col-lg-6"><SafetyCard lang={lang}/></div>
            <div className="col-lg-6">
              <h3 className="mb-2">A platform that gets out of the way</h3>
              <p className="text-muted">Tasker24 connects parties only. Pricing, scheduling and payment happen between you and the other person. We do not take a commission per task. Your registration fee keeps the platform running.</p>
              <div className="d-flex flex-wrap gap-2 mt-3">
                <a href="#/registration" className="btn btn-t24">Start registration</a>
                <a href="#/services" className="btn btn-t24-outline">Browse services</a>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

// =====================================================================
function ContactPage({ lang }) {
  const [submitted, setSubmitted] = useStateI(false);
  return (
    <main>
      <PageHero eyebrow="Contact us" title="We're here, 24/7"
        subtitle="Reach our support team any time — for help with registration, safety, refunds or partnership requests."
        crumbs={[{label:'Home', href:'#/'}, {label:'Contact'}]} />
      <section className="py-5">
        <div className="container">
          <div className="row g-4">
            <div className="col-lg-7">
              <div className="t24-card p-4 p-md-5">
                <h4 className="mb-3">Send us a message</h4>
                {submitted ? (
                  <div className="t24-card p-4 text-center" style={{background:'var(--t24-surface-2)'}}>
                    <div className="t24-iconbox mx-auto mb-2" style={{background:'var(--t24-success)', border:0}}>
                      <i className="bi bi-check-lg" style={{color:'#fff', fontSize:30}}></i>
                    </div>
                    <strong>Message sent</strong>
                    <div className="small text-muted">Our team will reply within 24 hours.</div>
                  </div>
                ) : (
                  <form onSubmit={(e)=>{e.preventDefault();setSubmitted(true);}}>
                    <div className="row g-3">
                      <div className="col-sm-6"><label className="form-label">Your name</label><input className="form-control" required/></div>
                      <div className="col-sm-6"><label className="form-label">Email</label><input className="form-control" type="email" required/></div>
                      <div className="col-sm-6"><label className="form-label">Phone</label><input className="form-control"/></div>
                      <div className="col-sm-6">
                        <label className="form-label">Topic</label>
                        <select className="form-select">
                          <option>General question</option><option>Registration</option><option>Payment / refund</option><option>Safety report</option><option>Partnership</option>
                        </select>
                      </div>
                      <div className="col-12">
                        <label className="form-label">Message</label>
                        <textarea className="form-control" rows="5" required placeholder="How can we help?"></textarea>
                      </div>
                    </div>
                    <div className="d-flex justify-content-between align-items-center mt-3">
                      <span className="t24-chip"><i className="bi bi-shield-lock"></i> We never ask for password / OTP</span>
                      <button className="btn btn-t24 btn-lg">Send message <i className="bi bi-send ms-1"></i></button>
                    </div>
                  </form>
                )}
              </div>
            </div>
            <div className="col-lg-5">
              <div className="row g-3">
                <div className="col-12">
                  <div className="t24-card p-3 d-flex gap-3 align-items-start">
                    <div className="t24-iconbox t24-iconbox--sm" style={{background:'var(--t24-grad-blue)', border:0}}><i className="bi bi-headset" style={{color:'#fff', fontSize:22}}></i></div>
                    <div><strong className="d-block">24/7 phone support</strong><span className="text-muted">+880 1700-000000<br/>Daily, 24 hours</span></div>
                  </div>
                </div>
                <div className="col-12">
                  <div className="t24-card p-3 d-flex gap-3 align-items-start">
                    <div className="t24-iconbox t24-iconbox--sm"><i className="bi bi-envelope" style={{color:'var(--t24-blue)', fontSize:22}}></i></div>
                    <div><strong className="d-block">Email</strong><span className="text-muted">support@tasker24.net<br/>partners@tasker24.net</span></div>
                  </div>
                </div>
                <div className="col-12">
                  <div className="t24-card p-3 d-flex gap-3 align-items-start">
                    <div className="t24-iconbox t24-iconbox--sm"><i className="bi bi-geo-alt" style={{color:'var(--t24-blue)', fontSize:22}}></i></div>
                    <div><strong className="d-block">Office</strong><span className="text-muted">Dhaka, Bangladesh<br/>Mon–Fri 10am–6pm</span></div>
                  </div>
                </div>
                <div className="col-12">
                  <div className="t24-card p-0 overflow-hidden">
                    <div style={{height: 220, background:'linear-gradient(135deg, var(--t24-sky), #B6DDF5)', position:'relative'}}>
                      <div className="t24-placeholder-grid position-absolute" style={{inset:0}}></div>
                      <div className="position-absolute" style={{left:'50%', top:'50%', transform:'translate(-50%,-50%)', display:'flex', alignItems:'center', gap:8}}>
                        <i className="bi bi-geo-alt-fill" style={{color:'var(--t24-blue)', fontSize:40, filter:'drop-shadow(0 6px 14px rgba(30,99,214,.5))'}}></i>
                        <span className="t24-pill"><i className="bi bi-pin-map"></i> Office on map</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

// =====================================================================
function FaqPage({ lang }) {
  const [openIdx, setOpenIdx] = useStateI('Tasker24 Concept');
  return (
    <main>
      <PageHero eyebrow="FAQ" title="Frequently asked questions"
        subtitle="Answers grouped by topic. Can't find what you need? Reach out — our team replies within 24 hours."
        crumbs={[{label:'Home', href:'#/'}, {label:'FAQ'}]} />
      <section className="py-5">
        <div className="container">
          <div className="row g-4">
            <div className="col-lg-3">
              <div className="doc-side">
                {window.T24.faqs.map(g => (
                  <a key={g.group} href="#" onClick={(e)=>{e.preventDefault();setOpenIdx(g.group);}} className={openIdx===g.group?'active':''}>
                    {g.group}
                  </a>
                ))}
                <a href="#/safety" className="mt-3" style={{color:'var(--t24-danger)', fontWeight:600}}>
                  <i className="bi bi-shield-exclamation me-1"></i> Safety warning
                </a>
              </div>
            </div>
            <div className="col-lg-9">
              {window.T24.faqs.map(g => (
                <div key={g.group} className={"mb-4 "+(openIdx===g.group?'':'d-none')}>
                  <h4 className="mb-3">{g.group}</h4>
                  {g.items.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>
              ))}
              <div className="mt-4"><SafetyCard lang={lang}/></div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

// =====================================================================
function SafetyPage({ lang }) {
  return (
    <main>
      <PageHero eyebrow="Safety & Security" title="Stay safe on Tasker24"
        subtitle="Direct connection means you talk to people directly. Keep these rules in mind for every transaction."
        crumbs={[{label:'Home', href:'#/'}, {label:'Safety'}]} />
      <section className="py-5">
        <div className="container">
          <div className="t24-card p-4 p-md-5 mb-4" style={{background:'#FEF3C7', border:'1px solid #F59E0B', color:'#78350F'}}>
            <div className="d-flex flex-wrap align-items-start gap-3">
              <i className="bi bi-shield-exclamation" style={{fontSize:40}}></i>
              <div>
                <h3 className="mb-1" style={{color:'#78350F'}}>Never share Password, PIN or OTP</h3>
                <p className="mb-0">No one from Tasker24, no provider, no bank will ever ask you for these. If anyone asks — stop, report and block.</p>
              </div>
              <a className="btn btn-t24 ms-auto" href="#/contact">Report an incident</a>
            </div>
          </div>
          <div className="row g-3">
            {[
              ['Verify the profile','Check reviews, ratings and the verified badge before meeting in person.','bi-patch-check'],
              ['Agree first, then pay','Confirm price and scope in chat. Pay only after the work is delivered as agreed.','bi-handshake'],
              ['Meet in safe places','For on-site tasks, prefer your home or a public location. Share your trip with family.','bi-geo-alt'],
              ['Protect your documents','Never hand over original NID/Passport copies. Tasker24 verification is internal only.','bi-shield-lock'],
              ['Keep chat on platform','Stay inside Tasker24 messaging until trust is built — for evidence and support.','bi-chat-dots'],
              ['Report immediately','Any abuse, scam attempt or harassment — report to support@tasker24.net.','bi-flag'],
            ].map(([h,b,ic],i)=>(
              <div className="col-md-6 col-lg-4" key={i}>
                <div className="t24-card p-4 h-100">
                  <div className="t24-iconbox mb-3"><i className={"bi "+ic} style={{color:'var(--t24-blue)', fontSize:26}}></i></div>
                  <strong className="d-block mb-1">{h}</strong>
                  <div className="small text-muted">{b}</div>
                </div>
              </div>
            ))}
          </div>

          <div className="t24-card p-4 mt-4">
            <strong className="d-block mb-3">Personal verification checklist</strong>
            <div className="row g-2">
              {['Profile photo matches the person','Verified badge is present','Recent reviews look authentic','Phone number is reachable','Service area is realistic'].map((t1,i)=>(
                <div className="col-md-6" key={i}>
                  <label className="d-flex align-items-center gap-2"><input type="checkbox" className="form-check-input"/> <span>{t1}</span></label>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

// =====================================================================
function OpinionPage({ lang }) {
  const [sent, setSent] = useStateI(false);
  return (
    <main>
      <PageHero eyebrow="Opinion · Feedback" title="Tell the community what you think"
        subtitle="Your opinion appears on your public profile and helps others build trust. Reviews are honest, public, and moderated only for abuse."
        crumbs={[{label:'Home', href:'#/'}, {label:'Opinion'}]} />
      <section className="py-5">
        <div className="container">
          <div className="row g-4">
            <div className="col-lg-7">
              <div className="t24-card p-4 p-md-5">
                <h4 className="mb-3">Share your experience</h4>
                {sent ? (
                  <div className="t24-card p-4 text-center" style={{background:'var(--t24-surface-2)'}}>
                    <div className="t24-iconbox mx-auto mb-2" style={{background:'var(--t24-success)', border:0}}>
                      <i className="bi bi-check-lg" style={{color:'#fff', fontSize:30}}></i>
                    </div>
                    <strong>Thanks for sharing</strong>
                    <div className="small text-muted">Your opinion is live on your profile.</div>
                  </div>
                ) : (
                  <form onSubmit={(e)=>{e.preventDefault();setSent(true);}}>
                    <div className="row g-3">
                      <div className="col-sm-6"><label className="form-label">Service used</label><input className="form-control" placeholder="e.g. House cleaning"/></div>
                      <div className="col-sm-6"><label className="form-label">Provider name</label><input className="form-control"/></div>
                      <div className="col-12">
                        <label className="form-label d-block">Rating</label>
                        <div className="d-flex gap-1">
                          {[1,2,3,4,5].map(n => (
                            <button key={n} type="button" className="t24-icon-btn" style={{fontSize:18, color:'var(--t24-warning)'}}>
                              <i className="bi bi-star-fill"></i>
                            </button>
                          ))}
                        </div>
                      </div>
                      <div className="col-12">
                        <label className="form-label">Your opinion</label>
                        <textarea className="form-control" rows="5" placeholder="What was good? What could improve?"></textarea>
                      </div>
                      <div className="col-12">
                        <label className="d-flex align-items-start gap-2 small">
                          <input type="checkbox" className="form-check-input mt-1"/>
                          <span>I confirm this opinion reflects my real experience and follows community guidelines.</span>
                        </label>
                      </div>
                    </div>
                    <div className="text-end mt-3">
                      <button className="btn btn-t24 btn-lg">Submit opinion</button>
                    </div>
                  </form>
                )}
              </div>
            </div>
            <div className="col-lg-5">
              <SectionTitle title="Recent opinions" />
              <div className="d-flex flex-column gap-3">
                {window.T24.opinions.map((o,i)=>(
                  <div className="t24-card t24-review" key={i}>
                    <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-2" style={{fontSize:14.5}}>{o.text}</p>
                    <div className="small text-muted">{o.who} · {o.role}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { AboutPage, ProcessPage, ContactPage, FaqPage, SafetyPage, OpinionPage });