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

const PATHS = [
  {
    id:'frontend', icon:'⚛️', bg:'#ECEFF8', tag:'TECH', cat:'tech',
    name:{bn:'ফ্রন্টএন্ড ডেভেলপার', en:'Frontend Developer'},
    desc:{bn:'ব্যবহারকারীর দেখা প্রতিটি বাটন, ফর্ম, ও পেজ আপনি বানাবেন। React, TypeScript এবং ডিজাইন সিস্টেমে দক্ষ হওয়া।', en:'Build every button, form, and page users see. Master React, TypeScript, and design systems.'},
    stages:[
      {n:{bn:'জুনিয়র', en:'Junior'}, yrs:'০-২'},
      {n:{bn:'মিড', en:'Mid'}, yrs:'২-৪', cur:true},
      {n:{bn:'সিনিয়র', en:'Senior'}, yrs:'৪-৭'},
      {n:{bn:'লিড / স্টাফ', en:'Lead / Staff'}, yrs:'৭+'},
    ],
    salary:{ start:'৪০k', end:'২.৫ লাখ' },
    jobs:1240,
  },
  {
    id:'backend', icon:'⚙️', bg:'#DCEAD9', tag:'TECH', cat:'tech',
    name:{bn:'ব্যাকএন্ড ডেভেলপার', en:'Backend Developer'},
    desc:{bn:'API, ডেটাবেইজ, এবং স্কেল-আপ সিস্টেম তৈরি। Node, Python বা Go-তে দক্ষ হয়ে ক্লাউড ও ডিস্ট্রিবিউটেড সিস্টেম শেখা।', en:'Build APIs, databases, and scalable systems. Master Node, Python, or Go, then dive into cloud and distributed systems.'},
    stages:[
      {n:{bn:'জুনিয়র', en:'Junior'}, yrs:'০-২', cur:true},
      {n:{bn:'মিড', en:'Mid'}, yrs:'২-৪'},
      {n:{bn:'সিনিয়র', en:'Senior'}, yrs:'৪-৭'},
      {n:{bn:'প্রিন্সিপাল', en:'Principal'}, yrs:'৭+'},
    ],
    salary:{ start:'৪৫k', end:'৩ লাখ' },
    jobs:980,
  },
  {
    id:'product-design', icon:'🎨', bg:'#FBEDE5', tag:'DESIGN', cat:'design',
    name:{bn:'প্রোডাক্ট ডিজাইনার', en:'Product Designer'},
    desc:{bn:'ব্যবহারকারী-গবেষণা থেকে শুরু করে ভিজ্যুয়াল ডিজাইন। Figma, ডিজাইন সিস্টেম, এবং প্রোডাক্ট স্ট্র্যাটেজি।', en:'From user research to visual design. Figma, design systems, and product strategy.'},
    stages:[
      {n:{bn:'জুনিয়র', en:'Junior'}, yrs:'০-২'},
      {n:{bn:'প্রোডাক্ট ডিজাইনার', en:'Product Designer'}, yrs:'২-৫', cur:true},
      {n:{bn:'সিনিয়র', en:'Senior'}, yrs:'৫-৮'},
      {n:{bn:'ডিজাইন লিড', en:'Design Lead'}, yrs:'৮+'},
    ],
    salary:{ start:'৩৫k', end:'২.২ লাখ' },
    jobs:520,
  },
  {
    id:'data-science', icon:'📊', bg:'#F5DEE2', tag:'DATA', cat:'data',
    name:{bn:'ডেটা সায়েন্টিস্ট', en:'Data Scientist'},
    desc:{bn:'Python, SQL, ML মডেল এবং স্ট্যাটিসটিক্স। ব্যবসার সমস্যা ডেটা দিয়ে সমাধান।', en:'Python, SQL, ML models, and statistics. Solve business problems with data.'},
    stages:[
      {n:{bn:'অ্যানালিস্ট', en:'Analyst'}, yrs:'০-২'},
      {n:{bn:'ডেটা সায়েন্টিস্ট', en:'Data Scientist'}, yrs:'২-৫', cur:true},
      {n:{bn:'সিনিয়র DS', en:'Senior DS'}, yrs:'৫-৮'},
      {n:{bn:'ML ইঞ্জিনিয়ার / লিড', en:'ML Engineer / Lead'}, yrs:'৮+'},
    ],
    salary:{ start:'৬০k', end:'৩.৮ লাখ' },
    jobs:380,
  },
  {
    id:'product-mgr', icon:'🚀', bg:'#FFD3A5', tag:'PRODUCT', cat:'product',
    name:{bn:'প্রোডাক্ট ম্যানেজার', en:'Product Manager'},
    desc:{bn:'কাস্টমার, ইঞ্জিনিয়ার ও ডিজাইনারের সাথে মিলে প্রোডাক্ট স্ট্র্যাটেজি ও রোডম্যাপ। ডেটা-ড্রিভেন সিদ্ধান্ত।', en:'Work with customers, engineers, and designers on product strategy and roadmap. Data-driven decisions.'},
    stages:[
      {n:{bn:'অ্যাসোসিয়েট PM', en:'Associate PM'}, yrs:'০-২'},
      {n:{bn:'প্রোডাক্ট ম্যানেজার', en:'Product Manager'}, yrs:'২-৫'},
      {n:{bn:'সিনিয়র PM', en:'Senior PM'}, yrs:'৫-৮', cur:true},
      {n:{bn:'হেড অফ প্রোডাক্ট', en:'Head of Product'}, yrs:'৮+'},
    ],
    salary:{ start:'৬৫k', end:'৩.৫ লাখ' },
    jobs:280,
  },
  {
    id:'mobile', icon:'📱', bg:'#FFEBD4', tag:'TECH', cat:'tech',
    name:{bn:'মোবাইল ডেভেলপার', en:'Mobile Developer'},
    desc:{bn:'Flutter, React Native বা নেটিভ iOS/Android — ৪০ মিলিয়ন বাংলাদেশীর হাতে অ্যাপ পৌঁছানো।', en:'Flutter, React Native, or native iOS/Android — get apps in 40M Bangladeshi hands.'},
    stages:[
      {n:{bn:'জুনিয়র', en:'Junior'}, yrs:'০-২'},
      {n:{bn:'মিড', en:'Mid'}, yrs:'২-৪', cur:true},
      {n:{bn:'সিনিয়র', en:'Senior'}, yrs:'৪-৭'},
      {n:{bn:'মোবাইল আর্কিটেক্ট', en:'Mobile Architect'}, yrs:'৭+'},
    ],
    salary:{ start:'৪২k', end:'২.৪ লাখ' },
    jobs:640,
  },
  {
    id:'devops', icon:'🛠️', bg:'#C5CCDF', tag:'TECH', cat:'tech',
    name:{bn:'DevOps ইঞ্জিনিয়ার', en:'DevOps Engineer'},
    desc:{bn:'AWS/GCP, Kubernetes, CI/CD, এবং অবজার্ভেবিলিটি। সার্ভার ডাউন না হলেই বুঝবেন কাজ ভালো হয়েছে।', en:'AWS/GCP, Kubernetes, CI/CD, and observability. If servers don\'t go down, you\'re winning.'},
    stages:[
      {n:{bn:'SysAdmin', en:'SysAdmin'}, yrs:'০-২'},
      {n:{bn:'DevOps ইঞ্জিনিয়ার', en:'DevOps Engineer'}, yrs:'২-৫', cur:true},
      {n:{bn:'সিনিয়র SRE', en:'Senior SRE'}, yrs:'৫-৮'},
      {n:{bn:'প্ল্যাটফর্ম লিড', en:'Platform Lead'}, yrs:'৮+'},
    ],
    salary:{ start:'৫৫k', end:'৩.২ লাখ' },
    jobs:280,
  },
  {
    id:'marketing', icon:'📈', bg:'#DCEAD9', tag:'GROWTH', cat:'growth',
    name:{bn:'গ্রোথ মার্কেটার', en:'Growth Marketer'},
    desc:{bn:'SEO, Meta Ads, কন্টেন্ট, ইমেইল — চ্যানেল অপ্টিমাইজ করে ROI বাড়ানো।', en:'SEO, Meta Ads, content, email — optimize channels to drive ROI.'},
    stages:[
      {n:{bn:'মার্কেটিং অ্যাসোসিয়েট', en:'Marketing Associate'}, yrs:'০-২'},
      {n:{bn:'গ্রোথ মার্কেটার', en:'Growth Marketer'}, yrs:'২-৪', cur:true},
      {n:{bn:'হেড অফ গ্রোথ', en:'Head of Growth'}, yrs:'৪-৭'},
      {n:{bn:'CMO', en:'CMO'}, yrs:'৭+'},
    ],
    salary:{ start:'৩৫k', end:'২.২ লাখ' },
    jobs:780,
  },
  {
    id:'sales', icon:'💼', bg:'#FFD3A5', tag:'SALES', cat:'sales',
    name:{bn:'B2B সেলস ম্যানেজার', en:'B2B Sales Manager'},
    desc:{bn:'এন্টারপ্রাইজ ক্লায়েন্ট ম্যানেজ, ডিল ক্লোজ, এবং রেভেনিউ গ্রোথ। কমিশনসহ বেতন।', en:'Manage enterprise clients, close deals, drive revenue. Comp includes commission.'},
    stages:[
      {n:{bn:'SDR', en:'SDR'}, yrs:'০-১'},
      {n:{bn:'AE', en:'AE'}, yrs:'১-৩'},
      {n:{bn:'সেলস ম্যানেজার', en:'Sales Manager'}, yrs:'৩-৬', cur:true},
      {n:{bn:'VP সেলস', en:'VP Sales'}, yrs:'৬+'},
    ],
    salary:{ start:'৪০k', end:'৪ লাখ+' },
    jobs:420,
  },
];

