/* global React, ReactDOM, NOBBYO_ICONS, PageHeader, PageTopBar, PageFooter, usePageLang */
const { useState, useEffect, useRef, useMemo } = React;

// ============================================================
// JOB DATA — pulled from listing
// ============================================================
const APPLY_JOB = {
  id: 'bkash-spd',
  company: 'bKash',
  companyTagline: 'Mobile Financial Services',
  logoColor: '#E2126B',
  title_bn: 'সিনিয়র প্রোডাক্ট ডিজাইনার',
  title_en: 'Senior Product Designer',
  location_bn: 'গুলশান, ঢাকা',
  location_en: 'Gulshan, Dhaka',
  type_bn: 'হাইব্রিড',
  type_en: 'Hybrid',
  salary_bn: '৳১,২০,০০০ – ১,৮০,০০০',
  salary_en: 'BDT 1,20,000 – 1,80,000',
  applicants: 142,
  daysLeft: 6,
  matchScore: 94,
};

const SCREENING_QUESTIONS = [
  {
    id: 'q1',
    type: 'radio',
    required: true,
    text_bn: 'আপনার বর্তমান কাজের অভিজ্ঞতা কত বছরের প্রোডাক্ট ডিজাইনে?',
    text_en: 'How many years of product design experience do you have?',
    options_bn: ['০–২ বছর', '৩–৫ বছর', '৬–৮ বছর', '৯+ বছর'],
    options_en: ['0–2 years', '3–5 years', '6–8 years', '9+ years'],
  },
  {
    id: 'q2',
    type: 'radio',
    required: true,
    text_bn: 'আপনি কি Figma, FigJam ও design system management-এ দক্ষ?',
    text_en: 'Are you proficient with Figma, FigJam and design system management?',
    options_bn: ['হ্যাঁ, এক্সপার্ট লেভেল', 'হ্যাঁ, ইন্টারমিডিয়েট', 'কিছুটা পরিচিত', 'না'],
    options_en: ['Yes, expert level', 'Yes, intermediate', 'Some familiarity', 'No'],
  },
  {
    id: 'q3',
    type: 'scale',
    required: true,
    text_bn: 'নিজেকে fintech বা MFS অভিজ্ঞতায় কতটা confident মনে করেন?',
    text_en: 'How confident are you with fintech / MFS domain experience?',
    labels_bn: ['একদম না', 'কম', 'মাঝামাঝি', 'ভালো', 'এক্সপার্ট'],
    labels_en: ['Not at all', 'Low', 'Medium', 'Good', 'Expert'],
  },
  {
    id: 'q4',
    type: 'textarea',
    required: true,
    text_bn: 'একটি প্রোডাক্ট ডিজাইন প্রজেক্টের কথা বলুন যেখানে আপনি measurable impact তৈরি করেছেন।',
    text_en: 'Tell us about a product design project where you created measurable impact.',
    placeholder_bn: 'কনটেক্সট, আপনার ভূমিকা, এবং metrics নিয়ে ৩-৪ লাইন লিখুন...',
    placeholder_en: 'Write 3-4 lines on context, your role, and metrics...',
  },
  {
    id: 'q5',
    type: 'radio',
    required: false,
    text_bn: 'আপনি কখন থেকে যোগ দিতে পারবেন?',
    text_en: 'When can you start?',
    options_bn: ['এখনই', '১৫ দিনের মধ্যে', '১ মাস', '২ মাস বা পরে'],
    options_en: ['Immediately', 'Within 15 days', '1 month', '2 months or later'],
  },
  {
    id: 'q6',
    type: 'text',
    required: false,
    text_bn: 'আপনার expected মাসিক বেতন (BDT)',
    text_en: 'Your expected monthly salary (BDT)',
    placeholder_bn: 'যেমন: ১,৫০,০০০',
    placeholder_en: 'e.g. 1,50,000',
  },
];

const AI_PROMPTS_BN = [
  'এই jobের সাথে আমার skill match হাইলাইট করো',
  'Fintech impact stories যোগ করো',
  'আরো confident tone এ লেখো',
  'ছোট ও sharp করো',
  'Bangla তে লেখো',
];
const AI_PROMPTS_EN = [
  'Highlight my skill match for this job',
  'Add fintech impact stories',
  'Make tone more confident',
  'Make it shorter and sharper',
  'Translate to Bangla',
];

const AI_DRAFT_BN = `প্রিয় bKash টিম,\n\nসিনিয়র প্রোডাক্ট ডিজাইনার পদের জন্য আবেদন করতে পেরে আমি উৎসাহিত। গত ৫ বছরে Pathao এ থেকে ride-hailing থেকে food, parcel ও payments — multiple verticals এ ০-১ ডিজাইন drive করেছি, যেখানে rural-urban Bangladesh এর varied digital literacy কে কেন্দ্র করে কাজ করেছি।\n\nbKash এর USSD-first user base থেকে smartphone-native journey-তে যে transition চলছে, সেটিতে আমার Pathao Pay এর experience সরাসরি কাজে লাগবে — আমরা first-time digital wallet user দের onboarding completion ৪১% থেকে ৭৮% এ নিয়ে গিয়েছিলাম।\n\nআমি bKash এর mission — \"Fintech for the next billion\" — এর সাথে গভীরভাবে align করি এবং Gulshan অফিসে আপনাদের team এর সাথে কথা বলতে আগ্রহী।`;

