// chrome.jsx — Nav + Footer + WIP banner. i18n-aware.

function LangSwitch({ dark, mobile }) {
  const lang = useLang();
  const fg = dark ? '#fff' : REF.ink;
  const subtle = dark ? 'rgba(255,255,255,0.65)' : REF.ink2;
  const onPick = (code, e) => { e.preventDefault(); setLang(code); };
  const items = [
    ['en','EN'], ['zh-tw','中文'], ['jp','JP'], ['th','TH'],
  ];
  return (
    <div style={{
      display: 'flex', gap: mobile ? 22 : 16,
      fontSize: mobile ? 13 : 13,
      color: subtle,
    }}>
      {items.map(([code, label]) => {
        const active = lang === code;
        return (
          <a key={code} href="#" onClick={e => onPick(code, e)} style={{
            color: active ? fg : 'inherit',
            fontWeight: active ? 500 : 400,
            textDecoration: 'none', cursor: 'pointer',
          }}>{label}</a>
        );
      })}
    </div>
  );
}

function NavDesktop({ route, dark }) {
  const t = useT();
  const fg = dark ? '#fff' : REF.ink;
  const subtle = dark ? 'rgba(255,255,255,0.65)' : REF.ink2;
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 100,
      display: 'flex', alignItems: 'center', padding: '20px 56px',
      borderBottom: dark ? '1px solid rgba(255,255,255,0.08)' : `1px solid ${REF.rule}`,
      backdropFilter: 'saturate(140%) blur(12px)',
      background: dark ? 'rgba(13,35,54,0.78)' : 'rgba(245,245,243,0.82)',
      color: fg,
    }}>
      <a href="#/" style={{
        fontWeight: 600, fontSize: 17, letterSpacing: '-0.02em',
        color: 'inherit', textDecoration: 'none',
      }}>
        Maktar<span style={{ color: subtle, fontWeight: 400, marginLeft: 8 }}>民傑資科</span>
      </a>
      <div style={{ display: 'flex', gap: 28, marginLeft: 64, fontSize: 14, fontWeight: 450 }}>
        {NAV_ITEMS.filter(i => !i.hide).map(i => {
          const active = route === i.id;
          return (
            <a key={i.id} href={`#/${i.id}`} style={{
              color: active ? fg : subtle, textDecoration: 'none',
              borderBottom: active ? `1.5px solid ${dark ? '#fff' : REF.ink}` : '1.5px solid transparent',
              paddingBottom: 2, transition: 'color .15s, border-color .15s',
            }}>{t('nav.' + i.id)}</a>
          );
        })}
      </div>
      <div style={{ marginLeft: 'auto' }}>
        <LangSwitch dark={dark} />
      </div>
    </nav>
  );
}

function NavMobile({ route, dark }) {
  const [open, setOpen] = useState(false);
  const t = useT();
  const fg = dark ? '#fff' : REF.ink;
  return (
    <>
      <nav style={{
        position: 'sticky', top: 0, zIndex: 100,
        padding: '14px 20px', display: 'flex', justifyContent: 'space-between',
        alignItems: 'center', fontSize: 15, color: fg,
        borderBottom: dark ? '1px solid rgba(255,255,255,0.08)' : `1px solid ${REF.rule}`,
        background: dark ? 'rgba(13,35,54,0.92)' : 'rgba(245,245,243,0.92)',
        backdropFilter: 'saturate(140%) blur(12px)',
      }}>
        <a href="#/" style={{
          fontWeight: 600, letterSpacing: '-0.02em', color: 'inherit', textDecoration: 'none',
        }}>Maktar</a>
        <button onClick={() => setOpen(o => !o)} aria-label="menu" style={{
          background: 'transparent', border: 'none', color: fg, fontSize: 20,
          cursor: 'pointer', padding: 4,
        }}>{open ? '×' : '≡'}</button>
      </nav>
      {open && (
        <div onClick={() => setOpen(false)} style={{
          position: 'fixed', inset: 0, top: 50, zIndex: 99,
          background: dark ? 'rgba(13,35,54,0.98)' : 'rgba(245,245,243,0.98)',
          backdropFilter: 'blur(20px)',
          padding: '32px 24px',
          display: 'flex', flexDirection: 'column', gap: 4,
        }}>
          {NAV_ITEMS.filter(i => !i.hide).map(i => {
            const active = route === i.id;
            return (
              <a key={i.id} href={`#/${i.id}`} style={{
                fontSize: 28, fontWeight: 500, letterSpacing: '-0.025em',
                color: active ? (dark ? '#fff' : REF.ink) : (dark ? 'rgba(255,255,255,0.55)' : REF.ink3),
                textDecoration: 'none', padding: '14px 0',
                borderBottom: dark ? '1px solid rgba(255,255,255,0.08)' : `1px solid ${REF.rule}`,
              }}>{t('nav.' + i.id)}</a>
            );
          })}
          <div style={{ marginTop: 32 }} onClick={(e) => e.stopPropagation()}>
            <LangSwitch dark={dark} mobile />
          </div>
        </div>
      )}
    </>
  );
}

