/* global React, NOBBYO_ICONS */
const { useState, useEffect, useRef } = React;
const I2 = window.NOBBYO_ICONS;

// ============================================================
// 1) TRUST BAR — press / partner logos with custom SVG logos + animations
// ============================================================

// ---- Demo SVG logos (mark + wordmark composites) -----------------
const PressLogos = {
  dailystar: ({ dark }) => (
    <svg viewBox="0 0 180 36" className="brand-svg">
      <g fill={dark ? '#F7F4ED' : '#1B2540'}>
        <path d="M6 18 L13 6 L20 18 L13 30 Z" opacity="0.85"/>
        <text x="28" y="17" fontFamily="serif" fontSize="11" fontWeight="700" letterSpacing="0.5">THE DAILY</text>
        <text x="28" y="30" fontFamily="serif" fontSize="15" fontWeight="800" letterSpacing="0.8" fontStyle="italic">STAR</text>
      </g>
    </svg>
  ),
  prothomalo: ({ dark, lang }) => (
    <svg viewBox="0 0 180 36" className="brand-svg">
      <g fill={dark ? '#F7F4ED' : '#C8202F'}>
        <circle cx="14" cy="18" r="9" opacity="0.95"/>
        <path d="M9 18 L14 13 L19 18 L14 23 Z" fill={dark ? '#1B2540' : '#fff'}/>
      </g>
      <text x="30" y="23" fontFamily="serif" fontSize="16" fontWeight="800" letterSpacing="-0.2" fill={dark ? '#F7F4ED' : '#1B2540'}>
        {lang === 'bn' ? 'প্রথম আলো' : 'Prothom Alo'}
      </text>
    </svg>
  ),
  bdnews: ({ dark }) => (
    <svg viewBox="0 0 180 36" className="brand-svg">
      <rect x="3" y="9" width="22" height="18" rx="2" fill={dark ? '#F58220' : '#F58220'}/>
      <text x="6" y="22" fontFamily="sans-serif" fontSize="11" fontWeight="800" fill="#fff">bd</text>
      <text x="30" y="23" fontFamily="sans-serif" fontSize="15" fontWeight="800" letterSpacing="-0.5" fill={dark ? '#F7F4ED' : '#1B2540'}>news<tspan fontWeight="400" opacity="0.7">24</tspan></text>
    </svg>
  ),
  dhakatribune: ({ dark }) => (
    <svg viewBox="0 0 180 36" className="brand-svg">
      <g fill={dark ? '#F7F4ED' : '#1B2540'}>
        <path d="M5 8 L23 8 L23 11 L15 11 L15 28 L13 28 L13 11 L5 11 Z"/>
        <text x="28" y="23" fontFamily="serif" fontSize="15" fontWeight="700" letterSpacing="-0.2">Dhaka</text>
        <text x="28" y="33" fontFamily="serif" fontSize="9" fontWeight="500" letterSpacing="2.4" opacity="0.7">TRIBUNE</text>
      </g>
    </svg>
  ),
  tbs: ({ dark }) => (
    <svg viewBox="0 0 180 36" className="brand-svg">
      <rect x="2" y="6" width="32" height="24" rx="3" fill="#0A6B3F" opacity={dark ? 0.9 : 1}/>
      <text x="6" y="24" fontFamily="sans-serif" fontSize="13" fontWeight="900" fill="#fff" letterSpacing="-0.5">TBS</text>
      <text x="40" y="19" fontFamily="sans-serif" fontSize="10" fontWeight="700" letterSpacing="0.5" fill={dark ? '#F7F4ED' : '#1B2540'}>THE BUSINESS</text>
      <text x="40" y="30" fontFamily="sans-serif" fontSize="11" fontWeight="900" letterSpacing="2" fill={dark ? '#F7F4ED' : '#1B2540'}>STANDARD</text>
    </svg>
  ),
  bonikbarta: ({ dark, lang }) => (
    <svg viewBox="0 0 180 36" className="brand-svg">
      <g fill={dark ? '#F58220' : '#D86A0A'}>
        <path d="M5 8 L18 8 Q26 8 26 18 Q26 28 18 28 L5 28 Z" opacity="0.95"/>
        <path d="M10 13 L18 13 Q21 13 21 18 Q21 23 18 23 L10 23 Z" fill={dark ? '#1B2540' : '#FBF5E6'}/>
      </g>
      <text x="32" y="23" fontFamily="serif" fontSize="14" fontWeight="800" letterSpacing="-0.2" fill={dark ? '#F7F4ED' : '#1B2540'}>
        {lang === 'bn' ? 'বণিক বার্তা' : 'Bonik Barta'}
      </text>
    </svg>
  ),
  thefinancial: ({ dark }) => (
    <svg viewBox="0 0 180 36" className="brand-svg">
      <g fill={dark ? '#F7F4ED' : '#1B2540'}>
        <rect x="4" y="8" width="3" height="20"/>
        <rect x="9" y="14" width="3" height="14"/>
        <rect x="14" y="11" width="3" height="17"/>
        <rect x="19" y="6" width="3" height="22" fill={dark ? '#F58220' : '#F58220'}/>
        <text x="28" y="20" fontFamily="serif" fontSize="11" fontWeight="700" letterSpacing="0.4">THE FINANCIAL</text>
        <text x="28" y="32" fontFamily="serif" fontSize="13" fontWeight="800" letterSpacing="0.3" fontStyle="italic">Express</text>
      </g>
    </svg>
  ),
  newage: ({ dark }) => (
    <svg viewBox="0 0 180 36" className="brand-svg">
      <g fill={dark ? '#F7F4ED' : '#1B2540'}>
        <path d="M4 28 L4 8 L8 8 L18 22 L18 8 L22 8 L22 28 L18 28 L8 14 L8 28 Z"/>
        <text x="30" y="23" fontFamily="sans-serif" fontSize="16" fontWeight="900" letterSpacing="-0.5">NEW AGE</text>
      </g>
    </svg>
  ),
};

