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

// =================== COMPANY DATA ===================
const ALL_COMPANIES = [
  { id:1, name:{bn:'Pathao', en:'Pathao'}, logo:'P', logoBg:'#E81E2C', industry:'tech', size:'large', loc:{bn:'ঢাকা · বনানী', en:'Dhaka · Banani'}, area:'dhaka', employees:'১,০০০+', employeesEn:'1,000+', openJobs:24, rating:4.6, reviews:1240, founded:2015, verified:true, hiring:'active', tagline:{bn:'ঢাকার সেরা রাইড-শেয়ারিং ও ডেলিভারি প্ল্যাটফর্ম', en:'Bangladesh\'s leading ride-sharing & delivery platform'}, perks:['Health','Stock','WFH'], featured:true, urgent:true },
  { id:2, name:{bn:'bKash', en:'bKash'}, logo:'b', logoBg:'#E2126B', industry:'fintech', size:'large', loc:{bn:'ঢাকা · গুলশান', en:'Dhaka · Gulshan'}, area:'dhaka', employees:'২,৫০০+', employeesEn:'2,500+', openJobs:38, rating:4.7, reviews:2890, founded:2011, verified:true, hiring:'active', tagline:{bn:'বাংলাদেশের ১ নম্বর মোবাইল ফাইন্যান্স', en:'Bangladesh\'s #1 mobile financial service'}, perks:['Health','PF','Bonus','Lunch'], featured:true },
  { id:3, name:{bn:'Brac Bank', en:'Brac Bank'}, logo:'BB', logoBg:'#003E70', industry:'finance', size:'large', loc:{bn:'ঢাকা · মতিঝিল', en:'Dhaka · Motijheel'}, area:'dhaka', employees:'৭,০০০+', employeesEn:'7,000+', openJobs:15, rating:4.4, reviews:3420, founded:2001, verified:true, hiring:'active', tagline:{bn:'উদ্ভাবনী ব্যাংকিং সলিউশন', en:'Innovative banking solutions'}, perks:['Health','PF','Loans','WFH'], featured:true },
  { id:4, name:{bn:'Grameenphone', en:'Grameenphone'}, logo:'g', logoBg:'#0066B2', industry:'telecom', size:'large', loc:{bn:'ঢাকা · বসুন্ধরা', en:'Dhaka · Bashundhara'}, area:'dhaka', employees:'৩,০০০+', employeesEn:'3,000+', openJobs:19, rating:4.5, reviews:1980, founded:1997, verified:true, hiring:'active', tagline:{bn:'বাংলাদেশের অগ্রণী টেলিকম অপারেটর', en:'Leading telecom operator of Bangladesh'} , perks:['Health','PF','Stock','Lunch']},
  { id:5, name:{bn:'Chaldal', en:'Chaldal'}, logo:'C', logoBg:'#10B981', industry:'ecommerce', size:'mid', loc:{bn:'ঢাকা · ধানমন্ডি', en:'Dhaka · Dhanmondi'}, area:'dhaka', employees:'৭৫০+', employeesEn:'750+', openJobs:12, rating:4.3, reviews:680, founded:2013, verified:true, hiring:'active', tagline:{bn:'অনলাইনে দৈনন্দিন বাজার', en:'Online grocery delivery, every day'}, perks:['Health','WFH','Bonus'] },
  { id:6, name:{bn:'ShopUp', en:'ShopUp'}, logo:'S', logoBg:'#F59E0B', industry:'tech', size:'mid', loc:{bn:'ঢাকা · উত্তরা', en:'Dhaka · Uttara'}, area:'dhaka', employees:'৫০০+', employeesEn:'500+', openJobs:21, rating:4.5, reviews:420, founded:2017, verified:true, hiring:'active', tagline:{bn:'ছোট ব্যবসার জন্য B2B প্ল্যাটফর্ম', en:'B2B commerce platform for small businesses'}, perks:['Stock','WFH','Health'], featured:true, urgent:true },
  { id:7, name:{bn:'Daraz BD', en:'Daraz BD'}, logo:'D', logoBg:'#F85606', industry:'ecommerce', size:'large', loc:{bn:'ঢাকা · তেজগাঁও', en:'Dhaka · Tejgaon'}, area:'dhaka', employees:'১,২০০+', employeesEn:'1,200+', openJobs:28, rating:4.2, reviews:1560, founded:2014, verified:true, hiring:'active', tagline:{bn:'বাংলাদেশের সবচেয়ে বড় অনলাইন মার্কেটপ্লেস', en:'Largest online marketplace in Bangladesh'}, perks:['Health','PF','Discount']},
  { id:8, name:{bn:'Robi Axiata', en:'Robi Axiata'}, logo:'R', logoBg:'#E60028', industry:'telecom', size:'large', loc:{bn:'ঢাকা · গুলশান', en:'Dhaka · Gulshan'}, area:'dhaka', employees:'১,৮০০+', employeesEn:'1,800+', openJobs:11, rating:4.3, reviews:920, founded:1997, verified:true, hiring:'open', tagline:{bn:'ডিজিটাল লাইফস্টাইল পার্টনার', en:'Your digital lifestyle partner'}, perks:['Health','Stock','PF']},
  { id:9, name:{bn:'10 Minute School', en:'10 Minute School'}, logo:'10', logoBg:'#FB923C', industry:'edtech', size:'mid', loc:{bn:'রিমোট', en:'Remote'}, area:'remote', employees:'৩৫০+', employeesEn:'350+', openJobs:18, rating:4.7, reviews:540, founded:2015, verified:true, hiring:'active', tagline:{bn:'বাংলাদেশের শীর্ষ অনলাইন লার্নিং প্ল্যাটফর্ম', en:'Top online learning platform in Bangladesh'}, perks:['WFH','Health','Stock'], featured:true },
  { id:10, name:{bn:'Foodi', en:'Foodi'}, logo:'F', logoBg:'#7E5E9F', industry:'foodtech', size:'mid', loc:{bn:'চট্টগ্রাম · আগ্রাবাদ', en:'Chattogram · Agrabad'}, area:'chattogram', employees:'২৫০+', employeesEn:'250+', openJobs:8, rating:4.4, reviews:180, founded:2018, verified:true, hiring:'open', tagline:{bn:'খাবার অর্ডার করুন, যেকোনো সময়', en:'Order food, anytime'}, perks:['WFH','Discount','Health']},
  { id:11, name:{bn:'Kazi Farms', en:'Kazi Farms'}, logo:'K', logoBg:'#0A6B3F', industry:'agritech', size:'large', loc:{bn:'ঢাকা · বনানী', en:'Dhaka · Banani'}, area:'dhaka', employees:'৪,০০০+', employeesEn:'4,000+', openJobs:14, rating:4.1, reviews:760, founded:1996, verified:true, hiring:'open', tagline:{bn:'বাংলাদেশের শীর্ষ পোল্ট্রি ও খাদ্য কোম্পানি', en:'Leading poultry & food company'}, perks:['PF','Lunch','Health']},
  { id:12, name:{bn:'IPDC Finance', en:'IPDC Finance'}, logo:'I', logoBg:'#1B4789', industry:'finance', size:'mid', loc:{bn:'ঢাকা · গুলশান', en:'Dhaka · Gulshan'}, area:'dhaka', employees:'৬০০+', employeesEn:'600+', openJobs:9, rating:4.3, reviews:240, founded:1981, verified:true, hiring:'open', tagline:{bn:'হাউজিং ও ভোক্তা ফাইন্যান্সিং', en:'Housing & consumer financing'}, perks:['Health','PF','Loans']},
  { id:13, name:{bn:'Walton', en:'Walton Group'}, logo:'W', logoBg:'#0E5AA7', industry:'manufacturing', size:'large', loc:{bn:'ঢাকা · গাজীপুর', en:'Dhaka · Gazipur'}, area:'dhaka', employees:'১৫,০০০+', employeesEn:'15,000+', openJobs:32, rating:4.0, reviews:2140, founded:1977, verified:true, hiring:'active', tagline:{bn:'বাংলাদেশের শীর্ষ ইলেকট্রনিক্স ব্র্যান্ড', en:'Top electronics brand of Bangladesh'}, perks:['PF','Lunch','Discount']},
  { id:14, name:{bn:'Tiger IT', en:'Tiger IT'}, logo:'T', logoBg:'#22863A', industry:'tech', size:'mid', loc:{bn:'ঢাকা · বসুন্ধরা', en:'Dhaka · Bashundhara'}, area:'dhaka', employees:'৪০০+', employeesEn:'400+', openJobs:7, rating:4.5, reviews:160, founded:2003, verified:true, hiring:'open', tagline:{bn:'এন্টারপ্রাইজ সফটওয়্যার ও সিকিউরিটি', en:'Enterprise software & security'}, perks:['Health','WFH','Stock']},
  { id:15, name:{bn:'ACI Limited', en:'ACI Limited'}, logo:'A', logoBg:'#005BAA', industry:'manufacturing', size:'large', loc:{bn:'ঢাকা · তেজগাঁও', en:'Dhaka · Tejgaon'}, area:'dhaka', employees:'১৩,০০০+', employeesEn:'13,000+', openJobs:22, rating:4.2, reviews:1840, founded:1992, verified:true, hiring:'open', tagline:{bn:'কনজিউমার গুডস, ফার্মা ও কৃষি', en:'Consumer goods, pharma & agriculture'}, perks:['PF','Health','Lunch']},
  { id:16, name:{bn:'Grameen Bank', en:'Grameen Bank'}, logo:'GB', logoBg:'#0A8F3C', industry:'finance', size:'large', loc:{bn:'ঢাকা · মিরপুর', en:'Dhaka · Mirpur'}, area:'dhaka', employees:'২২,০০০+', employeesEn:'22,000+', openJobs:6, rating:4.6, reviews:980, founded:1983, verified:true, hiring:'open', tagline:{bn:'মাইক্রোফাইন্যান্স পাইওনিয়ার', en:'Microfinance pioneer'}, perks:['PF','Health','Loans']},
  { id:17, name:{bn:'Sheba.xyz', en:'Sheba.xyz'}, logo:'Sh', logoBg:'#19B5FE', industry:'tech', size:'mid', loc:{bn:'ঢাকা · বনানী', en:'Dhaka · Banani'}, area:'dhaka', employees:'৩০০+', employeesEn:'300+', openJobs:10, rating:4.3, reviews:220, founded:2016, verified:true, hiring:'open', tagline:{bn:'বাড়ির সকল সেবা এক জায়গায়', en:'All home services in one place'}, perks:['WFH','Health','Stock']},
  { id:18, name:{bn:'Square Pharma', en:'Square Pharmaceuticals'}, logo:'Sq', logoBg:'#0E76BC', industry:'pharma', size:'large', loc:{bn:'ঢাকা · মহাখালী', en:'Dhaka · Mohakhali'}, area:'dhaka', employees:'৮,৫০০+', employeesEn:'8,500+', openJobs:13, rating:4.4, reviews:1620, founded:1958, verified:true, hiring:'open', tagline:{bn:'বাংলাদেশের শীর্ষ ফার্মাসিউটিক্যাল কোম্পানি', en:'Top pharmaceutical company in Bangladesh'}, perks:['Health','PF','Bonus']},
];

