/* global React, ReactDOM, NOBBYO_ICONS, PageHeader, PageTopBar, PageFooter, usePageLang */
const { useState: uS, useEffect: uE, useMemo: uM, useRef: uR } = React;
const II = window.NOBBYO_ICONS;

// Data: hard-coded "current" job (id=1 Pathao Senior Product Designer)
const JOB = {
  id: 1,
  title: { bn: 'সিনিয়র প্রোডাক্ট ডিজাইনার', en: 'Senior Product Designer' },
  co: 'Pathao',
  coTag: { bn: 'বাংলাদেশের শীর্ষ রাইডশেয়ার ও কমার্স', en: "Bangladesh's largest ride-hailing & commerce" },
  logo: 'P',
  logoBg: '#E81E2C',
  loc: { bn: 'ঢাকা · বনানী', en: 'Dhaka · Banani' },
  remote: { bn: 'হাইব্রিড · সপ্তাহে ২ দিন রিমোট', en: 'Hybrid · 2 days remote' },
  type: { bn: 'ফুল-টাইম', en: 'Full-time' },
  exp: { bn: 'সিনিয়র · ৫+ বছর', en: 'Senior · 5+ years' },
  salary: { bn: '৳ ১.২ – ১.৮ লাখ', en: '৳ 120K – 180K' },
  salaryNote: { bn: 'মাসিক · গ্রস', en: 'monthly · gross' },
  posted: { bn: '২ ঘন্টা আগে', en: '2 hours ago' },
  applicants: 43,
  views: 1247,
  closing: { bn: '১৪ দিন বাকি', en: '14 days left' },
  match: 96,
  urgent: true,
  verified: true,
  benefits: [
    { ic: '🏥', bn: 'ফ্যামিলি স্বাস্থ্যবীমা', en: 'Family health insurance' },
    { ic: '💻', bn: 'রিমোট ওয়ার্ক স্টাইপেন্ড', en: 'Remote work stipend' },
    { ic: '🎓', bn: 'লার্নিং বাজেট ৳৫০k/বছর', en: '৳50k/year learning budget' },
    { ic: '🍱', bn: 'অফিস লাঞ্চ', en: 'Office lunch' },
    { ic: '🚗', bn: 'রাইড ক্রেডিট', en: 'Pathao ride credits' },
    { ic: '🎉', bn: 'উৎসব বোনাস ২x', en: '2x festival bonuses' },
    { ic: '🏖️', bn: '২২ দিন ছুটি', en: '22 days PTO' },
    { ic: '👶', bn: '৬ মাস মাতৃত্বকালীন ছুটি', en: '6mo parental leave' },
  ],
  desc: {
    bn: [
      'Pathao-তে আমরা বিশ্বাস করি যে ভালো ডিজাইন কোটি মানুষের প্রতিদিনের জীবনকে সহজ করে। আমরা খুঁজছি একজন সিনিয়র প্রোডাক্ট ডিজাইনার যিনি আমাদের রাইড, পার্সেল এবং ফুড অ্যাপের পরবর্তী যুগ গড়ে তুলবেন।',
      'আপনি কাজ করবেন একটি ছোট ক্রস-ফাংশনাল টিমে — প্রোডাক্ট ম্যানেজার, ইঞ্জিনিয়ার এবং ডেটা সায়েন্টিস্টদের সাথে। আপনার ডিজাইন ৪০ মিলিয়ন বাংলাদেশি ব্যবহারকারীর হাতে যাবে।',
    ],
    en: [
      'At Pathao, we believe great design simplifies the everyday life of millions. We are looking for a Senior Product Designer to shape the next chapter of our Ride, Parcel, and Food apps.',
      'You will partner closely with a small cross-functional team — PMs, engineers, and data scientists. Your design ships to 40M+ Bangladeshi users.',
    ],
  },
  responsibilities: {
    bn: [
      'সম্পূর্ণ পণ্য অভিজ্ঞতা ডিজাইন করা — রিসার্চ থেকে শিপিং পর্যন্ত',
      'ডিজাইন সিস্টেম রক্ষণাবেক্ষণ এবং বিকাশ',
      'জুনিয়র ডিজাইনারদের মেন্টর করা',
      'স্টেকহোল্ডারদের সাথে রোডম্যাপ পরিকল্পনায় অবদান রাখা',
    ],
    en: [
      'Design end-to-end product experiences — from research to shipping',
      'Maintain and evolve our design system',
      'Mentor junior designers on the team',
      'Contribute to roadmap planning with stakeholders',
    ],
  },
  must: {
    bn: [
      '৫+ বছর প্রোডাক্ট/UX ডিজাইন অভিজ্ঞতা',
      'মোবাইল অ্যাপ ডিজাইনে দক্ষতা (iOS + Android)',
      'Figma-তে এক্সপার্ট লেভেল',
      'বাংলা ও ইংরেজি — উভয় ভাষায় সাবলীল',
    ],
    en: [
      '5+ years of Product/UX design experience',
      'Strong mobile design skills (iOS + Android)',
      'Expert-level Figma fluency',
      'Fluent in Bengali and English',
    ],
  },
  nice: {
    bn: [
      'মোশন ডিজাইন বা মাইক্রো-অ্যানিমেশন',
      'ফ্রন্টএন্ড কোডিং (HTML/CSS) বোঝা',
      'রাইডশেয়ার বা ফিনটেক ডোমেইন এক্সপোজার',
    ],
    en: [
      'Motion design / micro-animation skills',
      'Working knowledge of frontend code (HTML/CSS)',
      'Rideshare or fintech domain exposure',
    ],
  },
  skillsExpected: ['Figma', 'Design Systems', 'Mobile Design', 'User Research', 'Prototyping', 'Bangla UX'],
  // company
  team: {
    size: 18,
    growth: '+34%',
    designers: 6,
    eng: 124,
  },
  hiring: { bn: 'মাহবুব রহমান', en: 'Mahbub Rahman', role: { bn: 'হেড অফ ডিজাইন', en: 'Head of Design' }, replyHr: 4 },
};

