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

const POSTS = [
  { id:1, featured:true, cover:'📈', bg:'linear-gradient(135deg,#FFEBD4,#F58220)', cat:'salary', tag:{bn:'স্যালারি ইনসাইটস', en:'Salary insights'},
    title:{bn:'২০২৬ সালে বাংলাদেশে টেক বেতন ২৪% বাড়বে — কেন?', en:'Why tech salaries in Bangladesh will rise 24% in 2026'},
    excerpt:{bn:'১,২৫,০০০+ স্যালারি রিপোর্ট বিশ্লেষণ করে আমরা দেখলাম কোন রোলগুলো সবচেয়ে বেশি বাড়ছে এবং ফেয়ার পে নিশ্চিত করার উপায়।', en:'Analyzing 125K+ salary reports, we map which roles are accelerating fastest and how to ensure fair pay.'},
    author:'Sadia Ahmed', date:'২৬ এপ্রিল ২০২৬', dateEn:'26 April 2026', read:'৮ মিনিট', readEn:'8 min read' },
  { id:2, cover:'🤖', bg:'linear-gradient(135deg,#ECEFF8,#4357A0)', cat:'product', tag:{bn:'প্রোডাক্ট', en:'Product'},
    title:{bn:'বাংলা CV ম্যাচিং AI-এর পেছনের গল্প', en:'The story behind our Bangla CV matching AI'},
    excerpt:{bn:'বিশ্বের প্রথম বাংলা ভাষায় ট্রেইন করা CV ম্যাচিং AI কীভাবে তৈরি হলো — চ্যালেঞ্জ এবং সমাধান।', en:'How we built the world\'s first Bangla-trained CV matching AI — the challenges and breakthroughs.'},
    author:'Tanvir Hasan', date:'২২ এপ্রিল ২০২৬', dateEn:'22 April 2026', read:'১২ মিনিট', readEn:'12 min read' },
  { id:3, cover:'🎯', bg:'linear-gradient(135deg,#DCEAD9,#10B981)', cat:'hiring', tag:{bn:'হায়ারিং টিপস', en:'Hiring tips'},
    title:{bn:'২৪ ঘন্টায় সঠিক প্রার্থী — কীভাবে?', en:'How to find the right hire in 24 hours'},
    excerpt:{bn:'রিক্রুটারদের জন্য ৭টি প্রমাণিত টিপস — যা আপনার হায়ারিং সাইকেল ৭০% কমিয়ে দিতে পারে।', en:'7 proven tips for recruiters that can cut your hiring cycle by 70%.'},
    author:'Imran Chowdhury', date:'১৯ এপ্রিল ২০২৬', dateEn:'19 April 2026', read:'৬ মিনিট', readEn:'6 min read' },
  { id:4, cover:'💼', bg:'linear-gradient(135deg,#FBEDE5,#E07A52)', cat:'career', tag:{bn:'ক্যারিয়ার', en:'Career'},
    title:{bn:'প্রথম জব ইন্টারভিউ: ১০টি প্রশ্ন এবং সঠিক উত্তর', en:'First job interview: 10 questions & how to answer'},
    excerpt:{bn:'ফ্রেশারদের জন্য বাংলাদেশের কোম্পানিগুলো সবচেয়ে বেশি যে প্রশ্ন করে সেগুলোর প্রস্তুতি গাইড।', en:'A prep guide for the questions BD companies ask freshers most.'},
    author:'Nusrat Jahan', date:'১৬ এপ্রিল ২০২৬', dateEn:'16 April 2026', read:'১০ মিনিট', readEn:'10 min read' },
  { id:5, cover:'🌍', bg:'linear-gradient(135deg,#F5DEE2,#B2354F)', cat:'remote', tag:{bn:'রিমোট ওয়ার্ক', en:'Remote work'},
    title:{bn:'বাংলাদেশ থেকে রিমোট ক্লায়েন্ট পাবার গাইড', en:'Guide to landing remote clients from Bangladesh'},
    excerpt:{bn:'৫০০+ ফ্রিল্যান্সারের ডেটা থেকে — কোন প্ল্যাটফর্মে শুরু করবেন, রেট কত রাখবেন, কীভাবে স্কেল করবেন।', en:'From 500+ freelancer surveys — where to start, what to charge, how to scale.'},
    author:'Faria Islam', date:'১২ এপ্রিল ২০২৬', dateEn:'12 April 2026', read:'১৪ মিনিট', readEn:'14 min read' },
  { id:6, cover:'🎓', bg:'linear-gradient(135deg,#FFD3A5,#D86A0A)', cat:'career', tag:{bn:'ক্যারিয়ার', en:'Career'},
    title:{bn:'BCS পরীক্ষায় ১০০ মার্ক বাড়ানোর উপায়', en:'How to score 100+ extra marks in BCS exam'},
    excerpt:{bn:'৪৩তম বিসিএস টপ ১০-এ থাকা ক্যাডারদের সাক্ষাৎকার থেকে — সাধারণ জ্ঞান এবং বাংলায় বেশি মার্ক পাবার কৌশল।', en:'From interviews with top-10 cadres of 43rd BCS — strategies for general knowledge and Bangla.'},
    author:'Raihan Kabir', date:'৮ এপ্রিল ২০২৬', dateEn:'8 April 2026', read:'১৬ মিনিট', readEn:'16 min read' },
  { id:7, cover:'⚡', bg:'linear-gradient(135deg,#C5CCDF,#2A3656)', cat:'product', tag:{bn:'প্রোডাক্ট', en:'Product'},
    title:{bn:'৩০ সেকেন্ডে ভয়েস CV — কীভাবে কাজ করে?', en:'Voice CV in 30 seconds — how it works'},
    excerpt:{bn:'বাংলায় কথা বলে CV তৈরি করুন। NOBBYO ভয়েস AI-এর টেকনিক্যাল রিভিউ।', en:'Speak in Bangla, get a CV. Technical deep-dive into NOBBYO Voice AI.'},
    author:'Sadia Ahmed', date:'৪ এপ্রিল ২০২৬', dateEn:'4 April 2026', read:'৭ মিনিট', readEn:'7 min read' },
  { id:8, cover:'👩‍💻', bg:'linear-gradient(135deg,#FAD8C8,#E07A52)', cat:'diversity', tag:{bn:'ডাইভার্সিটি', en:'Diversity'},
    title:{bn:'বাংলাদেশী টেক ইন্ডাস্ট্রিতে নারী: ২০২৬ স্ট্যাট', en:'Women in BD tech: 2026 stats & forward path'},
    excerpt:{bn:'বাংলাদেশের টেক ইন্ডাস্ট্রিতে নারীদের অবস্থান, বেতন গ্যাপ ও কোম্পানিগুলো কী করছে।', en:'Where BD women stand in tech, the pay gap, and what companies are doing.'},
    author:'Nusrat Jahan', date:'১ এপ্রিল ২০২৬', dateEn:'1 April 2026', read:'১১ মিনিট', readEn:'11 min read' },
  { id:9, cover:'🚀', bg:'linear-gradient(135deg,#DCEAD9,#0A6B3F)', cat:'hiring', tag:{bn:'হায়ারিং টিপস', en:'Hiring tips'},
    title:{bn:'স্টার্টআপের জন্য প্রথম ১০ জন হায়ার করার গাইড', en:'A startup\'s guide to the first 10 hires'},
    excerpt:{bn:'বাংলাদেশের ৩০টি স্টার্টআপ ফাউন্ডারের ইন্টারভিউ থেকে — কী খুঁজবেন, কোথায় খুঁজবেন।', en:'From interviews with 30 BD startup founders — what to look for, where to look.'},
    author:'Imran Chowdhury', date:'২৮ মার্চ ২০২৬', dateEn:'28 March 2026', read:'৯ মিনিট', readEn:'9 min read' },
];

