/* global React, ReactDOM, NOBBYO_ICONS, PageHeader, PageTopBar, PageFooter, usePageLang */
const I = window.NOBBYO_ICONS;

const SECTIONS = [
  { id:'intro', n:'01', t:{bn:'সংক্ষিপ্ত পরিচিতি', en:'Introduction'} },
  { id:'data', n:'02', t:{bn:'যে তথ্য সংগ্রহ করি', en:'Information we collect'} },
  { id:'use', n:'03', t:{bn:'কীভাবে ব্যবহার করি', en:'How we use it'} },
  { id:'share', n:'04', t:{bn:'কাদের সাথে শেয়ার করি', en:'Who we share with'} },
  { id:'rights', n:'05', t:{bn:'আপনার অধিকার', en:'Your rights'} },
  { id:'security', n:'06', t:{bn:'ডেটা সুরক্ষা', en:'Data security'} },
  { id:'retention', n:'07', t:{bn:'কতদিন রাখি', en:'How long we keep it'} },
  { id:'children', n:'08', t:{bn:'শিশুদের ডেটা', en:'Children\'s data'} },
  { id:'changes', n:'09', t:{bn:'পরিবর্তন', en:'Changes to this policy'} },
  { id:'contact', n:'10', t:{bn:'যোগাযোগ', en:'Contact us'} },
];

