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

// =================== LEARN DATA ===================
const SKILL_PATHS = [
  { id:'frontend', bn:'ফ্রন্টএন্ড ডেভেলপার', en:'Frontend Developer', icon:'⚛️', courses:24, hrs:'১২০ ঘন্টা', hrsEn:'120 hours', salary:'৮০k–১.৫ লাখ', jobs:1240, color:'#4357A0' },
  { id:'backend', bn:'ব্যাকএন্ড ডেভেলপার', en:'Backend Developer', icon:'⚙️', courses:28, hrs:'১৪০ ঘন্টা', hrsEn:'140 hours', salary:'৯০k–১.৭ লাখ', jobs:980, color:'#0A6B3F' },
  { id:'product-design', bn:'প্রোডাক্ট ডিজাইনার', en:'Product Designer', icon:'🎨', courses:18, hrs:'৯০ ঘন্টা', hrsEn:'90 hours', salary:'৭০k–১.৬ লাখ', jobs:520, color:'#E07A52' },
  { id:'data-science', bn:'ডেটা সায়েন্টিস্ট', en:'Data Scientist', icon:'📊', courses:32, hrs:'১৬০ ঘন্টা', hrsEn:'160 hours', salary:'১.২ লাখ–২.৪ লাখ', jobs:380, color:'#7E5E9F' },
  { id:'mobile', bn:'মোবাইল ডেভেলপার', en:'Mobile Developer', icon:'📱', courses:22, hrs:'১১০ ঘন্টা', hrsEn:'110 hours', salary:'৭৫k–১.৪ লাখ', jobs:640, color:'#F58220' },
  { id:'devops', bn:'DevOps ইঞ্জিনিয়ার', en:'DevOps Engineer', icon:'🚀', courses:20, hrs:'১০০ ঘন্টা', hrsEn:'100 hours', salary:'১.৩ লাখ–২.২ লাখ', jobs:280, color:'#E60028' },
  { id:'digital-marketing', bn:'ডিজিটাল মার্কেটিং', en:'Digital Marketing', icon:'📈', courses:16, hrs:'৭০ ঘন্টা', hrsEn:'70 hours', salary:'৫৫k–১ লাখ', jobs:780, color:'#22863A' },
  { id:'bcs-prep', bn:'BCS প্রস্তুতি', en:'BCS Preparation', icon:'⚖️', courses:42, hrs:'৩০০ ঘন্টা', hrsEn:'300 hours', salary:'সরকারি স্কেল', jobs:3140, color:'#0E5AA7' },
];

const COURSE_CATEGORIES = [
  { id:'all', bn:'সব', en:'All' },
  { id:'tech', bn:'টেক', en:'Tech' },
  { id:'design', bn:'ডিজাইন', en:'Design' },
  { id:'business', bn:'বিজনেস', en:'Business' },
  { id:'marketing', bn:'মার্কেটিং', en:'Marketing' },
  { id:'language', bn:'ভাষা', en:'Language' },
  { id:'govt', bn:'সরকারি প্রস্তুতি', en:'Govt prep' },
];

