// Nav with language dropdown (Asian languages) + Careers link

const LANGS = [
  { code: 'th', label: 'ไทย',        short: 'TH' },
  { code: 'en', label: 'English',    short: 'EN' },
  { code: 'zh', label: '中文',        short: '中' },
  { code: 'ja', label: '日本語',       short: '日' },
  { code: 'ko', label: '한국어',       short: '한' },
  { code: 'vi', label: 'Tiếng Việt', short: 'VI' },
  { code: 'id', label: 'Indonesia',  short: 'ID' },
  { code: 'ms', label: 'Melayu',     short: 'MS' },
  { code: 'my', label: 'မြန်မာ',     short: 'MY' },
  { code: 'km', label: 'ខ្មែរ',       short: 'KM' },
  { code: 'lo', label: 'ລາວ',         short: 'LO' },
  { code: 'tl', label: 'Filipino',   short: 'TL' },
];

const NAV_LABELS = {
  th: ['เกี่ยวกับเรา','บริการ','ผลงาน','ข่าวสาร','ร่วมงาน','ติดต่อ'],
  en: ['About','Services','Gallery','News','Careers','Contact'],
  zh: ['关于我们','服务','作品','新闻','招聘','联系'],
  ja: ['会社概要','サービス','実績','お知らせ','採用情報','お問い合わせ'],
  ko: ['회사소개','서비스','갤러리','뉴스','채용','연락처'],
  vi: ['Giới thiệu','Dịch vụ','Dự án','Tin tức','Tuyển dụng','Liên hệ'],
  id: ['Tentang','Layanan','Galeri','Berita','Karir','Kontak'],
  ms: ['Tentang','Perkhidmatan','Galeri','Berita','Kerjaya','Hubungi'],
  my: ['အကြောင်း','ဝန်ဆောင်မှု','ပုံများ','သတင်း','အလုပ်','ဆက်သွယ်'],
  km: ['អំពី','សេវាកម្ម','ស្នាដៃ','ព័ត៌មាន','ការងារ','ទាក់ទង'],
  lo: ['ກ່ຽວກັບ','ບໍລິການ','ຜົນງານ','ຂ່າວ','ວຽກ','ຕິດຕໍ່'],
  tl: ['Tungkol','Serbisyo','Galeri','Balita','Trabaho','Kontak'],
};

const CTA_LABELS = {
  th: 'ขอใบเสนอราคา', en: 'Get a Quote', zh: '获取报价',
  ja: '見積依頼',     ko: '견적요청',    vi: 'Báo giá',
  id: 'Minta Penawaran', ms: 'Dapatkan Sebut Harga',
  my: 'စျေးနှုန်းတောင်း', km: 'សុំតម្លៃ', lo: 'ຂໍລາຄາ', tl: 'Humingi ng Quote',
};