const PartnerLogos = {
  basis: () => (
    <svg viewBox="0 0 56 56" className="partner-svg">
      <rect width="56" height="56" rx="12" fill="#0A2A66"/>
      <path d="M14 18 L26 18 Q32 18 32 23 Q32 27 28 28 Q33 29 33 34 Q33 39 27 39 L14 39 Z" fill="#fff"/>
      <path d="M19 23 L24 23 Q27 23 27 25 Q27 27 24 27 L19 27 Z M19 30 L25 30 Q28 30 28 32 Q28 34 25 34 L19 34 Z" fill="#0A2A66"/>
      <text x="35" y="24" fontFamily="sans-serif" fontSize="6" fontWeight="700" fill="#fff" letterSpacing="0.5">BASIS</text>
      <circle cx="42" cy="32" r="6" fill="#F58220"/>
      <path d="M39 32 L42 35 L46 30" stroke="#fff" strokeWidth="1.5" fill="none" strokeLinecap="round"/>
    </svg>
  ),
  a2i: () => (
    <svg viewBox="0 0 56 56" className="partner-svg">
      <rect width="56" height="56" rx="12" fill="#006A4E"/>
      <circle cx="28" cy="22" r="9" fill="#F42A41"/>
      <text x="28" y="42" fontFamily="sans-serif" fontSize="14" fontWeight="900" fill="#fff" textAnchor="middle" letterSpacing="-0.5">a2i</text>
      <line x1="10" y1="48" x2="46" y2="48" stroke="#F58220" strokeWidth="2"/>
    </svg>
  ),
  bida: () => (
    <svg viewBox="0 0 56 56" className="partner-svg">
      <rect width="56" height="56" rx="12" fill="#1B4789"/>
      <path d="M14 14 L42 14 L42 22 L20 22 L20 28 L36 28 L36 36 L20 36 L20 42 L14 42 Z" fill="#fff" opacity="0.95"/>
      <text x="28" y="50" fontFamily="sans-serif" fontSize="6" fontWeight="800" fill="#fff" textAnchor="middle" letterSpacing="2">BIDA</text>
    </svg>
  ),
  bwit: () => (
    <svg viewBox="0 0 56 56" className="partner-svg">
      <rect width="56" height="56" rx="12" fill="#9C2767"/>
      <circle cx="28" cy="22" r="6" fill="#F8C9DC"/>
      <path d="M22 32 Q28 26 34 32 L36 42 L20 42 Z" fill="#F8C9DC"/>
      <path d="M14 26 L18 22 L22 26 M34 26 L38 22 L42 26" stroke="#F8C9DC" strokeWidth="1.5" fill="none" strokeLinecap="round"/>
      <text x="28" y="52" fontFamily="sans-serif" fontSize="5" fontWeight="800" fill="#fff" textAnchor="middle" letterSpacing="1.5">BWIT</text>
    </svg>
  ),
  lict: () => (
    <svg viewBox="0 0 56 56" className="partner-svg">
      <rect width="56" height="56" rx="12" fill="#0F4C81"/>
      <path d="M14 14 L20 14 L20 30 L32 30 L32 36 L14 36 Z" fill="#fff"/>
      <circle cx="40" cy="20" r="4" fill="#F58220"/>
      <path d="M36 20 L44 20 M40 16 L40 24" stroke="#fff" strokeWidth="1.2"/>
      <text x="28" y="50" fontFamily="sans-serif" fontSize="6" fontWeight="800" fill="#fff" textAnchor="middle" letterSpacing="1.5">LICT</text>
    </svg>
  ),
  startup: () => (
    <svg viewBox="0 0 56 56" className="partner-svg">
      <rect width="56" height="56" rx="12" fill="#1B2540"/>
      <path d="M28 10 L34 24 L48 24 L37 33 L41 47 L28 39 L15 47 L19 33 L8 24 L22 24 Z" fill="#F58220"/>
      <circle cx="28" cy="28" r="4" fill="#1B2540"/>
      <text x="28" y="55" fontFamily="sans-serif" fontSize="0" fill="#fff"/>
    </svg>
  ),
  bb: () => (
    <svg viewBox="0 0 56 56" className="partner-svg">
      <rect width="56" height="56" rx="12" fill="#003E70"/>
      <circle cx="28" cy="28" r="14" fill="none" stroke="#D4AF37" strokeWidth="2"/>
      <path d="M22 22 L26 22 Q30 22 30 25 Q30 27 28 28 Q31 28 31 31 Q31 34 27 34 L22 34 Z" fill="#D4AF37"/>
      <text x="28" y="50" fontFamily="serif" fontSize="6" fontWeight="800" fill="#fff" textAnchor="middle" letterSpacing="2">BB</text>
    </svg>
  ),
  ictdivision: () => (
    <svg viewBox="0 0 56 56" className="partner-svg">
      <rect width="56" height="56" rx="12" fill="#006A4E"/>
      <rect x="12" y="14" width="32" height="22" rx="2" fill="#fff"/>
      <path d="M16 18 L40 18 M16 22 L36 22 M16 26 L40 26 M16 30 L32 30" stroke="#006A4E" strokeWidth="1.2"/>
      <rect x="22" y="36" width="12" height="3" fill="#fff"/>
      <rect x="18" y="39" width="20" height="2" rx="1" fill="#fff"/>
      <text x="28" y="51" fontFamily="sans-serif" fontSize="5" fontWeight="800" fill="#fff" textAnchor="middle" letterSpacing="1">ICT DIV.</text>
    </svg>
  ),
};

