/* global React, NOBBYO_ICONS, NOBBYO_DATA */
// Shared chrome (Header + TopBar + Footer + Fab + Assistant) for non-home pages.
// Loads after homepage-bold-icons.jsx (so NOBBYO_ICONS is available).
const { useState: useStateS, useEffect: useEffectS } = React;
const IS = window.NOBBYO_ICONS;

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

function PageTopBar({ lang, setLang }) {
  return (
    <div className="top-bar">
      <div className="container top-bar-inner">
        <div className="top-marquee">
          <span className="top-marquee-pill">
            <span className="t-bn">লাইভ ফিড</span>
            <span className="t-en">LIVE FEED</span>
          </span>
          <div className="top-ticker" style={{height: 'auto'}}>
            <div className="top-ticker-row" style={{position:'static'}}>
              <span className="top-ticker-dot dot-green"></span>
              <span className="top-ticker-who">আজ</span>
              <span>{lang==='bn'?'নতুন ১,২৪০টি চাকরি · ২২৬ জন হায়ার্ড':'1,240 new jobs · 226 hired today'}</span>
            </div>
          </div>
        </div>
        <div className="top-right">
          <a href="homepage-bold.html" className="top-link">
            {IS.globe}
            <span className="t-bn">হোম</span>
            <span className="t-en">Home</span>
          </a>
          <div className="lang-pill">
            <button className={lang === 'bn' ? 'active' : ''} onClick={() => setLang('bn')}>বাং</button>
            <button className={lang === 'en' ? 'active' : ''} onClick={() => setLang('en')}>EN</button>
          </div>
        </div>
      </div>
    </div>
  );
}

function PageHeader({ active }) {
  const items = [
    { key:'jobs', href:'job-search.html', bn:'চাকরি খুঁজুন', en:'Find Jobs' },
    { key:'companies', href:'companies.html', bn:'কোম্পানি', en:'Companies' },
    { key:'salary', href:'salary-insights.html', bn:'স্যালারি ইনসাইটস', en:'Salary' },
    { key:'govt', href:'govt-jobs.html', bn:'গভর্মেন্ট', en:'Govt Jobs' },
    { key:'learn', href:'learn.html', bn:'শিখুন', en:'Learn' },
  ];
  return (
    <header className="header">
      <div className="container header-inner">
        <PageBrandLogo size="md" />
        <nav className="nav">
          <a className="nav-item ai" href="homepage-bold.html#ai">
            {IS.spark}
            <span className="t-bn">AI ম্যাচ</span>
            <span className="t-en">AI Match</span>
          </a>
          {items.map(it => (
            <a key={it.key} href={it.href} className={'nav-item' + (active === it.key ? ' is-active' : '')}>
              <span className="t-bn">{it.bn}</span>
              <span className="t-en">{it.en}</span>
            </a>
          ))}
        </nav>
        <div className="header-actions">
          <button className="btn-icon-circle" aria-label="notifications">
            {IS.bell}
            <span className="badge-dot"></span>
          </button>
          <a href="recruiter-dashboard.html" className="btn btn-ghost" title="Employer dashboard">
            <span className="t-bn">এমপ্লয়ার</span>
            <span className="t-en">Employer</span>
          </a>
          <a href="candidate-profile.html" className="btn btn-ghost">
            <span className="t-bn">আমার প্রোফাইল</span>
            <span className="t-en">My Profile</span>
          </a>
          <a href="sign-in.html" className="btn btn-ink">
            <span className="t-bn">সাইন ইন</span>
            <span className="t-en">Sign In</span>
            {IS.arrowRight}
          </a>
        </div>
      </div>
    </header>
  );
}

