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

// =================== SALARY DATA ===================
// Base monthly salary in BDT thousands (k). Multipliers applied for level + location.
const ROLES = [
  { id:'product-designer', bn:'প্রোডাক্ট ডিজাইনার', en:'Product Designer', cat:'design', base:90, growth:18 },
  { id:'frontend-dev', bn:'ফ্রন্টএন্ড ডেভেলপার', en:'Frontend Developer', cat:'tech', base:80, growth:22 },
  { id:'backend-dev', bn:'ব্যাকএন্ড ডেভেলপার', en:'Backend Developer', cat:'tech', base:90, growth:24 },
  { id:'fullstack-dev', bn:'ফুলস্ট্যাক ডেভেলপার', en:'Full Stack Developer', cat:'tech', base:100, growth:25 },
  { id:'mobile-dev', bn:'মোবাইল অ্যাপ ডেভেলপার', en:'Mobile App Developer', cat:'tech', base:85, growth:20 },
  { id:'data-scientist', bn:'ডেটা সায়েন্টিস্ট', en:'Data Scientist', cat:'data', base:120, growth:28 },
  { id:'data-analyst', bn:'ডেটা অ্যানালিস্ট', en:'Data Analyst', cat:'data', base:65, growth:18 },
  { id:'devops', bn:'DevOps ইঞ্জিনিয়ার', en:'DevOps Engineer', cat:'tech', base:130, growth:26 },
  { id:'ml-engineer', bn:'ML ইঞ্জিনিয়ার', en:'ML Engineer', cat:'data', base:140, growth:32 },
  { id:'product-manager', bn:'প্রোডাক্ট ম্যানেজার', en:'Product Manager', cat:'product', base:130, growth:22 },
  { id:'project-manager', bn:'প্রজেক্ট ম্যানেজার', en:'Project Manager', cat:'product', base:90, growth:14 },
  { id:'ux-researcher', bn:'UX রিসার্চার', en:'UX Researcher', cat:'design', base:75, growth:16 },
  { id:'graphic-designer', bn:'গ্রাফিক ডিজাইনার', en:'Graphic Designer', cat:'design', base:40, growth:10 },
  { id:'qa-engineer', bn:'QA ইঞ্জিনিয়ার', en:'QA Engineer', cat:'tech', base:55, growth:14 },
  { id:'digital-marketer', bn:'ডিজিটাল মার্কেটার', en:'Digital Marketer', cat:'marketing', base:55, growth:16 },
  { id:'content-writer', bn:'কন্টেন্ট রাইটার', en:'Content Writer', cat:'marketing', base:35, growth:8 },
  { id:'hr-bp', bn:'HR বিজনেস পার্টনার', en:'HR Business Partner', cat:'hr', base:80, growth:12 },
  { id:'finance-analyst', bn:'ফাইন্যান্স অ্যানালিস্ট', en:'Finance Analyst', cat:'finance', base:70, growth:14 },
  { id:'sales-manager', bn:'সেলস ম্যানেজার', en:'Sales Manager', cat:'sales', base:75, growth:18 },
  { id:'customer-success', bn:'কাস্টমার সাকসেস', en:'Customer Success', cat:'support', base:50, growth:12 },
];

const LEVELS = [
  { id:'junior', bn:'জুনিয়র', en:'Junior', sub:{bn:'০-২ বছর', en:'0-2 years'}, mult:0.55 },
  { id:'mid', bn:'মিড', en:'Mid', sub:{bn:'২-৫ বছর', en:'2-5 years'}, mult:1.0 },
  { id:'senior', bn:'সিনিয়র', en:'Senior', sub:{bn:'৫-৮ বছর', en:'5-8 years'}, mult:1.55 },
  { id:'lead', bn:'লিড', en:'Lead', sub:{bn:'৮+ বছর', en:'8+ years'}, mult:2.1 },
];