const AI_DRAFT_EN = `Dear bKash Team,\n\nI'm excited to apply for the Senior Product Designer role. Over the last 5 years at Pathao, I've driven 0-1 design across ride-hailing, food, parcel, and payments — always centered on Bangladesh's wide digital-literacy spectrum.\n\nbKash's transition from USSD-first to smartphone-native journeys is exactly where my Pathao Pay experience applies — we lifted first-time digital-wallet onboarding completion from 41% to 78%.\n\nI deeply align with bKash's mission of "Fintech for the next billion" and would love to meet your team in Gulshan.`;

const NEXT_STEPS_BN = [
  { t: 'ইমেইলে কনফার্মেশন আসছে', d: 'amal@example.com — চেক করুন (spam ও দেখুন)' },
  { t: '৩-৫ দিনে recruiter response', d: 'bKash-এর গড় response time' },
  { t: 'প্রস্তুত থাকুন: portfolio review', d: 'shortlist হলে portfolio call হবে' },
  { t: 'application track করুন', d: '"আমার আবেদনসমূহ" থেকে status দেখুন' },
];
const NEXT_STEPS_EN = [
  { t: 'Confirmation email coming', d: 'amal@example.com — check inbox & spam' },
  { t: 'Recruiter responds in 3-5 days', d: 'Average response time for bKash' },
  { t: 'Be ready for portfolio review', d: 'If shortlisted, expect a portfolio call' },
  { t: 'Track your application', d: 'View status under "My Applications"' },
];

const SIMILAR = [
  { co: 'Grameenphone', logo: 'GP', logoColor: '#00A1E0', title_bn: 'প্রোডাক্ট ডিজাইনার, Digital', title_en: 'Product Designer, Digital', match: 91 },
  { co: 'Pathao', logo: 'P', logoColor: '#04A14F', title_bn: 'সিনিয়র UX ডিজাইনার', title_en: 'Senior UX Designer', match: 88 },
  { co: 'Nagad', logo: 'N', logoColor: '#F37021', title_bn: 'লিড প্রোডাক্ট ডিজাইনার', title_en: 'Lead Product Designer', match: 85 },
  { co: 'ShopUp', logo: 'S', logoColor: '#FE5621', title_bn: 'প্রোডাক্ট ডিজাইনার II', title_en: 'Product Designer II', match: 82 },
];

// ============================================================
// STEP TRACKER
// ============================================================
const STEPS = [
  { id: 1, label_bn: 'ধাপ ০১', label_en: 'STEP 01', name_bn: 'CV রিভিউ', name_en: 'Review CV' },
  { id: 2, label_bn: 'ধাপ ০২', label_en: 'STEP 02', name_bn: 'কভার লেটার', name_en: 'Cover Letter' },
  { id: 3, label_bn: 'ধাপ ০৩', label_en: 'STEP 03', name_bn: 'স্ক্রিনিং প্রশ্ন', name_en: 'Screening Qs' },
  { id: 4, label_bn: 'ধাপ ০৪', label_en: 'STEP 04', name_bn: 'রিভিউ ও জমা', name_en: 'Review & Submit' },
];

function StepRail({ current, lang, onJump }) {
  return (
    <aside className="af-rail">
      <div className="af-rail-title">{lang === 'bn' ? 'আবেদন প্রক্রিয়া' : 'Application'}</div>
      {STEPS.map((s, i) => {
        const isDone = current > s.id;
        const isCurrent = current === s.id;
        const cls = `af-step ${isDone ? 'is-done' : ''} ${isCurrent ? 'is-current' : ''}`;
        return (
          <div key={s.id} className={cls} onClick={() => onJump(s.id)}>
            <div className="af-step-disc">
              {isDone ? (
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><polyline points="20 6 9 17 4 12"/></svg>
              ) : s.id}
              {i < STEPS.length - 1 && <span className="af-step-line" />}
            </div>
            <div className="af-step-text">
              <div className="af-step-label">{lang === 'bn' ? s.label_bn : s.label_en}</div>
              <div className="af-step-name">
                <span className="t-bn">{s.name_bn}</span>
                <span className="t-en">{s.name_en}</span>
              </div>
            </div>
          </div>
        );
      })}
      <div className="af-rail-meta">
        <div><strong>{lang === 'bn' ? 'প্রোগ্রেস' : 'Progress'}</strong></div>
        <div><span className="af-rail-save"><span className="af-rail-save-dot" />{lang === 'bn' ? 'অটো-সেভড' : 'Auto-saved'}</span></div>
        <div>{lang === 'bn' ? 'যেকোনো সময় ফিরে আসতে পারবেন' : 'You can return anytime'}</div>
      </div>
    </aside>
  );
}

