/* ============================================================
   bezikaron — нижняя навигация (как в приложении).
   Морозное стекло, активная «таблетка» под иконкой, мягкий отклик.
   Живёт внутри iOS-рамки, над индикатором «домой».
   ============================================================ */

function BottomNav({ tab, onTab, hasOrder }) {
  const items = [
    { id: 'home',    label: 'בית',      icon: 'home' },
    { id: 'care',    label: 'טיפול',    icon: 'leaf' },
    { id: 'sub',     label: 'מנוי',     icon: 'calendar' },
    { id: 'cabinet', label: 'אזור אישי', icon: 'user' },
  ];
  return (
    <nav style={{
      position: 'absolute', left: 0, right: 0, bottom: 0, zIndex: 40,
      paddingTop: 9, paddingBottom: 26, paddingInline: 6,
      background: 'color-mix(in oklch, var(--surface) 78%, transparent)',
      backdropFilter: 'blur(22px) saturate(180%)',
      WebkitBackdropFilter: 'blur(22px) saturate(180%)',
      borderTop: '1px solid var(--line-soft)',
      boxShadow: '0 -2px 26px rgba(51,53,47,0.06)',
      display: 'flex', alignItems: 'flex-start', justifyContent: 'space-around',
    }}>
      {items.map((it) => {
        const on = tab === it.id;
        const dot = it.id === 'cabinet' && hasOrder && !on;
        return (
          <button key={it.id} className="navtab" onClick={() => onTab(it.id)} style={{
            border: 'none', background: 'transparent', cursor: 'pointer',
            flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5,
            padding: '0 4px',
          }}>
            <span className="navtab-pill" style={{
              position: 'relative',
              width: 58, height: 32, borderRadius: 999,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              background: on ? 'var(--accent-tint)' : 'transparent',
              color: on ? 'var(--accent-deep)' : 'var(--ink-faint)',
            }}>
              <Icon name={it.icon} size={23} stroke={on ? 2 : 1.7} />
              {dot && (
                <span style={{
                  position: 'absolute', top: 4, insetInlineEnd: 12,
                  width: 8, height: 8, borderRadius: 999,
                  background: 'var(--bronze)', border: '1.6px solid var(--surface)',
                }} />
              )}
            </span>
            <span className="navtab-label" style={{
              fontSize: 11, lineHeight: 1, letterSpacing: '0.01em',
              fontWeight: on ? 700 : 600,
              color: on ? 'var(--accent-deep)' : 'var(--ink-faint)',
              transition: 'color .2s ease, font-weight .2s ease',
            }}>{it.label}</span>
          </button>
        );
      })}
    </nav>
  );
}

Object.assign(window, { BottomNav });