const LOCATIONS = [
  { id:'dhaka', bn:'ঢাকা', en:'Dhaka', mult:1.0 },
  { id:'chattogram', bn:'চট্টগ্রাম', en:'Chattogram', mult:0.85 },
  { id:'sylhet', bn:'সিলেট', en:'Sylhet', mult:0.75 },
  { id:'khulna', bn:'খুলনা', en:'Khulna', mult:0.72 },
  { id:'rajshahi', bn:'রাজশাহী', en:'Rajshahi', mult:0.70 },
  { id:'remote', bn:'রিমোট (গ্লোবাল)', en:'Remote (global)', mult:1.35 },
];

const INDUSTRY_BANDS = [
  { id:'fintech', bn:'ফিনটেক', en:'Fintech', avg:115, growth:24, color:'#F58220' },
  { id:'tech', bn:'টেক / SaaS', en:'Tech / SaaS', avg:105, growth:22, color:'#4357A0' },
  { id:'telecom', bn:'টেলিকম', en:'Telecom', avg:95, growth:14, color:'#0E76BC' },
  { id:'banking', bn:'ব্যাংকিং', en:'Banking', avg:85, growth:11, color:'#003E70' },
  { id:'ecommerce', bn:'ই-কমার্স', en:'E-commerce', avg:75, growth:18, color:'#E07A52' },
  { id:'edtech', bn:'এডটেক', en:'EdTech', avg:70, growth:20, color:'#10B981' },
  { id:'pharma', bn:'ফার্মা', en:'Pharma', avg:80, growth:12, color:'#7E5E9F' },
  { id:'manufacturing', bn:'উৎপাদন', en:'Manufacturing', avg:55, growth:9, color:'#5C6987' },
];

const TOP_PAYING = [
  { rank:1, role:{bn:'ML ইঞ্জিনিয়ার', en:'ML Engineer'}, salary:'২.৪–৩.৮ লাখ', salaryEn:'240k–380k', growth:32 },
  { rank:2, role:{bn:'DevOps ইঞ্জিনিয়ার', en:'DevOps Engineer'}, salary:'২–৩.২ লাখ', salaryEn:'200k–320k', growth:26 },
  { rank:3, role:{bn:'প্রোডাক্ট ম্যানেজার', en:'Product Manager'}, salary:'১.৮–৩ লাখ', salaryEn:'180k–300k', growth:22 },
  { rank:4, role:{bn:'ডেটা সায়েন্টিস্ট', en:'Data Scientist'}, salary:'১.৭–২.৮ লাখ', salaryEn:'170k–280k', growth:28 },
  { rank:5, role:{bn:'ফুলস্ট্যাক ডেভেলপার', en:'Full Stack Developer'}, salary:'১.৪–২.৫ লাখ', salaryEn:'140k–250k', growth:25 },
  { rank:6, role:{bn:'সিকিউরিটি ইঞ্জিনিয়ার', en:'Security Engineer'}, salary:'১.৬–২.৬ লাখ', salaryEn:'160k–260k', growth:24 },
  { rank:7, role:{bn:'iOS ডেভেলপার', en:'iOS Developer'}, salary:'১.৩–২.২ লাখ', salaryEn:'130k–220k', growth:20 },
  { rank:8, role:{bn:'প্রোডাক্ট ডিজাইনার', en:'Product Designer'}, salary:'১.২–২ লাখ', salaryEn:'120k–200k', growth:18 },
];

const COMPANIES_PAY = [
  { name:{bn:'Pathao', en:'Pathao'}, logo:'P', logoBg:'#E81E2C', avg:'১.৬ লাখ', avgEn:'160k', perks:'Stock + Health' },
  { name:{bn:'bKash', en:'bKash'}, logo:'b', logoBg:'#E2126B', avg:'১.৭ লাখ', avgEn:'170k', perks:'Bonus + PF' },
  { name:{bn:'10 Minute School', en:'10 Minute School'}, logo:'10', logoBg:'#FB923C', avg:'১.৩ লাখ', avgEn:'130k', perks:'WFH + Stock' },
  { name:{bn:'ShopUp', en:'ShopUp'}, logo:'S', logoBg:'#F59E0B', avg:'১.৫ লাখ', avgEn:'150k', perks:'Stock + WFH' },
  { name:{bn:'Brac Bank', en:'Brac Bank'}, logo:'BB', logoBg:'#003E70', avg:'১.১ লাখ', avgEn:'110k', perks:'PF + Loans' },
  { name:{bn:'Grameenphone', en:'Grameenphone'}, logo:'g', logoBg:'#0066B2', avg:'১.৪ লাখ', avgEn:'140k', perks:'Stock + Lunch' },
];