const SIMILAR = [
  { id: 2, title: { bn: 'প্রোডাক্ট ডিজাইনার', en: 'Product Designer' }, co: 'bKash', logo: 'b', bg: '#E2126B', salary: '৮০k–১.২ লাখ', match: 89, loc: { bn: 'ঢাকা', en: 'Dhaka' }, remote: { bn: 'অফিস', en: 'On-site' } },
  { id: 3, title: { bn: 'UX ডিজাইনার (সিনিয়র)', en: 'Senior UX Designer' }, co: 'Chaldal', logo: 'C', bg: '#10B981', salary: '১–১.৪ লাখ', match: 84, loc: { bn: 'ঢাকা', en: 'Dhaka' }, remote: { bn: 'হাইব্রিড', en: 'Hybrid' } },
  { id: 4, title: { bn: 'লিড ডিজাইনার', en: 'Lead Designer' }, co: 'ShopUp', logo: 'S', bg: '#F59E0B', salary: '১.৫–২.৫ লাখ', match: 91, loc: { bn: 'ঢাকা', en: 'Dhaka' }, remote: { bn: 'রিমোট', en: 'Remote' } },
];

const PROCESS = [
  { id: 1, bn: 'অনলাইন আবেদন', en: 'Online application', dur: { bn: '২ মিনিট', en: '2 min' }, ic: '📝' },
  { id: 2, bn: 'পোর্টফোলিও রিভিউ', en: 'Portfolio review', dur: { bn: '২–৩ দিন', en: '2–3 days' }, ic: '👁️' },
  { id: 3, bn: 'ডিজাইন চ্যালেঞ্জ', en: 'Design challenge', dur: { bn: '৫ দিন', en: '5 days' }, ic: '🎯' },
  { id: 4, bn: 'টিম ইন্টারভিউ', en: 'Team interviews', dur: { bn: '১ সপ্তাহ', en: '1 week' }, ic: '💬' },
  { id: 5, bn: 'অফার', en: 'Offer', dur: { bn: '২ দিন', en: '2 days' }, ic: '🎉' },
];