// ============================================================
// JOB CARD (right rail)
// ============================================================
function JobCard({ lang }) {
  return (
    <aside className="af-job-card">
      <span className="af-job-pulse"><span className="af-job-pulse-dot" />{lang === 'bn' ? 'এই পদে আবেদন করছেন' : 'Applying for'}</span>
      <div className="af-job-co">
        <div className="af-job-logo" style={{ background: APPLY_JOB.logoColor }}>b</div>
        <div>
          <div className="af-job-co-name">{APPLY_JOB.company}</div>
          <div className="af-job-co-sub">{APPLY_JOB.companyTagline}</div>
        </div>
      </div>
      <h3 className="af-job-title">{lang === 'bn' ? APPLY_JOB.title_bn : APPLY_JOB.title_en}</h3>
      <div className="af-job-meta">
        <span className="af-job-meta-pill">📍 {lang === 'bn' ? APPLY_JOB.location_bn : APPLY_JOB.location_en}</span>
        <span className="af-job-meta-pill">{lang === 'bn' ? APPLY_JOB.type_bn : APPLY_JOB.type_en}</span>
      </div>
      <div className="af-job-meta">
        <span className="af-job-meta-pill" style={{background: 'var(--gold-mist)', color: 'var(--gold-deep)'}}>💰 {lang === 'bn' ? APPLY_JOB.salary_bn : APPLY_JOB.salary_en}</span>
      </div>
      <div className="af-job-stats">
        <div>
          <div className="af-job-stat-num">{lang === 'bn' ? '১৪২' : '142'}</div>
          <div className="af-job-stat-label">{lang === 'bn' ? 'আবেদনকারী' : 'Applicants'}</div>
        </div>
        <div>
          <div className="af-job-stat-num">{lang === 'bn' ? '৬' : '6'}</div>
          <div className="af-job-stat-label">{lang === 'bn' ? 'দিন বাকি' : 'Days left'}</div>
        </div>
      </div>
      <div className="af-job-match">
        <div className="af-job-match-orb">{lang === 'bn' ? '৯৪%' : '94%'}</div>
        <div className="af-job-match-text">
          <strong>{lang === 'bn' ? 'AI Match স্কোর' : 'AI Match Score'}</strong>
          {lang === 'bn' ? 'আপনার profile এই pos. এর সাথে strong match' : 'Your profile is a strong match for this role'}
        </div>
      </div>
    </aside>
  );
}