const COURSES = [
  { id:1, title:{bn:'React.js থেকে শূন্য থেকে হিরো', en:'React.js Zero to Hero'}, provider:{bn:'১০ মিনিট স্কুল', en:'10 Minute School'}, providerLogo:'10', providerBg:'#FB923C', cat:'tech', level:'mid', dur:'৪২ ঘন্টা', durEn:'42 hours', lessons:128, students:8420, rating:4.8, reviews:1240, price:0, oldPrice:2500, instructor:{bn:'আয়মান সাদিক', en:'Ayman Sadiq'}, badge:'BESTSELLER', badgeColor:'#F59E0B', tag:{bn:'বাংলায়', en:'In Bangla'}, featured:true },
  { id:2, title:{bn:'Full Stack Web Development', en:'Full Stack Web Development'}, provider:{bn:'প্রোগ্রামিং হিরো', en:'Programming Hero'}, providerLogo:'PH', providerBg:'#10B981', cat:'tech', level:'all', dur:'১২০ ঘন্টা', durEn:'120 hours', lessons:340, students:5840, rating:4.9, reviews:980, price:5500, oldPrice:8500, instructor:{bn:'জিয়াউর রহমান', en:'Ziaur Rahman'}, badge:'JOB GUARANTEE', badgeColor:'#0A6B3F', tag:{bn:'লাইভ', en:'Live'}, featured:true },
  { id:3, title:{bn:'UI/UX ডিজাইন মাস্টারক্লাস', en:'UI/UX Design Masterclass'}, provider:{bn:'BD Designer', en:'BD Designer'}, providerLogo:'BD', providerBg:'#E07A52', cat:'design', level:'junior', dur:'৩৬ ঘন্টা', durEn:'36 hours', lessons:96, students:3240, rating:4.7, reviews:520, price:3500, oldPrice:5500, instructor:{bn:'সাকিব আহমেদ', en:'Sakib Ahmed'}, tag:{bn:'প্রজেক্ট ভিত্তিক', en:'Project-based'} },
  { id:4, title:{bn:'৪৬তম BCS প্রিলি প্রস্তুতি', en:'46th BCS Preliminary Prep'}, provider:{bn:'বিসিএস কনফিডেন্স', en:'BCS Confidence'}, providerLogo:'BC', providerBg:'#0E5AA7', cat:'govt', level:'all', dur:'১৮০ ঘন্টা', durEn:'180 hours', lessons:240, students:24820, rating:4.9, reviews:4280, price:2500, oldPrice:5000, instructor:{bn:'মুনতাসির মামুন', en:'Muntasir Mamun'}, badge:'TOP RATED', badgeColor:'#F58220', tag:{bn:'লাইভ মক টেস্ট', en:'Live mock tests'}, featured:true },
  { id:5, title:{bn:'ডিজিটাল মার্কেটিং ২০২৬', en:'Digital Marketing 2026'}, provider:{bn:'১০ মিনিট স্কুল', en:'10 Minute School'}, providerLogo:'10', providerBg:'#FB923C', cat:'marketing', level:'junior', dur:'২৪ ঘন্টা', durEn:'24 hours', lessons:64, students:6240, rating:4.6, reviews:840, price:1500, oldPrice:3000, instructor:{bn:'রাফসান জানি', en:'Rafsan Jani'}, tag:{bn:'সার্টিফিকেট', en:'Certified'} },
  { id:6, title:{bn:'Python ডেটা সায়েন্স', en:'Python for Data Science'}, provider:{bn:'IBA-DU', en:'IBA-DU'}, providerLogo:'IB', providerBg:'#003E70', cat:'tech', level:'mid', dur:'৬০ ঘন্টা', durEn:'60 hours', lessons:142, students:1840, rating:4.8, reviews:340, price:4500, instructor:{bn:'ড. আনিসুল হক', en:'Dr. Anisul Haque'}, tag:{bn:'ইন্ডাস্ট্রি প্রজেক্ট', en:'Industry projects'} },
  { id:7, title:{bn:'IELTS Academic ৭+', en:'IELTS Academic 7+'}, provider:{bn:'BAC IELTS', en:'BAC IELTS'}, providerLogo:'BA', providerBg:'#E60028', cat:'language', level:'all', dur:'৪৮ ঘন্টা', durEn:'48 hours', lessons:96, students:4280, rating:4.7, reviews:680, price:6500, instructor:{bn:'নায়লা শারমিন', en:'Naila Sharmin'}, tag:{bn:'লাইভ ক্লাস', en:'Live classes'} },
  { id:8, title:{bn:'Figma & ডিজাইন সিস্টেম', en:'Figma & Design Systems'}, provider:{bn:'Hashtag', en:'Hashtag'}, providerLogo:'#', providerBg:'#7E5E9F', cat:'design', level:'mid', dur:'২০ ঘন্টা', durEn:'20 hours', lessons:48, students:1240, rating:4.9, reviews:160, price:0, oldPrice:1500, instructor:{bn:'তাহমিদা ইসলাম', en:'Tahmida Islam'}, tag:{bn:'ফ্রি', en:'Free'} },
  { id:9, title:{bn:'ব্যবসায়িক ইংরেজি ও কমিউনিকেশন', en:'Business English & Comms'}, provider:{bn:'BSCDC', en:'BSCDC'}, providerLogo:'BS', providerBg:'#10B981', cat:'business', level:'junior', dur:'১৬ ঘন্টা', durEn:'16 hours', lessons:36, students:920, rating:4.5, reviews:120, price:1200, instructor:{bn:'মেহজাবিন রহমান', en:'Mehzabin Rahman'}, tag:{bn:'ইন্টারঅ্যাকটিভ', en:'Interactive'} },
];