function PageFooter({ lang }) {
  const cols = [
    { title: lang==='bn'?'ক্যান্ডিডেটদের জন্য':'For Candidates', items: [
      {l:lang==='bn'?'চাকরি ব্রাউজ':'Browse Jobs', h:'job-search.html'},
      {l:lang==='bn'?'AI ম্যাচ':'AI Match', h:'homepage-bold.html'},
      {l:lang==='bn'?'CV বিল্ডার':'CV Builder', h:'candidate-profile.html'},
      {l:lang==='bn'?'স্যালারি ইনসাইটস':'Salary', h:'salary-insights.html'},
      {l:lang==='bn'?'ক্যারিয়ার পাথ':'Career Paths', h:'career-paths.html'},
    ]},
    { title: lang==='bn'?'এমপ্লয়ারদের জন্য':'For Employers', items: [
      {l:lang==='bn'?'জব পোস্ট':'Post a Job', h:'recruiter-dashboard.html'},
      {l:lang==='bn'?'রিক্রুটার ড্যাশবোর্ড':'Recruiter Dashboard', h:'recruiter-dashboard.html'},
      {l:lang==='bn'?'ATS ইন্টিগ্রেশন':'ATS Integration', h:'ats-integration.html'},
      {l:lang==='bn'?'AI স্ক্রিনিং':'AI Screening', h:'ai-screening.html'},
      {l:lang==='bn'?'প্রাইসিং':'Pricing', h:'pricing.html'},
    ]},
    { title: lang==='bn'?'বিশেষায়িত':'Specialized', items: [
      {l:lang==='bn'?'গভর্মেন্ট জব':'Govt Jobs', h:'govt-jobs.html'},
      {l:lang==='bn'?'ফ্রিল্যান্স গিগ':'Freelance', h:'freelance.html'},
      {l:lang==='bn'?'নারী ট্যালেন্ট':'Women in Tech', h:'women-in-tech.html'},
      {l:lang==='bn'?'প্রবাসী':'Diaspora', h:'diaspora.html'},
    ]},
    { title: lang==='bn'?'কোম্পানি':'Company', items: [
      {l:lang==='bn'?'আমাদের সম্পর্কে':'About', h:'about.html'},
      {l:lang==='bn'?'প্রেস':'Press', h:'press.html'},
      {l:lang==='bn'?'ব্লগ':'Blog', h:'blog.html'},
      {l:lang==='bn'?'যোগাযোগ':'Contact', h:'contact.html'},
    ]},
  ];
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-top">
          <div className="footer-brand-col">
            <div className="footer-brand-mark">
              <PageBrandLogo size="lg" dark />
            </div>
            <p className="footer-tag">
              <span className="t-bn">বাংলাদেশের ১ নম্বর AI চাকরির প্ল্যাটফর্ম। ৪২,০০০+ সফল হায়ার, ১,৮৪০+ যাচাইকৃত কোম্পানি।</span>
              <span className="t-en">Bangladesh's #1 AI job platform. 42K+ hires, 1,840+ verified companies.</span>
            </p>
          </div>
          {cols.map((c,i) => (
            <div key={i}>
              <div className="footer-col-title">{c.title}</div>
              <div className="footer-links">
                {c.items.map((it,k) => <a key={k} href={it.h}>{it.l}</a>)}
              </div>
            </div>
          ))}
        </div>
        <div className="footer-bottom">
          <div>© 2025 NOBBYO Jobs Ltd.</div>
          <div className="footer-bottom-links">
            <a href="privacy.html">{lang==='bn'?'প্রাইভেসি':'Privacy'}</a>
            <a href="terms.html">{lang==='bn'?'টার্মস':'Terms'}</a>
            <a href="cookies.html">{lang==='bn'?'কুকিজ':'Cookies'}</a>
          </div>
          <div className="footer-social"><a>𝕏</a><a>F</a><a>in</a><a>YT</a></div>
        </div>
        <div className="footer-bd-row">
          <span className="footer-flag"></span>
          <span>{lang==='bn'?'গর্বের সাথে বাংলাদেশে নির্মিত · ঢাকা':'PROUDLY BUILT IN BANGLADESH · DHAKA'}</span>
        </div>
      </div>
    </footer>
  );
}

function usePageLang(initial='bn') {
  const [lang, setLang] = useStateS(initial);
  useEffectS(() => {
    document.body.classList.toggle('lang-bn', lang==='bn');
    document.body.classList.toggle('lang-en', lang==='en');
    document.documentElement.lang = lang;
  }, [lang]);
  return [lang, setLang];
}

window.PageBrandLogo = PageBrandLogo;
window.PageTopBar = PageTopBar;
window.PageHeader = PageHeader;
window.PageFooter = PageFooter;
window.usePageLang = usePageLang;