// nav.jsx — Muna global bottom navigation with raised central QR button.
(function () {
  const T = window.T;
  const TABS = [
    { id: 'home', label: '홈', icon: 'home' },
    { id: 'explore', label: '탐색', icon: 'compass' },
    { id: 'qr', label: 'QR', icon: 'scan', center: true },
    { id: 'library', label: '보관함', icon: 'bookmark' },
    { id: 'my', label: '마이', icon: 'user' },
  ];

  function BottomNav({ active, onNav, floating }) {
    return (
      <div style={{
        position: floating ? 'absolute' : 'relative', bottom: 0, left: 0, right: 0, zIndex: 30,
        flexShrink: 0,
        background: floating ? 'rgba(251,246,236,.92)' : T.canvas,
        backdropFilter: floating ? 'saturate(1.1) blur(14px)' : 'none',
        borderTop: '1px solid ' + T.hairline,
        padding: '8px 14px 12px',
        display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
      }}>
        {TABS.map(t => {
          const on = active === t.id;
          if (t.center) {
            return (
              <button key={t.id} onClick={() => onNav(t.id)} style={{
                width: 62, height: 62, marginTop: -30, borderRadius: 22, flexShrink: 0,
                background: T.gold, border: '3px solid ' + T.canvas, cursor: 'pointer',
                display: 'grid', placeItems: 'center', transition: 'transform .14s',
                boxShadow: '0 10px 22px -8px rgba(168,130,47,.7)',
              }}
                onMouseDown={e => e.currentTarget.style.transform = 'scale(.92)'}
                onMouseUp={e => e.currentTarget.style.transform = 'scale(1)'}
                onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'}>
                <Icon name="scan" size={26} color="#241c06" stroke={1.9} />
              </button>
            );
          }
          return (
            <button key={t.id} onClick={() => onNav(t.id)} style={{
              flex: 1, background: 'none', border: 'none', cursor: 'pointer',
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, padding: '4px 0',
            }}>
              <Icon name={t.icon} size={23} color={on ? T.ink : T.mutedSoft} stroke={on ? 2 : 1.7}
                fill={on ? (t.icon === 'bookmark' ? T.ink : 'none') : 'none'} />
              <span style={{ fontSize: 11, fontWeight: on ? 700 : 500,
                color: on ? T.ink : T.mutedSoft, letterSpacing: -.2 }}>{t.label}</span>
            </button>
          );
        })}
      </div>
    );
  }

  window.BottomNav = BottomNav;
})();