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

// =================== GOVT JOB DATA ===================
const ALL_GOVT_JOBS = [
  { id:1, title:{bn:'৪৬তম বিসিএস (সাধারণ)', en:'46th BCS (General)'}, org:{bn:'বাংলাদেশ পাবলিক সার্ভিস কমিশন', en:'Bangladesh Public Service Commission'}, orgShort:'BPSC', logo:'B', logoBg:'#0E5AA7', cat:'bcs', vacancies:3140, grade:'৯ম–১৩তম', gradeEn:'9th–13th', exam:'preliminary', deadline:'2026-05-15', deadlineDays:16, age:'২১–৩২', ageEn:'21–32', edu:{bn:'স্নাতক', en:'Graduate'}, salary:'৳২২,০০০–৬৩,৪১০', stipend:'৳১০,০০০', urgent:true, featured:true, applicants:124850 },
  { id:2, title:{bn:'সিনিয়র অফিসার', en:'Senior Officer'}, org:{bn:'সোনালী ব্যাংক লিমিটেড', en:'Sonali Bank Limited'}, orgShort:'SBL', logo:'S', logoBg:'#0A6B3F', cat:'bank', vacancies:840, grade:'অফিসার', gradeEn:'Officer', exam:'written', deadline:'2026-05-22', deadlineDays:23, age:'২২–৩০', ageEn:'22–30', edu:{bn:'স্নাতক / স্নাতকোত্তর', en:'Graduate / Postgrad'}, salary:'৳৩৬,০০০–৭০,০০০', stipend:'৳১৫,০০০', featured:true, applicants:48230 },
  { id:3, title:{bn:'উপ-সহকারী প্রকৌশলী', en:'Sub-Assistant Engineer'}, org:{bn:'বাংলাদেশ রেলওয়ে', en:'Bangladesh Railway'}, orgShort:'BR', logo:'R', logoBg:'#7E5E9F', cat:'railway', vacancies:485, grade:'১০ম গ্রেড', gradeEn:'10th grade', exam:'written', deadline:'2026-05-08', deadlineDays:9, age:'১৮–৩০', ageEn:'18–30', edu:{bn:'ডিপ্লোমা', en:'Diploma'}, salary:'৳১৬,০০০–৩৮,৬৪০', urgent:true, applicants:18430 },
  { id:4, title:{bn:'কনস্টেবল', en:'Constable'}, org:{bn:'বাংলাদেশ পুলিশ', en:'Bangladesh Police'}, orgShort:'BP', logo:'P', logoBg:'#003E70', cat:'police', vacancies:3260, grade:'১৭তম গ্রেড', gradeEn:'17th grade', exam:'physical', deadline:'2026-06-02', deadlineDays:34, age:'১৮–২৭', ageEn:'18–27', edu:{bn:'এসএসসি', en:'SSC'}, salary:'৳৯,০০০–২১,৮০০', applicants:215600 },
  { id:5, title:{bn:'প্রভাষক (গণিত)', en:'Lecturer (Mathematics)'}, org:{bn:'মাধ্যমিক ও উচ্চ শিক্ষা অধিদপ্তর', en:'Directorate of Secondary & Higher Education'}, orgShort:'DSHE', logo:'D', logoBg:'#10B981', cat:'teacher', vacancies:1240, grade:'৯ম গ্রেড', gradeEn:'9th grade', exam:'written', deadline:'2026-05-18', deadlineDays:19, age:'২২–৩৫', ageEn:'22–35', edu:{bn:'স্নাতকোত্তর', en:'Postgrad'}, salary:'৳২২,০০০–৫৩,০৬০', applicants:32480 },
  { id:6, title:{bn:'সহকারী প্রোগ্রামার', en:'Assistant Programmer'}, org:{bn:'তথ্য ও যোগাযোগ প্রযুক্তি বিভাগ', en:'ICT Division'}, orgShort:'ICT', logo:'I', logoBg:'#F58220', cat:'ict', vacancies:120, grade:'৯ম গ্রেড', gradeEn:'9th grade', exam:'written', deadline:'2026-05-12', deadlineDays:13, age:'২২–৩০', ageEn:'22–30', edu:{bn:'বি.এসসি (CSE/EEE)', en:'B.Sc (CSE/EEE)'}, salary:'৳২২,০০০–৫৩,০৬০', urgent:true, featured:true, applicants:14520 },
  { id:7, title:{bn:'উপজেলা স্বাস্থ্য কর্মকর্তা', en:'Upazila Health Officer'}, org:{bn:'স্বাস্থ্য অধিদপ্তর', en:'Directorate General of Health'}, orgShort:'DGHS', logo:'H', logoBg:'#E60028', cat:'health', vacancies:680, grade:'৬ষ্ঠ গ্রেড', gradeEn:'6th grade', exam:'written', deadline:'2026-05-26', deadlineDays:27, age:'২৩–৩২', ageEn:'23–32', edu:{bn:'এমবিবিএস', en:'MBBS'}, salary:'৳৩৫,৫০০–৬৭,০১০', applicants:9840 },
  { id:8, title:{bn:'অফিস সহায়ক', en:'Office Assistant'}, org:{bn:'ডাক বিভাগ', en:'Postal Department'}, orgShort:'BD-Post', logo:'D', logoBg:'#E2126B', cat:'general', vacancies:1850, grade:'২০তম গ্রেড', gradeEn:'20th grade', exam:'written', deadline:'2026-05-10', deadlineDays:11, age:'১৮–৩০', ageEn:'18–30', edu:{bn:'এসএসসি', en:'SSC'}, salary:'৳৮,২৫০–২০,০১০', applicants:128400 },
  { id:9, title:{bn:'এনজিও কর্মকর্তা', en:'NGO Programme Officer'}, org:{bn:'BRAC', en:'BRAC'}, orgShort:'BRAC', logo:'B', logoBg:'#22863A', cat:'ngo', vacancies:240, grade:'অফিসার', gradeEn:'Officer', exam:'interview', deadline:'2026-05-28', deadlineDays:29, age:'২৩–৩৫', ageEn:'23–35', edu:{bn:'স্নাতক / স্নাতকোত্তর', en:'Graduate / Postgrad'}, salary:'৳৪০,০০০–৭৫,০০০', applicants:6840 },
  { id:10, title:{bn:'সিপাহী', en:'Sepoy'}, org:{bn:'বাংলাদেশ সেনাবাহিনী', en:'Bangladesh Army'}, orgShort:'BA', logo:'A', logoBg:'#0A6B3F', cat:'defense', vacancies:2480, grade:'১৮তম গ্রেড', gradeEn:'18th grade', exam:'physical', deadline:'2026-06-15', deadlineDays:47, age:'১৮–২৩', ageEn:'18–23', edu:{bn:'এসএসসি', en:'SSC'}, salary:'৳৮,৮০০–২১,৩১০', applicants:185000 },
  { id:11, title:{bn:'অডিটর', en:'Auditor'}, org:{bn:'বাংলাদেশ মহা হিসাব নিয়ন্ত্রক ও মহা হিসাব নিরীক্ষক', en:'Comptroller & Auditor General'}, orgShort:'CAG', logo:'C', logoBg:'#005BAA', cat:'general', vacancies:340, grade:'১১তম গ্রেড', gradeEn:'11th grade', exam:'written', deadline:'2026-05-20', deadlineDays:21, age:'২২–৩০', ageEn:'22–30', edu:{bn:'স্নাতক', en:'Graduate'}, salary:'৳১২,৫০০–৩০,২৩০', applicants:21450 },
  { id:12, title:{bn:'কাস্টমস অফিসার', en:'Customs Officer'}, org:{bn:'জাতীয় রাজস্ব বোর্ড', en:'National Board of Revenue'}, orgShort:'NBR', logo:'N', logoBg:'#0E76BC', cat:'bcs', vacancies:185, grade:'৯ম গ্রেড', gradeEn:'9th grade', exam:'written', deadline:'2026-05-25', deadlineDays:26, age:'২২–৩২', ageEn:'22–32', edu:{bn:'স্নাতক', en:'Graduate'}, salary:'৳২২,০০০–৫৩,০৬০', featured:true, applicants:38420 },
];