const TRENDS = [
  { year:'2020', val:62 },
  { year:'2021', val:71 },
  { year:'2022', val:82 },
  { year:'2023', val:94 },
  { year:'2024', val:108 },
  { year:'2025', val:124 },
];

// =================== HERO ===================
function SalaryHero({ lang }) {
  const stats = [
    { n:'১,২৫,০০০+', nEn:'125,000+', l:{bn:'বেতন রিপোর্ট', en:'Salary reports'} },
    { n:'৩৪০+', nEn:'340+', l:{bn:'রোল কভার', en:'Roles covered'} },
    { n:'৯৭%', nEn:'97%', l:{bn:'নির্ভুলতা', en:'Accuracy'} },
  ];
  return (
    <section className="sal-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 sal-hero-inner">
        <div className="srch-eyebrow">
          <span className="srch-pulse"></span>
          <span className="t-bn">২০২৫ Q1 রিপোর্ট · লাইভ ডেটা</span>
          <span className="t-en">2025 Q1 report · live data</span>
        </div>
        <h1 className="srch-title">
          <span className="t-bn">আপনার বেতন <em className="srch-rotate">কত হওয়া উচিত?</em></span>
          <span className="t-en">What you <em className="srch-rotate">should earn</em></span>
        </h1>
        <p className="sal-hero-sub">
          <span className="t-bn">বাংলাদেশের সবচেয়ে বড় বেতন ডেটাবেইজ। ১,২৫,০০০+ যাচাইকৃত রিপোর্ট, ৩৪০+ রোল।</span>
          <span className="t-en">Bangladesh's largest salary database. 125K+ verified reports across 340+ roles.</span>
        </p>
        <div className="sal-hero-stats">
          {stats.map((s,i) => (
            <div key={i} className="sal-hero-stat">
              <div className="sal-hero-stat-num">
                <span className="t-bn">{s.n}</span>
                <span className="t-en">{s.nEn}</span>
              </div>
              <div className="sal-hero-stat-label">
                <span className="t-bn">{s.l.bn}</span>
                <span className="t-en">{s.l.en}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// =================== CALCULATOR ===================
function SalaryCalculator({ lang }) {
  const [role, setRole] = useState(ROLES[0].id);
  const [level, setLevel] = useState('mid');
  const [loc, setLoc] = useState('dhaka');
  const [search, setSearch] = useState('');

  const filteredRoles = useMemo(() => {
    if (!search) return ROLES;
    const q = search.toLowerCase();
    return ROLES.filter(r => r.bn.includes(search) || r.en.toLowerCase().includes(q));
  }, [search]);

  const calc = useMemo(() => {
    const r = ROLES.find(x => x.id === role) || ROLES[0];
    const lv = LEVELS.find(x => x.id === level);
    const lc = LOCATIONS.find(x => x.id === loc);
    const base = r.base * lv.mult * lc.mult;
    const min = Math.round(base * 0.85);
    const avg = Math.round(base);
    const max = Math.round(base * 1.30);
    return { min, avg, max, growth: r.growth, role:r };
  }, [role, level, loc]);

  const fmt = (k) => {
    if (k >= 100) return `${(k/100).toFixed(1)} লাখ`;
    return `${k}k`;
  };
  const fmtEn = (k) => `৳${k}k`;

  return (
    <section className="sal-calc-section">
      <div className="container">
        <div className="sal-section-head">
          <div className="sal-section-eyebrow">
            <span className="t-bn">স্যালারি ক্যালকুলেটর</span>
            <span className="t-en">Salary calculator</span>
          </div>
          <h2 className="sal-section-title">
            <span className="t-bn">আপনার রেঞ্জ জানুন</span>
            <span className="t-en">Know your range</span>
          </h2>
        </div>

        <div className="sal-calc">
          <div className="sal-calc-controls">
            <div className="sal-calc-field">
              <label>
                <span className="t-bn">রোল</span>
                <span className="t-en">Role</span>
              </label>
              <div className="sal-calc-search">
                <span className="sal-calc-search-icon">{I.search}</span>
                <input
                  value={search}
                  onChange={e=>setSearch(e.target.value)}
                  placeholder={lang==='bn'?'রোল খুঁজুন...':'Search role...'}
                />
              </div>
              <div className="sal-calc-roles">
                {filteredRoles.slice(0,8).map(r => (
                  <button
                    key={r.id}
                    className={'sal-calc-role' + (role === r.id ? ' is-on' : '')}
                    onClick={()=>setRole(r.id)}
                  >
                    <span className="t-bn">{r.bn}</span>
                    <span className="t-en">{r.en}</span>
                  </button>
                ))}
              </div>
            </div>

            <div className="sal-calc-field">
              <label>
                <span className="t-bn">এক্সপেরিয়েন্স লেভেল</span>
                <span className="t-en">Experience level</span>
              </label>
              <div className="sal-calc-levels">
                {LEVELS.map(lv => (
                  <button
                    key={lv.id}
                    className={'sal-calc-level' + (level === lv.id ? ' is-on' : '')}
                    onClick={()=>setLevel(lv.id)}
                  >
                    <div className="sal-calc-level-name">
                      <span className="t-bn">{lv.bn}</span>
                      <span className="t-en">{lv.en}</span>
                    </div>
                    <div className="sal-calc-level-sub">
                      <span className="t-bn">{lv.sub.bn}</span>
                      <span className="t-en">{lv.sub.en}</span>
                    </div>
                  </button>
                ))}
              </div>
            </div>

            <div className="sal-calc-field">
              <label>
                <span className="t-bn">লোকেশন</span>
                <span className="t-en">Location</span>
              </label>
              <div className="sal-calc-locs">
                {LOCATIONS.map(lc => (
                  <button
                    key={lc.id}
                    className={'sal-calc-loc' + (loc === lc.id ? ' is-on' : '')}
                    onClick={()=>setLoc(lc.id)}
                  >
                    <span className="t-bn">{lc.bn}</span>
                    <span className="t-en">{lc.en}</span>
                  </button>
                ))}
              </div>
            </div>
          </div>

          {/* Result panel */}
          <div className="sal-calc-result">
            <div className="sal-calc-result-head">
              <div className="sal-calc-result-label">
                <span className="t-bn">আপনার বেতন রেঞ্জ</span>
                <span className="t-en">Your salary range</span>
              </div>
              <div className="sal-calc-result-meta">
                <span className="t-bn">{calc.role.bn} · মাসিক</span>
                <span className="t-en">{calc.role.en} · monthly</span>
              </div>
            </div>

            <div className="sal-calc-numbers">
              <div className="sal-calc-num-block">
                <div className="sal-calc-num-label">
                  <span className="t-bn">সর্বনিম্ন</span>
                  <span className="t-en">Min</span>
                </div>
                <div className="sal-calc-num-val">
                  <span className="t-bn">৳{fmt(calc.min)}</span>
                  <span className="t-en">{fmtEn(calc.min)}</span>
                </div>
              </div>
              <div className="sal-calc-num-block sal-calc-num-avg">
                <div className="sal-calc-num-label">
                  <span className="t-bn">গড়</span>
                  <span className="t-en">Median</span>
                </div>
                <div className="sal-calc-num-val">
                  <span className="t-bn">৳{fmt(calc.avg)}</span>
                  <span className="t-en">{fmtEn(calc.avg)}</span>
                </div>
              </div>
              <div className="sal-calc-num-block">
                <div className="sal-calc-num-label">
                  <span className="t-bn">সর্বোচ্চ</span>
                  <span className="t-en">Max</span>
                </div>
                <div className="sal-calc-num-val">
                  <span className="t-bn">৳{fmt(calc.max)}</span>
                  <span className="t-en">{fmtEn(calc.max)}</span>
                </div>
              </div>
            </div>

            {/* Range bar */}
            <div className="sal-calc-bar-wrap">
              <div className="sal-calc-bar">
                <div className="sal-calc-bar-fill" style={{width:'80%'}}></div>
                <div className="sal-calc-bar-marker" style={{left:'50%'}}>
                  <span>৳{fmt(calc.avg)}</span>
                </div>
              </div>
              <div className="sal-calc-bar-marks">
                <span>৳{fmt(calc.min)}</span>
                <span>৳{fmt(calc.max)}</span>
              </div>
            </div>

            <div className="sal-calc-insights">
              <div className="sal-calc-insight">
                <div className="sal-calc-insight-icon">{I.flame}</div>
                <div>
                  <strong>+{calc.growth}%</strong>
                  <span className="t-bn"> ইয়ার-অন-ইয়ার গ্রোথ</span>
                  <span className="t-en"> YoY growth</span>
                </div>
              </div>
              <div className="sal-calc-insight">
                <div className="sal-calc-insight-icon">{I.users}</div>
                <div>
                  <strong>{Math.round(calc.avg / 4)} টি</strong>
                  <span className="t-bn"> সাম্প্রতিক রিপোর্ট</span>
                  <span className="t-en"> recent reports</span>
                </div>
              </div>
            </div>

            <a href={`job-search.html?q=${encodeURIComponent(calc.role.en)}`} className="btn btn-ink sal-calc-cta">
              <span className="t-bn">এই রোলে চাকরি দেখুন</span>
              <span className="t-en">See jobs in this role</span>
              {I.arrowRight}
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// =================== TOP PAYING ROLES ===================
function TopPayingRoles({ lang }) {
  return (
    <section className="sal-top-section">
      <div className="container">
        <div className="sal-section-head">
          <div className="sal-section-eyebrow">
            <span className="t-bn">সর্বোচ্চ বেতনের রোল</span>
            <span className="t-en">Top paying roles</span>
          </div>
          <h2 className="sal-section-title">
            <span className="t-bn">কোন রোল সবচেয়ে বেশি বেতন দিচ্ছে?</span>
            <span className="t-en">Which roles pay the most?</span>
          </h2>
        </div>
        <div className="sal-top-grid">
          {TOP_PAYING.map(r => (
            <div key={r.rank} className="sal-top-card">
              <div className="sal-top-rank">#{r.rank}</div>
              <div className="sal-top-body">
                <div className="sal-top-role">
                  <span className="t-bn">{r.role.bn}</span>
                  <span className="t-en">{r.role.en}</span>
                </div>
                <div className="sal-top-pay">
                  <span className="t-bn">৳{r.salary}</span>
                  <span className="t-en">৳{r.salaryEn}</span>
                </div>
                <div className="sal-top-growth">
                  <span className="sal-top-growth-arrow">↗</span>
                  +{r.growth}%
                  <span className="t-bn"> YoY</span>
                  <span className="t-en"> YoY</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// =================== INDUSTRY COMPARE ===================
function IndustryCompare({ lang }) {
  const max = Math.max(...INDUSTRY_BANDS.map(b => b.avg));
  return (
    <section className="sal-ind-section">
      <div className="container">
        <div className="sal-section-head">
          <div className="sal-section-eyebrow">
            <span className="t-bn">ইন্ডাস্ট্রি তুলনা</span>
            <span className="t-en">Industry comparison</span>
          </div>
          <h2 className="sal-section-title">
            <span className="t-bn">কোন ইন্ডাস্ট্রি সবচেয়ে বেশি দেয়?</span>
            <span className="t-en">Which industry pays best?</span>
          </h2>
        </div>
        <div className="sal-ind-card">
          <div className="sal-ind-rows">
            {INDUSTRY_BANDS.map(b => (
              <div key={b.id} className="sal-ind-row">
                <div className="sal-ind-name">
                  <span className="t-bn">{b.bn}</span>
                  <span className="t-en">{b.en}</span>
                </div>
                <div className="sal-ind-bar-wrap">
                  <div className="sal-ind-bar" style={{width: `${(b.avg/max)*100}%`, background: b.color}}>
                    <span>৳{b.avg}k</span>
                  </div>
                </div>
                <div className="sal-ind-growth">
                  <span className="sal-ind-growth-arrow">↗</span>
                  +{b.growth}%
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// =================== TOP COMPANIES ===================
function TopCompanies({ lang }) {
  return (
    <section className="sal-co-section">
      <div className="container">
        <div className="sal-section-head">
          <div className="sal-section-eyebrow">
            <span className="t-bn">সর্বোচ্চ বেতনের কোম্পানি</span>
            <span className="t-en">Top paying companies</span>
          </div>
          <h2 className="sal-section-title">
            <span className="t-bn">এই কোম্পানিগুলো সবচেয়ে বেশি দেয়</span>
            <span className="t-en">These companies pay the best</span>
          </h2>
        </div>
        <div className="sal-co-grid">
          {COMPANIES_PAY.map((c,i) => (
            <a key={i} href="company-profile.html" className="sal-co-card">
              <div className="sal-co-logo" style={{background: c.logoBg}}>{c.logo}</div>
              <div className="sal-co-name">
                <span className="t-bn">{c.name.bn}</span>
                <span className="t-en">{c.name.en}</span>
              </div>
              <div className="sal-co-avg">
                <span className="sal-co-avg-label">
                  <span className="t-bn">গড় বেতন</span>
                  <span className="t-en">Avg salary</span>
                </span>
                <span className="sal-co-avg-num">
                  <span className="t-bn">৳{c.avg}</span>
                  <span className="t-en">৳{c.avgEn}</span>
                </span>
              </div>
              <div className="sal-co-perks">{c.perks}</div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// =================== TREND CHART ===================
function TrendChart({ lang }) {
  const max = Math.max(...TRENDS.map(t => t.val));
  return (
    <section className="sal-trend-section">
      <div className="container">
        <div className="sal-section-head">
          <div className="sal-section-eyebrow">
            <span className="t-bn">গত ৫ বছরের ট্রেন্ড</span>
            <span className="t-en">5-year trend</span>
          </div>
          <h2 className="sal-section-title">
            <span className="t-bn">গড় টেক বেতন বছরে ১৪% বেড়েছে</span>
            <span className="t-en">Avg tech salary up 14% per year</span>
          </h2>
        </div>
        <div className="sal-trend-card">
          <div className="sal-trend-bars">
            {TRENDS.map((t,i) => (
              <div key={i} className="sal-trend-bar-wrap">
                <div className="sal-trend-val">৳{t.val}k</div>
                <div className="sal-trend-bar" style={{height: `${(t.val/max)*100}%`}}></div>
                <div className="sal-trend-year">{t.year}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// =================== CTA ===================
function SalaryCTA({ lang }) {
  return (
    <section className="sal-cta-section">
      <div className="container">
        <div className="sal-cta">
          <div className="sal-cta-content">
            <div className="sal-cta-icon">{I.spark}</div>
            <h2 className="sal-cta-title">
              <span className="t-bn">আপনার বেতন রিপোর্ট শেয়ার করুন</span>
              <span className="t-en">Share your salary report</span>
            </h2>
            <p className="sal-cta-sub">
              <span className="t-bn">এনোনিমাস। ৯০ সেকেন্ডে শেষ। বাংলাদেশকে ফেয়ার পে দিতে সাহায্য করুন।</span>
              <span className="t-en">Anonymous. 90 seconds. Help build fair pay in Bangladesh.</span>
            </p>
            <div className="sal-cta-actions">
              <a href="sign-in.html" className="btn btn-ink btn-lg">
                <span className="t-bn">রিপোর্ট জমা দিন</span>
                <span className="t-en">Submit a report</span>
                {I.arrowRight}
              </a>
              <a href="job-search.html" className="btn btn-ghost btn-lg">
                <span className="t-bn">চাকরি খুঁজুন</span>
                <span className="t-en">Browse jobs</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// =================== APP ===================
function App() {
  const [lang, setLang] = window.usePageLang('bn');
  return (
    <>
      <PageTopBar lang={lang} setLang={setLang} />
      <PageHeader active="salary" />
      <SalaryHero lang={lang} />
      <SalaryCalculator lang={lang} />
      <TopPayingRoles lang={lang} />
      <IndustryCompare lang={lang} />
      <TopCompanies lang={lang} />
      <TrendChart lang={lang} />
      <SalaryCTA lang={lang} />
      <PageFooter lang={lang} />
    </>
  );
}

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