const CATS = [
  { id:'all', bn:'সব ক্যারিয়ার', en:'All careers' },
  { id:'tech', bn:'টেক', en:'Tech' },
  { id:'design', bn:'ডিজাইন', en:'Design' },
  { id:'data', bn:'ডেটা', en:'Data' },
  { id:'product', bn:'প্রোডাক্ট', en:'Product' },
  { id:'growth', bn:'গ্রোথ', en:'Growth' },
  { id:'sales', bn:'সেলস', en:'Sales' },
];

const STATS = [
  { n:'৪২+', nEn:'42+', l:{bn:'কিউরেটেড পাথ', en:'Curated paths'} },
  { n:'৬,২০০+', nEn:'6,200+', l:{bn:'লিঙ্কড জব', en:'Linked jobs'} },
  { n:'৩৪০+', nEn:'340+', l:{bn:'যাচাইকৃত কোর্স', en:'Verified courses'} },
];

function App() {
  const [lang, setLang] = window.usePageLang('bn');
  const [cat, setCat] = useState('all');
  const filtered = useMemo(() => {
    if (cat === 'all') return PATHS;
    return PATHS.filter(p => p.cat === cat);
  }, [cat]);

  return (
    <>
      <PageTopBar lang={lang} setLang={setLang} />
      <PageHeader />

      {/* Hero */}
      <section className="ftr-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 ftr-hero-inner">
          <div className="srch-eyebrow">
            <span className="srch-pulse"></span>
            <span className="t-bn">ক্যারিয়ার পাথ</span>
            <span className="t-en">Career paths</span>
          </div>
          <h1 className="srch-title">
            <span className="t-bn">আপনার <em className="srch-rotate">পরবর্তী পদক্ষেপ</em> ম্যাপ করুন</span>
            <span className="t-en">Map your <em className="srch-rotate">next move</em></span>
          </h1>
          <p className="ftr-hero-sub">
            <span className="t-bn">বাংলাদেশের শীর্ষ কর্মীদের ডেটা থেকে তৈরি — কোন রোল থেকে কোথায় যায়, কত সময় লাগে, কত বেতন বাড়ে।</span>
            <span className="t-en">Built from top BD employees' data — which role leads where, how long it takes, how much salary grows.</span>
          </p>
          <div className="ftr-hero-actions">
            <a href="sign-in.html" className="btn btn-ink btn-lg">
              <span className="t-bn">আমার পাথ পান</span>
              <span className="t-en">Get my path</span>
              {I.arrowRight}
            </a>
            <a href="learn.html" className="btn btn-ghost btn-lg">
              <span className="t-bn">কোর্স দেখুন</span>
              <span className="t-en">Browse courses</span>
            </a>
          </div>
          <div className="ftr-hero-stats">
            {STATS.map((s,i) => (
              <div key={i} className="ftr-hero-stat">
                <div className="ftr-hero-stat-num">
                  <span className="t-bn">{s.n}</span>
                  <span className="t-en">{s.nEn}</span>
                </div>
                <div className="ftr-hero-stat-label">
                  <span className="t-bn">{s.l.bn}</span>
                  <span className="t-en">{s.l.en}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Paths */}
      <section className="ftr-section">
        <div className="container">
          <div className="ftr-section-head">
            <div className="ftr-section-eyebrow">
              <span className="t-bn">এক্সপ্লোর করুন</span>
              <span className="t-en">Explore</span>
            </div>
            <h2 className="ftr-section-title">
              <span className="t-bn">প্রতিটি পাথে — স্টেজ, বেতন, কোর্স, লিঙ্কড জব</span>
              <span className="t-en">Each path — stages, salary, courses, linked jobs</span>
            </h2>
          </div>

          <div className="ftr-filter-pills">
            {CATS.map(c => (
              <button key={c.id} className={'ftr-filter-pill' + (cat === c.id ? ' is-on' : '')} onClick={()=>setCat(c.id)}>
                <span className="t-bn">{c.bn}</span>
                <span className="t-en">{c.en}</span>
              </button>
            ))}
          </div>

          <div className="ftr-paths-grid">
            {filtered.map(p => (
              <article key={p.id} className="ftr-path-card">
                <div className="ftr-path-cover">
                  <div className="ftr-path-icon" style={{background: p.bg}}>{p.icon}</div>
                  <div>
                    <div className="ftr-path-name">
                      <span className="t-bn">{p.name.bn}</span>
                      <span className="t-en">{p.name.en}</span>
                    </div>
                    <div className="ftr-path-tag">{p.tag}</div>
                  </div>
                </div>
                <div className="ftr-path-body">
                  <p className="ftr-path-desc">
                    <span className="t-bn">{p.desc.bn}</span>
                    <span className="t-en">{p.desc.en}</span>
                  </p>

                  <div className="ftr-path-stages">
                    {p.stages.map((s, si) => (
                      <div key={si} className={'ftr-path-stage' + (s.cur ? ' is-cur' : '')}>
                        <span className="ftr-path-stage-dot"></span>
                        <span className="ftr-path-stage-name">
                          <span className="t-bn">{s.n.bn}</span>
                          <span className="t-en">{s.n.en}</span>
                        </span>
                        <span className="ftr-path-stage-yrs">
                          <span className="t-bn">{s.yrs} বছর</span>
                          <span className="t-en">{s.yrs} yrs</span>
                        </span>
                      </div>
                    ))}
                  </div>

                  <div className="ftr-path-meta">
                    <div className="ftr-path-meta-cell">
                      <div className="ftr-path-meta-label">
                        <span className="t-bn">শুরু — সর্বোচ্চ</span>
                        <span className="t-en">Start — top</span>
                      </div>
                      <div className="ftr-path-meta-val">৳{p.salary.start}–{p.salary.end}</div>
                    </div>
                    <div className="ftr-path-meta-cell">
                      <div className="ftr-path-meta-label">
                        <span className="t-bn">ওপেন জব</span>
                        <span className="t-en">Open jobs</span>
                      </div>
                      <div className="ftr-path-meta-val" style={{color:'var(--live)'}}>{p.jobs.toLocaleString()}+</div>
                    </div>
                  </div>

                  <div className="ftr-path-foot">
                    <a href="learn.html" className="btn btn-ghost">
                      <span className="t-bn">শিখুন</span>
                      <span className="t-en">Learn</span>
                    </a>
                    <a href="job-search.html" className="btn btn-ink">
                      <span className="t-bn">{p.jobs}+ জব</span>
                      <span className="t-en">{p.jobs}+ jobs</span>
                      {I.arrowRight}
                    </a>
                  </div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="ftr-cta-section">
        <div className="container">
          <div className="ftr-cta">
            <h2 className="ftr-cta-title">
              <span className="t-bn">AI দিয়ে আপনার পাথ পান</span>
              <span className="t-en">Get your path with AI</span>
            </h2>
            <p className="ftr-cta-sub">
              <span className="t-bn">বর্তমান স্কিল এবং টার্গেট রোল বলুন — NOBBYO AI আপনার কাস্টম পাথ, কোর্স এবং লিঙ্কড জব দেখাবে।</span>
              <span className="t-en">Tell us your current skills and target role — NOBBYO AI will map your custom path, courses, and linked jobs.</span>
            </p>
            <div className="ftr-cta-actions">
              <a href="sign-in.html" className="btn btn-ink btn-lg">
                <span className="t-bn">পাথ তৈরি করুন</span>
                <span className="t-en">Build my path</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 first</span>
              </a>
            </div>
          </div>
        </div>
      </section>

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

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