const CATEGORIES = [
  { id:'all', bn:'সব', en:'All', icon:'🏛️' },
  { id:'bcs', bn:'বিসিএস', en:'BCS', icon:'⚖️' },
  { id:'bank', bn:'ব্যাংক জব', en:'Bank Jobs', icon:'🏦' },
  { id:'railway', bn:'রেলওয়ে', en:'Railway', icon:'🚆' },
  { id:'police', bn:'পুলিশ', en:'Police', icon:'👮' },
  { id:'defense', bn:'প্রতিরক্ষা', en:'Defense', icon:'🛡️' },
  { id:'teacher', bn:'শিক্ষক', en:'Teaching', icon:'📚' },
  { id:'health', bn:'স্বাস্থ্য', en:'Health', icon:'⚕️' },
  { id:'ict', bn:'আইসিটি', en:'ICT', icon:'💻' },
  { id:'ngo', bn:'এনজিও', en:'NGO', icon:'🤝' },
  { id:'general', bn:'সাধারণ', en:'General', icon:'📋' },
];

const EXAMS = [
  { id:'all', bn:'সব', en:'All' },
  { id:'preliminary', bn:'প্রিলিমিনারি', en:'Preliminary' },
  { id:'written', bn:'লিখিত', en:'Written' },
  { id:'physical', bn:'শারীরিক', en:'Physical' },
  { id:'interview', bn:'ইন্টারভিউ', en:'Interview' },
];