function TrustBar({ lang }) {
  const [revealed, setRevealed] = useState(false);
  const [pulseIdx, setPulseIdx] = useState(0);
  const ref = useRef(null);

  // reveal-on-scroll
  useEffect(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) setRevealed(true); });
    }, { threshold: 0.2 });
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  // rolling badge pulse on the partners (one at a time)
  useEffect(() => {
    const t = setInterval(() => setPulseIdx((i) => (i + 1) % 8), 1700);
    return () => clearInterval(t);
  }, []);

  const press = [
    { id: 'dailystar',   Logo: PressLogos.dailystar },
    { id: 'prothomalo',  Logo: PressLogos.prothomalo },
    { id: 'bdnews',      Logo: PressLogos.bdnews },
    { id: 'dhakatribune',Logo: PressLogos.dhakatribune },
    { id: 'tbs',         Logo: PressLogos.tbs },
    { id: 'bonikbarta',  Logo: PressLogos.bonikbarta },
    { id: 'thefinancial',Logo: PressLogos.thefinancial },
    { id: 'newage',      Logo: PressLogos.newage },
  ];

  const partners = [
    { id: 'basis',       Logo: PartnerLogos.basis,       name: 'BASIS',       sub: { bn: 'আইটি ইন্ডাস্ট্রি অ্যাসোসিয়েশন', en: 'IT Industry Association' } },
    { id: 'a2i',         Logo: PartnerLogos.a2i,         name: 'a2i',         sub: { bn: 'বাংলাদেশ সরকার', en: 'Govt. of Bangladesh' } },
    { id: 'bida',        Logo: PartnerLogos.bida,        name: 'BIDA',        sub: { bn: 'ইনভেস্টমেন্ট অথরিটি', en: 'Investment Authority' } },
    { id: 'bwit',        Logo: PartnerLogos.bwit,        name: 'BWIT',        sub: { bn: 'নারী ইন টেক', en: 'Women in Tech' } },
    { id: 'lict',        Logo: PartnerLogos.lict,        name: 'LICT',        sub: { bn: 'আইসিটি বিভাগ', en: 'ICT Division' } },
    { id: 'startup',     Logo: PartnerLogos.startup,     name: 'Startup BD',  sub: { bn: 'iDEA প্রকল্প', en: 'iDEA Project' } },
    { id: 'bb',          Logo: PartnerLogos.bb,          name: 'Brac Bank',   sub: { bn: 'ব্যাংকিং পার্টনার', en: 'Banking Partner' } },
    { id: 'ictdivision', Logo: PartnerLogos.ictdivision, name: 'ICT Div.',    sub: { bn: 'ডিজিটাল বাংলাদেশ', en: 'Digital Bangladesh' } },
  ];

  return (
    <section className="trust-bar" ref={ref}>
      {/* Decorative tape strips on top */}
      <div className="trust-tape" aria-hidden="true">
        <span className="trust-tape-strip"></span>
        <span className="trust-tape-strip"></span>
        <span className="trust-tape-strip"></span>
      </div>

      <div className="container">
        {/* PRESS — dual marquee bands (top: ltr, bottom: rtl) */}
        <div className="trust-press-wrap">
          <div className="trust-label trust-label-center">
            <span className="trust-label-line"></span>
            <span className="trust-label-text">
              <span className="t-bn">যাদের আস্থা ও মিডিয়া কভারেজ</span>
              <span className="t-en">Trusted &amp; covered by</span>
            </span>
            <span className="trust-label-line"></span>
          </div>

          <div className="trust-marquee">
            <div className="trust-track trust-track-ltr">
              {[...press, ...press].map((p, i) => {
                const Logo = p.Logo;
                return (
                  <div key={i} className="press-logo">
                    <Logo lang={lang} />
                  </div>
                );
              })}
            </div>
          </div>

          <div className="trust-marquee">
            <div className="trust-track trust-track-rtl">
              {[...press.slice().reverse(), ...press.slice().reverse()].map((p, i) => {
                const Logo = p.Logo;
                return (
                  <div key={i} className="press-logo press-logo-alt">
                    <Logo lang={lang} />
                  </div>
                );
              })}
            </div>
          </div>
        </div>

        {/* DIVIDER */}
        <div className="trust-divider" aria-hidden="true">
          <span className="trust-divider-dot"></span>
          <span className="trust-divider-line"></span>
          <span className="trust-divider-badge">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
              <path d="M12 2 L15 8 L22 9 L17 14 L18 21 L12 18 L6 21 L7 14 L2 9 L9 8 Z"/>
            </svg>
            <span className="t-bn">অফিসিয়াল পার্টনার</span>
            <span className="t-en">Official Partners</span>
          </span>
          <span className="trust-divider-line"></span>
          <span className="trust-divider-dot"></span>
        </div>

        {/* PARTNER GRID */}
        <div className={'trust-partner-grid' + (revealed ? ' is-revealed' : '')}>
          {partners.map((p, i) => {
            const Logo = p.Logo;
            return (
              <div
                key={p.id}
                className={'partner-card' + (i === pulseIdx ? ' is-pulse' : '')}
                style={{ '--i': i }}
              >
                <div className="partner-card-glow"></div>
                <div className="partner-card-logo">
                  <Logo />
                </div>
                <div className="partner-card-text">
                  <div className="partner-card-name">{p.name}</div>
                  <div className="partner-card-sub">{p.sub[lang]}</div>
                </div>
                <div className="partner-card-verify" title="Verified partner">
                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M5 13l4 4L19 7"/>
                  </svg>
                </div>
              </div>
            );
          })}
        </div>

        {/* Stats strip */}
        <div className="trust-stats">
          <div className="trust-stat">
            <span className="trust-stat-num">৫০+</span>
            <span className="trust-stat-label">
              <span className="t-bn">মিডিয়া হাইলাইট</span>
              <span className="t-en">Media features</span>
            </span>
          </div>
          <div className="trust-stat">
            <span className="trust-stat-num">১২</span>
            <span className="trust-stat-label">
              <span className="t-bn">সরকারি ও ইন্ডাস্ট্রি পার্টনার</span>
              <span className="t-en">Govt. &amp; industry partners</span>
            </span>
          </div>
          <div className="trust-stat">
            <span className="trust-stat-num">ISO 27001</span>
            <span className="trust-stat-label">
              <span className="t-bn">সার্টিফায়েড ডেটা সিকিউরিটি</span>
              <span className="t-en">Certified data security</span>
            </span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 2) CAREER PATH QUIZ — 3 questions, returns a "career fit"
