/* global React, ReactDOM */
const { useState, useEffect, useMemo, useRef } = React;
const I = window.NOBBYO_ICONS;
const D = window.NOBBYO_DATA;

// ============================================================
// SUB-COMPONENTS
// ============================================================

function BrandLogo({ size = 'md', dark = false }) {
  const dims = size === 'lg' ? { mark: 44, gap: 12, name: 32, sub: 11 } :
               size === 'sm' ? { mark: 32, gap: 8,  name: 22, sub: 9 } :
                               { mark: 40, gap: 10, name: 27, sub: 10 };
  const navy = dark ? '#FFFFFF' : 'var(--asb-navy)';
  const orange = 'var(--asb-orange)';
  const innerBg = dark ? 'transparent' : '#FFFFFF';
  return (
    <div className="brand">
      <svg className="brand-gear" width={dims.mark} height={dims.mark} viewBox="0 0 64 64" fill="none" aria-hidden="true">
        {/* Gear body — 12 teeth, navy */}
        <g>
          {Array.from({length:12}).map((_,i) => {
            const a = (i*30) * Math.PI / 180;
            const cx = 32 + Math.cos(a) * 28;
            const cy = 32 + Math.sin(a) * 28;
            const rot = i*30;
            return (
              <rect key={i} x="-5" y="-3.5" width="10" height="7" rx="1.4"
                    fill={navy}
                    transform={`translate(${cx} ${cy}) rotate(${rot+90})`} />
            );
          })}
          <circle cx="32" cy="32" r="24" fill={navy} />
          <circle cx="32" cy="32" r="19.5" fill={innerBg} stroke={navy} strokeWidth="1" />
        </g>
        {/* Inner orange arc — bottom (the ASB orange semicircle) */}
        <path d="M 32 51 A 19 19 0 0 0 51 32 A 19 19 0 0 0 32 13 Z M 32 51 A 19 19 0 0 1 13 32 A 19 19 0 0 1 32 13 Z"
              fill={orange} fillRule="evenodd" opacity="0" />
        <path d="M 13 32 A 19 19 0 0 0 51 32 L 32 32 Z" fill={orange} />
        {/* "N" monogram — bold, on top of orange arc & navy upper */}
        <g>
          <rect x="25.5" y="19" width="3" height="22" fill={dark ? navy : '#FFFFFF'} stroke={navy} strokeWidth="0.5" />
          <rect x="35.5" y="19" width="3" height="22" fill={dark ? navy : '#FFFFFF'} stroke={navy} strokeWidth="0.5" />
          <path d="M 28.5 19 L 32 19 L 38.5 41 L 35.5 41 Z"
                fill={dark ? navy : '#FFFFFF'} stroke={navy} strokeWidth="0.5" />
        </g>
        {/* Center pin */}
        <circle cx="32" cy="32" r="2" fill={navy} />
      </svg>
      <div className="brand-text" style={{marginLeft: dims.gap}}>
        <div className="brand-wordmark" style={{fontSize: dims.name}}>
          NOBBYO<span className="brand-dot">·</span><span className="brand-jobs">JOBS</span>
        </div>
        <div className="brand-tagline" style={{fontSize: dims.sub}}>
          <span className="brand-bn">নব্যো জবস</span>
          <span className="brand-divider">·</span>
          <span className="brand-loc">BANGLADESH</span>
        </div>
      </div>
    </div>
  );
}

