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

const SECTIONS = [
  { id:'what', n:'01', t:{bn:'কুকি কী', en:'What are cookies'} },
  { id:'why', n:'02', t:{bn:'আমরা কেন ব্যবহার করি', en:'Why we use them'} },
  { id:'types', n:'03', t:{bn:'কোন কুকি সেট করি', en:'Cookies we set'} },
  { id:'third', n:'04', t:{bn:'তৃতীয় পক্ষের কুকি', en:'Third-party cookies'} },
  { id:'prefs', n:'05', t:{bn:'আপনার পছন্দ', en:'Your preferences'} },
  { id:'browser', n:'06', t:{bn:'ব্রাউজার সেটিংস', en:'Browser settings'} },
  { id:'changes', n:'07', t:{bn:'পরিবর্তন', en:'Changes'} },
];

const COOKIES = [
  { name:'nobbyo_session', cat:'essential', dur:{bn:'সেশন', en:'Session'}, desc:{bn:'লগইন স্টেট ও CSRF প্রটেকশন', en:'Login state & CSRF protection'} },
  { name:'nobbyo_lang', cat:'pref', dur:{bn:'১ বছর', en:'1 year'}, desc:{bn:'বাংলা/ইংরেজি ভাষা পছন্দ', en:'Bangla/English language preference'} },
  { name:'nobbyo_consent', cat:'essential', dur:{bn:'১ বছর', en:'1 year'}, desc:{bn:'কুকি সম্মতি রেকর্ড', en:'Cookie consent record'} },
  { name:'nobbyo_recent', cat:'pref', dur:{bn:'৩০ দিন', en:'30 days'}, desc:{bn:'সাম্প্রতিক দেখা চাকরি ও সার্চ', en:'Recently viewed jobs & searches'} },
  { name:'nobbyo_ab', cat:'analytics', dur:{bn:'৯০ দিন', en:'90 days'}, desc:{bn:'অভ্যন্তরীণ A/B টেস্ট ভেরিয়েন্ট', en:'Internal A/B test variants'} },
  { name:'_ga / _gid', cat:'analytics', dur:{bn:'২ বছর / ২৪ ঘন্টা', en:'2 years / 24 hours'}, desc:{bn:'Google Analytics — অ্যাগ্রিগেটেড ব্যবহার ডেটা', en:'Google Analytics — aggregated usage data'} },
  { name:'_fbp', cat:'marketing', dur:{bn:'৩ মাস', en:'3 months'}, desc:{bn:'Meta Pixel — কনভার্শন ট্র্যাকিং', en:'Meta Pixel — conversion tracking'} },
  { name:'nobbyo_referrer', cat:'marketing', dur:{bn:'৩০ দিন', en:'30 days'}, desc:{bn:'কোথা থেকে এসেছেন (অ্যাট্রিবিউশন)', en:'Where you came from (attribution)'} },
];

const CAT_LABELS = {
  essential: { bn:'অপরিহার্য', en:'Essential' },
  pref: { bn:'পছন্দ', en:'Preferences' },
  analytics: { bn:'অ্যানালিটিক্স', en:'Analytics' },
  marketing: { bn:'মার্কেটিং', en:'Marketing' },
};

function CookiePref({ name, locked, desc, on, onChange }) {
  return (
    <div className="lgl-pref">
      <div>
        <div className="lgl-pref-name">{name}</div>
        <div className="lgl-pref-desc">{desc}</div>
      </div>
      {locked ? (
        <div className="lgl-pref-locked">
          <span className="t-bn">সর্বদা চালু</span>
          <span className="t-en">Always on</span>
        </div>
      ) : (
        <label className="lgl-toggle">
          <input type="checkbox" checked={on} onChange={(e)=>onChange(e.target.checked)} />
          <span className="lgl-toggle-slider"></span>
        </label>
      )}
    </div>
  );
}

