// =====================================================================
// Tasker24 — Policy / legal pages (Terms, Privacy, Refund, Cookie)
// =====================================================================
const { useState: useStateP, useEffect: useEffectP } = React;

function DocPage({ eyebrow, title, subtitle, crumbs, sections, lang }) {
  const [active, setActive] = useStateP(sections[0].id);
  useEffectP(() => {
    const onScroll = () => {
      const positions = sections.map(s => {
        const el = document.getElementById(s.id);
        if (!el) return [s.id, 1e9];
        return [s.id, Math.abs(el.getBoundingClientRect().top - 140)];
      });
      positions.sort((a,b)=>a[1]-b[1]);
      setActive(positions[0][0]);
    };
    window.addEventListener('scroll', onScroll, { passive:true });
    return () => window.removeEventListener('scroll', onScroll);
  }, [sections]);
  return (
    <main>
      <PageHero eyebrow={eyebrow} title={title} subtitle={subtitle} crumbs={crumbs} />
      <section className="py-5">
        <div className="container">
          <div className="row g-4">
            <div className="col-lg-3">
              <div className="doc-side">
                {sections.map(s => (
                  <a key={s.id} href={"#"+s.id}
                     className={active===s.id?'active':''}
                     onClick={(e)=>{ e.preventDefault(); const el=document.getElementById(s.id); if(el) window.scrollTo({top: el.offsetTop - 110, behavior:'smooth'}); }}>
                    {s.title}
                  </a>
                ))}
              </div>
            </div>
            <div className="col-lg-9">
              {sections.map(s => (
                <article key={s.id} id={s.id} className="t24-card p-4 p-md-5 mb-3">
                  <h4 className="mb-3">{s.title}</h4>
                  {s.body}
                </article>
              ))}
              <div className="text-center mt-4">
                <a href="#/registration" className="btn btn-t24 btn-lg">Proceed to registration <i className="bi bi-arrow-right ms-1"></i></a>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

// =====================================================================
function TermsPage({ lang }) {
  const sections = [
    { id:'overview', title:'1. Overview',
      body: <p className="text-muted mb-0">Tasker24 (“the Platform”) provides a digital service marketplace connecting Service Takers and Service Providers/Freelancers across Bangladesh. The Platform acts as a bridge — pricing, scheduling and payment for individual services occur directly between the parties.</p> },
    { id:'eligibility', title:'2. Eligibility',
      body: <ul className="text-muted mb-0"><li>Users must be 18+ to create an account; minors may use a guardian-linked account.</li><li>Information provided during registration must be accurate and verifiable.</li><li>One person may hold a single role profile (Taker, Provider, or Both).</li></ul> },
    { id:'roles', title:'3. Roles & responsibilities',
      body: <div className="text-muted">
        <p>Three roles are supported:</p>
        <ul><li><strong>Service Taker:</strong> uses Tasker24 to find providers and request services.</li><li><strong>Service Provider / Freelancer:</strong> lists services on a public profile and accepts tasks.</li><li><strong>Both:</strong> uses both roles from a single profile.</li></ul>
        <p>Each role carries the responsibility to act lawfully, treat the other party with respect, and complete agreed work.</p>
      </div> },
    { id:'payments', title:'4. Direct negotiation & payment',
      body: <p className="text-muted mb-0">Tasker24 does not collect payment for individual services. Taker and Provider negotiate price, scope and timing directly and exchange payment between themselves. Tasker24 collects a one-time registration fee per role. The registration fee is non-refundable except as described in the Refund Policy.</p> },
    { id:'security', title:'5. Account security',
      body: <p className="text-muted mb-0">Tasker24 staff will never ask for your password, banking PIN, or any one-time password (OTP). You are responsible for keeping your credentials secure. Suspicious activity should be reported to support@tasker24.net immediately.</p> },
    { id:'content', title:'6. User content',
      body: <p className="text-muted mb-0">You retain rights to the content you submit (profile, photos, reviews). By submitting content you grant Tasker24 a non-exclusive license to display it on the Platform. Content that is illegal, harassing, fraudulent or violates community guidelines may be removed.</p> },
    { id:'liability', title:'7. Limitation of liability',
      body: <p className="text-muted mb-0">Tasker24 is a connector. We do not guarantee outcomes, quality of work, or income. Disputes between Takers and Providers are settled directly; Tasker24 provides best-effort support but is not legally liable for transaction outcomes.</p> },
    { id:'termination', title:'8. Termination',
      body: <p className="text-muted mb-0">We may suspend or terminate accounts that breach these terms or community guidelines. You may close your account at any time from your dashboard.</p> },
    { id:'updates', title:'9. Updates to these terms',
      body: <p className="text-muted mb-0">We may update these terms occasionally. Material changes will be notified by email and on the dashboard at least 14 days before they take effect.</p> },
  ];
  return <DocPage eyebrow="Legal" title="Terms & Conditions"
    subtitle="Effective: 1 January 2026. Please read alongside the Privacy Policy and Refund Policy."
    crumbs={[{label:'Home', href:'#/'}, {label:'Terms'}]}
    sections={sections} lang={lang}/>;
}

// =====================================================================
function PrivacyPage({ lang }) {
  const sections = [
    { id:'collect', title:'1. What we collect',
      body: <div className="text-muted">
        <p>To run Tasker24 we collect basic identity, contact, and (for providers) service-related information.</p>
        <ul>
          <li><strong>Identity:</strong> Name, date of birth, NID/Passport number.</li>
          <li><strong>Contact:</strong> Phone, email, address.</li>
          <li><strong>Service:</strong> Profile photo, working area, services offered, certificates (providers).</li>
          <li><strong>Usage:</strong> Anonymized analytics (cookies — see Cookie Policy).</li>
        </ul>
      </div> },
    { id:'private', title:'2. NID / Passport stays private',
      body: <p className="text-muted mb-0"><strong>Your NID or Passport number is never displayed publicly</strong> and is not shared with other users. It is collected solely for internal verification by Tasker24 staff.</p> },
    { id:'visibility', title:'3. What other users can see',
      body: <div className="text-muted">
        <p>Here's a quick reference for what is public vs private on Tasker24.</p>
        <div className="table-responsive">
          <table className="table align-middle">
            <thead><tr><th>Information</th><th>Public</th><th>Other users</th><th>Tasker24 staff</th></tr></thead>
            <tbody>
              {[
                ['Name & profile photo','Yes','Yes','Yes'],
                ['Working area / district','Yes','Yes','Yes'],
                ['Reviews & ratings','Yes','Yes','Yes'],
                ['Phone & email','No','On match','Yes'],
                ['NID / Passport','No','No','Verification only'],
                ['Certificates','Excerpt','On match','Yes'],
              ].map((row,i)=>(
                <tr key={i}>{row.map((c,j)=>(<td key={j} style={{whiteSpace:'nowrap', color: j===0?'var(--t24-text-1)':'inherit'}}>{c==='Yes'?<span className="t24-chip t24-chip--success" style={{padding:'2px 8px'}}>{c}</span>:c==='No'?<span className="t24-chip t24-chip--danger" style={{padding:'2px 8px'}}>{c}</span>:c}</td>))}</tr>
              ))}
            </tbody>
          </table>
        </div>
      </div> },
    { id:'usage', title:'4. How we use your data',
      body: <p className="text-muted mb-0">To verify accounts, match Takers and Providers, send notifications you opt into, prevent fraud, and improve the Platform. We never sell your personal data.</p> },
    { id:'rights', title:'5. Your rights',
      body: <ul className="text-muted mb-0"><li>Access a copy of your data.</li><li>Correct inaccurate information.</li><li>Delete your account and personal data (subject to legal retention).</li><li>Object to non-essential processing.</li></ul> },
    { id:'retention', title:'6. Retention',
      body: <p className="text-muted mb-0">We retain identity verification records for 24 months after account deletion to comply with audit and anti-fraud obligations.</p> },
    { id:'contact', title:'7. Contact our privacy team',
      body: <p className="text-muted mb-0">For any privacy question, email <a href="mailto:privacy@tasker24.net">privacy@tasker24.net</a>.</p> },
  ];
  return <DocPage eyebrow="Legal" title="Privacy Policy"
    subtitle="What we collect, why, and how we protect it. NID/Passport is never visible to the public."
    crumbs={[{label:'Home', href:'#/'}, {label:'Privacy'}]}
    sections={sections} lang={lang}/>;
}

// =====================================================================
function RefundPage({ lang }) {
  const sections = [
    { id:'scope', title:'1. Scope',
      body: <p className="text-muted mb-0">This refund policy applies only to the one-time Tasker24 registration fee. It does not apply to payments between Takers and Providers for individual services — those are direct, private transactions.</p> },
    { id:'eligible', title:'2. Eligible refunds',
      body: <div className="text-muted"><p>A full refund of the registration fee is available when:</p>
        <ul><li>You request refund within <strong>7 days</strong> of payment.</li><li>You have not yet started any task on the platform.</li><li>The account has not been previously refunded or banned.</li></ul></div> },
    { id:'process', title:'3. How to request',
      body: <p className="text-muted mb-0">Submit a request via the <a href="#/contact">Contact form</a> with topic "Payment / refund". Refunds are processed to the original payment method within 7–10 business days.</p> },
    { id:'not-eligible', title:'4. Not eligible',
      body: <ul className="text-muted mb-0"><li>Requests made after the 7-day window.</li><li>Accounts already used to complete or accept tasks.</li><li>Accounts terminated for breach of terms or community guidelines.</li></ul> },
    { id:'disputes', title:'5. Disputes between users',
      body: <p className="text-muted mb-0">Disputes about service quality or payment between Takers and Providers should first be resolved between the parties. Tasker24 support can mediate by reviewing chat history and reviews, but Tasker24 is not financially liable for those transactions.</p> },
  ];
  return <DocPage eyebrow="Legal" title="Refund Policy"
    subtitle="When the registration fee can be refunded — and how we handle disputes between users."
    crumbs={[{label:'Home', href:'#/'}, {label:'Refund'}]}
    sections={sections} lang={lang}/>;
}

// =====================================================================
function CookiePage({ lang }) {
  const [open, setOpen] = useStateP(false);
  return (
    <main>
      <PageHero eyebrow="Legal" title="Cookie Policy"
        subtitle="How Tasker24 uses cookies and what you can control."
        crumbs={[{label:'Home', href:'#/'}, {label:'Cookie'}]} />
      <section className="py-5">
        <div className="container">
          <div className="row g-3">
            {[
              ['Necessary cookies','Required for sign-in, security, and core platform features. Cannot be disabled.','bi-shield-check','always'],
              ['Analytics cookies','Anonymous data that helps us improve UX and performance.','bi-graph-up','optional'],
              ['Marketing cookies','Used to personalize promotional content. Off by default.','bi-megaphone','optional'],
            ].map(([t1,t2,ic,kind],i)=>(
              <div className="col-md-4" key={i}>
                <div className="t24-card p-4 h-100">
                  <div className="d-flex align-items-center justify-content-between mb-2">
                    <div className="t24-iconbox t24-iconbox--sm"><i className={"bi "+ic} style={{color:'var(--t24-blue)', fontSize:22}}></i></div>
                    <span className={"t24-chip "+(kind==='always'?'t24-chip--cyan':'')}>{kind==='always'?'Always on':'Optional'}</span>
                  </div>
                  <strong>{t1}</strong>
                  <div className="small text-muted mt-1">{t2}</div>
                </div>
              </div>
            ))}
          </div>

          <div className="t24-card p-4 p-md-5 mt-4">
            <div className="d-flex align-items-center justify-content-between flex-wrap gap-3 mb-3">
              <div>
                <strong className="d-block">Manage your preferences</strong>
                <div className="small text-muted">Turn optional cookies on or off. Your choice is remembered on this device.</div>
              </div>
              <button className="btn btn-t24" onClick={()=>setOpen(true)}>Open preferences</button>
            </div>
            <div className="row g-2">
              <Pref title="Analytics" desc="Anonymous usage data" defaultOn={true}/>
              <Pref title="Marketing" desc="Personalized content" defaultOn={false}/>
            </div>
          </div>

          {open && (
            <div className="t24-modal-bd" onClick={()=>setOpen(false)}>
              <div className="t24-modal p-4" onClick={(e)=>e.stopPropagation()} style={{maxWidth:520}}>
                <div className="d-flex justify-content-between align-items-center mb-3">
                  <strong>Cookie preferences</strong>
                  <button className="t24-icon-btn" onClick={()=>setOpen(false)}><i className="bi bi-x-lg"></i></button>
                </div>
                <label className="d-flex justify-content-between align-items-center py-2"><div><strong>Necessary</strong><div className="small text-muted">Required</div></div><div className="t24-chip t24-chip--cyan">Always</div></label>
                <label className="d-flex justify-content-between align-items-center py-2"><div><strong>Analytics</strong><div className="small text-muted">Anonymous usage</div></div><input type="checkbox" className="form-check-input" defaultChecked/></label>
                <label className="d-flex justify-content-between align-items-center py-2"><div><strong>Marketing</strong><div className="small text-muted">Personalized content</div></div><input type="checkbox" className="form-check-input"/></label>
                <div className="text-end mt-3"><button className="btn btn-t24" onClick={()=>setOpen(false)}>Save preferences</button></div>
              </div>
            </div>
          )}
        </div>
      </section>
    </main>
  );
}
function Pref({ title, desc, defaultOn }) {
  const [on, setOn] = useStateP(defaultOn);
  return (
    <div className="col-md-6">
      <label className="t24-card p-3 d-flex justify-content-between align-items-center" style={{cursor:'pointer'}}>
        <div><strong>{title}</strong><div className="small text-muted">{desc}</div></div>
        <div className={"t24-seg"}>
          <button type="button" className={on?'active':''} onClick={(e)=>{e.preventDefault();setOn(true);}}>On</button>
          <button type="button" className={!on?'active':''} onClick={(e)=>{e.preventDefault();setOn(false);}}>Off</button>
        </div>
      </label>
    </div>
  );
}

Object.assign(window, { TermsPage, PrivacyPage, RefundPage, CookiePage });