function Nav(props) {
  const isMobile = useIsMobile();
  return isMobile ? <NavMobile {...props} /> : <NavDesktop {...props} />;
}

// ── WIP Banner — shown when active lang is non-zh-tw ────────────────────
function WIPBanner() {
  const isWIP = useLangIsWIP();
  const t = useT();
  const [dismissed, setDismissed] = useState(() => {
    try { return localStorage.getItem('maktar.wip.dismissed') === '1'; } catch (_) { return false; }
  });
  if (!isWIP || dismissed) return null;
  const onDismiss = () => {
    try { localStorage.setItem('maktar.wip.dismissed', '1'); } catch (_) {}
    setDismissed(true);
  };
  return (
    <div style={{
      background: REF.accent, color: '#fff',
      padding: '10px 24px', fontSize: 13, lineHeight: 1.5,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
    }}>
      <span style={{ flex: 1 }}>{t('banner.wip')}</span>
      <button onClick={onDismiss} style={{
        background: 'rgba(255,255,255,0.18)', border: '1px solid rgba(255,255,255,0.3)',
        color: '#fff', padding: '6px 14px', borderRadius: 999,
        fontSize: 12, cursor: 'pointer', fontFamily: 'inherit',
        whiteSpace: 'nowrap',
      }}>{t('banner.dismiss')}</button>
    </div>
  );
}

// ── Footer ─────────────────────────────────────────────────────────────
function Footer() {
  const isMobile = useIsMobile();
  const t = useT();
  const cols = [
    [t('footer.col.company'),
      [[t('footer.about'), '#/about'], [t('footer.tech'), '#/technology'], [t('footer.news'), '#/news']]],
    [t('footer.col.products'),
      [[t('footer.qubii'), '#/products'], [t('footer.piconizer'), '#/products'], [t('footer.air'), '#/products']]],
    [t('footer.col.partner'),
      [[t('footer.it'), '#/enterprise'], [t('footer.carrier'), '#/enterprise'], [t('footer.contact'), '#/contact']]],
  ];
  return (
    <footer style={{
      background: '#0a0a0a', color: 'rgba(255,255,255,0.6)',
      padding: isMobile ? '32px 24px 28px' : '64px 80px 36px',
      fontSize: isMobile ? 12 : 13,
    }}>
      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1.4fr 1fr 1fr 1fr',
        gap: isMobile ? 24 : 48,
      }}>
        <div>
          <div style={{
            color: '#fff', fontWeight: 600,
            fontSize: isMobile ? 16 : 18,
            letterSpacing: '-0.02em', marginBottom: 12,
          }}>Maktar 民傑資科</div>
          <p style={{ margin: 0, lineHeight: 1.6, maxWidth: 280 }}>
            {t('footer.tagline')}
          </p>
          <div style={{ marginTop: 16 }}>
            <LangSwitch dark />
          </div>
        </div>
        {cols.map(([h, items]) => (
          <div key={h}>
            <div style={{ color: '#fff', fontWeight: 500, marginBottom: 12 }}>{h}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {items.map(([label, href]) => (
                <a key={label} href={href} style={{ color: 'inherit', textDecoration: 'none' }}>{label}</a>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div style={{
        marginTop: isMobile ? 28 : 56,
        paddingTop: isMobile ? 18 : 24,
        borderTop: '1px solid rgba(255,255,255,0.1)',
        display: 'flex', flexDirection: isMobile ? 'column' : 'row',
        gap: isMobile ? 6 : 0,
        justifyContent: 'space-between', fontSize: isMobile ? 11 : 12,
        color: 'rgba(255,255,255,0.4)',
      }}>
        <span>{t('footer.copy')}</span>
        <span>{t('footer.cities')}</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, NavDesktop, NavMobile, Footer, WIPBanner, LangSwitch });