const CATS = [
  { id:'all', bn:'সব', en:'All' },
  { id:'career', bn:'ক্যারিয়ার', en:'Career' },
  { id:'hiring', bn:'হায়ারিং', en:'Hiring' },
  { id:'salary', bn:'স্যালারি', en:'Salary' },
  { id:'product', bn:'প্রোডাক্ট', en:'Product' },
  { id:'remote', bn:'রিমোট', en:'Remote' },
  { id:'diversity', bn:'ডাইভার্সিটি', en:'Diversity'},
];

function App() {
  const [lang, setLang] = window.usePageLang('bn');
  const [cat, setCat] = useState('all');
  const featured = POSTS.find(p => p.featured);
  const others = useMemo(() => {
    let r = POSTS.filter(p => !p.featured);
    if (cat !== 'all') r = r.filter(p => p.cat === cat);
    return r;
  }, [cat]);

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

      {/* Hero */}
      <section className="cnt-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 cnt-hero-inner">
          <div className="srch-eyebrow">
            <span className="srch-pulse"></span>
            <span className="t-bn">NOBBYO ব্লগ</span>
            <span className="t-en">NOBBYO Blog</span>
          </div>
          <h1 className="srch-title">
            <span className="t-bn">ক্যারিয়ার, হায়ারিং, <em className="srch-rotate">গবেষণা</em></span>
            <span className="t-en">Career, hiring, <em className="srch-rotate">research</em></span>
          </h1>
          <p className="cnt-hero-sub">
            <span className="t-bn">বাংলাদেশের চাকরির বাজার নিয়ে গভীর বিশ্লেষণ, প্রার্থীদের জন্য টিপস, রিক্রুটারদের জন্য গাইড।</span>
            <span className="t-en">Deep analysis on Bangladesh's job market, candidate tips, recruiter playbooks.</span>
          </p>
        </div>
      </section>

      {/* Toolbar */}
      <section className="cnt-section">
        <div className="container">
          <div className="cnt-blog-toolbar">
            <div className="cnt-blog-cats">
              {CATS.map(c => (
                <button key={c.id} className={'cnt-blog-cat' + (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>

          {/* Featured */}
          {cat === 'all' && featured && (
            <a href="#" onClick={(e)=>e.preventDefault()} className="cnt-blog-featured" style={{textDecoration:'none', color:'inherit'}}>
              <div className="cnt-blog-cover" style={{background: featured.bg}}>{featured.cover}</div>
              <div className="cnt-blog-feat-body">
                <div className="cnt-blog-tag">
                  <span className="t-bn">{featured.tag.bn}</span>
                  <span className="t-en">{featured.tag.en}</span>
                </div>
                <h2 className="cnt-blog-title-lg">
                  <span className="t-bn">{featured.title.bn}</span>
                  <span className="t-en">{featured.title.en}</span>
                </h2>
                <p className="cnt-blog-excerpt">
                  <span className="t-bn">{featured.excerpt.bn}</span>
                  <span className="t-en">{featured.excerpt.en}</span>
                </p>
                <div className="cnt-blog-meta">
                  <span>{featured.author}</span>
                  <span className="cnt-blog-meta-divider">·</span>
                  <span>
                    <span className="t-bn">{featured.date}</span>
                    <span className="t-en">{featured.dateEn}</span>
                  </span>
                  <span className="cnt-blog-meta-divider">·</span>
                  <span>
                    <span className="t-bn">{featured.read}</span>
                    <span className="t-en">{featured.readEn}</span>
                  </span>
                </div>
              </div>
            </a>
          )}

          {/* Posts grid */}
          <div className="cnt-blog-grid">
            {others.map(p => (
              <a key={p.id} href="#" onClick={(e)=>e.preventDefault()} className="cnt-blog-card">
                <div className="cnt-blog-card-cover" style={{background: p.bg}}>{p.cover}</div>
                <div className="cnt-blog-card-body">
                  <div className="cnt-blog-tag">
                    <span className="t-bn">{p.tag.bn}</span>
                    <span className="t-en">{p.tag.en}</span>
                  </div>
                  <h3 className="cnt-blog-card-title">
                    <span className="t-bn">{p.title.bn}</span>
                    <span className="t-en">{p.title.en}</span>
                  </h3>
                  <p className="cnt-blog-card-excerpt">
                    <span className="t-bn">{p.excerpt.bn}</span>
                    <span className="t-en">{p.excerpt.en}</span>
                  </p>
                  <div className="cnt-blog-card-foot">
                    <span>{p.author}</span>
                    <span className="cnt-blog-meta-divider">·</span>
                    <span>
                      <span className="t-bn">{p.read}</span>
                      <span className="t-en">{p.readEn}</span>
                    </span>
                  </div>
                </div>
              </a>
            ))}
          </div>

          {others.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 posts yet in this category</span>
              </div>
            </div>
          )}
        </div>
      </section>

      {/* Newsletter CTA */}
      <section className="cnt-cta-section">
        <div className="container">
          <div className="cnt-cta">
            <h2 className="cnt-cta-title">
              <span className="t-bn">সাপ্তাহিক নিউজলেটার পান</span>
              <span className="t-en">Get our weekly newsletter</span>
            </h2>
            <p className="cnt-cta-sub">
              <span className="t-bn">প্রতি বুধবার — নতুন বিশ্লেষণ, ক্যারিয়ার টিপস, এবং বাংলাদেশের চাকরির বাজারের লেটেস্ট। ৩৪,০০০+ পাঠক।</span>
              <span className="t-en">Every Wednesday — fresh analysis, career tips, and Bangladesh job market intel. 34,000+ readers.</span>
            </p>
            <div className="cnt-cta-actions">
              <a href="sign-in.html" className="btn btn-ink btn-lg">
                <span className="t-bn">সাবস্ক্রাইব করুন</span>
                <span className="t-en">Subscribe</span>
                {I.arrowRight}
              </a>
            </div>
          </div>
        </div>
      </section>

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

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