function TopBar({ lang, setLang }) {
  const [tickerIdx, setTickerIdx] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setTickerIdx(i => (i + 1) % D.tickerItems.length), 2800);
    return () => clearInterval(t);
  }, []);
  return (
    <div className="top-bar">
      <div className="container top-bar-inner">
        <div className="top-marquee">
          <span className="top-marquee-pill">
            <span className="t-bn">লাইভ ফিড</span>
            <span className="t-en">LIVE FEED</span>
          </span>
          <div className="top-ticker">
            <div className="top-ticker-track" style={{transform: `translateY(${-tickerIdx * 22}px)`}}>
              {D.tickerItems.map((t, i) => (
                <div className="top-ticker-row" key={i}>
                  <span className={`top-ticker-dot dot-${t.dot}`}></span>
                  <span className="top-ticker-who">{t.who}</span>
                  <span>{lang === 'bn' ? t.tBn : t.tEn}</span>
                  <span className="top-ticker-co">{t.co}</span>
                  <span style={{color:'rgba(250,247,238,0.5)'}}>· {t.role}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
        <div className="top-right">
          <a href="homepage-bold.html" className="top-link">
            {I.globe}
            <span className="t-bn">আমাদের সম্পর্কে</span>
            <span className="t-en">About</span>
          </a>
          <div className="lang-pill">
            <button className={lang === 'bn' ? 'active' : ''} onClick={() => setLang('bn')}>বাং</button>
            <button className={lang === 'en' ? 'active' : ''} onClick={() => setLang('en')}>EN</button>
          </div>
        </div>
      </div>
    </div>
  );
}

function Header({ openAssist }) {
  return (
    <header className="header">
      <div className="container header-inner">
        <BrandLogo size="md" />
        <nav className="nav">
          <a className="nav-item ai" onClick={openAssist}>
            {I.spark}
            <span className="t-bn">AI ম্যাচ</span>
            <span className="t-en">AI Match</span>
          </a>
          <a className="nav-item" href="job-search.html">
            <span className="t-bn">চাকরি খুঁজুন</span>
            <span className="t-en">Find Jobs</span>
          </a>
          <a className="nav-item" href="companies.html">
            <span className="t-bn">কোম্পানি</span>
            <span className="t-en">Companies</span>
          </a>
          <a className="nav-item" href="salary-insights.html">
            <span className="t-bn">স্যালারি ইনসাইটস</span>
            <span className="t-en">Salary</span>
          </a>
          <a className="nav-item" href="govt-jobs.html">
            <span className="t-bn">গভর্মেন্ট</span>
            <span className="t-en">Govt Jobs</span>
          </a>
          <a className="nav-item" href="learn.html">
            <span className="t-bn">শিখুন</span>
            <span className="t-en">Learn</span>
          </a>
        </nav>
        <div className="header-actions">
          <button className="btn-icon-circle" aria-label="notifications">
            {I.bell}
            <span className="badge-dot"></span>
          </button>
          <a className="btn btn-ghost" href="recruiter-dashboard.html">
            <span className="t-bn">নিয়োগকর্তা</span>
            <span className="t-en">For Employers</span>
          </a>
          <a className="btn btn-ink" href="sign-in.html">
            <span className="t-bn">সাইন ইন</span>
            <span className="t-en">Sign In</span>
            {I.arrowRight}
          </a>
        </div>
      </div>
    </header>
  );
}

function Hero({ openAssist, lang }) {
  const [matchCount, setMatchCount] = useState(2847);
  useEffect(() => {
    const t = setInterval(() => setMatchCount(c => c + Math.floor(Math.random()*3)), 4000);
    return () => clearInterval(t);
  }, []);
  const stats = [
    { label: lang==='bn'?'একটিভ চাকরি':'Active Jobs', num: '২৪,৩১২', delta: '+১৮%', sub: lang==='bn'?'গত ৭ দিনে':'last 7 days', cls: 's-gold' },
    { label: lang==='bn'?'যাচাইকৃত কোম্পানি':'Verified Co.', num: '১,৮৪০', delta: '+১২', sub: lang==='bn'?'এই মাসে':'this month', cls: 's-coral' },
    { label: lang==='bn'?'সফল হায়ার':'Hires Made', num: '৪২,৭৬৫', delta: '+৩৪২', sub: lang==='bn'?'এই বছরে':'this year', cls: 's-teal' },
    { label: lang==='bn'?'গড় হায়ার সময়':'Avg Time-to-hire', num: '১৮', delta: 'দিন', sub: lang==='bn'?'ইন্ডাস্ট্রি গড়ের অর্ধেক':'half industry avg', cls: 's-sage' },
  ];
  return (
    <section className="hero">
      <div className="hero-decor"></div>
      <div className="hero-decor-2"></div>
      <div className="container">
        <div className="hero-glyph-strip">
          <span className="live-tag">{lang==='bn'?'লাইভ':'LIVE'}</span>
          <span>{lang==='bn'?`${matchCount.toLocaleString('bn-BD')} জন এখন ম্যাচ পাচ্ছেন`:`${matchCount.toLocaleString()} matched right now`}</span>
          <span className="dot"></span>
          <span>EST. 2019 · DHAKA</span>
          <span className="dot"></span>
          <span>ISO 27001</span>
        </div>

        <h1 className="hero-title">
          <span className="t-bn">বাংলাদেশের <span className="ed">সেরা</span> ক্যারিয়ার, </span>
          <span className="t-en">Bangladesh's <span className="ed">finest</span> careers, </span>
          <span className="rotator">
            <span className="rotator-inner">
              <span>{lang==='bn'?'AI ম্যাচ':'AI matched'}</span>
              <span>{lang==='bn'?'২৪ ঘণ্টায়':'in 24 hrs'}</span>
              <span>{lang==='bn'?'বাংলায়':'in Bangla'}</span>
              <span>{lang==='bn'?'AI ম্যাচ':'AI matched'}</span>
            </span>
          </span>
        </h1>
        <p className="hero-sub">
          <span className="t-bn">
            <strong>২৪,০০০+ যাচাইকৃত চাকরি</strong>, রিয়েল-টাইম স্যালারি ডেটা, এবং বাংলাদেশি প্রতিভার জন্য নির্মিত AI ম্যাচিং। ভয়েস সার্চ, বাংলা CV, এবং UPay/bKash-এ ইন্টারভিউ স্টাইপেন্ড।
          </span>
          <span className="t-en">
            <strong>24,000+ verified jobs</strong>, real-time salary data, and AI matching built for Bangladeshi talent. Voice search, Bangla CVs, and interview stipends paid via UPay/bKash.
          </span>
        </p>

        {/* Command bar */}
        <div className="cmd-bar-wrap">
          <div className="cmd-bar">
            <div className="cmd-field">
              {I.search}
              <div className="cmd-field-col">
                <div className="cmd-field-label">{lang==='bn'?'কী':'What'}</div>
                <input className="cmd-field-input" placeholder={lang==='bn'?'যেমন "Product Designer", "AI engineer"':'e.g. "Product Designer", "AI engineer"'} defaultValue={lang==='bn'?'প্রোডাক্ট ডিজাইনার':'Product Designer'} />
              </div>
              <button className="cmd-mic" title="Voice search">{I.mic}</button>
            </div>
            <div className="cmd-field">
              {I.pin}
              <div className="cmd-field-col">
                <div className="cmd-field-label">{lang==='bn'?'কোথায়':'Where'}</div>
                <input className="cmd-field-input" placeholder={lang==='bn'?'ঢাকা, রিমোট, যেকোনো':'Dhaka, Remote, Anywhere'} defaultValue={lang==='bn'?'গুলশান, ঢাকা':'Gulshan, Dhaka'} />
              </div>
            </div>
            <div className="cmd-field">
              {I.briefcase}
              <div className="cmd-field-col">
                <div className="cmd-field-label">{lang==='bn'?'অভিজ্ঞতা':'Experience'}</div>
                <input className="cmd-field-input" defaultValue={lang==='bn'?'৩-৫ বছর':'3-5 years'} />
              </div>
              <button className="cmd-ai" onClick={openAssist} title="AI assistant">{I.spark}</button>
            </div>
            <button className="cmd-btn">
              <span className="t-bn">খুঁজুন</span>
              <span className="t-en">Search</span>
              {I.arrowRight}
            </button>
          </div>
        </div>

        <div className="cmd-suggest-row">
          <span className="cmd-suggest-label">{lang==='bn'?'ট্রেন্ডিং →':'TRENDING →'}</span>
          {['AI Engineer','Product Manager','Bangla Content','Govt Jobs','Returnship','Remote'].map((t,i) => (
            <button className="cmd-suggest-pill" key={i}>
              <span className="num">{String(i+1).padStart(2,'0')}</span>
              {t}
            </button>
          ))}
        </div>

        <div className="stats-row">
          {stats.map((s,i) => (
            <div className={`stat-card ${s.cls}`} key={i}>
              <div className="stat-card-label">
                <span className="stat-live-dot"></span>
                {s.label}
              </div>
              <div className="stat-card-num">
                {s.num}
                <span className="delta">{s.delta}</span>
              </div>
              <div className="stat-card-sub">{s.sub}</div>
            </div>
          ))}
        </div>

        <div className="divisions-row">
          <span className="divisions-label">{lang==='bn'?'বিভাগ অনুযায়ী':'BY DIVISION'}</span>
          {D.divisions.map((d,i) => (
            <button className={`div-pill ${d.cls}`} key={i}>
              <span>{lang==='bn'?d.name:d.en}</span>
              <span className="count">{d.count}</span>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

function Moments({ lang }) {
  return (
    <section className="moments">
      <div className="container">
        <div className="moments-grid">
          {D.moments.map((m,i) => (
            <a href="job-search.html" className={`moment-card ${m.cls}`} key={i}>
              <span className="moment-bg-glyph">{m.glyph}</span>
              <span className="moment-tag">{lang==='bn'?m.tag:m.en}</span>
              <div>
                <div className="moment-title">{lang==='bn'?m.title:m.titleEn}</div>
                <div className="moment-sub">{lang==='bn'?m.sub:m.subEn}</div>
              </div>
              <div className="moment-stat">
                <span className="moment-stat-num">{m.stat}</span>
                <span className="moment-stat-label">{lang==='bn'?m.label:m.labelEn}</span>
              </div>
              <span className="moment-arrow">{I.arrowUpRight}</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function FeaturedJobs({ lang, openToast }) {
  const [filter, setFilter] = useState('all');
  const [saved, setSaved] = useState(new Set([0]));
  const filtered = useMemo(() => {
    if (filter === 'high') return D.jobs.filter(j => j.match >= 85);
    if (filter === 'remote') return D.jobs.filter(j => /রিমোট|Remote/.test(j.loc));
    return D.jobs;
  }, [filter]);
  const toggleSave = (i, title) => {
    setSaved(prev => {
      const next = new Set(prev);
      if (next.has(i)) { next.delete(i); openToast(lang==='bn'?'সংরক্ষণ থেকে সরানো হয়েছে':'Removed from saved'); }
      else { next.add(i); openToast(lang==='bn'?`"${title}" সংরক্ষণ করা হয়েছে`:`Saved "${title}"`); }
      return next;
    });
  };
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-eyebrow">{lang==='bn'?'AI পার্সোনালাইজড · আজকের জন্য':'AI PERSONALIZED · TODAY'}</div>
            <h2 className="section-title">
              <span className="t-bn">আপনার জন্য <span className="ed">বাছাই করা</span></span>
              <span className="t-en">Hand-picked <span className="ed">for you</span></span>
            </h2>
            <p className="section-sub">
              <span className="t-bn">আপনার স্কিল, বিভাগ এবং স্যালারি প্রত্যাশার সাথে মেলে এমন রোল</span>
              <span className="t-en">Roles that match your skills, division, and salary expectations</span>
            </p>
          </div>
          <div className="section-toggle">
            <button className={filter==='all'?'active':''} onClick={()=>setFilter('all')}>{lang==='bn'?'সব':'All'}</button>
            <button className={filter==='high'?'active':''} onClick={()=>setFilter('high')}>{lang==='bn'?'উচ্চ ম্যাচ':'High match'}</button>
            <button className={filter==='remote'?'active':''} onClick={()=>setFilter('remote')}>{lang==='bn'?'রিমোট':'Remote'}</button>
          </div>
        </div>
        <div className="jobs-grid">
          {filtered.map((j,i) => (
            <article className={`job ${j.featured?'featured':''}`} key={i}>
              {j.hot && !j.featured && (
                <span className="hot-stamp">{I.flame}{lang==='bn'?'হট':'HOT'}</span>
              )}
              <div className="job-top">
                <div className={`job-mark ${j.mono}`}>{j.mark}</div>
                <span className={`match-pill ${j.match>=90?'high':''}`}>
                  {I.spark}<span className="pct">{j.match}%</span>
                </span>
              </div>
              <div>
                <div className="job-co">
                  {j.co}
                  {j.verified && <span className="verified">{I.check}</span>}
                </div>
                <h3 className="job-title">{lang==='bn'?j.title:j.titleEn}</h3>
              </div>
              <div className="job-tags">
                {j.tags.map((t,k) => <span className="job-tag" key={k}>{t}</span>)}
              </div>
              <div className="job-meta-row">
                <span className="item">{I.pin}{lang==='bn'?j.loc:j.locEn}</span>
                <span className="item">{I.briefcase}{lang==='bn'?j.exp:j.expEn}</span>
                <span className="item">{I.clock}{lang==='bn'?j.type:j.typeEn}</span>
              </div>
              <div className="job-salary">{j.salary}</div>
              <div className="job-foot">
                <div className="job-foot-left">
                  <span className={`job-deadline ${j.urgent?'urgent':''}`}>{I.clock}{lang==='bn'?j.deadline:j.deadlineEn}</span>
                  <span className="job-applicants">{I.users}{j.applicants}</span>
                </div>
                <button
                  className={`job-save ${saved.has(i)?'saved':''}`}
                  onClick={(e)=>{e.stopPropagation(); toggleSave(i, lang==='bn'?j.title:j.titleEn);}}
                >
                  {saved.has(i)?I.bookmarkFilled:I.bookmark}
                </button>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function AiBanner({ openAssist, lang }) {
  return (
    <section className="section">
      <div className="container">
        <div className="ai-banner">
          <div className="ai-banner-content">
            <div className="ai-eyebrow">{I.spark} {lang==='bn'?'নতুন · NOBBYO ইন্টেলিজেন্স':'NEW · NOBBYO INTELLIGENCE'}</div>
            <h2 className="ai-banner-title">
              <span className="t-bn">আপনার পরবর্তী ক্যারিয়ার মুভ <span className="gold">৬০ সেকেন্ডে</span> খুঁজুন।</span>
              <span className="t-en">Find your next move in <span className="gold">60 seconds.</span></span>
            </h2>
            <p className="ai-banner-sub">
              <span className="t-bn">আপনার CV আপলোড করুন (বাংলা বা ইংরেজি), NOBBYO AI আপনার স্কিল, লোকেশন এবং স্যালারির সাথে সবচেয়ে মেলে এমন <span style={{color:'var(--gold-bright)',fontWeight:700}}>৫টি রোল</span> বের করবে — অ্যাপ্লাই-রেডি কভার লেটার সহ।</span>
              <span className="t-en">Upload your CV (Bangla or English), NOBBYO AI surfaces your <span style={{color:'var(--gold-bright)',fontWeight:700}}>top 5 matched roles</span> — with apply-ready cover letters.</span>
            </p>
            <div className="ai-banner-actions">
              <button className="btn btn-gold" onClick={openAssist}>
                {I.spark}
                <span className="t-bn">CV আপলোড করুন</span>
                <span className="t-en">Upload CV</span>
              </button>
              <button className="btn btn-ghost" style={{borderColor:'rgba(255,255,255,0.18)',color:'var(--paper)'}} onClick={openAssist}>
                <span className="t-bn">AI-কে জিজ্ঞেস করুন</span>
                <span className="t-en">Ask AI</span>
                {I.arrowRight}
              </button>
            </div>
          </div>
          <div className="ai-banner-vis">
            <div className="match-float">
              <div className="match-float-pct">88%</div>
              <div className="match-float-info">
                <div className="match-float-title">Backend Engineer</div>
                <div className="match-float-co">Grameenphone · Dhaka</div>
              </div>
            </div>
            <div className="match-float">
              <div className="match-float-pct">96%</div>
              <div className="match-float-info">
                <div className="match-float-title">{lang==='bn'?'সিনিয়র প্রোডাক্ট ডিজাইনার':'Senior Product Designer'}</div>
                <div className="match-float-co">bKash · Gulshan</div>
              </div>
            </div>
            <div className="match-float">
              <div className="match-float-pct">87%</div>
              <div className="match-float-info">
                <div className="match-float-title">UX Researcher</div>
                <div className="match-float-co">Robi Axiata · Dhaka</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Companies({ lang }) {
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-eyebrow">{lang==='bn'?'১,৮৪০ কোম্পানি · যাচাইকৃত':'1,840 COMPANIES · VERIFIED'}</div>
            <h2 className="section-title">
              <span className="t-bn">যারা <span className="ed">এখনই</span> হায়ার করছে</span>
              <span className="t-en">Hiring <span className="ed">right now</span></span>
            </h2>
          </div>
          <a href="companies.html" className="btn btn-ghost">
            <span className="t-bn">সব কোম্পানি দেখুন</span>
            <span className="t-en">View all companies</span>
            {I.arrowRight}
          </a>
        </div>
        <div className="companies-grid">
          {D.companies.map((c,i) => (
            <a href="company-profile.html" className="co-card" key={i}>
              <div className={`co-card-mark ${c.cls}`}>{c.mark}</div>
              <div className="co-card-name">{c.name}</div>
              <div className="co-card-row">
                <span><span className="co-card-openings">{c.openings}</span> {lang==='bn'?'পদ':'roles'}</span>
                <span className="co-card-growth">{c.growth}</span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function Salary({ lang }) {
  const [hover, setHover] = useState(null);
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-eyebrow">{lang==='bn'?'রিয়েল ডেটা · ৪২,০০০ পয়েন্ট':'REAL DATA · 42K DATAPOINTS'}</div>
            <h2 className="section-title">
              <span className="t-bn">ঢাকার <span className="ed">স্যালারি</span> ইনসাইটস</span>
              <span className="t-en">Dhaka <span className="ed">salary</span> insights</span>
            </h2>
            <p className="section-sub">
              <span className="t-bn">মাসিক স্যালারি (৳ ‘০০০-এ) · ২০২৫ Q১</span>
              <span className="t-en">Monthly salary (৳ in '000s) · 2025 Q1</span>
            </p>
          </div>
          <div className="section-toggle">
            <button className="active">{lang==='bn'?'ঢাকা':'Dhaka'}</button>
            <button>{lang==='bn'?'চট্টগ্রাম':'Ctg'}</button>
            <button>{lang==='bn'?'সিলেট':'Sylhet'}</button>
          </div>
        </div>
        <div className="salary-card">
          <div className="salary-rows">
            {D.salaryRoles.map((s,i) => {
              const max = 200;
              const left = (s.min/max)*100;
              const width = ((s.max-s.min)/max)*100;
              const avgL = (s.avg/max)*100;
              return (
                <div className="salary-row" key={i}
                  onMouseEnter={()=>setHover(i)} onMouseLeave={()=>setHover(null)}>
                  <div className="salary-role">{lang==='bn'?s.role:s.roleEn}</div>
                  <div className="salary-bar-wrap">
                    <div className={`salary-bar ${s.cls}`} style={{left:`${left}%`,width:`${width}%`,opacity: hover===null||hover===i?1:0.45}}></div>
                    <div className="salary-avg-marker" style={{left:`${avgL}%`}}></div>
                  </div>
                  <div className="salary-numbers">
                    <span className="salary-min">৳{s.min}K</span>
                    <span className="salary-avg">৳{s.avg}K</span>
                    <span className="salary-max">৳{s.max}K</span>
                  </div>
                </div>
              );
            })}
          </div>
          <div className="salary-legend">
            <span className="salary-legend-item">
              <span className="salary-legend-bar"></span>
              {lang==='bn'?'২৫তম–৭৫তম পার্সেন্টাইল রেঞ্জ':'25th–75th percentile range'}
            </span>
            <span className="salary-legend-item">
              <span className="salary-legend-marker"></span>
              {lang==='bn'?'মিডিয়ান':'Median'}
            </span>
            <span style={{marginLeft:'auto'}}>{lang==='bn'?'সব ফিগার মাসিক, ট্যাক্স-পূর্ব':'All figures monthly, pre-tax'}</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function Skills({ lang }) {
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-eyebrow">{lang==='bn'?'ট্রেন্ডিং চাহিদা · ২০২৫':'TRENDING DEMAND · 2025'}</div>
            <h2 className="section-title">
              <span className="t-bn"><span className="ed">যে স্কিলে</span> বাংলাদেশ এখন বিনিয়োগ করছে</span>
              <span className="t-en">Skills <span className="ed">Bangladesh</span> is paying for</span>
            </h2>
          </div>
          <a href="career-paths.html" className="btn btn-ghost">
            {I.spark}
            <span className="t-bn">আপনার গ্যাপ চেক করুন</span>
            <span className="t-en">Check your gap</span>
          </a>
        </div>
        <div className="skills-grid">
          {D.skills.map((s,i) => (
            <div className="skill-card" key={i}>
              <div className="skill-name">{s.name}</div>
              <div className="skill-bar">
                <div className={`skill-bar-fill ${s.cls}`} style={{width:`${s.pct}%`}}></div>
              </div>
              <div className="skill-foot">
                <span className="pct">{s.pct}% {lang==='bn'?'চাহিদা':'demand'}</span>
                <span className="growth">↑ {s.growth}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Stories({ lang }) {
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-eyebrow">{lang==='bn'?'সফল গল্প · গত ৩০ দিন':'SUCCESS STORIES · LAST 30 DAYS'}</div>
            <h2 className="section-title">
              <span className="t-bn">৪২,০০০+ <span className="ed">নতুন শুরু</span></span>
              <span className="t-en">42K+ <span className="ed">fresh starts</span></span>
            </h2>
          </div>
        </div>
        <div className="stories-grid">
          {D.stories.map((s,i) => (
            <article className="story" key={i}>
              <div className="story-from-to">
                <div className={`story-avatar ${s.avatarCls}`}>{s.avatar}</div>
                <div style={{flex:1, minWidth:0}}>
                  <div className="story-name">{s.name}</div>
                  <div className="story-from">{s.from}</div>
                  <div className="story-arrow">
                    {I.arrowRight}
                    <span>{s.to}</span>
                  </div>
                </div>
              </div>
              <p className="story-quote">{lang==='bn'?s.quote:s.quoteEn}</p>
              <div className="story-foot">
                <span className="story-duration">⚡ {lang==='bn'?s.dur:s.durEn}</span>
                <span className="story-to">via NOBBYO Match</span>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function EmployerBanner({ lang }) {
  return (
    <section className="section">
      <div className="container">
        <div className="emp-banner">
          <div className="emp-side candidate">
            <div className="deco"></div>
            <div className="stamp">{lang==='bn'?'ক্যান্ডিডেটদের জন্য':'FOR CANDIDATES'}</div>
            <h3>
              <span className="t-bn">আপনার পাবলিক CV<br/>মাত্র ১০ মিনিটে</span>
              <span className="t-en">Your public CV<br/>in 10 minutes</span>
            </h3>
            <p>
              <span className="t-bn">বাংলা বা ইংরেজিতে আপনার পারফরম্যান্স পেজ তৈরি করুন। recruiter-রা সরাসরি আপনাকে খুঁজে পাবে।</span>
              <span className="t-en">Build your performance page in Bangla or English. Recruiters reach out to you.</span>
            </p>
            <a href="sign-in.html" className="emp-cta">
              <span className="t-bn">প্রোফাইল তৈরি করুন</span>
              <span className="t-en">Create profile</span>
              {I.arrowRight}
            </a>
            <div className="emp-stats">
              <div>
                <div className="emp-stat-num" style={{color:'var(--gold-deep)'}}>৭২%</div>
                <div className="emp-stat-label" style={{color:'var(--ink-3)'}}>{lang==='bn'?'রিচাউট রেট':'Reach-out rate'}</div>
              </div>
              <div>
                <div className="emp-stat-num" style={{color:'var(--ink)'}}>১৮ {lang==='bn'?'দিন':'days'}</div>
                <div className="emp-stat-label" style={{color:'var(--ink-3)'}}>{lang==='bn'?'গড় হায়ার':'avg to hire'}</div>
              </div>
            </div>
          </div>
          <div className="emp-side employer">
            <div className="deco"></div>
            <div className="stamp">{lang==='bn'?'এমপ্লয়ারদের জন্য':'FOR EMPLOYERS'}</div>
            <h3>
              <span className="t-bn">৫ গুণ দ্রুত<br/>হায়ারিং, যাচাইকৃত প্রতিভা</span>
              <span className="t-en">Hire 5× faster<br/>from verified talent</span>
            </h3>
            <p>
              <span className="t-bn">বাংলাদেশি ট্যালেন্ট পুলে সরাসরি প্রবেশ। ATS ইন্টিগ্রেশন, AI স্ক্রিনিং, এবং ব্যাকগ্রাউন্ড ভেরিফিকেশন।</span>
              <span className="t-en">Direct access to BD talent pool. ATS integration, AI screening, background verification built-in.</span>
            </p>
            <a href="recruiter-dashboard.html" className="emp-cta">
              <span className="t-bn">নিয়োগ শুরু করুন</span>
              <span className="t-en">Start hiring</span>
              {I.arrowRight}
            </a>
            <div className="emp-stats">
              <div>
                <div className="emp-stat-num">৫×</div>
                <div className="emp-stat-label">{lang==='bn'?'দ্রুত হায়ার':'faster hires'}</div>
              </div>
              <div>
                <div className="emp-stat-num">১,৮৪০</div>
                <div className="emp-stat-label">{lang==='bn'?'একটিভ এমপ্লয়ার':'active employers'}</div>
              </div>
              <div>
                <div className="emp-stat-num">৯৬%</div>
                <div className="emp-stat-label">{lang==='bn'?'রিটেনশন':'retention'}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer({ lang }) {
  const cols = [
    { title: lang==='bn'?'ক্যান্ডিডেটদের জন্য':'For Candidates', items: [
      {l:lang==='bn'?'চাকরি ব্রাউজ':'Browse Jobs', h:'job-search.html'},
      {l:lang==='bn'?'AI ম্যাচ':'AI Match', h:'ai-screening.html'},
      {l:lang==='bn'?'CV বিল্ডার':'CV Builder', h:'candidate-profile.html'},
      {l:lang==='bn'?'স্যালারি ইনসাইটস':'Salary Insights', h:'salary-insights.html'},
      {l:lang==='bn'?'ক্যারিয়ার পাথ':'Career Paths', h:'career-paths.html'},
    ]},
    { title: lang==='bn'?'এমপ্লয়ারদের জন্য':'For Employers', items: [
      {l:lang==='bn'?'জব পোস্ট':'Post a Job', h:'recruiter-dashboard.html'},
      {l:lang==='bn'?'ATS ইন্টিগ্রেশন':'ATS Integration', h:'ats-integration.html'},
      {l:lang==='bn'?'AI স্ক্রিনিং':'AI Screening', h:'ai-screening.html'},
      {l:lang==='bn'?'রিক্রুটার ড্যাশবোর্ড':'Recruiter Dashboard', h:'recruiter-dashboard.html'},
      {l:lang==='bn'?'প্রাইসিং':'Pricing', h:'pricing.html'},
    ]},
    { title: lang==='bn'?'বিশেষায়িত':'Specialized', items: [
      {l:lang==='bn'?'গভর্মেন্ট জব':'Govt Jobs', h:'govt-jobs.html'},
      {l:lang==='bn'?'ফ্রিল্যান্স গিগ':'Freelance Gigs', h:'freelance.html'},
      {l:lang==='bn'?'নারী ট্যালেন্ট':'Women in Tech', h:'women-in-tech.html'},
      {l:lang==='bn'?'শিখুন':'Learn', h:'learn.html'},
      {l:lang==='bn'?'প্রবাসী':'Diaspora', h:'diaspora.html'},
    ]},
    { title: lang==='bn'?'কোম্পানি':'Company', items: [
      {l:lang==='bn'?'আমাদের সম্পর্কে':'About', h:'about.html'},
      {l:lang==='bn'?'প্রেস':'Press', h:'press.html'},
      {l:lang==='bn'?'ব্লগ':'Blog', h:'blog.html'},
      {l:lang==='bn'?'কোম্পানি':'Companies', h:'companies.html'},
      {l:lang==='bn'?'যোগাযোগ':'Contact', h:'contact.html'},
    ]},
  ];
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-top">
          <div className="footer-brand-col">
            <div className="footer-brand-mark">
              <BrandLogo size="lg" dark />
            </div>
            <p className="footer-tag">
              <span className="t-bn">বাংলাদেশের ১ নম্বর AI চাকরির প্ল্যাটফর্ম। ৪২,০০০+ সফল হায়ার, ১,৮৪০+ যাচাইকৃত কোম্পানি, এবং বাংলায় সম্পূর্ণ অভিজ্ঞতা।</span>
              <span className="t-en">Bangladesh's #1 AI job platform. 42K+ hires, 1,840+ verified companies, fully native in Bangla.</span>
            </p>
            <div className="footer-app-row">
              <a href="sign-in.html" className="footer-app" aria-label="Download on App Store">
                <span className="em">📱</span>
                <span className="text">{lang==='bn'?'ডাউনলোড':'Download on'} <strong>App Store</strong></span>
              </a>
              <a href="sign-in.html" className="footer-app" aria-label="Get it on Google Play">
                <span className="em">▶</span>
                <span className="text">{lang==='bn'?'গেট ইট':'Get it on'} <strong>Google Play</strong></span>
              </a>
            </div>
          </div>
          {cols.map((c,i) => (
            <div key={i}>
              <div className="footer-col-title">{c.title}</div>
              <div className="footer-links">
                {c.items.map((it,k) => <a key={k} href={it.h}>{it.l}</a>)}
              </div>
            </div>
          ))}
        </div>
        <div className="footer-bottom">
          <div>© 2025 NOBBYO Jobs Ltd. {lang==='bn'?'সর্বস্বত্ব সংরক্ষিত।':'All rights reserved.'}</div>
          <div className="footer-bottom-links">
            <a href="privacy.html">{lang==='bn'?'প্রাইভেসি':'Privacy'}</a>
            <a href="terms.html">{lang==='bn'?'টার্মস':'Terms'}</a>
            <a href="cookies.html">{lang==='bn'?'কুকিজ':'Cookies'}</a>
            <a href="contact.html">{lang==='bn'?'অ্যাক্সেসিবিলিটি':'Accessibility'}</a>
          </div>
          <div className="footer-social">
            <a href="https://x.com/nobbyojobs" target="_blank" rel="noopener noreferrer" aria-label="X / Twitter">𝕏</a>
            <a href="https://facebook.com/nobbyojobs" target="_blank" rel="noopener noreferrer" aria-label="Facebook">F</a>
            <a href="https://linkedin.com/company/nobbyojobs" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">in</a>
            <a href="https://youtube.com/@nobbyojobs" target="_blank" rel="noopener noreferrer" aria-label="YouTube">YT</a>
          </div>
        </div>
        <div className="footer-bd-row">
          <span className="footer-flag"></span>
          <span>{lang==='bn'?'গর্বের সাথে বাংলাদেশে নির্মিত · ঢাকা':'PROUDLY BUILT IN BANGLADESH · DHAKA'}</span>
          <span style={{opacity:0.4}}>·</span>
          <span>BIDA Reg #BD-2019-04812</span>
          <span style={{opacity:0.4}}>·</span>
          <span>ISO 27001 · GDPR</span>
        </div>
      </div>
    </footer>
  );
}

function Fab({ openAssist, lang }) {
  return (
    <button className="fab" onClick={openAssist}>
      <span className="glow">{I.spark}</span>
      <span className="fab-text">
        <span className="t-bn">AI সহকারী</span>
        <span className="t-en">AI Assistant</span>
        <small>{lang==='bn'?'বাংলায় কথা বলুন':'Speak in Bangla'}</small>
      </span>
    </button>
  );
}

function Assistant({ open, onClose, lang }) {
  const [messages, setMessages] = useState([
    { who: 'bot', text: lang==='bn'?'হ্যালো! আমি NOBBYO AI। আপনার পরবর্তী চাকরি খুঁজতে সাহায্য করি? বাংলা বা ইংরেজি, যেকোনো ভাষায় বলতে পারেন।':'Hi! I\'m NOBBYO AI. Need help finding your next role? Speak Bangla or English.' }
  ]);
  const [input, setInput] = useState('');
  const [busy, setBusy] = useState(false);
  const bodyRef = useRef(null);

  useEffect(() => {
    if (bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
  }, [messages, busy]);

  const send = async (text) => {
    const q = (text ?? input).trim();
    if (!q || busy) return;
    setMessages(m => [...m, { who:'user', text: q }]);
    setInput('');
    setBusy(true);
    try {
      const reply = await window.claude.complete(
        `You are NOBBYO AI, a job-search assistant for Bangladesh. Reply in 2-3 short sentences, be specific to Bangladesh (mention bKash, Pathao, Grameenphone, Dhaka divisions, salary in BDT lakh/থanda etc when relevant). User language preference: ${lang==='bn'?'Bangla':'English'}. User said: "${q}"`
      );
      setMessages(m => [...m, { who:'bot', text: reply }]);
    } catch(e) {
      setMessages(m => [...m, { who:'bot', text: lang==='bn'?'দুঃখিত, একটু সমস্যা হয়েছে। আবার চেষ্টা করুন।':'Sorry, had trouble. Try again.' }]);
    } finally { setBusy(false); }
  };

  if (!open) return null;
  return (
    <div className="assist-overlay" onClick={onClose}>
      <div className="assist-panel" onClick={e=>e.stopPropagation()}>
        <div className="assist-head">
          <div className="assist-head-title">
            <span className="glow">{I.spark}</span>
            NOBBYO AI · {lang==='bn'?'ক্যারিয়ার সহকারী':'Career Assistant'}
          </div>
          <button className="assist-close" onClick={onClose}>{I.close}</button>
        </div>
        <div className="assist-body" ref={bodyRef}>
          {messages.map((m,i) => (
            <div className={`assist-msg ${m.who}`} key={i}>
              <div className="assist-msg-avatar">
                {m.who==='bot' ? I.spark : 'You'}
              </div>
              <div className="assist-msg-bubble">{m.text}</div>
            </div>
          ))}
          {busy && (
            <div className="assist-msg bot">
              <div className="assist-msg-avatar">{I.spark}</div>
              <div className="assist-msg-bubble">
                <div className="typing"><span></span><span></span><span></span></div>
              </div>
            </div>
          )}
          {messages.length === 1 && (
            <div className="assist-suggest-row">
              {D.assistantSuggestions.map((s,i) => (
                <button className="pill" key={i} onClick={()=>send(s)}>{s}</button>
              ))}
            </div>
          )}
        </div>
        <div className="assist-input-bar">
          <input
            placeholder={lang==='bn'?'যেমন: ঢাকায় AI engineer চাকরি':'e.g. AI engineer roles in Dhaka'}
            value={input} onChange={e=>setInput(e.target.value)}
            onKeyDown={e=>e.key==='Enter'&&send()}
          />
          <button className="send-btn" onClick={()=>send()}>{I.send}</button>
        </div>
      </div>
    </div>
  );
}

// ============================================================
// APP
// ============================================================
function App() {
  const [lang, setLang] = useState('bn');
  const [assistOpen, setAssistOpen] = useState(false);
  const [toast, setToast] = useState(null);

  useEffect(() => {
    document.body.classList.toggle('lang-bn', lang==='bn');
    document.body.classList.toggle('lang-en', lang==='en');
    document.documentElement.lang = lang;
  }, [lang]);

  const openToast = (msg) => {
    setToast(msg);
    setTimeout(()=>setToast(null), 2500);
  };

  return (
    <>
      <TopBar lang={lang} setLang={setLang} />
      <Header openAssist={()=>setAssistOpen(true)} />
      <Hero openAssist={()=>setAssistOpen(true)} lang={lang} />
      <window.TrustBar lang={lang} />
      <Moments lang={lang} />
      <FeaturedJobs lang={lang} openToast={openToast} />
      <AiBanner openAssist={()=>setAssistOpen(true)} lang={lang} />
      <Companies lang={lang} />
      <Salary lang={lang} />
      <window.CareerQuiz lang={lang} />
      <Skills lang={lang} />
      <Stories lang={lang} />
      <window.NewsCarousel lang={lang} />
      <EmployerBanner lang={lang} />
      <Footer lang={lang} />
      <Fab openAssist={()=>setAssistOpen(true)} lang={lang} />
      <Assistant open={assistOpen} onClose={()=>setAssistOpen(false)} lang={lang} />
      <window.AppBanner lang={lang} />
      {toast && <div className="toast">{I.check}{toast}</div>}
    </>
  );
}

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