const INDUSTRIES = [
  {id:'all', bn:'সব ইন্ডাস্ট্রি', en:'All Industries', icon:'🏢'},
  {id:'tech', bn:'টেক', en:'Tech', icon:'💻'},
  {id:'fintech', bn:'ফিনটেক', en:'Fintech', icon:'💸'},
  {id:'finance', bn:'ব্যাংকিং', en:'Banking', icon:'🏦'},
  {id:'telecom', bn:'টেলিকম', en:'Telecom', icon:'📡'},
  {id:'ecommerce', bn:'ই-কমার্স', en:'E-commerce', icon:'🛍️'},
  {id:'edtech', bn:'এডটেক', en:'EdTech', icon:'🎓'},
  {id:'foodtech', bn:'ফুডটেক', en:'FoodTech', icon:'🍔'},
  {id:'agritech', bn:'অ্যাগ্রিটেক', en:'AgriTech', icon:'🌾'},
  {id:'pharma', bn:'ফার্মা', en:'Pharma', icon:'💊'},
  {id:'manufacturing', bn:'উৎপাদন', en:'Manufacturing', icon:'🏭'},
];

const SIZES = [
  {id:'all', bn:'সব সাইজ', en:'All sizes'},
  {id:'startup', bn:'স্টার্টআপ (১-৫০)', en:'Startup (1-50)'},
  {id:'mid', bn:'মিড (৫০-১০০০)', en:'Mid (50-1000)'},
  {id:'large', bn:'বড় (১০০০+)', en:'Large (1000+)'},
];

