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

const STEPS = [
  { n:'01', icon:'📥', t:{bn:'ক্যান্ডিডেট ইনপুট', en:'Candidate input'}, d:{bn:'CV আপলোড, ভয়েস CV বা LinkedIn ইম্পোর্ট — যেকোনো ফরম্যাটে', en:'Upload CV, record voice CV, or import from LinkedIn — any format'} },
  { n:'02', icon:'🧠', t:{bn:'বাংলা AI বিশ্লেষণ', en:'Bangla AI analysis'}, d:{bn:'বিশ্বের প্রথম বাংলা-ট্রেইন করা মডেল — স্কিল, এক্সপেরিয়েন্স ও পটেনশিয়াল ম্যাপ করে', en:'World\'s first Bangla-trained model maps skills, experience, and potential'} },
  { n:'03', icon:'🎯', t:{bn:'৭ অ্যাঙ্গেল ম্যাচিং', en:'7-angle matching'}, d:{bn:'স্কিল, সংস্কৃতি, লোকেশন, বেতন প্রত্যাশা, ভাষা, রিমোট, এবং ক্যারিয়ার পাথ', en:'Skills, culture, location, salary, language, remote, and career path'} },
  { n:'04', icon:'⚡', t:{bn:'২৪ ঘন্টায় শর্টলিস্ট', en:'Shortlist in 24h'}, d:{bn:'টপ-৫ যাচাইকৃত প্রার্থী — ব্যাখ্যাসহ, সরাসরি আপনার ইনবক্সে', en:'Top-5 verified candidates — with reasoning, straight to your inbox'} },
];

const FEATURES = [
  { icon:'🌐', t:{bn:'বাংলা + ইংরেজি', en:'Bangla + English'}, d:{bn:'CV বাংলায় হোক বা ইংরেজিতে — ৯৭% নির্ভুলতায় বিশ্লেষণ করি', en:'Whether CV is in Bangla or English, 97% analysis accuracy'} },
  { icon:'🎙️', t:{bn:'ভয়েস CV সাপোর্ট', en:'Voice CV support'}, d:{bn:'৩০ সেকেন্ডে কথা বলে CV — যাদের লেখার অভ্যাস কম তাদের জন্য', en:'Speak your CV in 30 seconds — built for talent uncomfortable with writing'} },
  { icon:'🛡️', t:{bn:'বায়াস ফিল্টার', en:'Bias filter'}, d:{bn:'নাম, ছবি, বয়স লুকানো রিভিউ মোড — সমান সুযোগ নিশ্চিত করে', en:'Hide name, photo, age — review mode to guarantee equal opportunity'} },
  { icon:'📊', t:{bn:'এক্সপ্ল্যানেবল স্কোর', en:'Explainable scores'}, d:{bn:'প্রতি প্রার্থীর জন্য কেন ম্যাচ — পয়েন্ট-বাই-পয়েন্ট ব্রেকডাউন', en:'Point-by-point breakdown of why a candidate matches'} },
  { icon:'🔄', t:{bn:'ATS-এ সিঙ্ক', en:'ATS sync'}, d:{bn:'BambooHR, Workday, Zoho — এক ক্লিকে স্ক্রিনড প্রার্থী পাঠান', en:'BambooHR, Workday, Zoho — push screened candidates with one click'} },
  { icon:'🔒', t:{bn:'GDPR + লোকাল কমপ্লায়েন্স', en:'GDPR + local compliance'}, d:{bn:'বাংলাদেশ ডেটা প্রোটেকশন আইন এবং GDPR মেনে — ডেটা থাকে BD-তেই', en:'Bangladesh DPA + GDPR compliant — data stays in BD'} },
];