function App() {
  const [lang, setLang] = window.usePageLang('bn');
  const [prefs, setPrefs] = useState({ analytics:true, marketing:false, pref:true });
  const [saved, setSaved] = useState(false);
  const setPref = (k, v) => setPrefs(p => ({...p, [k]:v}));
  const savePrefs = () => {
    setSaved(true);
    setTimeout(()=>setSaved(false), 3000);
  };
  const acceptAll = () => {
    setPrefs({ analytics:true, marketing:true, pref:true });
    setSaved(true);
    setTimeout(()=>setSaved(false), 3000);
  };
  const rejectAll = () => {
    setPrefs({ analytics:false, marketing:false, pref:false });
    setSaved(true);
    setTimeout(()=>setSaved(false), 3000);
  };

  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 · Cookies Policy</span>
          </div>
          <h1 className="lgl-hero-title">
            <span className="t-bn">কুকি ও আপনার নিয়ন্ত্রণ</span>
            <span className="t-en">Cookies and your controls</span>
          </h1>
          <p className="lgl-hero-sub">
            <span className="t-bn">আমরা কেন কুকি ব্যবহার করি, কোনগুলো সেট করি, এবং আপনি কীভাবে তা চালু/বন্ধ করবেন।</span>
            <span className="t-en">Why we use cookies, which ones we set, and how you can switch them on or off.</span>
          </p>
          <div className="lgl-hero-meta">
            <span>
              <span className="t-bn">সংস্করণ ২.১</span>
              <span className="t-en">Version 2.1</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>
          </div>
        </div>
      </section>

      {/* Body */}
      <section className="lgl-layout">
        <div className="container lgl-grid">
          <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">আমরা কয়েকটি অপরিহার্য কুকি ব্যবহার করি (লগইনের জন্য) এবং কয়েকটি ঐচ্ছিক কুকি (অ্যানালিটিক্স ও মার্কেটিংয়ের জন্য)। ঐচ্ছিকগুলো আপনি নিচের <em>"আপনার পছন্দ"</em> সেকশনে নিয়ন্ত্রণ করতে পারেন।</span>
                <span className="t-en">We use a few essential cookies (for login) and some optional ones (for analytics and marketing). You control the optional ones in the <em>"Your preferences"</em> section below.</span>
              </div>
            </div>

            <section id="what" className="lgl-section">
              <h2 className="lgl-section-h">
                <span className="lgl-section-num">01</span>
                <span className="t-bn">কুকি কী</span>
                <span className="t-en">What are cookies</span>
              </h2>
              <p className="lgl-p">
                <span className="t-bn">কুকি হলো ছোট টেক্সট ফাইল যা আপনার ব্রাউজারে সংরক্ষিত হয় যখন আপনি একটি ওয়েবসাইট ভিজিট করেন। এগুলো ওয়েবসাইটকে আপনাকে মনে রাখতে এবং আপনার অভিজ্ঞতা উন্নত করতে সাহায্য করে। অনুরূপ প্রযুক্তির মধ্যে আছে — <strong>লোকাল স্টোরেজ</strong>, <strong>সেশন স্টোরেজ</strong>, এবং <strong>পিক্সেল ট্যাগ</strong>। এই পলিসিতে এসব একসাথে "কুকি" বলা হয়েছে।</span>
                <span className="t-en">Cookies are small text files stored in your browser when you visit a website. They help the site remember you and improve your experience. Similar technologies include <strong>local storage</strong>, <strong>session storage</strong>, and <strong>pixel tags</strong>. This policy refers to all of these collectively as "cookies".</span>
              </p>
            </section>

            <section id="why" className="lgl-section">
              <h2 className="lgl-section-h">
                <span className="lgl-section-num">02</span>
                <span className="t-bn">আমরা কেন ব্যবহার করি</span>
                <span className="t-en">Why we use them</span>
              </h2>
              <ul className="lgl-list">
                <li>
                  <strong>
                    <span className="t-bn">আপনাকে লগইন রাখা:</span>
                    <span className="t-en">Keep you logged in:</span>
                  </strong>{' '}
                  <span className="t-bn">প্রতিটি পেজে পাসওয়ার্ড দিতে হয় না।</span>
                  <span className="t-en">no need to enter password on every page.</span>
                </li>
                <li>
                  <strong>
                    <span className="t-bn">পছন্দ মনে রাখা:</span>
                    <span className="t-en">Remember preferences:</span>
                  </strong>{' '}
                  <span className="t-bn">যেমন আপনি বাংলা না ইংরেজি পছন্দ করেন।</span>
                  <span className="t-en">like Bangla vs English language.</span>
                </li>
                <li>
                  <strong>
                    <span className="t-bn">প্ল্যাটফর্ম উন্নত করা:</span>
                    <span className="t-en">Improve the platform:</span>
                  </strong>{' '}
                  <span className="t-bn">কোন ফিচার কাজ করছে, কোথায় ব্যবহারকারীরা আটকে যাচ্ছেন।</span>
                  <span className="t-en">see what works, where users get stuck.</span>
                </li>
                <li>
                  <strong>
                    <span className="t-bn">নিরাপত্তা:</span>
                    <span className="t-en">Security:</span>
                  </strong>{' '}
                  <span className="t-bn">প্রতারণা ও ক্রস-সাইট রিকোয়েস্ট ফরজারি প্রতিরোধ।</span>
                  <span className="t-en">prevent fraud and cross-site request forgery.</span>
                </li>
              </ul>
            </section>

            <section id="types" className="lgl-section">
              <h2 className="lgl-section-h">
                <span className="lgl-section-num">03</span>
                <span className="t-bn">কোন কুকি সেট করি</span>
                <span className="t-en">Cookies we set</span>
              </h2>
              <div className="lgl-table-wrap">
                <table className="lgl-table">
                  <thead>
                    <tr>
                      <th>
                        <span className="t-bn">নাম</span>
                        <span className="t-en">Name</span>
                      </th>
                      <th>
                        <span className="t-bn">ক্যাটাগরি</span>
                        <span className="t-en">Category</span>
                      </th>
                      <th>
                        <span className="t-bn">মেয়াদ</span>
                        <span className="t-en">Duration</span>
                      </th>
                      <th>
                        <span className="t-bn">উদ্দেশ্য</span>
                        <span className="t-en">Purpose</span>
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    {COOKIES.map(c => (
                      <tr key={c.name}>
                        <td className="lgl-table-name">{c.name}</td>
                        <td>
                          <span className={'lgl-table-cat lgl-cat-' + c.cat}>
                            <span className="t-bn">{CAT_LABELS[c.cat].bn}</span>
                            <span className="t-en">{CAT_LABELS[c.cat].en}</span>
                          </span>
                        </td>
                        <td>
                          <span className="t-bn">{c.dur.bn}</span>
                          <span className="t-en">{c.dur.en}</span>
                        </td>
                        <td>
                          <span className="t-bn">{c.desc.bn}</span>
                          <span className="t-en">{c.desc.en}</span>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </section>

            <section id="third" className="lgl-section">
              <h2 className="lgl-section-h">
                <span className="lgl-section-num">04</span>
                <span className="t-bn">তৃতীয় পক্ষের কুকি</span>
                <span className="t-en">Third-party cookies</span>
              </h2>
              <p className="lgl-p">
                <span className="t-bn">কিছু কুকি থার্ড-পার্টি সার্ভিস থেকে আসে যা আমরা ব্যবহার করি:</span>
                <span className="t-en">Some cookies come from third-party services we use:</span>
              </p>
              <ul className="lgl-list">
                <li>
                  <strong>Google Analytics:</strong>{' '}
                  <span className="t-bn">অ্যাগ্রিগেটেড ব্যবহার ডেটা — IP মাস্কিং চালু।</span>
                  <span className="t-en">aggregated usage data — IP masking enabled.</span>
                </li>
                <li>
                  <strong>Meta Pixel (Facebook):</strong>{' '}
                  <span className="t-bn">অ্যাড পারফরম্যান্স পরিমাপ — শুধু আপনি যদি Facebook থেকে আসেন।</span>
                  <span className="t-en">ad performance — only if you arrive from Facebook.</span>
                </li>
                <li>
                  <strong>Stripe / SSLCommerz:</strong>{' '}
                  <span className="t-bn">পেমেন্ট ফ্রড প্রতিরোধ (শুধু চেকআউটে)।</span>
                  <span className="t-en">payment fraud prevention (only on checkout).</span>
                </li>
                <li>
                  <strong>YouTube / Vimeo:</strong>{' '}
                  <span className="t-bn">শুধু আপনি যদি এম্বেডেড ভিডিও চালান।</span>
                  <span className="t-en">only when you play an embedded video.</span>
                </li>
              </ul>
            </section>

            <section id="prefs" 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 preferences</span>
              </h2>
              <p className="lgl-p">
                <span className="t-bn">নিচের প্রতিটি ক্যাটাগরি পরিচালনা করুন। অপরিহার্য কুকি বন্ধ করা যায় না কারণ ছাড়া সাইট কাজ করে না।</span>
                <span className="t-en">Manage each category below. Essential cookies can't be turned off because the site won't work without them.</span>
              </p>
              <div className="lgl-prefs">
                <CookiePref
                  name={<><span className="t-bn">অপরিহার্য কুকি</span><span className="t-en">Essential cookies</span></>}
                  locked={true}
                  desc={<><span className="t-bn">লগইন, সিকিউরিটি, ও কোর ফাংশনের জন্য প্রয়োজনীয়।</span><span className="t-en">Required for login, security, and core functionality.</span></>}
                />
                <CookiePref
                  name={<><span className="t-bn">পছন্দ কুকি</span><span className="t-en">Preference cookies</span></>}
                  desc={<><span className="t-bn">ভাষা ও সাম্প্রতিক ব্রাউজিং মনে রাখে।</span><span className="t-en">Remembers language and recent browsing.</span></>}
                  on={prefs.pref}
                  onChange={(v)=>setPref('pref', v)}
                />
                <CookiePref
                  name={<><span className="t-bn">অ্যানালিটিক্স কুকি</span><span className="t-en">Analytics cookies</span></>}
                  desc={<><span className="t-bn">এনোনিমাইজড ব্যবহার ডেটা — যা আমাদের প্ল্যাটফর্ম উন্নত করতে সাহায্য করে।</span><span className="t-en">Anonymized usage data that helps us improve the platform.</span></>}
                  on={prefs.analytics}
                  onChange={(v)=>setPref('analytics', v)}
                />
                <CookiePref
                  name={<><span className="t-bn">মার্কেটিং কুকি</span><span className="t-en">Marketing cookies</span></>}
                  desc={<><span className="t-bn">প্রাসঙ্গিক বিজ্ঞাপন দেখাতে — আপনি বন্ধ করলে অপ্রাসঙ্গিক বিজ্ঞাপন দেখতে পারেন।</span><span className="t-en">For showing relevant ads — switching off may show less-relevant ads.</span></>}
                  on={prefs.marketing}
                  onChange={(v)=>setPref('marketing', v)}
                />
              </div>
              <div className="lgl-prefs-actions">
                <button className="btn btn-ink" onClick={savePrefs}>
                  {saved ? (
                    <>
                      {I.check}
                      <span className="t-bn">পছন্দ সংরক্ষিত</span>
                      <span className="t-en">Preferences saved</span>
                    </>
                  ) : (
                    <>
                      <span className="t-bn">পছন্দ সংরক্ষণ করুন</span>
                      <span className="t-en">Save preferences</span>
                    </>
                  )}
                </button>
                <button className="btn btn-ghost" onClick={acceptAll}>
                  <span className="t-bn">সব গ্রহণ করুন</span>
                  <span className="t-en">Accept all</span>
                </button>
                <button className="btn btn-ghost" onClick={rejectAll}>
                  <span className="t-bn">ঐচ্ছিক বন্ধ করুন</span>
                  <span className="t-en">Reject optional</span>
                </button>
              </div>
            </section>

            <section id="browser" className="lgl-section">
              <h2 className="lgl-section-h">
                <span className="lgl-section-num">06</span>
                <span className="t-bn">ব্রাউজার সেটিংস</span>
                <span className="t-en">Browser settings</span>
              </h2>
              <p className="lgl-p">
                <span className="t-bn">আপনি ব্রাউজার লেভেলেও কুকি নিয়ন্ত্রণ করতে পারেন। বেশিরভাগ ব্রাউজার "Do Not Track" সিগনাল মেনে চলে — আমরাও মেনে চলি।</span>
                <span className="t-en">You can also control cookies at the browser level. Most browsers honor "Do Not Track" signals — and so do we.</span>
              </p>
              <ul className="lgl-list">
                <li><strong>Chrome:</strong> Settings → Privacy and security → Cookies and other site data</li>
                <li><strong>Safari:</strong> Preferences → Privacy → Cookies and website data</li>
                <li><strong>Firefox:</strong> Preferences → Privacy &amp; Security → Cookies and Site Data</li>
                <li><strong>Edge:</strong> Settings → Cookies and site permissions</li>
              </ul>
              <div className="lgl-callout">
                <div className="lgl-callout-label">
                  <span className="t-bn">সতর্কতা</span>
                  <span className="t-en">Heads up</span>
                </div>
                <div className="lgl-callout-text">
                  <span className="t-bn">সব কুকি ব্লক করলে আপনি লগইন করতে পারবেন না, এবং ভাষার পছন্দও সংরক্ষিত হবে না।</span>
                  <span className="t-en">Blocking all cookies will prevent you from logging in, and your language preference won't persist.</span>
                </div>
              </div>
            </section>

            <section id="changes" className="lgl-section">
              <h2 className="lgl-section-h">
                <span className="lgl-section-num">07</span>
                <span className="t-bn">পরিবর্তন</span>
                <span className="t-en">Changes</span>
              </h2>
              <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">If we add new cookies or change how existing ones are used, we'll update this page and show a banner notice for major changes. Questions? <a href="mailto:privacy@nobbyojobs.com.bd">privacy@nobbyojobs.com.bd</a>.</span>
              </p>
            </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="privacy.html" className="lgl-foot-link">
                  <span className="t-bn">প্রাইভেসি</span>
                  <span className="t-en">Privacy</span>
                </a>
                <a href="terms.html" className="lgl-foot-link">
                  <span className="t-bn">টার্মস</span>
                  <span className="t-en">Terms</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 />);