const AREAS = [
  {id:'all', bn:'সব এলাকা', en:'All Areas'},
  {id:'dhaka', bn:'ঢাকা', en:'Dhaka'},
  {id:'chattogram', bn:'চট্টগ্রাম', en:'Chattogram'},
  {id:'sylhet', bn:'সিলেট', en:'Sylhet'},
  {id:'remote', bn:'রিমোট', en:'Remote'},
];

const HIRING = [
  {id:'all', bn:'সব', en:'All'},
  {id:'active', bn:'অ্যাক্টিভ হায়ারিং', en:'Active hiring'},
  {id:'open', bn:'ওপেন পজিশন', en:'Open positions'},
];

// =================== HERO ===================
function CompaniesHero({ q, setQ, lang }) {
  const stats = [
    { n:'১,৮৪০+', nEn:'1,840+', l:{bn:'যাচাইকৃত কোম্পানি', en:'Verified companies'} },
    { n:'৪২k+', nEn:'42K+', l:{bn:'লাইভ চাকরি', en:'Live jobs'} },
    { n:'৯৬%', nEn:'96%', l:{bn:'রিভিউ স্কোর', en:'Review score'} },
  ];
  return (
    <section className="cmp-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 cmp-hero-inner">
        <div className="srch-eyebrow">
          <span className="srch-pulse"></span>
          <span className="t-bn">বাংলাদেশের শীর্ষ কর্মস্থল</span>
          <span className="t-en">Top workplaces in Bangladesh</span>
        </div>
        <h1 className="srch-title">
          <span className="t-bn">আপনার পরবর্তী <em className="srch-rotate">কোম্পানি</em> খুঁজুন</span>
          <span className="t-en">Find your next <em className="srch-rotate">workplace</em></span>
        </h1>
        <p className="cmp-hero-sub">
          <span className="t-bn">১,৮৪০+ যাচাইকৃত কোম্পানি · কর্মীদের রিভিউ · বেতন তথ্য · কালচার ইনসাইট</span>
          <span className="t-en">1,840+ verified employers · employee reviews · salary data · culture insights</span>
        </p>
        <div className="srch-bar cmp-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'?'কোম্পানির নাম, ইন্ডাস্ট্রি বা স্কিল...':'Company name, industry, or skill...'}
            />
          </div>
          <button className="srch-bar-btn">
            <span className="t-bn">খুঁজুন</span>
            <span className="t-en">Search</span>
            {I.arrowRight}
          </button>
        </div>
        <div className="cmp-hero-stats">
          {stats.map((s,i) => (
            <div key={i} className="cmp-hero-stat">
              <div className="cmp-hero-stat-num">
                <span className="t-bn">{s.n}</span>
                <span className="t-en">{s.nEn}</span>
              </div>
              <div className="cmp-hero-stat-label">
                <span className="t-bn">{s.l.bn}</span>
                <span className="t-en">{s.l.en}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// =================== INDUSTRY CHIPS ===================
function IndustryChips({ value, onChange, lang, counts }) {
  return (
    <div className="cmp-industries">
      <div className="container">
        <div className="cmp-industries-scroll">
          {INDUSTRIES.map(ind => (
            <button
              key={ind.id}
              className={'cmp-ind-chip' + (value === ind.id ? ' is-on' : '')}
              onClick={() => onChange(ind.id)}
            >
              <span className="cmp-ind-icon">{ind.icon}</span>
              <span className="t-bn">{ind.bn}</span>
              <span className="t-en">{ind.en}</span>
              <span className="cmp-ind-count">{counts[ind.id] || 0}</span>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

// =================== FILTERS ===================
function CompanyFilters({ filters, setFilters, lang, count }) {
  const update = (k,v) => setFilters(p => ({...p, [k]: v}));
  const reset = () => setFilters({ industry:'all', size:'all', area:'all', hiring:'all', sort:'top' });
  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">companies</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'?'কোম্পানি সাইজ':'Company size'} opts={SIZES} value={filters.size} onChange={v=>update('size',v)} lang={lang} />
      <FilterGroup label={lang==='bn'?'এলাকা':'Area'} opts={AREAS} value={filters.area} onChange={v=>update('area',v)} lang={lang} />
      <FilterGroup label={lang==='bn'?'হায়ারিং স্ট্যাটাস':'Hiring status'} opts={HIRING} value={filters.hiring} onChange={v=>update('hiring',v)} lang={lang} />

      <div className="srch-fg">
        <div className="srch-fg-label">
          <span className="t-bn">সর্বনিম্ন রেটিং</span>
          <span className="t-en">Min rating</span>
        </div>
        <div className="cmp-rating-display">
          <span>{'⭐'.repeat(Math.max(1, Math.round(filters.rating || 0)))}</span>
          <strong>{(filters.rating || 0).toFixed(1)}+</strong>
        </div>
        <input
          type="range" min="0" max="5" step="0.5"
          value={filters.rating || 0}
          onChange={e=>update('rating', parseFloat(e.target.value))}
          className="srch-salary-slider"
        />
        <div className="srch-salary-marks">
          <span>0</span><span>2.5</span><span>5</span>
        </div>
      </div>

      <div className="srch-ai-card">
        <div className="srch-ai-spark">{I.spark}</div>
        <div className="srch-ai-text">
          <div className="srch-ai-title">
            <span className="t-bn">AI কালচার ম্যাচ</span>
            <span className="t-en">AI Culture match</span>
          </div>
          <div className="srch-ai-sub">
            <span className="t-bn">আপনার মূল্যবোধ অনুযায়ী</span>
            <span className="t-en">Aligned to your values</span>
          </div>
        </div>
        <label className="srch-ai-toggle">
          <input type="checkbox" defaultChecked />
          <span></span>
        </label>
      </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>
  );
}

// =================== COMPANY CARD ===================
function CompanyCard({ co, lang, followed, onFollow }) {
  return (
    <article className={'cmp-card' + (co.featured ? ' is-featured' : '')}>
      {co.featured && <div className="srch-card-rib"><span>{I.flame} {lang==='bn'?'ফিচার্ড':'Featured'}</span></div>}
      <div className="cmp-card-cover" style={{background: `linear-gradient(135deg, ${co.logoBg}26, ${co.logoBg}0a)`}}></div>
      <div className="cmp-card-body">
        <div className="cmp-card-head">
          <div className="cmp-card-logo" style={{background: co.logoBg}}>{co.logo}</div>
          <button className={'cmp-card-follow' + (followed ? ' is-on' : '')} onClick={onFollow}>
            {followed ? I.check : '+'}
            <span className="t-bn">{followed ? 'ফলোড' : 'ফলো'}</span>
            <span className="t-en">{followed ? 'Following' : 'Follow'}</span>
          </button>
        </div>
        <h3 className="cmp-card-name">
          <span className="t-bn">{co.name.bn}</span>
          <span className="t-en">{co.name.en}</span>
          {co.verified && <span className="srch-card-verified" title="Verified">{I.check}</span>}
        </h3>
        <p className="cmp-card-tag">
          <span className="t-bn">{co.tagline.bn}</span>
          <span className="t-en">{co.tagline.en}</span>
        </p>
        <div className="cmp-card-meta">
          <div className="cmp-card-meta-item">
            {I.pin}
            <span className="t-bn">{co.loc.bn}</span>
            <span className="t-en">{co.loc.en}</span>
          </div>
          <div className="cmp-card-meta-item">
            {I.users}
            <span className="t-bn">{co.employees}</span>
            <span className="t-en">{co.employeesEn}</span>
          </div>
        </div>
        <div className="cmp-card-perks">
          {co.perks.slice(0,4).map((p,i) => <span key={i} className="cmp-card-perk">{p}</span>)}
        </div>
        <div className="cmp-card-bottom">
          <div className="cmp-card-rating">
            <span className="cmp-card-stars">⭐</span>
            <strong>{co.rating}</strong>
            <span className="cmp-card-reviews">({co.reviews.toLocaleString()})</span>
          </div>
          <div className="cmp-card-jobs" data-status={co.hiring}>
            <span className="cmp-card-jobs-num">{co.openJobs}</span>
            <span className="t-bn">ওপেন জব</span>
            <span className="t-en">open jobs</span>
            {co.urgent && <span className="cmp-card-urgent">URGENT</span>}
          </div>
        </div>
        <div className="cmp-card-actions">
          <a href="company-profile.html" className="btn btn-ghost">
            <span className="t-bn">প্রোফাইল দেখুন</span>
            <span className="t-en">View profile</span>
          </a>
          <a href={'job-search.html?co=' + encodeURIComponent(co.name.en)} className="btn btn-ink">
            <span className="t-bn">{co.openJobs} টি জব</span>
            <span className="t-en">{co.openJobs} jobs</span>
            {I.arrowRight}
          </a>
        </div>
      </div>
    </article>
  );
}

// =================== APP ===================
function App() {
  const [lang, setLang] = window.usePageLang('bn');
  const [q, setQ] = useState('');
  const [filters, setFilters] = useState({ industry:'all', size:'all', area:'all', hiring:'all', rating:0, sort:'top' });
  const [followed, setFollowed] = useState(new Set([2, 9]));

  const counts = useMemo(() => {
    const c = { all: ALL_COMPANIES.length };
    INDUSTRIES.forEach(ind => {
      if (ind.id !== 'all') c[ind.id] = ALL_COMPANIES.filter(co => co.industry === ind.id).length;
    });
    return c;
  }, []);

  const filtered = useMemo(() => {
    let r = ALL_COMPANIES.filter(co => {
      if (q) {
        const ql = q.toLowerCase();
        if (!co.name.bn.toLowerCase().includes(ql) && !co.name.en.toLowerCase().includes(ql) && !co.industry.includes(ql)) return false;
      }
      if (filters.industry !== 'all' && co.industry !== filters.industry) return false;
      if (filters.size !== 'all' && co.size !== filters.size) return false;
      if (filters.area !== 'all' && co.area !== filters.area) return false;
      if (filters.hiring !== 'all' && co.hiring !== filters.hiring) return false;
      if (filters.rating && co.rating < filters.rating) return false;
      return true;
    });
    if (filters.sort === 'top') r.sort((a,b) => (b.featured?1:0) - (a.featured?1:0) || b.rating - a.rating);
    if (filters.sort === 'jobs') r.sort((a,b) => b.openJobs - a.openJobs);
    if (filters.sort === 'rating') r.sort((a,b) => b.rating - a.rating);
    return r;
  }, [q, filters]);

  const toggleFollow = (id) => {
    setFollowed(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="companies" />
      <CompaniesHero q={q} setQ={setQ} lang={lang} />
      <IndustryChips value={filters.industry} onChange={v => setFilters(f => ({...f, industry: v}))} lang={lang} counts={counts} />

      <section className="srch-results">
        <div className="container srch-results-grid">
          <CompanyFilters 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">companies 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:'top', bn:'টপ', en:'Top'},
                    {id:'jobs', bn:'বেশি জব', en:'Most jobs'},
                    {id:'rating', bn:'রেটিং', en:'Rating'},
                  ].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 companies 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="cmp-grid">
                {filtered.map(co => (
                  <CompanyCard key={co.id} co={co} lang={lang} followed={followed.has(co.id)} onFollow={()=>toggleFollow(co.id)} />
                ))}
              </div>
            )}

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

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

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