function Nav({ lang, setLang, overDark }) {
  const c1 = overDark ? '#fbfaf5' : '#1a2b4a';
  const cMute = overDark ? 'rgba(251,250,245,0.55)' : 'rgba(26,43,74,0.6)';
  const [langOpen, setLangOpen] = React.useState(false);
  const ddRef = React.useRef(null);

  React.useEffect(() => {
    const onClick = (e) => {
      if (ddRef.current && !ddRef.current.contains(e.target)) setLangOpen(false);
    };
    document.addEventListener('mousedown', onClick);
    return () => document.removeEventListener('mousedown', onClick);
  }, []);

  const link = {
    fontFamily: "'Jost',sans-serif", fontWeight: 500, fontSize: '0.85rem',
    letterSpacing: '0.22em', textTransform: 'uppercase',
    color: cMute, padding: '0 1.4rem', height: 88, display: 'flex',
    alignItems: 'center', cursor: 'pointer', transition: 'color 0.3s',
  };
  const links = NAV_LABELS[lang] || NAV_LABELS.en;
  const ids = ['about','services','gallery','news','careers','contact'];
  const cta = CTA_LABELS[lang] || CTA_LABELS.en;
  const current = LANGS.find(l => l.code === lang) || LANGS[0];

  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 800,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '0 5rem', height: 88, transition: 'background 0.4s, border-color 0.4s',
      background: overDark ? 'transparent' : 'rgba(251,250,245,0.94)',
      backdropFilter: overDark ? 'none' : 'blur(20px)',
      borderBottom: overDark ? '1px solid transparent' : '1px solid rgba(26,43,74,0.08)',
    }}>
      <a href="#" style={{
        fontFamily: "'Jost',sans-serif", fontWeight: 600, fontSize: '1.4rem',
        letterSpacing: '0.18em', color: c1, transition: 'color 0.3s',
        display: 'flex', alignItems: 'center', gap: '0.4rem',
      }}>
        BEST<span style={{
          color: overDark ? 'rgba(95,160,176,0.95)' : '#2d6a7a',
          fontSize: '1.7rem', fontWeight: 500,
        }}>∞</span>
      </a>

      <ul style={{ display: 'flex', gap: 0, listStyle: 'none', margin: 0, padding: 0 }}>
        {links.map((l, i) => <li key={i}><a href={`#${ids[i]}`} style={link}>{l}</a></li>)}
      </ul>

      <div style={{ display: 'flex', alignItems: 'center', gap: '1.5rem' }}>
        {/* Language dropdown */}
        <div ref={ddRef} style={{ position: 'relative' }}>
          <button
            onClick={() => setLangOpen(o => !o)}
            style={{
              display: 'flex', alignItems: 'center', gap: '0.5rem',
              fontFamily: "'Jost',sans-serif", fontWeight: 500, fontSize: '0.78rem',
              letterSpacing: '0.18em', textTransform: 'uppercase',
              padding: '0.5rem 0.7rem', border: `1px solid ${overDark ? 'rgba(251,250,245,0.3)' : 'rgba(26,43,74,0.2)'}`,
              background: 'transparent', color: c1, cursor: 'pointer',
              transition: 'all 0.3s',
            }}
          >
            <span style={{ fontSize: '0.9rem' }}>{current.short}</span>
            <span style={{
              display: 'inline-block', transition: 'transform 0.3s',
              transform: langOpen ? 'rotate(180deg)' : 'rotate(0)',
              fontSize: '0.6rem', opacity: 0.8,
            }}>▼</span>
          </button>
          {langOpen && (
            <div style={{
              position: 'absolute', top: 'calc(100% + 0.6rem)', right: 0,
              minWidth: 200, background: '#fbfaf5',
              border: '1px solid rgba(26,43,74,0.1)',
              boxShadow: '0 12px 40px rgba(26,43,74,0.12)',
              padding: '0.6rem 0', maxHeight: 360, overflowY: 'auto', zIndex: 900,
            }}>
              {LANGS.map(l => {
                const active = l.code === lang;
                return (
                  <button
                    key={l.code}
                    onClick={() => { setLang(l.code); setLangOpen(false); }}
                    style={{
                      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                      width: '100%', padding: '0.7rem 1.2rem',
                      border: 'none', background: active ? 'rgba(45,106,122,0.08)' : 'transparent',
                      color: active ? '#2d6a7a' : '#1a2b4a',
                      fontFamily: "'Sarabun',sans-serif", fontSize: '0.95rem',
                      fontWeight: active ? 600 : 400, cursor: 'pointer',
                      textAlign: 'left', transition: 'background 0.2s',
                    }}
                    onMouseEnter={(e) => { if (!active) e.currentTarget.style.background = 'rgba(26,43,74,0.04)'; }}
                    onMouseLeave={(e) => { if (!active) e.currentTarget.style.background = 'transparent'; }}
                  >
                    <span>{l.label}</span>
                    <span style={{
                      fontFamily: "'Jost',sans-serif", fontSize: '0.7rem',
                      letterSpacing: '0.18em', opacity: 0.5,
                    }}>{l.short}</span>
                  </button>
                );
              })}
            </div>
          )}
        </div>

        <a href="#quote" style={{
          fontFamily: "'Jost',sans-serif", fontWeight: 500, fontSize: '0.82rem',
          letterSpacing: '0.22em', textTransform: 'uppercase',
          color: c1, cursor: 'pointer',
          borderBottom: `2px solid ${c1}`, paddingBottom: 4,
        }}>{cta}</a>
      </div>
    </nav>
  );
}
window.Nav = Nav;