// ============================================================
function CareerQuiz({ lang }) {
  const [step, setStep] = useState(0); // 0,1,2 = questions, 3 = result
  const [answers, setAnswers] = useState({});

  const questions = [
    {
      key: 'energy',
      q: { bn: 'আপনি কোন কাজে সবচেয়ে বেশি এনার্জি পান?', en: 'Where do you feel most energized?' },
      opts: [
        { id: 'build',   bn: 'কিছু তৈরি করতে',           en: 'Building something' },
        { id: 'analyze', bn: 'ডেটা বিশ্লেষণ করতে',        en: 'Analyzing data' },
        { id: 'lead',    bn: 'মানুষকে নেতৃত্ব দিতে',     en: 'Leading people' },
        { id: 'create',  bn: 'কনটেন্ট/ডিজাইন তৈরি',     en: 'Creating content' },
      ],
    },
    {
      key: 'salary',
      q: { bn: 'আপনার লক্ষ্যিত বেতন (মাসিক)?', en: 'Your target salary (monthly)?' },
      opts: [
        { id: 'lo', bn: '২৫–৪৫ হাজার',     en: '25k–45k' },
        { id: 'md', bn: '৪৫–৮০ হাজার',     en: '45k–80k' },
        { id: 'hi', bn: '৮০ হাজার–১.৫ লাখ',  en: '80k–150k' },
        { id: 'top',bn: '১.৫ লাখ+',         en: '150k+' },
      ],
    },
    {
      key: 'work',
      q: { bn: 'কোন কর্মপদ্ধতি আপনার সাথে যায়?', en: 'Which work style fits you?' },
      opts: [
        { id: 'office', bn: 'অফিস টিম',    en: 'On-site team' },
        { id: 'hybrid', bn: 'হাইব্রিড',     en: 'Hybrid' },
        { id: 'remote', bn: 'রিমোট',       en: 'Fully remote' },
        { id: 'gig',    bn: 'প্রজেক্ট-ভিত্তিক', en: 'Gig / freelance' },
      ],
    },
  ];

  // simple scoring → career match
  const computeMatch = () => {
    const e = answers.energy, s = answers.salary, w = answers.work;
    if (e === 'build' && (s === 'hi' || s === 'top')) {
      return { role: { bn: 'সিনিয়র সফটওয়্যার ইঞ্জিনিয়ার', en: 'Senior Software Engineer' }, salary: '১.২–২.৫ লাখ', match: 94, jobs: 482, color: 'var(--gold)' };
    }
    if (e === 'analyze') {
      return { role: { bn: 'ডেটা সায়েন্টিস্ট / অ্যানালিস্ট', en: 'Data Scientist / Analyst' }, salary: '৭০k–১.৮ লাখ', match: 91, jobs: 217, color: 'var(--sky)' };
    }
    if (e === 'lead') {
      return { role: { bn: 'প্রোডাক্ট ম্যানেজার', en: 'Product Manager' }, salary: '৯০k–২.২ লাখ', match: 88, jobs: 148, color: 'var(--plum)' };
    }
    if (e === 'create') {
      return { role: { bn: 'প্রোডাক্ট / UX ডিজাইনার', en: 'Product / UX Designer' }, salary: '৬০k–১.৪ লাখ', match: 89, jobs: 196, color: 'var(--coral)' };
    }
    if (w === 'gig') {
      return { role: { bn: 'ফ্রিল্যান্স স্পেশালিস্ট', en: 'Freelance Specialist' }, salary: '৪০k–১.২ লাখ', match: 86, jobs: 1042, color: 'var(--sage)' };
    }
    return { role: { bn: 'ফুল-স্ট্যাক ডেভেলপার', en: 'Full-Stack Developer' }, salary: '৬০k–১.৪ লাখ', match: 87, jobs: 312, color: 'var(--gold)' };
  };

  const choose = (key, val) => {
    setAnswers(prev => ({ ...prev, [key]: val }));
    setTimeout(() => setStep(s => s + 1), 280);
  };

  const reset = () => { setAnswers({}); setStep(0); };

  const result = step === 3 ? computeMatch() : null;
  const progress = step === 3 ? 100 : (step / 3) * 100;
  const cur = step < 3 ? questions[step] : null;

  return (
    <section className="section quiz-section">
      <div className="container">
        <div className="quiz-card">
          <div className="quiz-deco">
            <span className="quiz-dot" style={{background:'var(--gold)'}}></span>
            <span className="quiz-dot" style={{background:'var(--asb-navy)'}}></span>
            <span className="quiz-dot" style={{background:'var(--coral)'}}></span>
          </div>
          <div className="quiz-head">
            <div>
              <div className="quiz-eyebrow">
                <span className="t-bn">৬০ সেকেন্ডে · বিনামূল্যে</span>
                <span className="t-en">60 seconds · free</span>
              </div>
              <h2 className="quiz-title">
                <span className="t-bn">আপনার পরবর্তী ক্যারিয়ার <em>কী</em>?</span>
                <span className="t-en">What's your next <em>career</em>?</span>
              </h2>
              <p className="quiz-sub">
                <span className="t-bn">৩টি প্রশ্ন। AI আপনার জন্য সঠিক ক্যারিয়ার পাথ ও স্যালারি রেঞ্জ বের করবে।</span>
                <span className="t-en">3 questions. AI will surface the right career path and salary range for you.</span>
              </p>
            </div>
            <div className="quiz-counter">
              <div className="quiz-counter-num">{Math.min(step + 1, 3)}<span>/3</span></div>
              <div className="quiz-counter-bar">
                <div style={{width: progress + '%'}}></div>
              </div>
            </div>
          </div>

          {step < 3 && (
            <div className="quiz-body" key={step}>
              <div className="quiz-q">{cur.q[lang]}</div>
              <div className="quiz-opts">
                {cur.opts.map((o) => {
                  const selected = answers[cur.key] === o.id;
                  return (
                    <button
                      key={o.id}
                      className={'quiz-opt' + (selected ? ' is-selected' : '')}
                      onClick={() => choose(cur.key, o.id)}
                    >
                      <span className="quiz-opt-dot"></span>
                      <span>{o[lang]}</span>
                    </button>
                  );
                })}
              </div>
              <div className="quiz-foot">
                {step > 0 && (
                  <button className="quiz-back" onClick={() => setStep(s => s - 1)}>
                    ← <span className="t-bn">পেছনে</span><span className="t-en">Back</span>
                  </button>
                )}
                <span className="quiz-tip">
                  <span className="t-bn">কোনো signup লাগবে না</span>
                  <span className="t-en">No signup needed</span>
                </span>
              </div>
            </div>
          )}

          {step === 3 && result && (
            <div className="quiz-result">
              <div className="quiz-result-badge" style={{background: result.color}}>
                {result.match}% MATCH
              </div>
              <div className="quiz-result-role">
                <span className="t-bn">{result.role.bn}</span>
                <span className="t-en">{result.role.en}</span>
              </div>
              <div className="quiz-result-meta">
                <div>
                  <div className="qrm-label">
                    <span className="t-bn">গড় বেতন</span>
                    <span className="t-en">Avg salary</span>
                  </div>
                  <div className="qrm-val">৳ {result.salary}</div>
                </div>
                <div>
                  <div className="qrm-label">
                    <span className="t-bn">ওপেন জব</span>
                    <span className="t-en">Open jobs</span>
                  </div>
                  <div className="qrm-val">{result.jobs.toLocaleString()}+</div>
                </div>
                <div>
                  <div className="qrm-label">
                    <span className="t-bn">গ্রোথ</span>
                    <span className="t-en">Growth</span>
                  </div>
                  <div className="qrm-val" style={{color:'var(--live)'}}>↑ ২৪%</div>
                </div>
              </div>
              <div className="quiz-result-cta">
                <a href="job-search.html" className="qr-btn primary">
                  <span className="t-bn">এই ক্যারিয়ারের জব দেখুন</span>
                  <span className="t-en">See jobs in this field</span>
                  {I2.arrowRight}
                </a>
                <button className="qr-btn ghost" onClick={reset}>
                  <span className="t-bn">আবার নিন</span>
                  <span className="t-en">Retake</span>
                </button>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 3) NEWS / CAREER ADVICE CAROUSEL
// ============================================================
function NewsCarousel({ lang }) {
  const articles = [
    {
      tag: { bn: 'ক্যারিয়ার গাইড', en: 'Career Guide' },
      tagColor: 'var(--gold)',
      title: { bn: '২০২৬-এ বাংলাদেশে সবচেয়ে চাহিদাসম্পন্ন ১০টি স্কিল', en: '10 most in-demand skills in Bangladesh, 2026' },
      meta: { author: 'Tasnia R.', read: '6 min', date: '২ দিন আগে', dateEn: '2 days ago' },
      kicker: 'TRENDING',
      large: true,
    },
    {
      tag: { bn: 'স্যালারি ইনসাইটস', en: 'Salary Insights' },
      tagColor: 'var(--sky)',
      title: { bn: 'ঢাকা vs চট্টগ্রাম: টেক স্যালারির পার্থক্য কতটা?', en: 'Dhaka vs Chattogram: how much does tech pay differ?' },
      meta: { author: 'Imran K.', read: '4 min', date: '৫ দিন', dateEn: '5 days' },
    },
    {
      tag: { bn: 'ফ্রিল্যান্সিং', en: 'Freelancing' },
      tagColor: 'var(--coral)',
      title: { bn: 'প্রবাসী ক্লায়েন্টের সাথে কীভাবে ৫০k+ মাসিক ইনকাম', en: 'How to earn 50k+/mo from overseas clients' },
      meta: { author: 'Rumana B.', read: '8 min', date: '১ সপ্তাহ', dateEn: '1 week' },
    },
    {
      tag: { bn: 'ইন্টারভিউ', en: 'Interviews' },
      tagColor: 'var(--plum)',
      title: { bn: '৮ ঘণ্টায় Brac Bank-এ চাকরি: যা যা শিখলাম', en: 'Hired in 8 hours at Brac Bank: what I learned' },
      meta: { author: 'Sajid A.', read: '5 min', date: '১০ দিন', dateEn: '10 days' },
    },
    {
      tag: { bn: 'নারী', en: 'Women in Work' },
      tagColor: 'var(--rose)',
      title: { bn: 'মাতৃত্বের পরে কর্মক্ষেত্রে ফেরা: ৫টি সফল গল্প', en: 'Returning to work after maternity: 5 stories' },
      meta: { author: 'Mahfuza H.', read: '7 min', date: '২ সপ্তাহ', dateEn: '2 weeks' },
    },
    {
      tag: { bn: 'গভর্মেন্ট জব', en: 'Govt. Jobs' },
      tagColor: 'var(--sage)',
      title: { bn: 'BCS পরীক্ষার পাশে প্রাইভেট সেক্টর: একসাথে করা যায়?', en: 'BCS prep + private sector job: doable?' },
      meta: { author: 'Fahim M.', read: '5 min', date: '৩ সপ্তাহ', dateEn: '3 weeks' },
    },
  ];

  const trackRef = useRef(null);
  const scroll = (dir) => {
    const el = trackRef.current;
    if (!el) return;
    el.scrollBy({ left: dir * (el.clientWidth * 0.85), behavior: 'smooth' });
  };

  return (
    <section className="section news-section">
      <div className="container">
        <div className="news-head">
          <div>
            <div className="section-eyebrow">
              <span className="t-bn">ক্যারিয়ার পত্রিকা</span>
              <span className="t-en">Career magazine</span>
            </div>
            <h2 className="news-title">
              <span className="t-bn">পড়ুন। বাড়ান। <em>হায়ার হোন।</em></span>
              <span className="t-en">Read. Grow. <em>Get hired.</em></span>
            </h2>
          </div>
          <div className="news-nav">
            <button className="news-nav-btn" onClick={() => scroll(-1)} aria-label="Previous">←</button>
            <button className="news-nav-btn" onClick={() => scroll(1)} aria-label="Next">→</button>
            <a href="blog.html" className="news-all">
              <span className="t-bn">সব আর্টিকেল</span>
              <span className="t-en">All articles</span>
              {I2.arrowUpRight}
            </a>
          </div>
        </div>

        <div className="news-track" ref={trackRef}>
          {articles.map((a, i) => (
            <article key={i} className={'news-card' + (a.large ? ' is-large' : '')}>
              <div className="news-thumb" style={{'--c': a.tagColor}}>
                <div className="news-thumb-shape"></div>
                <div className="news-thumb-mono">
                  {a.title[lang].split(' ').slice(0, 2).join(' ')}
                </div>
                {a.kicker && <div className="news-kicker">{a.kicker}</div>}
              </div>
              <div className="news-body">
                <div className="news-tag" style={{color: a.tagColor, borderColor: a.tagColor}}>
                  {a.tag[lang]}
                </div>
                <h3 className="news-card-title">{a.title[lang]}</h3>
                <div className="news-meta">
                  <span className="news-author">{a.meta.author}</span>
                  <span className="news-dot">·</span>
                  <span>{a.meta.read}</span>
                  <span className="news-dot">·</span>
                  <span>
                    <span className="t-bn">{a.meta.date}</span>
                    <span className="t-en">{a.meta.dateEn}</span>
                  </span>
                </div>
              </div>
            </article>
          ))}
        </div>

        <div className="news-newsletter">
          <div className="nn-mark">📬</div>
          <div className="nn-text">
            <div className="nn-title">
              <span className="t-bn">প্রতি বৃহস্পতিবার সকালে · ৪২,৮৬০+ পাঠক</span>
              <span className="t-en">Every Thursday morning · 42,860+ readers</span>
            </div>
            <div className="nn-sub">
              <span className="t-bn">সপ্তাহের সেরা চাকরি, স্যালারি ট্রেন্ড, ক্যারিয়ার অ্যাডভাইস — এক ইমেইলে।</span>
              <span className="t-en">Top jobs, salary trends, and career advice — one email a week.</span>
            </div>
          </div>
          <form className="nn-form" onSubmit={(e) => e.preventDefault()}>
            <input type="email" placeholder={lang==='bn'?'আপনার ইমেইল':'your@email.com'} />
            <button type="submit">
              <span className="t-bn">সাবস্ক্রাইব</span>
              <span className="t-en">Subscribe</span>
            </button>
          </form>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 4) APP DOWNLOAD STICKY BANNER (mobile-only)
// ============================================================
function AppBanner({ lang }) {
  const [closed, setClosed] = useState(false);
  if (closed) return null;
  return (
    <div className="app-banner" role="region" aria-label="Download app">
      <button className="app-banner-x" onClick={() => setClosed(true)} aria-label="Dismiss">
        {I2.close}
      </button>
      <div className="app-banner-mark">
        <svg viewBox="0 0 40 40" width="40" height="40">
          <rect x="2" y="2" width="36" height="36" rx="9" fill="var(--asb-navy)"/>
          <path d="M14 26 L20 12 L26 26" stroke="var(--asb-orange)" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
          <path d="M16.5 21 L23.5 21" stroke="var(--asb-orange)" strokeWidth="2.5" strokeLinecap="round"/>
        </svg>
      </div>
      <div className="app-banner-text">
        <div className="app-banner-title">
          <span className="t-bn">NOBBYO Jobs অ্যাপ — পকেটে চাকরি</span>
          <span className="t-en">NOBBYO Jobs app — jobs in your pocket</span>
        </div>
        <div className="app-banner-meta">
          <span className="ab-stars">★★★★★</span>
          <span className="ab-rating">4.8</span>
          <span className="t-bn">· ১.২ লাখ+ ডাউনলোড</span>
          <span className="t-en">· 120k+ downloads</span>
        </div>
      </div>
      <div className="app-banner-stores">
        <a href="sign-in.html" className="app-banner-btn" aria-label="Google Play">
          <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M3 2.7v18.6c0 .6.7.9 1.1.5l9.7-9.3c.3-.3.3-.7 0-1L4.1 2.2c-.4-.4-1.1-.1-1.1.5z"/><path d="M14.5 11.2 17.7 8 20.5 9.6c.7.4.7 1.4 0 1.8l-2.8 1.6-3.2-1.8z" opacity=".7"/></svg>
          Play
        </a>
        <a href="sign-in.html" className="app-banner-btn" aria-label="App Store">
          <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M16.4 12.8c0-2.5 2-3.7 2.1-3.8-1.2-1.7-3-1.9-3.6-2-1.5-.2-3 .9-3.8.9s-2-.9-3.3-.8c-1.7 0-3.3 1-4.1 2.5-1.8 3-.4 7.6 1.3 10 .8 1.2 1.8 2.6 3.1 2.5 1.3 0 1.7-.8 3.2-.8s1.9.8 3.2.8c1.3 0 2.2-1.2 3-2.4.9-1.4 1.3-2.7 1.3-2.8-.1 0-2.5-.9-2.4-3.7zM14 4.6c.7-.9 1.2-2 1-3.2-1 0-2.3.7-3 1.6-.7.8-1.3 2-1.1 3.1 1.1.1 2.3-.6 3.1-1.5z"/></svg>
          App Store
        </a>
      </div>
    </div>
  );
}

window.TrustBar = TrustBar;
window.CareerQuiz = CareerQuiz;
window.NewsCarousel = NewsCarousel;
window.AppBanner = AppBanner;