const STATS = [
  { n:'৯৭%', nEn:'97%', l:{bn:'ম্যাচ নির্ভুলতা', en:'Match accuracy'} },
  { n:'২৪ ঘ.', nEn:'24h', l:{bn:'গড় শর্টলিস্ট সময়', en:'Avg shortlist time'} },
  { n:'৭০%', nEn:'70%', l:{bn:'হায়ারিং সাইকেল কমেছে', en:'Hiring cycle reduction'} },
  { n:'৩.৪x', nEn:'3.4x', l:{bn:'ROI গড়', en:'Avg ROI'} },
];

function App() {
  const [lang, setLang] = window.usePageLang('bn');
  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">AI স্ক্রিনিং · বাংলায় ট্রেইনড</span>
            <span className="t-en">AI Screening · Bangla-trained</span>
          </div>
          <h1 className="srch-title">
            <span className="t-bn">২৪ ঘন্টায় টপ-৫ <em className="srch-rotate">সঠিক প্রার্থী</em></span>
            <span className="t-en">Top-5 right candidates <em className="srch-rotate">in 24 hours</em></span>
          </h1>
          <p className="ftr-hero-sub">
            <span className="t-bn">বিশ্বের প্রথম বাংলা ভাষায় ট্রেইন করা CV ম্যাচিং AI। স্কিল, কালচার, লোকেশন এবং বেতনের ভিত্তিতে স্বয়ংক্রিয় শর্টলিস্ট।</span>
            <span className="t-en">The world's first Bangla-trained CV matching AI. Auto-shortlist by skills, culture, location, and salary expectations.</span>
          </p>
          <div className="ftr-hero-actions">
            <a href="pricing.html" className="btn btn-ink btn-lg">
              <span className="t-bn">ফ্রি ট্রায়াল শুরু করুন</span>
              <span className="t-en">Start free trial</span>
              {I.arrowRight}
            </a>
            <a href="contact.html" className="btn btn-ghost btn-lg">
              <span className="t-bn">ডেমো বুক করুন</span>
              <span className="t-en">Book a demo</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>

      {/* How it works */}
      <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">How it works</span>
            </div>
            <h2 className="ftr-section-title">
              <span className="t-bn">৪ ধাপে সঠিক প্রার্থী</span>
              <span className="t-en">The right hire in 4 steps</span>
            </h2>
          </div>
          <div className="ftr-steps">
            {STEPS.map(s => (
              <div key={s.n} className="ftr-step">
                <div className="ftr-step-num">STEP {s.n}</div>
                <div className="ftr-step-icon">{s.icon}</div>
                <h3 className="ftr-step-title">
                  <span className="t-bn">{s.t.bn}</span>
                  <span className="t-en">{s.t.en}</span>
                </h3>
                <p className="ftr-step-desc">
                  <span className="t-bn">{s.d.bn}</span>
                  <span className="t-en">{s.d.en}</span>
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Comparison */}
      <section className="ftr-section ftr-bg-paper">
        <div className="container">
          <div className="ftr-section-head">
            <div className="ftr-section-eyebrow">
              <span className="t-bn">আগে বনাম পরে</span>
              <span className="t-en">Before vs after</span>
            </div>
            <h2 className="ftr-section-title">
              <span className="t-bn">AI স্ক্রিনিং কী পরিবর্তন আনে?</span>
              <span className="t-en">What AI screening changes</span>
            </h2>
          </div>
          <div className="ftr-compare">
            <div className="ftr-compare-col ftr-compare-without">
              <div className="ftr-compare-label">
                <span className="t-bn">ম্যানুয়াল স্ক্রিনিং দিয়ে</span>
                <span className="t-en">With manual screening</span>
              </div>
              <h3 className="ftr-compare-title">
                <span className="t-bn">৩-৪ সপ্তাহ অপেক্ষা</span>
                <span className="t-en">3-4 weeks of waiting</span>
              </h3>
              <div className="ftr-compare-list">
                {[
                  {bn:'৫০০+ CV হাতে রিভিউ', en:'Manually review 500+ CVs'},
                  {bn:'কালচার ফিট খুঁজে পাওয়া কঠিন', en:'Culture fit hard to assess'},
                  {bn:'অজান্তে বায়াস ঢুকে যায়', en:'Unconscious bias creeps in'},
                  {bn:'ভাল প্রার্থী হারানো যায়', en:'Lose great candidates to slow process'},
                  {bn:'রিক্রুটারের ৪০% সময় খরচ', en:'40% recruiter time spent here'},
                ].map((it, i) => (
                  <div key={i} className="ftr-compare-item">
                    <span className="ftr-compare-icon">{I.close}</span>
                    <span>
                      <span className="t-bn">{it.bn}</span>
                      <span className="t-en">{it.en}</span>
                    </span>
                  </div>
                ))}
              </div>
            </div>

            <div className="ftr-compare-col ftr-compare-with">
              <div className="ftr-compare-label">
                <span className="t-bn">NOBBYO AI স্ক্রিনিংয়ে</span>
                <span className="t-en">With NOBBYO AI screening</span>
              </div>
              <h3 className="ftr-compare-title">
                <span className="t-bn">২৪ ঘন্টায় টপ-৫</span>
                <span className="t-en">Top-5 in 24 hours</span>
              </h3>
              <div className="ftr-compare-list">
                {[
                  {bn:'AI ৭ অ্যাঙ্গেলে ম্যাচ করে', en:'AI matches across 7 angles'},
                  {bn:'কালচার + ভাষা ফিট অটোম্যাটিক', en:'Culture + language fit auto-scored'},
                  {bn:'বায়াস ফিল্টার অপশন', en:'Bias-filter mode option'},
                  {bn:'প্রিমিয়াম প্রার্থীরা সিগনাল পান', en:'Top candidates get signaled fast'},
                  {bn:'রিক্রুটার ফোকাস করেন ইন্টারভিউতে', en:'Recruiters focus on interviews'},
                ].map((it, i) => (
                  <div key={i} className="ftr-compare-item">
                    <span className="ftr-compare-icon">{I.check}</span>
                    <span>
                      <span className="t-bn">{it.bn}</span>
                      <span className="t-en">{it.en}</span>
                    </span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Features grid */}
      <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">Features</span>
            </div>
            <h2 className="ftr-section-title">
              <span className="t-bn">যা আপনার হায়ারিংকে আলাদা করে</span>
              <span className="t-en">What sets your hiring apart</span>
            </h2>
          </div>
          <div className="ftr-features-grid">
            {FEATURES.map((f,i) => (
              <div key={i} className="ftr-feature">
                <div className="ftr-feature-icon" style={{fontSize:'24px', background:'var(--gold-mist)'}}>
                  <span style={{fontSize:'24px'}}>{f.icon}</span>
                </div>
                <h3 className="ftr-feature-title">
                  <span className="t-bn">{f.t.bn}</span>
                  <span className="t-en">{f.t.en}</span>
                </h3>
                <p className="ftr-feature-desc">
                  <span className="t-bn">{f.d.bn}</span>
                  <span className="t-en">{f.d.en}</span>
                </p>
              </div>
            ))}
          </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">৩০ দিনের ফ্রি ট্রায়াল শুরু করুন</span>
              <span className="t-en">Start your 30-day free trial</span>
            </h2>
            <p className="ftr-cta-sub">
              <span className="t-bn">ক্রেডিট কার্ড লাগবে না। প্রথম ৩টি জব পোস্টে AI স্ক্রিনিং অন্তর্ভুক্ত।</span>
              <span className="t-en">No credit card required. AI screening included on your first 3 job posts.</span>
            </p>
            <div className="ftr-cta-actions">
              <a href="pricing.html" className="btn btn-ink btn-lg">
                <span className="t-bn">ট্রায়াল শুরু করুন</span>
                <span className="t-en">Start trial</span>
                {I.arrowRight}
              </a>
              <a href="contact.html" className="btn btn-ghost btn-lg">
                <span className="t-bn">সেলসের সাথে কথা বলুন</span>
                <span className="t-en">Talk to sales</span>
              </a>
            </div>
          </div>
        </div>
      </section>

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

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