const STAT_TILES = [
  { n:'৩৪০+', nEn:'340+', l:{bn:'কোর্স লাইভ', en:'Courses live'} },
  { n:'১.৮ লক্ষ+', nEn:'180K+', l:{bn:'শিক্ষার্থী', en:'Learners'} },
  { n:'৪২k+', nEn:'42K+', l:{bn:'কর্মসংস্থান', en:'Job placements'} },
  { n:'৯৪%', nEn:'94%', l:{bn:'কোর্স সম্পন্ন', en:'Completion rate'} },
];

const PROVIDERS = [
  { name:'10 Minute School', logo:'10', bg:'#FB923C', desc:{bn:'বাংলাদেশের সেরা অনলাইন লার্নিং', en:'Bangladesh\'s top online learning'}, courses:120 },
  { name:'Programming Hero', logo:'PH', bg:'#10B981', desc:{bn:'ইন্ডাস্ট্রি-রেডি ডেভেলপার তৈরি', en:'Industry-ready developers'}, courses:24 },
  { name:'BCS Confidence', logo:'BC', bg:'#0E5AA7', desc:{bn:'BCS ও সরকারি চাকরির প্রস্তুতি', en:'BCS & govt job prep'}, courses:38 },
  { name:'BAC IELTS', logo:'BA', bg:'#E60028', desc:{bn:'IELTS, TOEFL ও ভাষা প্রশিক্ষণ', en:'IELTS, TOEFL & language'}, courses:18 },
  { name:'IBA-DU', logo:'IB', bg:'#003E70', desc:{bn:'প্রিমিয়াম একাডেমিক কোর্স', en:'Premium academic courses'}, courses:14 },
  { name:'Hashtag', logo:'#', bg:'#7E5E9F', desc:{bn:'ডিজাইন ও ক্রিয়েটিভ স্কিল', en:'Design & creative skills'}, courses:22 },
];