function App() {
  const [lang, setLang] = window.usePageLang('bn');
  return (
    <>
      <PageTopBar lang={lang} setLang={setLang} />
      <PageHeader />

      {/* Hero */}
      <section className="lgl-hero">
        <div className="srch-hero-bg" aria-hidden="true">
          <div className="srch-blob srch-blob-1"></div>
          <div className="srch-blob srch-blob-2"></div>
          <div className="srch-grid"></div>
        </div>
        <div className="container lgl-hero-inner">
          <div className="lgl-hero-eyebrow">
            <span className="t-bn">আইনি · প্রাইভেসি পলিসি</span>
            <span className="t-en">Legal · Privacy Policy</span>
          </div>
          <h1 className="lgl-hero-title">
            <span className="t-bn">আমরা আপনার ডেটা কীভাবে রক্ষা করি</span>
            <span className="t-en">How we protect your data</span>
          </h1>
          <p className="lgl-hero-sub">
            <span className="t-bn">স্পষ্ট ভাষায়, আইনি পরিভাষা ছাড়া। কী সংগ্রহ করি, কেন করি, এবং আপনার নিয়ন্ত্রণে কী আছে।</span>
            <span className="t-en">In plain language, without legalese. What we collect, why we collect it, and what you control.</span>
          </p>
          <div className="lgl-hero-meta">
            <span>
              <span className="t-bn">সংস্করণ ৩.২</span>
              <span className="t-en">Version 3.2</span>
            </span>
            <span className="lgl-hero-meta-divider">·</span>
            <span>
              <span className="t-bn">কার্যকর: ১৫ এপ্রিল ২০২৬</span>
              <span className="t-en">Effective: 15 April 2026</span>
            </span>
            <span className="lgl-hero-meta-divider">·</span>
            <span>
              <span className="t-bn">পরবর্তী রিভিউ: অক্টোবর ২০২৬</span>
              <span className="t-en">Next review: October 2026</span>
            </span>
          </div>
        </div>
      </section>

      {/* Body */}
      <section className="lgl-layout">
        <div className="container lgl-grid">
          {/* TOC */}
          <aside className="lgl-toc">
            <div className="lgl-toc-title">
              <span className="t-bn">সূচিপত্র</span>
              <span className="t-en">Contents</span>
            </div>
            <div className="lgl-toc-list">
              {SECTIONS.map(s => (
                <a key={s.id} href={'#' + s.id} className="lgl-toc-link">
                  {s.n} ·{' '}
                  <span className="t-bn">{s.t.bn}</span>
                  <span className="t-en">{s.t.en}</span>
                </a>
              ))}
            </div>
          </aside>

          <main className="lgl-body">
            <div className="lgl-summary">
              <div className="lgl-summary-label">
                <span className="t-bn">এক নজরে</span>
                <span className="t-en">In short</span>
              </div>
              <div className="lgl-summary-text">
                <span className="t-bn">আমরা শুধু সেই ডেটা রাখি যা চাকরি ম্যাচিং ও আপনার অ্যাকাউন্টের জন্য প্রয়োজন। বিজ্ঞাপনদাতাদের কাছে আপনার ডেটা <strong>বিক্রি করি না</strong>। ডেটা বাংলাদেশের সার্ভারে এনক্রিপ্টেড অবস্থায় থাকে। আপনি যেকোনো সময় ডিলিট করতে পারেন।</span>
                <span className="t-en">We only keep data needed for job matching and your account. We <strong>do not sell</strong> your data to advertisers. Data is encrypted on Bangladesh servers. You can delete it anytime.</span>
              </div>
            </div>

            {/* Section 01 */}
            <section id="intro" className="lgl-section">
              <h2 className="lgl-section-h">
                <span className="lgl-section-num">01</span>
                <span className="t-bn">সংক্ষিপ্ত পরিচিতি</span>
                <span className="t-en">Introduction</span>
              </h2>
              <p className="lgl-p">
                <span className="t-bn">এই প্রাইভেসি পলিসি ("পলিসি") <strong>NOBBYO Jobs Ltd.</strong> ("NOBBYO", "আমরা", "আমাদের") কীভাবে আপনার ব্যক্তিগত তথ্য সংগ্রহ করে, ব্যবহার করে, শেয়ার করে এবং রক্ষা করে তা ব্যাখ্যা করে। NOBBYO Jobs nobbyojobs.com.bd, মোবাইল অ্যাপ এবং সম্পর্কিত সব সার্ভিসে ("সার্ভিস") প্রযোজ্য।</span>
                <span className="t-en">This Privacy Policy ("Policy") explains how <strong>NOBBYO Jobs Ltd.</strong> ("NOBBYO", "we", "us", "our") collects, uses, shares, and protects your personal information. It applies to nobbyojobs.com.bd, our mobile apps, and all related services ("Services").</span>
              </p>
              <p className="lgl-p">
                <span className="t-bn">আমরা <em>বাংলাদেশ ডেটা প্রোটেকশন আইন ২০২৩</em> এবং প্রযোজ্য ক্ষেত্রে <em>EU GDPR</em>-এর সাথে সঙ্গতিপূর্ণভাবে কাজ করি।</span>
                <span className="t-en">We operate in compliance with <em>Bangladesh Data Protection Act 2023</em> and, where applicable, the <em>EU GDPR</em>.</span>
              </p>
            </section>

            {/* Section 02 */}
            <section id="data" className="lgl-section">
              <h2 className="lgl-section-h">
                <span className="lgl-section-num">02</span>
                <span className="t-bn">যে তথ্য সংগ্রহ করি</span>
                <span className="t-en">Information we collect</span>
              </h2>
              <ul className="lgl-list">
                <li>
                  <strong>
                    <span className="t-bn">অ্যাকাউন্ট তথ্য:</span>
                    <span className="t-en">Account information:</span>
                  </strong>{' '}
                  <span className="t-bn">নাম, ইমেইল, ফোন নম্বর, পাসওয়ার্ড (হ্যাশড)।</span>
                  <span className="t-en">name, email, phone number, hashed password.</span>
                </li>
                <li>
                  <strong>
                    <span className="t-bn">প্রোফাইল ও CV:</span>
                    <span className="t-en">Profile & CV:</span>
                  </strong>{' '}
                  <span className="t-bn">কাজের অভিজ্ঞতা, শিক্ষা, স্কিল, বেতন প্রত্যাশা, ছবি, লোকেশন।</span>
                  <span className="t-en">work experience, education, skills, salary expectation, photo, location.</span>
                </li>
                <li>
                  <strong>
                    <span className="t-bn">ব্যবহার ডেটা:</span>
                    <span className="t-en">Usage data:</span>
                  </strong>{' '}
                  <span className="t-bn">যেসব চাকরি দেখেন, সেভ করেন, আবেদন করেন; সার্চ কোয়েরি; ক্লিক ও সেশন।</span>
                  <span className="t-en">jobs viewed, saved, applied to; search queries; clicks and sessions.</span>
                </li>
                <li>
                  <strong>
                    <span className="t-bn">ডিভাইস ও কারিগরি ডেটা:</span>
                    <span className="t-en">Device & technical data:</span>
                  </strong>{' '}
                  <span className="t-bn">IP, ব্রাউজার, অপারেটিং সিস্টেম, ভাষা সেটিংস।</span>
                  <span className="t-en">IP, browser, OS, language settings.</span>
                </li>
                <li>
                  <strong>
                    <span className="t-bn">যোগাযোগ:</span>
                    <span className="t-en">Communications:</span>
                  </strong>{' '}
                  <span className="t-bn">আপনি আমাদের যা পাঠান (সাপোর্ট মেসেজ, ফর্ম)।</span>
                  <span className="t-en">whatever you send us (support messages, forms).</span>
                </li>
              </ul>
              <div className="lgl-callout">
                <div className="lgl-callout-label">
                  <span className="t-bn">যা সংগ্রহ করি না</span>
                  <span className="t-en">What we don't collect</span>
                </div>
                <div className="lgl-callout-text">
                  <span className="t-bn">জাতীয় পরিচয়পত্র (NID) নম্বর, ব্যাংক অ্যাকাউন্ট ডিটেইল, ক্রেডিট স্কোর, ধর্ম, রাজনৈতিক মত — আমরা এসব রাখি না।</span>
                  <span className="t-en">National ID (NID) numbers, bank account details, credit scores, religion, political views — we don't keep any of these.</span>
                </div>
              </div>
            </section>

            {/* Section 03 */}
            <section id="use" className="lgl-section">
              <h2 className="lgl-section-h">
                <span className="lgl-section-num">03</span>
                <span className="t-bn">কীভাবে ব্যবহার করি</span>
                <span className="t-en">How we use it</span>
              </h2>
              <ul className="lgl-list">
                <li>
                  <span className="t-bn">আপনার CV ও প্রত্যাশা অনুযায়ী চাকরি ম্যাচ করতে।</span>
                  <span className="t-en">Match jobs against your CV and expectations.</span>
                </li>
                <li>
                  <span className="t-bn">এমপ্লয়ারদের কাছে শুধু আপনি যেসব আবেদনে অংশ নিয়েছেন সেগুলোতেই দেখাতে।</span>
                  <span className="t-en">Show your profile to employers only on jobs you've applied to.</span>
                </li>
                <li>
                  <span className="t-bn">আপনার অনুমতি নিয়ে নতুন চাকরি অ্যালার্ট পাঠাতে।</span>
                  <span className="t-en">Send job alerts you've opted into.</span>
                </li>
                <li>
                  <span className="t-bn">প্ল্যাটফর্ম উন্নত করতে এবং বাগ ফিক্স করতে (অ্যাগ্রিগেটেড ও এনোনিমাইজড আকারে)।</span>
                  <span className="t-en">Improve the platform and fix bugs (in aggregated and anonymized form).</span>
                </li>
                <li>
                  <span className="t-bn">প্রতারণা ও অ্যাবিউজ শনাক্ত করতে।</span>
                  <span className="t-en">Detect fraud and abuse.</span>
                </li>
                <li>
                  <span className="t-bn">আইনি বাধ্যবাধকতা মেনে চলতে।</span>
                  <span className="t-en">Comply with legal obligations.</span>
                </li>
              </ul>
            </section>

            {/* Section 04 */}
            <section id="share" className="lgl-section">
              <h2 className="lgl-section-h">
                <span className="lgl-section-num">04</span>
                <span className="t-bn">কাদের সাথে শেয়ার করি</span>
                <span className="t-en">Who we share with</span>
              </h2>
              <p className="lgl-p">
                <span className="t-bn">আপনার ডেটা শুধু এই পক্ষগুলোর সাথে শেয়ার করি, এবং প্রত্যেকে কঠোর ডেটা প্রক্রিয়াকরণ চুক্তিতে আবদ্ধ:</span>
                <span className="t-en">We share your data only with these parties, each bound by strict data processing agreements:</span>
              </p>
              <ul className="lgl-list">
                <li>
                  <strong>
                    <span className="t-bn">এমপ্লয়ার:</span>
                    <span className="t-en">Employers:</span>
                  </strong>{' '}
                  <span className="t-bn">শুধু আপনি যেসব চাকরিতে আবেদন করেন সেখানে।</span>
                  <span className="t-en">only on jobs you apply to.</span>
                </li>
                <li>
                  <strong>
                    <span className="t-bn">সার্ভিস প্রোভাইডার:</span>
                    <span className="t-en">Service providers:</span>
                  </strong>{' '}
                  <span className="t-bn">ক্লাউড হোস্টিং (AWS Mumbai), ইমেইল (SendGrid), পেমেন্ট প্রসেসর (SSLCommerz, bKash)।</span>
                  <span className="t-en">cloud hosting (AWS Mumbai), email (SendGrid), payment processors (SSLCommerz, bKash).</span>
                </li>
                <li>
                  <strong>
                    <span className="t-bn">আইন প্রয়োগকারী:</span>
                    <span className="t-en">Law enforcement:</span>
                  </strong>{' '}
                  <span className="t-bn">শুধু বৈধ আদালতের আদেশের ভিত্তিতে।</span>
                  <span className="t-en">only with valid court orders.</span>
                </li>
              </ul>
              <p className="lgl-p">
                <strong>
                  <span className="t-bn">আমরা কখনোই আপনার ডেটা বিজ্ঞাপনদাতা বা ডেটা ব্রোকারের কাছে বিক্রি করি না।</span>
                  <span className="t-en">We never sell your data to advertisers or data brokers.</span>
                </strong>
              </p>
            </section>

            {/* Section 05 */}
            <section id="rights" className="lgl-section">
              <h2 className="lgl-section-h">
                <span className="lgl-section-num">05</span>
                <span className="t-bn">আপনার অধিকার</span>
                <span className="t-en">Your rights</span>
              </h2>
              <ul className="lgl-list">
                <li>
                  <strong>
                    <span className="t-bn">অ্যাক্সেস:</span>
                    <span className="t-en">Access:</span>
                  </strong>{' '}
                  <span className="t-bn">আপনার সম্পর্কে আমাদের কাছে থাকা সব ডেটা ডাউনলোড।</span>
                  <span className="t-en">download all data we hold about you.</span>
                </li>
                <li>
                  <strong>
                    <span className="t-bn">সংশোধন:</span>
                    <span className="t-en">Correction:</span>
                  </strong>{' '}
                  <span className="t-bn">ভুল তথ্য ঠিক করুন।</span>
                  <span className="t-en">fix any incorrect information.</span>
                </li>
                <li>
                  <strong>
                    <span className="t-bn">ডিলিট:</span>
                    <span className="t-en">Deletion:</span>
                  </strong>{' '}
                  <span className="t-bn">আপনার অ্যাকাউন্ট ও সংশ্লিষ্ট ডেটা স্থায়ীভাবে মুছে ফেলুন।</span>
                  <span className="t-en">permanently remove your account and associated data.</span>
                </li>
                <li>
                  <strong>
                    <span className="t-bn">পোর্টেবিলিটি:</span>
                    <span className="t-en">Portability:</span>
                  </strong>{' '}
                  <span className="t-bn">আপনার ডেটা মেশিন-পাঠযোগ্য ফরম্যাটে এক্সপোর্ট।</span>
                  <span className="t-en">export your data in a machine-readable format.</span>
                </li>
                <li>
                  <strong>
                    <span className="t-bn">প্রক্রিয়াকরণে আপত্তি:</span>
                    <span className="t-en">Objection:</span>
                  </strong>{' '}
                  <span className="t-bn">নির্দিষ্ট ব্যবহারের ক্ষেত্রে আপত্তি জানান।</span>
                  <span className="t-en">opt out of specific processing.</span>
                </li>
              </ul>
              <p className="lgl-p">
                <span className="t-bn">যেকোনো অনুরোধে <a href="mailto:privacy@nobbyojobs.com.bd">privacy@nobbyojobs.com.bd</a> এ ইমেইল করুন। আমরা ৩০ দিনের মধ্যে উত্তর দেবো।</span>
                <span className="t-en">Email any request to <a href="mailto:privacy@nobbyojobs.com.bd">privacy@nobbyojobs.com.bd</a>. We respond within 30 days.</span>
              </p>
            </section>

            {/* Section 06 */}
            <section id="security" className="lgl-section">
              <h2 className="lgl-section-h">
                <span className="lgl-section-num">06</span>
                <span className="t-bn">ডেটা সুরক্ষা</span>
                <span className="t-en">Data security</span>
              </h2>
              <ul className="lgl-list">
                <li>
                  <span className="t-bn">সব ট্রান্সমিশন TLS 1.3 দিয়ে এনক্রিপ্টেড।</span>
                  <span className="t-en">All transmissions encrypted via TLS 1.3.</span>
                </li>
                <li>
                  <span className="t-bn">ডেটাবেইজে AES-256 এনক্রিপশন।</span>
                  <span className="t-en">AES-256 encryption at rest.</span>
                </li>
                <li>
                  <span className="t-bn">SOC 2 Type II সার্টিফায়েড ক্লাউড অবকাঠামো।</span>
                  <span className="t-en">SOC 2 Type II certified cloud infrastructure.</span>
                </li>
                <li>
                  <span className="t-bn">কর্মীদের জন্য MFA + প্রিন্সিপাল-অফ-লিস্ট-প্রিভিলেজ অ্যাক্সেস।</span>
                  <span className="t-en">MFA + least-privilege access for staff.</span>
                </li>
                <li>
                  <span className="t-bn">প্রতি বছর তৃতীয় পক্ষের পেনটেস্ট।</span>
                  <span className="t-en">Annual third-party penetration testing.</span>
                </li>
              </ul>
            </section>

            {/* Section 07 */}
            <section id="retention" className="lgl-section">
              <h2 className="lgl-section-h">
                <span className="lgl-section-num">07</span>
                <span className="t-bn">কতদিন রাখি</span>
                <span className="t-en">How long we keep it</span>
              </h2>
              <p className="lgl-p">
                <span className="t-bn">আপনার অ্যাকাউন্ট সক্রিয় থাকা পর্যন্ত আমরা ডেটা রাখি। অ্যাকাউন্ট ডিলিট করলে ৩০ দিনের মধ্যে স্থায়ীভাবে মুছে যায়, ব্যাকআপ থেকে ৯০ দিনে। আইনি বাধ্যবাধকতার ক্ষেত্রে (যেমন ট্যাক্স রেকর্ড) — সর্বোচ্চ ৭ বছর।</span>
                <span className="t-en">We retain data while your account is active. Upon deletion: permanent removal within 30 days, removal from backups within 90 days. Legal obligations (e.g., tax records): up to 7 years.</span>
              </p>
            </section>

            {/* Section 08 */}
            <section id="children" className="lgl-section">
              <h2 className="lgl-section-h">
                <span className="lgl-section-num">08</span>
                <span className="t-bn">শিশুদের ডেটা</span>
                <span className="t-en">Children's data</span>
              </h2>
              <p className="lgl-p">
                <span className="t-bn">NOBBYO ১৬ বছরের নিচের কারো জন্য নয়। ১৬ বছরের নিচের কারো ডেটা সংগ্রহ করেছি জানলে অবিলম্বে মুছে ফেলি।</span>
                <span className="t-en">NOBBYO is not for anyone under 16. If we learn we've collected data from anyone under 16, we delete it immediately.</span>
              </p>
            </section>

            {/* Section 09 */}
            <section id="changes" className="lgl-section">
              <h2 className="lgl-section-h">
                <span className="lgl-section-num">09</span>
                <span className="t-bn">পরিবর্তন</span>
                <span className="t-en">Changes to this policy</span>
              </h2>
              <p className="lgl-p">
                <span className="t-bn">গুরুত্বপূর্ণ পরিবর্তনের ক্ষেত্রে আমরা ইমেইল ও ড্যাশবোর্ডে নোটিফিকেশন পাঠাব — কার্যকর হওয়ার ৩০ দিন আগে। পুরোনো সংস্করণের আর্কাইভ <a href="contact.html">যোগাযোগ করে</a> অনুরোধ করা যাবে।</span>
                <span className="t-en">For material changes, we'll notify via email and dashboard — 30 days before they take effect. Archive of past versions available on <a href="contact.html">request via Contact</a>.</span>
              </p>
            </section>

            {/* Section 10 */}
            <section id="contact" className="lgl-section">
              <h2 className="lgl-section-h">
                <span className="lgl-section-num">10</span>
                <span className="t-bn">যোগাযোগ</span>
                <span className="t-en">Contact us</span>
              </h2>
              <p className="lgl-p">
                <span className="t-bn">প্রাইভেসি সংক্রান্ত যেকোনো প্রশ্ন বা অনুরোধে আমাদের ডেটা প্রোটেকশন অফিসারকে যোগাযোগ করুন:</span>
                <span className="t-en">For any privacy questions or requests, reach our Data Protection Officer:</span>
              </p>
              <ul className="lgl-list">
                <li>
                  <strong>Email:</strong>{' '}
                  <a href="mailto:privacy@nobbyojobs.com.bd">privacy@nobbyojobs.com.bd</a>
                </li>
                <li>
                  <strong>
                    <span className="t-bn">ঠিকানা:</span>
                    <span className="t-en">Address:</span>
                  </strong>{' '}
                  <span className="t-bn">NOBBYO Jobs Ltd., বাড়ি ২৪, রোড ১১, বনানী, ঢাকা ১২১৩</span>
                  <span className="t-en">NOBBYO Jobs Ltd., House 24, Road 11, Banani, Dhaka 1213</span>
                </li>
                <li>
                  <strong>
                    <span className="t-bn">ফোন:</span>
                    <span className="t-en">Phone:</span>
                  </strong>{' '}
                  +880 1712 000 000
                </li>
              </ul>
            </section>

            <div className="lgl-foot">
              <div className="lgl-foot-meta">
                <span className="t-bn">শেষ আপডেট: ১৫ এপ্রিল ২০২৬</span>
                <span className="t-en">Last updated: 15 April 2026</span>
              </div>
              <div className="lgl-foot-links">
                <a href="terms.html" className="lgl-foot-link">
                  <span className="t-bn">টার্মস</span>
                  <span className="t-en">Terms</span>
                </a>
                <a href="cookies.html" className="lgl-foot-link">
                  <span className="t-bn">কুকিজ</span>
                  <span className="t-en">Cookies</span>
                </a>
                <a href="contact.html" className="lgl-foot-link">
                  <span className="t-bn">যোগাযোগ</span>
                  <span className="t-en">Contact</span>
                </a>
              </div>
            </div>
          </main>
        </div>
      </section>

      <PageFooter lang={lang} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);