// ============================================================
// STEP 1 — CV
// ============================================================
function StepCV({ lang, cvMode, setCvMode }) {
  return (
    <div className="af-card">
      <div className="af-card-head">
        <div className="af-step-no">{lang === 'bn' ? 'ধাপ ০১ / ০৪' : 'Step 01 / 04'}</div>
        <h1>{lang === 'bn' ? 'আপনার CV রিভিউ করুন' : 'Review your CV'}</h1>
        <p>{lang === 'bn' ? 'আমরা আপনার NOBBYO প্রোফাইল থেকে CV তৈরি করেছি। চাইলে নতুন আপলোড করতে পারেন।' : 'We built a CV from your NOBBYO profile. You can also upload a new one.'}</p>
      </div>

      <div className="af-cv-toggle">
        <button className={`af-cv-opt ${cvMode === 'profile' ? 'is-on' : ''}`} onClick={() => setCvMode('profile')}>
          <div className="af-cv-opt-rad" />
          <div className="af-cv-opt-body">
            <div className="af-cv-opt-title">
              {lang === 'bn' ? 'NOBBYO প্রোফাইল CV' : 'NOBBYO Profile CV'}
              <span className="af-pill">{lang === 'bn' ? 'প্রস্তুত' : 'Ready'}</span>
            </div>
            <div className="af-cv-opt-sub">{lang === 'bn' ? 'আপনার complete profile থেকে auto-generated' : 'Auto-generated from your complete profile'}</div>
          </div>
        </button>
        <button className={`af-cv-opt ${cvMode === 'upload' ? 'is-on' : ''}`} onClick={() => setCvMode('upload')}>
          <div className="af-cv-opt-rad" />
          <div className="af-cv-opt-body">
            <div className="af-cv-opt-title">{lang === 'bn' ? 'PDF আপলোড করুন' : 'Upload PDF'}</div>
            <div className="af-cv-opt-sub">{lang === 'bn' ? 'নিজের CV (PDF, max 5MB) আপলোড করুন' : 'Upload your own CV (PDF, max 5MB)'}</div>
          </div>
        </button>
      </div>

      {cvMode === 'profile' ? (
        <>
          <div className="af-cv-preview">
            <div className="af-cv-prev-head">
              <div className="af-cv-prev-head-l">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
                {lang === 'bn' ? 'CV প্রিভিউ' : 'CV Preview'}
              </div>
              <div className="af-cv-prev-head-r">
                <button>{lang === 'bn' ? 'এডিট' : 'Edit'}</button>
                <button>{lang === 'bn' ? 'ডাউনলোড' : 'Download'}</button>
              </div>
            </div>
            <div className="af-cv-prev-body">
              <div className="af-cv-prev-name">{lang === 'bn' ? 'আমল হোসেন' : 'Amal Hossain'}</div>
              <div className="af-cv-prev-role">{lang === 'bn' ? 'Senior Product Designer · ৫+ বছর অভিজ্ঞতা' : 'Senior Product Designer · 5+ years experience'}</div>
              <div className="af-cv-prev-meta">
                <span>📍 {lang === 'bn' ? 'ধানমন্ডি, ঢাকা' : 'Dhanmondi, Dhaka'}</span>
                <span>📧 amal@example.com</span>
                <span>📱 +880 17XX-XXXXXX</span>
                <span>🔗 amalhossain.design</span>
              </div>

              <div className="af-cv-prev-section">
                <h4>{lang === 'bn' ? 'অভিজ্ঞতা' : 'Experience'}</h4>
                <div className="af-cv-prev-job">
                  <div className="af-cv-prev-job-date">2022 — {lang === 'bn' ? 'বর্তমান' : 'Present'}</div>
                  <div>
                    <div className="af-cv-prev-job-role">{lang === 'bn' ? 'সিনিয়র প্রোডাক্ট ডিজাইনার' : 'Senior Product Designer'}</div>
                    <div className="af-cv-prev-job-co">Pathao · {lang === 'bn' ? 'ঢাকা' : 'Dhaka'}</div>
                  </div>
                </div>
                <div className="af-cv-prev-job">
                  <div className="af-cv-prev-job-date">2020 — 2022</div>
                  <div>
                    <div className="af-cv-prev-job-role">{lang === 'bn' ? 'প্রোডাক্ট ডিজাইনার' : 'Product Designer'}</div>
                    <div className="af-cv-prev-job-co">Chaldal · {lang === 'bn' ? 'ঢাকা' : 'Dhaka'}</div>
                  </div>
                </div>
              </div>

              <div className="af-cv-prev-section">
                <h4>{lang === 'bn' ? 'দক্ষতা' : 'Skills'}</h4>
                <div className="af-cv-prev-skills">
                  {['Figma', 'Design Systems', 'User Research', 'Prototyping', 'Fintech UX', 'Mobile Design', 'A/B Testing'].map(s => (
                    <span key={s} className="af-cv-prev-skill">{s}</span>
                  ))}
                </div>
              </div>
            </div>
          </div>

          <div className="af-cv-match">
            <div className="af-cv-match-orb">94%</div>
            <div className="af-cv-match-text">
              <div className="af-cv-match-title">
                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 16.8l-6.2 4.5 2.4-7.4L2 9.4h7.6z"/></svg>
                {lang === 'bn' ? 'আপনার CV এই job-এর সাথে strong match' : 'Your CV is a strong match for this job'}
              </div>
              <div className="af-cv-match-sub">{lang === 'bn' ? 'NOBBYO AI আপনার profile analyse করেছে' : 'NOBBYO AI has analysed your profile'}</div>
              <div className="af-cv-match-strengths">
                {(lang === 'bn'
                  ? ['Figma এক্সপার্ট', 'Fintech experience', '৫+ বছর সিনিয়র লেভেল', 'Mobile-first']
                  : ['Figma expert', 'Fintech exp.', '5+ yrs senior', 'Mobile-first']
                ).map(s => <span key={s} className="af-cv-match-strength">{s}</span>)}
              </div>
            </div>
          </div>
        </>
      ) : (
        <div className="af-upload">
          <div className="af-upload-icon">↑</div>
          <div className="af-upload-title">{lang === 'bn' ? 'আপনার CV ফাইল drag করুন বা ব্রাউজ করুন' : 'Drag your CV here or browse'}</div>
          <div className="af-upload-sub">{lang === 'bn' ? 'PDF, DOC, DOCX সমর্থিত · সর্বোচ্চ ৫ MB' : 'PDF, DOC, DOCX supported · Max 5 MB'}</div>
          <button className="af-upload-btn">{lang === 'bn' ? 'ফাইল নির্বাচন করুন' : 'Choose file'}</button>
        </div>
      )}
    </div>
  );
}