const GRADES = [
  { id:'all', bn:'সব গ্রেড', en:'All grades' },
  { id:'1-5', bn:'১ম–৫ম গ্রেড', en:'1st–5th grade' },
  { id:'6-9', bn:'৬ষ্ঠ–৯ম গ্রেড', en:'6th–9th grade' },
  { id:'10-13', bn:'১০ম–১৩তম গ্রেড', en:'10th–13th grade' },
  { id:'14-20', bn:'১৪তম–২০তম গ্রেড', en:'14th–20th grade' },
];

const STAT_TILES = [
  { n:'৩,৪৮০+', nEn:'3,480+', l:{bn:'লাইভ সরকারি চাকরি', en:'Live govt jobs'}, c:'#F58220' },
  { n:'৩৪০+', nEn:'340+', l:{bn:'মন্ত্রণালয় ও দপ্তর', en:'Ministries & dept.'}, c:'#10B981' },
  { n:'১.২ কোটি+', nEn:'12M+', l:{bn:'মোট আবেদনকারী', en:'Total applicants'}, c:'#4357A0' },
  { n:'২৪ ঘন্টা', nEn:'24h', l:{bn:'নতুন সার্কুলার আপডেট', en:'New circular updates'}, c:'#E60028' },
];

// =================== HERO ===================
function GovtHero({ q, setQ, lang }) {
  return (
    <section className="gov-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 gov-hero-inner">
        <div className="gov-hero-flag" aria-hidden="true">
          <div className="gov-flag-circle"></div>
        </div>
        <div className="srch-eyebrow gov-eyebrow">
          <span className="srch-pulse"></span>
          <span className="t-bn">গণপ্রজাতন্ত্রী বাংলাদেশ সরকার · সরকারি চাকরির পোর্টাল</span>
          <span className="t-en">People's Republic of Bangladesh · Govt Jobs Portal</span>
        </div>
        <h1 className="srch-title">
          <span className="t-bn">সরকারি চাকরির <em className="srch-rotate">সবচেয়ে বড় হাব</em></span>
          <span className="t-en">Bangladesh's largest <em className="srch-rotate">govt jobs hub</em></span>
        </h1>
        <p className="gov-hero-sub">
          <span className="t-bn">৩,৪৮০+ লাইভ সরকারি চাকরি · বিসিএস, ব্যাংক, রেলওয়ে, পুলিশ · বিনামূল্যে আবেদন স্টিপেন্ড</span>
          <span className="t-en">3,480+ live govt jobs · BCS, Bank, Railway, Police · Free application stipends</span>
        </p>

        <div className="srch-bar gov-search">
          <div className="srch-bar-field">
            <span className="srch-bar-icon">{I.search}</span>
            <input
              value={q}
              onChange={e=>setQ(e.target.value)}
              placeholder={lang==='bn'?'বিসিএস, ব্যাংক, রেলওয়ে, প্রতিষ্ঠান...':'BCS, bank, railway, organization...'}
            />
          </div>
          <button className="srch-bar-btn">
            <span className="t-bn">খুঁজুন</span>
            <span className="t-en">Search</span>
            {I.arrowRight}
          </button>
        </div>

        <div className="gov-hero-tiles">
          {STAT_TILES.map((s,i) => (
            <div key={i} className="gov-tile">
              <div className="gov-tile-num" style={{color:s.c}}>
                <span className="t-bn">{s.n}</span>
                <span className="t-en">{s.nEn}</span>
              </div>
              <div className="gov-tile-label">
                <span className="t-bn">{s.l.bn}</span>
                <span className="t-en">{s.l.en}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// =================== CATEGORY CHIPS ===================
function CategoryChips({ value, onChange, lang, counts }) {
  return (
    <div className="gov-cats">
      <div className="container">
        <div className="gov-cats-scroll">
          {CATEGORIES.map(c => (
            <button
              key={c.id}
              className={'gov-cat-chip' + (value === c.id ? ' is-on' : '')}
              onClick={() => onChange(c.id)}
            >
              <span className="gov-cat-icon">{c.icon}</span>
              <span className="t-bn">{c.bn}</span>
              <span className="t-en">{c.en}</span>
              <span className="gov-cat-count">{counts[c.id] || 0}</span>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

// =================== FILTERS ===================
function GovtFilters({ filters, setFilters, lang, count }) {
  const update = (k, v) => setFilters(p => ({...p, [k]:v}));
  const reset = () => setFilters({ cat:'all', exam:'all', grade:'all', deadline:'all', sort:'urgency' });
  return (
    <aside className="srch-filters">
      <div className="srch-filters-head">
        <div>
          <div className="srch-filters-title">
            <span className="t-bn">ফিল্টার</span>
            <span className="t-en">Filters</span>
          </div>
          <div className="srch-filters-count">
            <strong>{count}</strong>
            <span className="t-bn">টি সার্কুলার</span>
            <span className="t-en">circulars</span>
          </div>
        </div>
        <button className="srch-filters-reset" onClick={reset}>
          <span className="t-bn">রিসেট</span>
          <span className="t-en">Reset</span>
        </button>
      </div>

      <FilterGroup label={lang==='bn'?'পরীক্ষার ধরন':'Exam type'} opts={EXAMS} value={filters.exam} onChange={v=>update('exam',v)} lang={lang} />
      <FilterGroup label={lang==='bn'?'বেতন গ্রেড':'Pay grade'} opts={GRADES} value={filters.grade} onChange={v=>update('grade',v)} lang={lang} />

      <div className="srch-fg">
        <div className="srch-fg-label">
          <span className="t-bn">ডেডলাইন</span>
          <span className="t-en">Deadline</span>
        </div>
        <div className="srch-fg-opts">
          {[
            {id:'all', bn:'যেকোনো', en:'Any'},
            {id:'7', bn:'৭ দিনের মধ্যে', en:'Within 7 days'},
            {id:'15', bn:'১৫ দিনের মধ্যে', en:'Within 15 days'},
            {id:'30', bn:'৩০ দিনের মধ্যে', en:'Within 30 days'},
          ].map(o => (
            <button key={o.id} className={'srch-fg-opt' + (filters.deadline === o.id ? ' is-on' : '')} onClick={()=>update('deadline', o.id)}>
              {o[lang]}
            </button>
          ))}
        </div>
      </div>

      <div className="gov-tip-card">
        <div className="gov-tip-icon">{I.spark}</div>
        <div className="gov-tip-body">
          <div className="gov-tip-title">
            <span className="t-bn">ফ্রি BCS প্রস্তুতি</span>
            <span className="t-en">Free BCS prep</span>
          </div>
          <div className="gov-tip-sub">
            <span className="t-bn">৬,০০০+ MCQ + মক টেস্ট · NOBBYO Learn</span>
            <span className="t-en">6,000+ MCQs + mock tests · NOBBYO Learn</span>
          </div>
          <a href="learn.html" className="gov-tip-link">
            <span className="t-bn">শুরু করুন →</span>
            <span className="t-en">Start now →</span>
          </a>
        </div>
      </div>
    </aside>
  );
}

function FilterGroup({ label, opts, value, onChange, lang }) {
  return (
    <div className="srch-fg">
      <div className="srch-fg-label">{label}</div>
      <div className="srch-fg-opts">
        {opts.map(o => (
          <button key={o.id} className={'srch-fg-opt' + (value === o.id ? ' is-on' : '')} onClick={()=>onChange(o.id)}>
            {o[lang]}
          </button>
        ))}
      </div>
    </div>
  );
}

// =================== JOB CARD ===================
function GovtJobCard({ job, lang, saved, onSave }) {
  const dl = job.deadlineDays;
  const dlTier = dl <= 7 ? 'critical' : dl <= 15 ? 'warning' : 'normal';
  return (
    <article className={'gov-card' + (job.featured ? ' is-featured' : '')}>
      {job.featured && <div className="srch-card-rib"><span>{I.flame} {lang==='bn'?'ফিচার্ড':'Featured'}</span></div>}
      <div className="gov-card-head">
        <div className="gov-card-logo" style={{background: job.logoBg}}>{job.logo}</div>
        <div className="gov-card-id">
          <div className="gov-card-org">
            <span className="t-bn">{job.org.bn}</span>
            <span className="t-en">{job.org.en}</span>
          </div>
          <h3 className="gov-card-title">
            <span className="t-bn">{job.title.bn}</span>
            <span className="t-en">{job.title.en}</span>
            {job.urgent && <span className="srch-card-urgent">URGENT</span>}
          </h3>
        </div>
        <button
          className={'srch-card-save' + (saved ? ' is-saved' : '')}
          onClick={onSave}
          aria-label="Save"
        >
          {saved ? I.bookmarkFilled : I.bookmark}
        </button>
      </div>

      <div className="gov-card-grid">
        <div className="gov-card-cell">
          <div className="gov-card-cell-label">
            <span className="t-bn">শূন্যপদ</span>
            <span className="t-en">Vacancies</span>
          </div>
          <div className="gov-card-cell-val gov-card-cell-vacancy">{job.vacancies.toLocaleString()}</div>
        </div>
        <div className="gov-card-cell">
          <div className="gov-card-cell-label">
            <span className="t-bn">গ্রেড</span>
            <span className="t-en">Grade</span>
          </div>
          <div className="gov-card-cell-val">
            <span className="t-bn">{job.grade}</span>
            <span className="t-en">{job.gradeEn}</span>
          </div>
        </div>
        <div className="gov-card-cell">
          <div className="gov-card-cell-label">
            <span className="t-bn">শিক্ষাগত যোগ্যতা</span>
            <span className="t-en">Education</span>
          </div>
          <div className="gov-card-cell-val">
            <span className="t-bn">{job.edu.bn}</span>
            <span className="t-en">{job.edu.en}</span>
          </div>
        </div>
        <div className="gov-card-cell">
          <div className="gov-card-cell-label">
            <span className="t-bn">বয়সসীমা</span>
            <span className="t-en">Age</span>
          </div>
          <div className="gov-card-cell-val">
            <span className="t-bn">{job.age} বছর</span>
            <span className="t-en">{job.ageEn} yrs</span>
          </div>
        </div>
      </div>

      <div className="gov-card-foot">
        <div className="gov-card-salary">
          <span className="gov-card-salary-label">
            <span className="t-bn">স্কেল</span>
            <span className="t-en">Pay scale</span>
          </span>
          <span className="gov-card-salary-num">{job.salary}</span>
        </div>
        <div className={'gov-card-deadline gov-deadline-' + dlTier}>
          <span className="gov-deadline-clock">{I.clock}</span>
          <div>
            <div className="gov-deadline-num">{dl}</div>
            <div className="gov-deadline-label">
              <span className="t-bn">দিন বাকি</span>
              <span className="t-en">days left</span>
            </div>
          </div>
        </div>
      </div>

      <div className="gov-card-actions">
        <a href="job-detail.html" className="btn btn-ghost">
          <span className="t-bn">সার্কুলার পড়ুন</span>
          <span className="t-en">Read circular</span>
        </a>
        <a href="apply-flow.html" className="btn btn-ink">
          <span className="t-bn">আবেদন করুন</span>
          <span className="t-en">Apply now</span>
          {I.arrowRight}
        </a>
      </div>

      <div className="gov-card-meta-row">
        <span className="gov-card-meta-item">
          {I.users}
          <strong>{job.applicants.toLocaleString()}</strong>
          <span className="t-bn">আবেদনকারী</span>
          <span className="t-en">applicants</span>
        </span>
        <span className="gov-card-meta-divider">·</span>
        <span className="gov-card-meta-item gov-card-exam">
          <span className="t-bn">পরীক্ষা: {EXAMS.find(e=>e.id===job.exam)?.bn}</span>
          <span className="t-en">Exam: {EXAMS.find(e=>e.id===job.exam)?.en}</span>
        </span>
      </div>
    </article>
  );
}

// =================== APP ===================
function App() {
  const [lang, setLang] = window.usePageLang('bn');
  const [q, setQ] = useState('');
  const [filters, setFilters] = useState({ cat:'all', exam:'all', grade:'all', deadline:'all', sort:'urgency' });
  const [saved, setSaved] = useState(new Set([1, 6]));

  const counts = useMemo(() => {
    const c = { all: ALL_GOVT_JOBS.length };
    CATEGORIES.forEach(cat => {
      if (cat.id !== 'all') c[cat.id] = ALL_GOVT_JOBS.filter(j => j.cat === cat.id).length;
    });
    return c;
  }, []);

  const filtered = useMemo(() => {
    let r = ALL_GOVT_JOBS.filter(j => {
      if (q) {
        const ql = q.toLowerCase();
        const hit = j.title.bn.includes(q) || j.title.en.toLowerCase().includes(ql) ||
                    j.org.bn.includes(q) || j.org.en.toLowerCase().includes(ql) ||
                    j.orgShort.toLowerCase().includes(ql);
        if (!hit) return false;
      }
      if (filters.cat !== 'all' && j.cat !== filters.cat) return false;
      if (filters.exam !== 'all' && j.exam !== filters.exam) return false;
      if (filters.deadline !== 'all') {
        const max = parseInt(filters.deadline);
        if (j.deadlineDays > max) return false;
      }
      return true;
    });
    if (filters.sort === 'urgency') r.sort((a,b) => a.deadlineDays - b.deadlineDays);
    if (filters.sort === 'vacancy') r.sort((a,b) => b.vacancies - a.vacancies);
    if (filters.sort === 'recent') r.sort((a,b) => a.id - b.id);
    return r;
  }, [q, filters]);

  const toggleSave = (id) => {
    setSaved(s => {
      const n = new Set(s);
      n.has(id) ? n.delete(id) : n.add(id);
      return n;
    });
  };

  return (
    <>
      <PageTopBar lang={lang} setLang={setLang} />
      <PageHeader active="govt" />
      <GovtHero q={q} setQ={setQ} lang={lang} />
      <CategoryChips value={filters.cat} onChange={v=>setFilters(f=>({...f, cat:v}))} lang={lang} counts={counts} />

      <section className="srch-results">
        <div className="container srch-results-grid">
          <GovtFilters filters={filters} setFilters={setFilters} lang={lang} count={filtered.length} />
          <main className="srch-main">
            <div className="srch-toolbar">
              <div className="srch-result-count">
                <strong>{filtered.length}</strong>
                <span className="t-bn">টি সরকারি চাকরি পাওয়া গেছে</span>
                <span className="t-en">govt jobs found</span>
                {q && <span className="srch-result-q">· "{q}"</span>}
              </div>
              <div className="srch-sort">
                <span className="srch-sort-label">
                  <span className="t-bn">সাজান:</span>
                  <span className="t-en">Sort by:</span>
                </span>
                <div className="srch-sort-pills">
                  {[
                    {id:'urgency', bn:'ডেডলাইন', en:'Deadline'},
                    {id:'vacancy', bn:'বেশি শূন্যপদ', en:'Most vacancies'},
                    {id:'recent', bn:'সাম্প্রতিক', en:'Recent'},
                  ].map(s => (
                    <button key={s.id} className={'srch-sort-pill' + (filters.sort === s.id ? ' is-on' : '')} onClick={()=>setFilters(f=>({...f, sort:s.id}))}>
                      {s[lang]}
                    </button>
                  ))}
                </div>
              </div>
            </div>

            {filtered.length === 0 ? (
              <div className="srch-empty">
                <div className="srch-empty-icon">🏛️</div>
                <div className="srch-empty-title">
                  <span className="t-bn">কোনো সার্কুলার পাওয়া গেল না</span>
                  <span className="t-en">No circulars found</span>
                </div>
                <div className="srch-empty-sub">
                  <span className="t-bn">ফিল্টার পরিবর্তন করে আবার চেষ্টা করুন</span>
                  <span className="t-en">Try changing your filters</span>
                </div>
              </div>
            ) : (
              <div className="gov-list">
                {filtered.map(j => (
                  <GovtJobCard key={j.id} job={j} lang={lang} saved={saved.has(j.id)} onSave={()=>toggleSave(j.id)} />
                ))}
              </div>
            )}

            <div className="srch-load-more">
              <button className="btn btn-ghost btn-lg">
                <span className="t-bn">আরো {Math.max(0, 3480 - filtered.length)} টি দেখুন</span>
                <span className="t-en">Load {Math.max(0, 3480 - filtered.length)} more</span>
              </button>
            </div>
          </main>
        </div>
      </section>

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

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