// =================== HERO ===================
function LearnHero({ q, setQ, lang }) {
  return (
    <section className="lrn-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 lrn-hero-inner">
        <div className="srch-eyebrow">
          <span className="srch-pulse"></span>
          <span className="t-bn">শিখুন · প্রস্তুতি নিন · চাকরি পান</span>
          <span className="t-en">Learn · prepare · get hired</span>
        </div>
        <h1 className="srch-title">
          <span className="t-bn">নতুন স্কিল শিখুন <em className="srch-rotate">আপনার ভাষায়</em></span>
          <span className="t-en">Master skills <em className="srch-rotate">in your language</em></span>
        </h1>
        <p className="lrn-hero-sub">
          <span className="t-bn">৩৪০+ বাংলা কোর্স · ৯৪% কর্মসংস্থানের হার · বাংলাদেশের সেরা ইনস্ট্রাক্টর</span>
          <span className="t-en">340+ Bangla courses · 94% job placement · top instructors of Bangladesh</span>
        </p>

        <div className="srch-bar lrn-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'?'কোর্স, স্কিল, ক্যারিয়ার পাথ...':'Courses, skills, career paths...'}
            />
          </div>
          <button className="srch-bar-btn">
            <span className="t-bn">খুঁজুন</span>
            <span className="t-en">Search</span>
            {I.arrowRight}
          </button>
        </div>

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

// =================== SKILL PATHS ===================
function SkillPaths({ lang }) {
  return (
    <section className="lrn-paths-section">
      <div className="container">
        <div className="lrn-section-head">
          <div className="lrn-section-eyebrow">
            <span className="t-bn">ক্যারিয়ার পাথ</span>
            <span className="t-en">Career paths</span>
          </div>
          <h2 className="lrn-section-title">
            <span className="t-bn">শিখুন → চাকরি পান</span>
            <span className="t-en">Learn → land the role</span>
          </h2>
          <p className="lrn-section-sub">
            <span className="t-bn">কিউরেট করা পাথ — শেখা শেষে যাচাইকৃত সার্টিফিকেট ও NOBBYO রিক্রুটার ম্যাচিং</span>
            <span className="t-en">Curated tracks — finish with a verified cert and NOBBYO recruiter matching</span>
          </p>
        </div>

        <div className="lrn-paths-grid">
          {SKILL_PATHS.map(p => (
            <a key={p.id} href={`job-search.html?path=${p.id}`} className="lrn-path-card">
              <div className="lrn-path-icon" style={{background: `${p.color}1A`, color: p.color}}>
                <span style={{fontSize: '28px'}}>{p.icon}</span>
              </div>
              <div className="lrn-path-name">
                <span className="t-bn">{p.bn}</span>
                <span className="t-en">{p.en}</span>
              </div>
              <div className="lrn-path-meta">
                <span>
                  <strong>{p.courses}</strong>
                  <span className="t-bn"> কোর্স</span>
                  <span className="t-en"> courses</span>
                </span>
                <span className="lrn-path-divider">·</span>
                <span>
                  <span className="t-bn">{p.hrs}</span>
                  <span className="t-en">{p.hrsEn}</span>
                </span>
              </div>
              <div className="lrn-path-foot">
                <div>
                  <div className="lrn-path-salary-label">
                    <span className="t-bn">গড় বেতন</span>
                    <span className="t-en">Avg salary</span>
                  </div>
                  <div className="lrn-path-salary">
                    <span className="t-bn">৳{p.salary}</span>
                    <span className="t-en">৳{p.salary}</span>
                  </div>
                </div>
                <div className="lrn-path-jobs">
                  <strong>{p.jobs.toLocaleString()}</strong>
                  <span className="t-bn"> জব ওপেন</span>
                  <span className="t-en"> jobs open</span>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// =================== COURSES ===================
function CoursesSection({ q, lang }) {
  const [cat, setCat] = useState('all');
  const filtered = useMemo(() => {
    let r = COURSES;
    if (cat !== 'all') r = r.filter(c => c.cat === cat);
    if (q) {
      const ql = q.toLowerCase();
      r = r.filter(c =>
        c.title.bn.includes(q) || c.title.en.toLowerCase().includes(ql) ||
        c.provider.bn.includes(q) || c.provider.en.toLowerCase().includes(ql)
      );
    }
    return r;
  }, [cat, q]);

  return (
    <section className="lrn-courses-section">
      <div className="container">
        <div className="lrn-section-head">
          <div className="lrn-section-eyebrow">
            <span className="t-bn">ফিচার্ড কোর্স</span>
            <span className="t-en">Featured courses</span>
          </div>
          <h2 className="lrn-section-title">
            <span className="t-bn">এই সপ্তাহের সেরা কোর্স</span>
            <span className="t-en">This week's top picks</span>
          </h2>
        </div>

        <div className="lrn-cat-pills">
          {COURSE_CATEGORIES.map(c => (
            <button
              key={c.id}
              className={'lrn-cat-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="lrn-courses-grid">
          {filtered.map(c => <CourseCard key={c.id} c={c} lang={lang} />)}
        </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 courses found</span>
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

function CourseCard({ c, lang }) {
  return (
    <article className={'lrn-course' + (c.featured ? ' is-featured' : '')}>
      <div className="lrn-course-cover" style={{background: `linear-gradient(135deg, ${c.providerBg}40, ${c.providerBg}10)`}}>
        <div className="lrn-course-provider" style={{background: c.providerBg}}>{c.providerLogo}</div>
        {c.badge && <div className="lrn-course-badge" style={{background: c.badgeColor}}>{c.badge}</div>}
      </div>
      <div className="lrn-course-body">
        {c.tag && (
          <div className="lrn-course-tag">
            <span className="t-bn">{c.tag.bn}</span>
            <span className="t-en">{c.tag.en}</span>
          </div>
        )}
        <h3 className="lrn-course-title">
          <span className="t-bn">{c.title.bn}</span>
          <span className="t-en">{c.title.en}</span>
        </h3>
        <div className="lrn-course-instructor">
          <span className="lrn-course-instr-avatar">{c.instructor.en[0]}</span>
          <span>
            <span className="t-bn">{c.instructor.bn}</span>
            <span className="t-en">{c.instructor.en}</span>
          </span>
        </div>
        <div className="lrn-course-meta">
          <span className="lrn-course-meta-item">
            {I.clock}
            <span className="t-bn">{c.dur}</span>
            <span className="t-en">{c.durEn}</span>
          </span>
          <span className="lrn-course-meta-item">
            <strong>{c.lessons}</strong>
            <span className="t-bn">পাঠ</span>
            <span className="t-en">lessons</span>
          </span>
        </div>
        <div className="lrn-course-rating">
          <span className="lrn-stars">⭐</span>
          <strong>{c.rating}</strong>
          <span className="lrn-course-reviews">({c.reviews.toLocaleString()})</span>
          <span className="lrn-course-students">
            ·
            <span className="t-bn"> {c.students.toLocaleString()} জন শিখছে</span>
            <span className="t-en"> {c.students.toLocaleString()} learners</span>
          </span>
        </div>
        <div className="lrn-course-foot">
          <div className="lrn-course-price">
            {c.price === 0 ? (
              <span className="lrn-course-free">
                <span className="t-bn">ফ্রি</span>
                <span className="t-en">Free</span>
              </span>
            ) : (
              <>
                <span className="lrn-course-price-num">৳{c.price.toLocaleString()}</span>
                {c.oldPrice && <span className="lrn-course-old-price">৳{c.oldPrice.toLocaleString()}</span>}
              </>
            )}
          </div>
          <a href="sign-in.html" className="btn btn-ink">
            <span className="t-bn">শুরু করুন</span>
            <span className="t-en">Start</span>
            {I.arrowRight}
          </a>
        </div>
      </div>
    </article>
  );
}

// =================== PROVIDERS ===================
function ProvidersStrip({ lang }) {
  return (
    <section className="lrn-prov-section">
      <div className="container">
        <div className="lrn-section-head">
          <div className="lrn-section-eyebrow">
            <span className="t-bn">পার্টনার প্ল্যাটফর্ম</span>
            <span className="t-en">Partner platforms</span>
          </div>
          <h2 className="lrn-section-title">
            <span className="t-bn">বাংলাদেশের সেরাদের সাথে শিখুন</span>
            <span className="t-en">Learn from Bangladesh's best</span>
          </h2>
        </div>
        <div className="lrn-prov-grid">
          {PROVIDERS.map((p, i) => (
            <div key={i} className="lrn-prov-card">
              <div className="lrn-prov-logo" style={{background: p.bg}}>{p.logo}</div>
              <div className="lrn-prov-body">
                <div className="lrn-prov-name">{p.name}</div>
                <div className="lrn-prov-desc">
                  <span className="t-bn">{p.desc.bn}</span>
                  <span className="t-en">{p.desc.en}</span>
                </div>
                <div className="lrn-prov-courses">
                  <strong>{p.courses}+</strong>
                  <span className="t-bn"> কোর্স</span>
                  <span className="t-en"> courses</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// =================== CTA ===================
function LearnCTA({ lang }) {
  return (
    <section className="lrn-cta-section">
      <div className="container">
        <div className="lrn-cta">
          <div className="lrn-cta-content">
            <div className="lrn-cta-icon">{I.spark}</div>
            <h2 className="lrn-cta-title">
              <span className="t-bn">আপনার AI লার্নিং পাথ পান</span>
              <span className="t-en">Get your AI learning path</span>
            </h2>
            <p className="lrn-cta-sub">
              <span className="t-bn">আপনার বর্তমান স্কিল ও টার্গেট রোল বলুন — AI কাস্টম পাথ তৈরি করবে। সম্পূর্ণ ফ্রি।</span>
              <span className="t-en">Tell us your skills + target role — AI builds your custom path. 100% free.</span>
            </p>
            <div className="lrn-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">See jobs first</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// =================== APP ===================
function App() {
  const [lang, setLang] = window.usePageLang('bn');
  const [q, setQ] = useState('');
  return (
    <>
      <PageTopBar lang={lang} setLang={setLang} />
      <PageHeader active="learn" />
      <LearnHero q={q} setQ={setQ} lang={lang} />
      <SkillPaths lang={lang} />
      <CoursesSection q={q} lang={lang} />
      <ProvidersStrip lang={lang} />
      <LearnCTA lang={lang} />
      <PageFooter lang={lang} />
    </>
  );
}

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