// ============================================================
// STEP 2 — COVER LETTER
// ============================================================
function StepCoverLetter({ lang, mode, setMode, text, setText, draftShown, setDraftShown }) {
  const draft = lang === 'bn' ? AI_DRAFT_BN : AI_DRAFT_EN;
  return (
    <div className="af-card">
      <div className="af-card-head">
        <div className="af-step-no">{lang === 'bn' ? 'ধাপ ০২ / ০৪' : 'Step 02 / 04'}</div>
        <h1>{lang === 'bn' ? 'কভার লেটার লিখুন' : 'Write a cover letter'}</h1>
        <p>{lang === 'bn' ? 'এক ভালো কভার লেটার আপনার interview chance ৩x বাড়িয়ে দেয়। NOBBYO AI সাহায্য করতে প্রস্তুত।' : 'A good cover letter triples your interview odds. NOBBYO AI is ready to help.'}</p>
      </div>

      <div className="af-cl-tabs">
        <button className={`af-cl-tab ${mode === 'manual' ? 'is-on' : ''}`} onClick={() => setMode('manual')}>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 19l7-7 3 3-7 7-3-3z"/><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/></svg>
          {lang === 'bn' ? 'নিজে লিখি' : 'Write myself'}
        </button>
        <button className={`af-cl-tab is-ai ${mode === 'ai' ? 'is-on' : ''}`} onClick={() => setMode('ai')}>
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l1.5 6.5L20 10l-6.5 1.5L12 18l-1.5-6.5L4 10l6.5-1.5z"/></svg>
          {lang === 'bn' ? 'AI সহায়তায়' : 'With AI assist'}
        </button>
      </div>

      <div className="af-cl-editor">
        <div className="af-cl-toolbar">
          <button className="af-cl-tool" title="Bold"><b>B</b></button>
          <button className="af-cl-tool" title="Italic" style={{fontStyle: 'italic'}}>I</button>
          <button className="af-cl-tool" title="Underline" style={{textDecoration: 'underline'}}>U</button>
          <span className="af-cl-tool-divider" />
          <button className="af-cl-tool" title="List">≡</button>
          <button className="af-cl-tool" title="Quote">&rdquo;</button>
          <button className="af-cl-tool" title="Link">🔗</button>
        </div>
        <textarea
          className="af-cl-textarea"
          placeholder={lang === 'bn' ? 'প্রিয় hiring manager,\n\nএই পদের প্রতি আমার আগ্রহ...' : 'Dear hiring manager,\n\nI am excited to apply...'}
          value={text}
          onChange={(e) => setText(e.target.value)}
        />
        <div className="af-cl-meta">
          <span><strong>{text.split(/\s+/).filter(Boolean).length}</strong> {lang === 'bn' ? 'শব্দ' : 'words'} · <strong>{text.length}</strong> {lang === 'bn' ? 'অক্ষর' : 'chars'}</span>
          <span>{lang === 'bn' ? '২০০–৩৫০ শব্দ আদর্শ' : '200–350 words ideal'}</span>
        </div>
      </div>

      {mode === 'ai' && (
        <div className="af-ai-panel">
          <div className="af-ai-head">
            <div className="af-ai-orb">
              <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l1.5 6.5L20 10l-6.5 1.5L12 18l-1.5-6.5L4 10l6.5-1.5z"/></svg>
            </div>
            <div>
              <div className="af-ai-label">{lang === 'bn' ? 'NOBBYO AI' : 'NOBBYO AI'}</div>
              <div className="af-ai-title">{lang === 'bn' ? 'কীভাবে সাহায্য করবো?' : 'How can I help?'}</div>
            </div>
          </div>
          <div className="af-ai-prompts">
            {(lang === 'bn' ? AI_PROMPTS_BN : AI_PROMPTS_EN).map((p, i) => (
              <button key={i} className="af-ai-prompt" onClick={() => setDraftShown(true)}>{p}</button>
            ))}
            <button className="af-ai-prompt" onClick={() => setDraftShown(true)} style={{background: 'var(--asb-orange)', borderColor: 'var(--asb-orange)'}}>
              {lang === 'bn' ? '✨ আমার জন্য draft করো' : '✨ Draft for me'}
            </button>
          </div>

          {draftShown && (
            <div className="af-ai-draft">
              <div className="af-ai-draft-head">
                <span>{lang === 'bn' ? 'AI draft (preview)' : 'AI draft (preview)'}</span>
                <div className="af-ai-draft-actions">
                  <button onClick={() => setDraftShown(false)}>{lang === 'bn' ? 'বাদ' : 'Discard'}</button>
                  <button>{lang === 'bn' ? 'আবার generate' : 'Regenerate'}</button>
                  <button className="is-primary" onClick={() => { setText(draft); setDraftShown(false); }}>
                    {lang === 'bn' ? 'এডিটরে যোগ করো' : 'Use this'}
                  </button>
                </div>
              </div>
              <div style={{whiteSpace: 'pre-wrap'}}>{draft}</div>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

// ============================================================
// STEP 3 — SCREENING
// ============================================================
function StepScreening({ lang, answers, setAnswers }) {
  const update = (id, val) => setAnswers({ ...answers, [id]: val });
  return (
    <div className="af-card">
      <div className="af-card-head">
        <div className="af-step-no">{lang === 'bn' ? 'ধাপ ০৩ / ০৪' : 'Step 03 / 04'}</div>
        <h1>{lang === 'bn' ? 'নিয়োগকর্তার কিছু প্রশ্ন' : 'A few questions from the employer'}</h1>
        <p>{lang === 'bn' ? 'bKash এই প্রশ্নগুলো জিজ্ঞেস করেছে আপনাকে shortlist করার জন্য।' : 'bKash has asked these questions to help shortlist candidates.'}</p>
      </div>

      <div className="af-scr-banner">
        <div className="af-scr-banner-ic">i</div>
        <div>{lang === 'bn' ? 'লাল চিহ্নিত প্রশ্নগুলো বাধ্যতামূলক। সৎ ও সংক্ষিপ্ত উত্তর দিন।' : 'Questions marked with red border are required. Be honest and concise.'}</div>
      </div>

      {SCREENING_QUESTIONS.map((q, i) => (
        <div key={q.id} className={`af-q ${q.required ? 'is-required' : ''}`}>
          <div className="af-q-num">
            <strong>Q{String(i + 1).padStart(2, '0')}</strong>
            {q.required && <span className="af-q-req">*</span>}
            {!q.required && <span style={{opacity: 0.6}}>{lang === 'bn' ? 'ঐচ্ছিক' : 'Optional'}</span>}
          </div>
          <div className="af-q-text">{lang === 'bn' ? q.text_bn : q.text_en}</div>

          {q.type === 'radio' && (
            <div className="af-q-radio-list">
              {(lang === 'bn' ? q.options_bn : q.options_en).map((opt, j) => (
                <div key={j} className={`af-q-radio ${answers[q.id] === j ? 'is-on' : ''}`} onClick={() => update(q.id, j)}>
                  <div className="af-q-radio-disc" />
                  {opt}
                </div>
              ))}
            </div>
          )}

          {q.type === 'scale' && (
            <div className="af-q-scale">
              {[1, 2, 3, 4, 5].map((n, j) => (
                <div key={n} className={`af-q-scale-cell ${answers[q.id] === n ? 'is-on' : ''}`} onClick={() => update(q.id, n)}>
                  <div className="af-q-scale-num">{lang === 'bn' ? ['১','২','৩','৪','৫'][j] : n}</div>
                  <div className="af-q-scale-label">{(lang === 'bn' ? q.labels_bn : q.labels_en)[j]}</div>
                </div>
              ))}
            </div>
          )}

          {q.type === 'textarea' && (
            <textarea
              className="af-q-input af-q-textarea"
              placeholder={lang === 'bn' ? q.placeholder_bn : q.placeholder_en}
              value={answers[q.id] || ''}
              onChange={(e) => update(q.id, e.target.value)}
            />
          )}

          {q.type === 'text' && (
            <input
              type="text"
              className="af-q-input"
              placeholder={lang === 'bn' ? q.placeholder_bn : q.placeholder_en}
              value={answers[q.id] || ''}
              onChange={(e) => update(q.id, e.target.value)}
            />
          )}
        </div>
      ))}
    </div>
  );
}

// ============================================================
// STEP 4 — REVIEW & SUBMIT
// ============================================================
function StepReview({ lang, cvMode, coverText, answers, consent, setConsent, onJump }) {
  return (
    <div className="af-card">
      <div className="af-card-head">
        <div className="af-step-no">{lang === 'bn' ? 'ধাপ ০৪ / ০৪' : 'Step 04 / 04'}</div>
        <h1>{lang === 'bn' ? 'সব দেখুন ও জমা দিন' : 'Review and submit'}</h1>
        <p>{lang === 'bn' ? 'পাঠানোর আগে সব তথ্য আরেকবার যাচাই করুন।' : 'Verify your details before sending.'}</p>
      </div>

      <div className="af-rev-section">
        <div className="af-rev-head">
          <div className="af-rev-head-l"><div className="af-rev-head-no">1</div><h3>{lang === 'bn' ? 'CV' : 'CV'}</h3></div>
          <button className="af-rev-edit" onClick={() => onJump(1)}>{lang === 'bn' ? 'এডিট' : 'Edit'}</button>
        </div>
        <div className="af-rev-body">
          <div className="af-rev-pair">
            <div className="af-rev-pair-k">{lang === 'bn' ? 'উৎস' : 'Source'}</div>
            <div className="af-rev-pair-v">{cvMode === 'profile' ? (lang === 'bn' ? 'NOBBYO প্রোফাইল CV' : 'NOBBYO Profile CV') : (lang === 'bn' ? 'আপলোডকৃত PDF' : 'Uploaded PDF')}</div>
          </div>
          <div className="af-rev-pair">
            <div className="af-rev-pair-k">{lang === 'bn' ? 'নাম' : 'Name'}</div>
            <div className="af-rev-pair-v">{lang === 'bn' ? 'আমল হোসেন' : 'Amal Hossain'}</div>
          </div>
          <div className="af-rev-pair">
            <div className="af-rev-pair-k">{lang === 'bn' ? 'পদের সাথে মিল' : 'Match score'}</div>
            <div className="af-rev-pair-v" style={{color: 'var(--live)'}}>94% — {lang === 'bn' ? 'Strong fit' : 'Strong fit'}</div>
          </div>
        </div>
      </div>

      <div className="af-rev-section">
        <div className="af-rev-head">
          <div className="af-rev-head-l"><div className="af-rev-head-no">2</div><h3>{lang === 'bn' ? 'কভার লেটার' : 'Cover letter'}</h3></div>
          <button className="af-rev-edit" onClick={() => onJump(2)}>{lang === 'bn' ? 'এডিট' : 'Edit'}</button>
        </div>
        <div className="af-rev-body">
          {coverText.trim() ? (
            <div className="af-rev-pair-v is-quote">{coverText.slice(0, 220)}{coverText.length > 220 ? '...' : ''}</div>
          ) : (
            <div style={{color: 'var(--ink-3)', fontStyle: 'italic'}}>{lang === 'bn' ? 'কোনো কভার লেটার নেই (ঐচ্ছিক)' : 'No cover letter (optional)'}</div>
          )}
        </div>
      </div>

      <div className="af-rev-section">
        <div className="af-rev-head">
          <div className="af-rev-head-l"><div className="af-rev-head-no">3</div><h3>{lang === 'bn' ? 'স্ক্রিনিং উত্তর' : 'Screening answers'}</h3></div>
          <button className="af-rev-edit" onClick={() => onJump(3)}>{lang === 'bn' ? 'এডিট' : 'Edit'}</button>
        </div>
        <div className="af-rev-body">
          {SCREENING_QUESTIONS.slice(0, 4).map((q, i) => {
            let v = '—';
            const ans = answers[q.id];
            if (ans !== undefined && ans !== '') {
              if (q.type === 'radio') v = (lang === 'bn' ? q.options_bn : q.options_en)[ans];
              else if (q.type === 'scale') v = `${ans}/5 — ${(lang === 'bn' ? q.labels_bn : q.labels_en)[ans - 1]}`;
              else v = String(ans).slice(0, 80) + (String(ans).length > 80 ? '...' : '');
            }
            return (
              <div key={q.id} className="af-rev-pair">
                <div className="af-rev-pair-k">Q{String(i + 1).padStart(2, '0')}</div>
                <div className="af-rev-pair-v">{v}</div>
              </div>
            );
          })}
        </div>
      </div>

      <div className="af-consent">
        <div className={`af-consent-row ${consent.terms ? 'is-on' : ''}`} onClick={() => setConsent({ ...consent, terms: !consent.terms })}>
          <div className="af-consent-check">
            {consent.terms && <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><polyline points="20 6 9 17 4 12"/></svg>}
          </div>
          <div>{lang === 'bn' ? <>আমি NOBBYO Jobs-এর <a href="terms.html">শর্তাবলী</a> ও <a href="privacy.html">গোপনীয়তা নীতি</a> মেনে নিচ্ছি, এবং নিশ্চিত করছি যে দেওয়া তথ্য সঠিক।</> : <>I agree to NOBBYO Jobs <a href="terms.html">Terms</a> and <a href="privacy.html">Privacy Policy</a>, and confirm the information provided is accurate.</>}</div>
        </div>
        <div className={`af-consent-row ${consent.share ? 'is-on' : ''}`} onClick={() => setConsent({ ...consent, share: !consent.share })}>
          <div className="af-consent-check">
            {consent.share && <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><polyline points="20 6 9 17 4 12"/></svg>}
          </div>
          <div>{lang === 'bn' ? 'bKash-এর recruiter দের সাথে আমার profile ও CV শেয়ার করার অনুমতি দিচ্ছি।' : 'I allow my profile and CV to be shared with bKash recruiters.'}</div>
        </div>
      </div>
    </div>
  );
}

// ============================================================
// SUCCESS
// ============================================================
function SuccessView({ lang }) {
  return (
    <>
      <div className="af-success">
        <div className="af-success-bg" />
        <div className="af-success-inner">
          <div className="af-success-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><polyline points="20 6 9 17 4 12"/></svg>
          </div>
          <div className="af-success-tag">{lang === 'bn' ? '✓ আবেদন সফল' : '✓ Application sent'}</div>
          <h1>{lang === 'bn' ? 'অভিনন্দন! আপনার আবেদন bKash-এ পৌঁছেছে।' : 'Congrats! Your application reached bKash.'}</h1>
          <p className="af-success-sub">{lang === 'bn' ? 'আপনি হলেন এই পদে আবেদনকারী ১৪২ জনের একজন। আমরা আপনাকে updates দিয়ে যাবো।' : 'You\'re one of 142 applicants for this role. We\'ll keep you posted.'}</p>
          <div className="af-success-id">{lang === 'bn' ? 'আবেদন ID:' : 'Application ID:'} <strong>NOBBYO-2K25-A4F92B</strong></div>
          <div className="af-success-actions">
            <a href="recruiter-dashboard.html" className="btn btn-ink">{lang === 'bn' ? 'আমার আবেদনসমূহ' : 'My Applications'}</a>
            <a href="job-search.html" className="btn btn-ghost">{lang === 'bn' ? 'আরো কাজ খুঁজুন' : 'Find more jobs'}</a>
          </div>
          <div className="af-success-next">
            <h4>{lang === 'bn' ? 'এরপর কী হবে' : 'What happens next'}</h4>
            <ul className="af-success-next-list">
              {(lang === 'bn' ? NEXT_STEPS_BN : NEXT_STEPS_EN).map((n, i) => (
                <li key={i} className="af-success-next-item">
                  <div className="af-success-next-num">{i + 1}</div>
                  <div><strong>{n.t}</strong>{n.d}</div>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>

      <div className="af-similar">
        <h3>{lang === 'bn' ? 'আপনার মতো প্রার্থীরা এগুলোতেও আবেদন করেছেন' : 'Candidates like you also applied to'}</h3>
        <p>{lang === 'bn' ? 'আপনার profile match অনুযায়ী top picks' : 'Top picks based on your profile match'}</p>
        <div className="af-similar-grid">
          {SIMILAR.map(s => (
            <a key={s.co} href="job-detail.html" className="af-similar-card">
              <div className="af-similar-card-logo" style={{ background: s.logoColor }}>{s.logo}</div>
              <div className="af-similar-card-text">
                <div className="af-similar-card-co">{s.co}</div>
                <div className="af-similar-card-title">{lang === 'bn' ? s.title_bn : s.title_en}</div>
              </div>
              <div className="af-similar-card-match">{lang === 'bn' ? s.match.toString().replace(/\d/g, d => '০১২৩৪৫৬৭৮৯'[d]) + '%' : s.match + '%'}</div>
            </a>
          ))}
        </div>
      </div>
    </>
  );
}

// ============================================================
// APP
// ============================================================
function ApplyApp() {
  const [lang, setLang] = useState('bn');
  const [step, setStep] = useState(1);
  const [submitted, setSubmitted] = useState(false);
  const [cvMode, setCvMode] = useState('profile');
  const [clMode, setClMode] = useState('ai');
  const [coverText, setCoverText] = useState('');
  const [draftShown, setDraftShown] = useState(false);
  const [answers, setAnswers] = useState({ q1: 2, q2: 0, q3: 4 });
  const [consent, setConsent] = useState({ terms: false, share: true });

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

  useEffect(() => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }, [step, submitted]);

  const canSubmit = consent.terms;
  const next = () => {
    if (step < 4) setStep(step + 1);
    else if (canSubmit) setSubmitted(true);
  };
  const back = () => setStep(Math.max(1, step - 1));

  if (submitted) {
    return (
      <>
        <PageTopBar lang={lang} setLang={setLang} />
        <PageHeader active="jobs" />
        <main className="af-shell">
          <div className="container" style={{maxWidth: 920}}>
            <SuccessView lang={lang} />
          </div>
        </main>
        <PageFooter lang={lang} />
      </>
    );
  }

  return (
    <>
      <PageTopBar lang={lang} setLang={setLang} />
      <PageHeader active="jobs" />
      <main className="af-shell">
        <div className="container">
          <div className="af-grid">
            <StepRail current={step} lang={lang} onJump={(s) => setStep(s)} />
            <div className="af-main">
              {step === 1 && <StepCV lang={lang} cvMode={cvMode} setCvMode={setCvMode} />}
              {step === 2 && <StepCoverLetter lang={lang} mode={clMode} setMode={setClMode} text={coverText} setText={setCoverText} draftShown={draftShown} setDraftShown={setDraftShown} />}
              {step === 3 && <StepScreening lang={lang} answers={answers} setAnswers={setAnswers} />}
              {step === 4 && <StepReview lang={lang} cvMode={cvMode} coverText={coverText} answers={answers} consent={consent} setConsent={setConsent} onJump={(s) => setStep(s)} />}

              <div className="af-nav">
                <button className="af-nav-back" onClick={back} disabled={step === 1}>
                  ← {lang === 'bn' ? 'পেছনে' : 'Back'}
                </button>
                <div className="af-nav-info">
                  {lang === 'bn' ? 'ধাপ' : 'Step'} <strong>{lang === 'bn' ? ['১','২','৩','৪'][step-1] : step}</strong> / {lang === 'bn' ? '৪' : '4'}
                </div>
                {step < 4 ? (
                  <button className="af-nav-next" onClick={next}>
                    {lang === 'bn' ? 'পরবর্তী' : 'Continue'}
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
                  </button>
                ) : (
                  <button className={`af-nav-next is-submit`} onClick={next} disabled={!canSubmit} style={!canSubmit ? {opacity: 0.5, cursor: 'not-allowed'} : {}}>
                    {lang === 'bn' ? 'আবেদন জমা দিন' : 'Submit application'}
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                  </button>
                )}
              </div>
            </div>
            <JobCard lang={lang} />
          </div>
        </div>
      </main>
      <PageFooter lang={lang} />
    </>
  );
}

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