// =================== HEADER STRIP ===================
function JobHeader({ saved, setSaved, onApply, lang }) {
  return (
    <section className="jd-hero">
      <div className="jd-hero-bg" aria-hidden="true">
        <div className="jd-hero-mesh"></div>
      </div>
      <div className="container jd-hero-inner">
        <a href="job-search.html" className="jd-back">
          <span style={{ fontSize: 16, lineHeight: 1 }}>←</span>
          <span className="t-bn">ফিরে যান</span>
          <span className="t-en">Back to results</span>
        </a>

        <div className="jd-head-grid">
          <div className="jd-head-main">
            <div className="jd-head-meta">
              <div className="jd-head-logo" style={{ background: JOB.logoBg }}>{JOB.logo}</div>
              <div>
                <div className="jd-head-co-row">
                  <span className="jd-head-co">{JOB.co}</span>
                  {JOB.verified && (
                    <span className="jd-head-verified" title="Verified employer">
                      {II.check}
                      <span className="t-bn">যাচাইকৃত</span>
                      <span className="t-en">Verified</span>
                    </span>
                  )}
                </div>
                <div className="jd-head-cotag">
                  <span className="t-bn">{JOB.coTag.bn}</span>
                  <span className="t-en">{JOB.coTag.en}</span>
                </div>
              </div>
            </div>
            <h1 className="jd-head-title">
              <span className="t-bn">{JOB.title.bn}</span>
              <span className="t-en">{JOB.title.en}</span>
              {JOB.urgent && <span className="jd-head-urgent">URGENT</span>}
            </h1>
            <div className="jd-head-quickfacts">
              <span className="jd-quickfact">
                <strong>{II.pin}</strong>
                <span className="t-bn">{JOB.loc.bn}</span>
                <span className="t-en">{JOB.loc.en}</span>
              </span>
              <span className="jd-quickfact">
                <strong>⇄</strong>
                <span className="t-bn">{JOB.remote.bn}</span>
                <span className="t-en">{JOB.remote.en}</span>
              </span>
              <span className="jd-quickfact">
                <strong>{II.briefcase}</strong>
                <span className="t-bn">{JOB.exp.bn}</span>
                <span className="t-en">{JOB.exp.en}</span>
              </span>
              <span className="jd-quickfact">
                <strong>{II.clock}</strong>
                <span className="t-bn">{JOB.posted.bn}</span>
                <span className="t-en">{JOB.posted.en}</span>
              </span>
            </div>
          </div>

          <div className="jd-head-actions">
            <div className="jd-match-card">
              <div className="jd-match-ring">
                <svg viewBox="0 0 60 60">
                  <circle cx="30" cy="30" r="26" fill="none" stroke="rgba(255,255,255,0.18)" strokeWidth="6" />
                  <circle cx="30" cy="30" r="26" fill="none" stroke="var(--asb-orange-bright)" strokeWidth="6" strokeLinecap="round"
                    strokeDasharray={`${(JOB.match/100) * 163.36} 163.36`}
                    transform="rotate(-90 30 30)" />
                </svg>
                <div className="jd-match-num">{JOB.match}<span>%</span></div>
              </div>
              <div className="jd-match-text">
                <div className="jd-match-label">
                  <span className="t-bn">AI ম্যাচ স্কোর</span>
                  <span className="t-en">AI Match Score</span>
                </div>
                <div className="jd-match-sub">
                  <span className="t-bn">আপনার CV এর সাথে চমৎকার ম্যাচ</span>
                  <span className="t-en">Excellent fit for your CV</span>
                </div>
              </div>
            </div>
            <div className="jd-cta-row">
              <button className="jd-apply-btn" onClick={onApply}>
                <span className="t-bn">এখনই আবেদন করুন</span>
                <span className="t-en">Apply now</span>
                {II.arrowRight}
              </button>
              <button className={'jd-save-btn' + (saved ? ' is-on' : '')} onClick={() => setSaved(!saved)} aria-label="Save">
                {saved ? II.bookmarkFilled : II.bookmark}
              </button>
              <button className="jd-share-btn" aria-label="Share">
                ⤴
              </button>
            </div>
            <div className="jd-stats">
              <span><strong>{JOB.applicants}</strong> <span className="t-bn">আবেদনকারী</span><span className="t-en">applicants</span></span>
              <span className="jd-stats-sep">·</span>
              <span><strong>{JOB.views.toLocaleString()}</strong> <span className="t-bn">ভিউ</span><span className="t-en">views</span></span>
              <span className="jd-stats-sep">·</span>
              <span className="jd-closing">⏰ <span className="t-bn">{JOB.closing.bn}</span><span className="t-en">{JOB.closing.en}</span></span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// =================== AI INSIGHTS BOARD ===================
function AIInsights({ lang }) {
  const skillFit = [
    { skill: 'Figma', you: 95, need: 90, status: 'good' },
    { skill: 'Design Systems', you: 88, need: 85, status: 'good' },
    { skill: 'Mobile Design', you: 80, need: 90, status: 'gap' },
    { skill: 'User Research', you: 70, need: 75, status: 'gap' },
    { skill: 'Bangla UX', you: 100, need: 80, status: 'great' },
  ];
  return (
    <section className="jd-ai">
      <div className="jd-ai-head">
        <span className="jd-ai-spark">{II.spark}</span>
        <div>
          <div className="jd-ai-title">
            <span className="t-bn">AI কেন আপনাকে এই চাকরির জন্য সেরা মনে করছে</span>
            <span className="t-en">Why AI thinks you're a great fit</span>
          </div>
          <div className="jd-ai-sub">
            <span className="t-bn">আপনার CV, পোর্টফোলিও এবং ১২টি অনুরূপ ভূমিকার সাথে তুলনা করে</span>
            <span className="t-en">Compared with your CV, portfolio, and 12 similar roles</span>
          </div>
        </div>
      </div>

      <div className="jd-ai-grid">
        {/* Skill match */}
        <div className="jd-ai-panel jd-ai-skills">
          <div className="jd-ai-panel-title">
            <span className="t-bn">স্কিল ম্যাচ</span>
            <span className="t-en">Skill match</span>
          </div>
          <div className="jd-skill-bars">
            {skillFit.map(s => (
              <div key={s.skill} className="jd-skill-row">
                <div className="jd-skill-label">{s.skill}</div>
                <div className="jd-skill-bar">
                  <div className="jd-skill-need" style={{ left: s.need + '%' }} title="Required"></div>
                  <div className={'jd-skill-fill ' + s.status} style={{ width: s.you + '%' }}></div>
                </div>
                <div className="jd-skill-num">{s.you}</div>
              </div>
            ))}
          </div>
          <div className="jd-skill-legend">
            <span><i className="dot great"></i> <span className="t-bn">দুর্দান্ত</span><span className="t-en">Great</span></span>
            <span><i className="dot good"></i> <span className="t-bn">ভাল</span><span className="t-en">Good</span></span>
            <span><i className="dot gap"></i> <span className="t-bn">গ্যাপ</span><span className="t-en">Gap</span></span>
            <span><i className="dot need"></i> <span className="t-bn">প্রয়োজন</span><span className="t-en">Required</span></span>
          </div>
        </div>

        {/* Salary insight */}
        <div className="jd-ai-panel jd-ai-salary">
          <div className="jd-ai-panel-title">
            <span className="t-bn">স্যালারি ইনসাইট</span>
            <span className="t-en">Salary insight</span>
          </div>
          <div className="jd-salary-big">
            ৳ <strong>১.৫০</strong>
            <span className="jd-salary-unit">
              <span className="t-bn">লাখ/মাস</span>
              <span className="t-en">lakh/mo</span>
            </span>
          </div>
          <div className="jd-salary-rng-label">
            <span className="t-bn">সম্ভাব্য রেঞ্জ ১.২ – ১.৮ লাখ</span>
            <span className="t-en">Likely ৳120K – ৳180K</span>
          </div>
          <div className="jd-salary-rng">
            <div className="jd-salary-rng-bar">
              <div className="jd-salary-rng-fill"></div>
              <div className="jd-salary-rng-marker" style={{ left: '60%' }}>
                <span>৳1.5L</span>
              </div>
            </div>
            <div className="jd-salary-rng-marks">
              <span>৳1.0L</span><span>৳1.5L</span><span>৳2.0L</span>
            </div>
          </div>
          <div className="jd-salary-foot">
            <span className="t-bn">ঢাকার সিনিয়র ডিজাইনারদের শীর্ষ ১৫%</span>
            <span className="t-en">Top 15% for Senior Designers in Dhaka</span>
          </div>
        </div>

        {/* Quick read */}
        <div className="jd-ai-panel jd-ai-tldr">
          <div className="jd-ai-panel-title">
            <span className="t-bn">এক নজরে</span>
            <span className="t-en">Quick read</span>
          </div>
          <ul className="jd-tldr-list">
            <li><b className="good">✓</b> <span className="t-bn">আপনার Figma ও বাংলা UX দক্ষতা চাহিদার চেয়ে বেশি</span><span className="t-en">Your Figma & Bangla UX skills exceed what's needed</span></li>
            <li><b className="warn">!</b> <span className="t-bn">মোবাইল ডিজাইনে ১০ পয়েন্ট গ্যাপ — ৩টি কেস যোগ করুন</span><span className="t-en">10pt mobile design gap — add 3 case studies</span></li>
            <li><b className="good">✓</b> <span className="t-bn">আপনার ৬ বছর অভিজ্ঞতা সিনিয়র লেভেলের জন্য আদর্শ</span><span className="t-en">Your 6 yrs of experience matches the senior bar</span></li>
            <li><b className="info">→</b> <span className="t-bn">৪৩ জন আবেদনকারীর মধ্যে আপনি শীর্ষ ৫%</span><span className="t-en">You're in the top 5% of 43 applicants</span></li>
          </ul>
        </div>
      </div>
    </section>
  );
}

// =================== JOB CONTENT ===================
function JobContent({ lang }) {
  return (
    <div className="jd-content">
      <Section title={{ bn: 'ভূমিকা সম্পর্কে', en: 'About the role' }}>
        {JOB.desc[lang].map((p, i) => <p key={i} className="jd-p">{p}</p>)}
      </Section>

      <Section title={{ bn: 'আপনি কী করবেন', en: 'What you will do' }}>
        <ul className="jd-ul">
          {JOB.responsibilities[lang].map((r, i) => (
            <li key={i}><span className="jd-bullet">→</span><span>{r}</span></li>
          ))}
        </ul>
      </Section>

      <Section title={{ bn: 'অবশ্যই থাকতে হবে', en: 'Must-have' }}>
        <ul className="jd-ul">
          {JOB.must[lang].map((r, i) => (
            <li key={i}><span className="jd-bullet jd-bullet-must">●</span><span>{r}</span></li>
          ))}
        </ul>
      </Section>

      <Section title={{ bn: 'থাকলে ভাল', en: 'Nice to have' }}>
        <ul className="jd-ul">
          {JOB.nice[lang].map((r, i) => (
            <li key={i}><span className="jd-bullet jd-bullet-nice">+</span><span>{r}</span></li>
          ))}
        </ul>
      </Section>

      <Section title={{ bn: 'প্রত্যাশিত স্কিল', en: 'Expected skills' }}>
        <div className="jd-skills">
          {JOB.skillsExpected.map(s => <span key={s} className="jd-skill-chip">{s}</span>)}
        </div>
      </Section>

      <Section title={{ bn: 'বেনিফিট ও পার্কস', en: 'Benefits & perks' }}>
        <div className="jd-benefits">
          {JOB.benefits.map((b, i) => (
            <div key={i} className="jd-benefit">
              <span className="jd-benefit-ic">{b.ic}</span>
              <span className="t-bn">{b.bn}</span>
              <span className="t-en">{b.en}</span>
            </div>
          ))}
        </div>
      </Section>

      <Section title={{ bn: 'হায়ারিং প্রসেস', en: 'Hiring process' }}>
        <div className="jd-process">
          {PROCESS.map((p, i) => (
            <div key={p.id} className="jd-process-step">
              <div className="jd-process-num">{p.id}</div>
              <div className="jd-process-ic">{p.ic}</div>
              <div className="jd-process-label">
                <span className="t-bn">{p.bn}</span>
                <span className="t-en">{p.en}</span>
              </div>
              <div className="jd-process-dur">
                <span className="t-bn">{p.dur.bn}</span>
                <span className="t-en">{p.dur.en}</span>
              </div>
              {i < PROCESS.length - 1 && <div className="jd-process-arrow">→</div>}
            </div>
          ))}
        </div>
      </Section>
    </div>
  );
}

function Section({ title, children }) {
  return (
    <section className="jd-sec">
      <h2 className="jd-sec-title">
        <span className="t-bn">{title.bn}</span>
        <span className="t-en">{title.en}</span>
      </h2>
      <div className="jd-sec-body">{children}</div>
    </section>
  );
}

// =================== SIDEBAR (sticky) ===================
function Sidebar({ onApply, lang }) {
  return (
    <aside className="jd-side">
      {/* Hiring manager card */}
      <div className="jd-side-card jd-hm-card">
        <div className="jd-hm-head">
          <span className="jd-hm-avatar" style={{background:'#7E5E9F'}}>
            {JOB.hiring[lang].split(' ').map(s=>s[0]).join('').slice(0,2)}
          </span>
          <div>
            <div className="jd-hm-name">
              <span className="t-bn">{JOB.hiring.bn}</span>
              <span className="t-en">{JOB.hiring.en}</span>
            </div>
            <div className="jd-hm-role">
              <span className="t-bn">{JOB.hiring.role.bn} · Pathao</span>
              <span className="t-en">{JOB.hiring.role.en} · Pathao</span>
            </div>
          </div>
        </div>
        <div className="jd-hm-stat">
          <span className="jd-hm-stat-dot"></span>
          <span className="t-bn">গড়ে {JOB.hiring.replyHr} ঘন্টায় সাড়া দেন</span>
          <span className="t-en">Replies in ~{JOB.hiring.replyHr}h on average</span>
        </div>
        <button className="jd-hm-msg">
          {II.send}
          <span className="t-bn">মেসেজ পাঠান</span>
          <span className="t-en">Message</span>
        </button>
      </div>

      {/* Company snapshot */}
      <div className="jd-side-card jd-co-card">
        <div className="jd-side-card-title">
          <span className="t-bn">কোম্পানি স্ন্যাপশট</span>
          <span className="t-en">Company snapshot</span>
        </div>
        <div className="jd-co-stats">
          <div className="jd-co-stat">
            <div className="jd-co-stat-num">২,৪০০+</div>
            <div className="jd-co-stat-label">
              <span className="t-bn">কর্মচারী</span>
              <span className="t-en">Employees</span>
            </div>
          </div>
          <div className="jd-co-stat">
            <div className="jd-co-stat-num">{JOB.team.designers}</div>
            <div className="jd-co-stat-label">
              <span className="t-bn">ডিজাইন টিম</span>
              <span className="t-en">Design team</span>
            </div>
          </div>
          <div className="jd-co-stat">
            <div className="jd-co-stat-num jd-co-stat-up">{JOB.team.growth}</div>
            <div className="jd-co-stat-label">
              <span className="t-bn">YoY গ্রোথ</span>
              <span className="t-en">YoY growth</span>
            </div>
          </div>
          <div className="jd-co-stat">
            <div className="jd-co-stat-num">৪.৬</div>
            <div className="jd-co-stat-label">
              <span className="t-bn">★ এমপ্লয়ি রেটিং</span>
              <span className="t-en">★ Employee rating</span>
            </div>
          </div>
        </div>
        <a href="company-profile.html" className="jd-co-link">
          <span className="t-bn">কোম্পানি প্রোফাইল →</span>
          <span className="t-en">View company profile →</span>
        </a>
      </div>

      {/* Mini map */}
      <div className="jd-side-card jd-loc-card">
        <div className="jd-side-card-title">
          <span className="t-bn">অফিস লোকেশন</span>
          <span className="t-en">Office location</span>
        </div>
        <div className="jd-map">
          <svg viewBox="0 0 200 120" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
            <defs>
              <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
                <path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(42,54,86,0.06)" strokeWidth="1"/>
              </pattern>
            </defs>
            <rect width="200" height="120" fill="#EDE7DA" />
            <rect width="200" height="120" fill="url(#grid)" />
            {/* roads */}
            <path d="M 0 60 Q 60 50 100 70 T 200 60" stroke="#C8B89A" strokeWidth="3" fill="none" />
            <path d="M 100 0 L 110 60 L 120 120" stroke="#C8B89A" strokeWidth="2.5" fill="none" />
            <path d="M 30 0 L 40 120" stroke="#C8B89A" strokeWidth="2" fill="none" />
            {/* park */}
            <ellipse cx="60" cy="40" rx="22" ry="14" fill="#B5CDB1" opacity="0.6" />
            {/* river */}
            <path d="M 140 0 Q 150 40 165 80 T 180 120" stroke="#7DA8B8" strokeWidth="6" fill="none" opacity="0.4" />
            {/* pin */}
            <g transform="translate(100, 60)">
              <circle r="18" fill="rgba(245,130,32,0.18)" />
              <circle r="10" fill="rgba(245,130,32,0.35)" />
              <circle r="5" fill="var(--asb-orange)" />
              <circle r="5" fill="var(--asb-orange)">
                <animate attributeName="r" values="5;14;5" dur="2s" repeatCount="indefinite" />
                <animate attributeName="opacity" values="1;0;1" dur="2s" repeatCount="indefinite" />
              </circle>
            </g>
          </svg>
        </div>
        <div className="jd-loc-detail">
          <div className="jd-loc-name">
            <span className="t-bn">Pathao সদর দপ্তর</span>
            <span className="t-en">Pathao HQ</span>
          </div>
          <div className="jd-loc-addr">
            <span className="t-bn">কেমাল আতাতুর্ক এভিনিউ, বনানী, ঢাকা ১২১৩</span>
            <span className="t-en">Kemal Ataturk Ave, Banani, Dhaka 1213</span>
          </div>
          <div className="jd-loc-commute">
            <span>🚌 <span className="t-bn">২৩ মিনিট আপনার থেকে</span><span className="t-en">23 min from you</span></span>
          </div>
        </div>
      </div>

      {/* Sticky apply CTA on scroll */}
      <button className="jd-apply-side" onClick={onApply}>
        <div>
          <div className="jd-apply-side-label">
            <span className="t-bn">এখনই আবেদন করুন</span>
            <span className="t-en">Apply now</span>
          </div>
          <div className="jd-apply-side-sub">
            <span className="t-bn">২ মিনিটে · এক ক্লিক</span>
            <span className="t-en">2 min · 1-click apply</span>
          </div>
        </div>
        {II.arrowRight}
      </button>
    </aside>
  );
}

// =================== SIMILAR JOBS ===================
function Similar({ lang }) {
  return (
    <section className="jd-similar">
      <div className="container">
        <div className="jd-similar-head">
          <h2 className="jd-similar-title">
            <span className="t-bn">আপনার জন্য আরও ম্যাচ</span>
            <span className="t-en">More matches for you</span>
          </h2>
          <a href="job-search.html" className="jd-similar-all">
            <span className="t-bn">সব দেখুন →</span>
            <span className="t-en">View all →</span>
          </a>
        </div>
        <div className="jd-similar-grid">
          {SIMILAR.map(j => (
            <a key={j.id} href="job-detail.html" className="jd-similar-card">
              <div className="jd-similar-top">
                <div className="jd-similar-logo" style={{ background: j.bg }}>{j.logo}</div>
                <div className="jd-similar-match">{j.match}%</div>
              </div>
              <div className="jd-similar-co">{j.co}</div>
              <div className="jd-similar-job">
                <span className="t-bn">{j.title.bn}</span>
                <span className="t-en">{j.title.en}</span>
              </div>
              <div className="jd-similar-meta">
                <span>৳ {j.salary}</span>
                <span>·</span>
                <span className="t-bn">{j.loc.bn}</span>
                <span className="t-en">{j.loc.en}</span>
                <span>·</span>
                <span className="t-bn">{j.remote.bn}</span>
                <span className="t-en">{j.remote.en}</span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// =================== APPLY MODAL ===================
function ApplyModal({ open, onClose, lang }) {
  const [step, setStep] = uS(0);
  const [data, setData] = uS({ name: '', email: '', phone: '', cv: 'profile', cover: '', salary: '১.৫ লাখ', start: '২ সপ্তাহ' });
  uE(() => { if (!open) setStep(0); }, [open]);
  if (!open) return null;
  const update = (k, v) => setData(d => ({ ...d, [k]: v }));
  const next = () => setStep(s => Math.min(s + 1, 3));
  const prev = () => setStep(s => Math.max(s - 1, 0));

  return (
    <div className="jd-modal-bd" onClick={onClose}>
      <div className="jd-modal" onClick={e => e.stopPropagation()}>
        <button className="jd-modal-close" onClick={onClose}>{II.close}</button>

        <div className="jd-modal-head">
          <div className="jd-modal-logo" style={{background: JOB.logoBg}}>{JOB.logo}</div>
          <div>
            <div className="jd-modal-job">
              <span className="t-bn">{JOB.title.bn}</span>
              <span className="t-en">{JOB.title.en}</span>
            </div>
            <div className="jd-modal-co">{JOB.co} · <span className="t-bn">{JOB.loc.bn}</span><span className="t-en">{JOB.loc.en}</span></div>
          </div>
        </div>

        <div className="jd-modal-progress">
          {['Profile', 'Q&A', 'Review', 'Done'].map((l, i) => (
            <div key={l} className={'jd-modal-step' + (i <= step ? ' is-on' : '') + (i === step ? ' is-cur' : '')}>
              <span className="jd-modal-step-num">{i < step ? '✓' : i + 1}</span>
              <span>{l}</span>
            </div>
          ))}
        </div>

        {step === 0 && (
          <div className="jd-modal-body">
            <div className="jd-modal-prefilled">
              <span className="jd-modal-spark">{II.spark}</span>
              <span className="t-bn">আপনার NOBBYO প্রোফাইল থেকে অটো-ফিল হয়েছে</span>
              <span className="t-en">Auto-filled from your NOBBYO profile</span>
            </div>
            <Field label={{ bn: 'পূর্ণ নাম', en: 'Full name' }} value="ফাহিম আহমেদ" onChange={v=>update('name',v)} />
            <Field label={{ bn: 'ইমেইল', en: 'Email' }} value="fahim.ahmed@gmail.com" onChange={v=>update('email',v)} />
            <Field label={{ bn: 'মোবাইল', en: 'Phone' }} value="+৮৮০ ১৭১২ ৩৪৫৬৭৮" onChange={v=>update('phone',v)} />
            <div className="jd-cv-pick">
              <div className="jd-field-label">
                <span className="t-bn">CV / রেজিউমে</span>
                <span className="t-en">CV / Resume</span>
              </div>
              <div className="jd-cv-opts">
                <label className={'jd-cv-opt' + (data.cv === 'profile' ? ' is-on' : '')}>
                  <input type="radio" name="cv" checked={data.cv==='profile'} onChange={()=>update('cv','profile')} />
                  <div>
                    <div className="jd-cv-opt-title">
                      <span className="t-bn">NOBBYO প্রোফাইল CV</span>
                      <span className="t-en">NOBBYO Profile CV</span>
                    </div>
                    <div className="jd-cv-opt-sub">
                      <span className="t-bn">আপডেটেড · 2 দিন আগে</span>
                      <span className="t-en">Updated · 2 days ago</span>
                    </div>
                  </div>
                  <span className="jd-cv-opt-badge">
                    <span className="t-bn">প্রস্তাবিত</span>
                    <span className="t-en">Recommended</span>
                  </span>
                </label>
                <label className={'jd-cv-opt' + (data.cv === 'upload' ? ' is-on' : '')}>
                  <input type="radio" name="cv" checked={data.cv==='upload'} onChange={()=>update('cv','upload')} />
                  <div>
                    <div className="jd-cv-opt-title">
                      <span className="t-bn">নতুন আপলোড</span>
                      <span className="t-en">Upload new</span>
                    </div>
                    <div className="jd-cv-opt-sub">PDF, DOCX · max 5MB</div>
                  </div>
                </label>
              </div>
            </div>
          </div>
        )}

        {step === 1 && (
          <div className="jd-modal-body">
            <div className="jd-modal-q">
              <div className="jd-field-label">
                <span className="t-bn">প্রত্যাশিত বেতন (মাসিক)</span>
                <span className="t-en">Expected monthly salary</span>
              </div>
              <input className="jd-input" value={data.salary} onChange={e=>update('salary', e.target.value)} />
              <div className="jd-modal-hint">
                <span className="t-bn">এই ভূমিকার রেঞ্জ: ৳ ১.২ – ১.৮ লাখ</span>
                <span className="t-en">Range for this role: ৳ 120K – 180K</span>
              </div>
            </div>
            <div className="jd-modal-q">
              <div className="jd-field-label">
                <span className="t-bn">যোগদানের তারিখ</span>
                <span className="t-en">Earliest start date</span>
              </div>
              <div className="jd-modal-pills">
                {[
                  { id: 'now', bn: 'এখনই', en: 'Immediately' },
                  { id: '2w', bn: '২ সপ্তাহ', en: '2 weeks' },
                  { id: '1m', bn: '১ মাস', en: '1 month' },
                  { id: '3m', bn: '৩ মাস', en: '3 months' },
                ].map(o => (
                  <button key={o.id} className={'jd-modal-pill' + (data.start === o[lang] ? ' is-on' : '')} onClick={()=>update('start', o[lang])}>
                    {o[lang]}
                  </button>
                ))}
              </div>
            </div>
            <div className="jd-modal-q">
              <div className="jd-field-label">
                <span className="t-bn">কভার নোট (ঐচ্ছিক)</span>
                <span className="t-en">Cover note (optional)</span>
              </div>
              <textarea className="jd-textarea" rows="4"
                placeholder={lang==='bn'?'কেন আপনি এই ভূমিকার জন্য সেরা ফিট...':'Why you are a great fit for this role...'}
                value={data.cover} onChange={e=>update('cover', e.target.value)}>
              </textarea>
              <button className="jd-modal-ai-btn">
                {II.spark}
                <span className="t-bn">AI দিয়ে লিখুন</span>
                <span className="t-en">Write with AI</span>
              </button>
            </div>
          </div>
        )}

        {step === 2 && (
          <div className="jd-modal-body">
            <div className="jd-modal-review">
              <div className="jd-modal-review-row"><span className="t-bn">নাম</span><span className="t-en">Name</span><b>ফাহিম আহমেদ</b></div>
              <div className="jd-modal-review-row"><span className="t-bn">ইমেইল</span><span className="t-en">Email</span><b>fahim.ahmed@gmail.com</b></div>
              <div className="jd-modal-review-row"><span className="t-bn">মোবাইল</span><span className="t-en">Phone</span><b>+৮৮০ ১৭১২ ৩৪৫৬৭৮</b></div>
              <div className="jd-modal-review-row"><span className="t-bn">CV</span><b><span className="t-bn">NOBBYO প্রোফাইল</span><span className="t-en">NOBBYO Profile</span></b></div>
              <div className="jd-modal-review-row"><span className="t-bn">প্রত্যাশিত বেতন</span><span className="t-en">Expected salary</span><b>৳ {data.salary}</b></div>
              <div className="jd-modal-review-row"><span className="t-bn">শুরু</span><span className="t-en">Start</span><b>{data.start}</b></div>
            </div>
            <label className="jd-modal-consent">
              <input type="checkbox" defaultChecked />
              <span>
                <span className="t-bn">আমি NOBBYO Jobs এর শর্তাবলী মেনে নিচ্ছি এবং Pathao কে আমার তথ্য দেখার অনুমতি দিচ্ছি।</span>
                <span className="t-en">I accept NOBBYO Jobs terms and consent to share my data with Pathao.</span>
              </span>
            </label>
          </div>
        )}

        {step === 3 && (
          <div className="jd-modal-body jd-modal-success">
            <div className="jd-success-burst">
              <div className="jd-success-circle">✓</div>
            </div>
            <div className="jd-success-title">
              <span className="t-bn">আবেদন পাঠানো হয়েছে! 🎉</span>
              <span className="t-en">Application sent! 🎉</span>
            </div>
            <div className="jd-success-sub">
              <span className="t-bn">Pathao সাধারণত ৩-৫ দিনের মধ্যে উত্তর দেয়।</span>
              <span className="t-en">Pathao usually responds within 3-5 days.</span>
            </div>
            <div className="jd-success-stats">
              <div><strong>৪৪</strong> <span className="t-bn">আবেদনকারী</span><span className="t-en">applicants</span></div>
              <div><strong>৫%</strong> <span className="t-bn">শীর্ষে</span><span className="t-en">in top</span></div>
              <div><strong>৩-৫</strong> <span className="t-bn">দিন</span><span className="t-en">days</span></div>
            </div>
            <div className="jd-success-actions">
              <button className="btn btn-ink" onClick={onClose}>
                <span className="t-bn">আরো চাকরি দেখুন</span>
                <span className="t-en">Browse more jobs</span>
              </button>
              <a href="candidate-profile.html" className="btn btn-ghost">
                <span className="t-bn">আমার অ্যাপ্লিকেশন ট্র্যাক করুন</span>
                <span className="t-en">Track my application</span>
              </a>
            </div>
          </div>
        )}

        {step < 3 && (
          <div className="jd-modal-foot">
            {step > 0 ? (
              <button className="btn btn-ghost" onClick={prev}>
                <span className="t-bn">← পেছনে</span>
                <span className="t-en">← Back</span>
              </button>
            ) : <span></span>}
            <button className="btn btn-ink" onClick={next}>
              {step === 2
                ? (<><span className="t-bn">আবেদন পাঠান</span><span className="t-en">Submit application</span>{II.send}</>)
                : (<><span className="t-bn">পরবর্তী</span><span className="t-en">Next</span>{II.arrowRight}</>)}
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

function Field({ label, value, onChange }) {
  return (
    <div className="jd-field">
      <div className="jd-field-label">
        <span className="t-bn">{label.bn}</span>
        <span className="t-en">{label.en}</span>
      </div>
      <input className="jd-input" defaultValue={value} onChange={e=>onChange&&onChange(e.target.value)} />
    </div>
  );
}

// =================== APP ===================
function App() {
  const [lang, setLang] = window.usePageLang('bn');
  const [saved, setSaved] = uS(false);
  const [applyOpen, setApplyOpen] = uS(false);
  const onApply = () => setApplyOpen(true);

  return (
    <>
      <PageTopBar lang={lang} setLang={setLang} />
      <PageHeader active="jobs" />
      <JobHeader saved={saved} setSaved={setSaved} onApply={onApply} lang={lang} />
      <section className="jd-body">
        <div className="container jd-body-grid">
          <main className="jd-main">
            <AIInsights lang={lang} />
            <JobContent lang={lang} />
          </main>
          <Sidebar onApply={onApply} lang={lang} />
        </div>
      </section>
      <Similar lang={lang} />
      <PageFooter lang={lang} />
      <ApplyModal open={applyOpen} onClose={() => setApplyOpen(false)} lang={lang} />
    </>
  );
}

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