// nav.jsx — bottom navigation for owner (with central raised 寵答 button) + pro

const NItem = ({ icon, label, active, onClick }) =>
  A('button', { className: 'ccaTap', onClick, style: {
    flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3, border: 'none',
    background: 'transparent', padding: '6px 0 2px', fontFamily: 'inherit', cursor: 'pointer',
    color: active ? 'var(--accent)' : 'var(--ink3)' } },
    A(Icon, { name: icon, size: 23, sw: active ? 2.1 : 1.8, fill: false }),
    A('span', { style: { fontSize: 10, fontWeight: active ? 700 : 600 } }, label));

// Central button renderers for the variation exploration
function CenterBtn({ variant = 'notch', onClick }) {
  if (variant === 'pill') {
    return A('button', { className: 'ccaTap', onClick, style: {
      display: 'flex', alignItems: 'center', gap: 7, padding: '10px 18px', border: 'none',
      borderRadius: 'var(--rpill)', background: 'var(--brand)', color: '#fff', fontFamily: 'inherit',
      fontSize: 14, fontWeight: 800, boxShadow: '0 6px 16px rgba(229,132,92,.4)', transform: 'translateY(-6px)' } },
      A(Icon, { name: 'cat', size: 22, color: '#fff', sw: 1.7 }), '寵答');
  }
  if (variant === 'ring') {
    return A('button', { className: 'ccaTap', onClick, style: {
      width: 64, height: 64, borderRadius: '50%', border: '4px solid var(--bg)', transform: 'translateY(-20px)',
      background: 'radial-gradient(130% 130% at 35% 25%,#FBC9A8,var(--brand) 72%)', color: '#fff',
      display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 0,
      boxShadow: '0 0 0 5px var(--brandSoft),0 10px 22px rgba(229,132,92,.4)' } },
      A(Icon, { name: 'cat', size: 32, color: '#fff', sw: 1.6 }));
  }
  if (variant === 'flat') {
    return A('button', { className: 'ccaTap', onClick, style: {
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3, border: 'none',
      background: 'transparent', padding: '6px 14px', fontFamily: 'inherit', color: 'var(--brand)' } },
      A('div', { style: { width: 46, height: 46, borderRadius: 16, background: 'var(--brandSoft)',
        display: 'flex', alignItems: 'center', justifyContent: 'center' } },
        A(Icon, { name: 'cat', size: 28, color: 'var(--brand)', sw: 1.7 })),
      A('span', { style: { fontSize: 10, fontWeight: 700 } }, '寵答'));
  }
  // notch (default): floating circle
  return A('button', { className: 'ccaTap', onClick, style: {
    width: 58, height: 58, borderRadius: '50%', border: '4px solid var(--bg)', transform: 'translateY(-18px)',
    background: 'radial-gradient(130% 130% at 35% 25%,#FBC9A8,var(--brand) 72%)', color: '#fff',
    display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 0,
    boxShadow: '0 8px 18px rgba(229,132,92,.45)' } },
    A(Icon, { name: 'cat', size: 30, color: '#fff', sw: 1.6 }));
}

function BottomNavOwner({ active = 'home', onNav = () => {}, variant = 'notch' }) {
  const left = [['explore', 'explore', '探索'], ['message', 'inbox', '訊息']];
  const right = [['calendar', 'bookings', '預約'], ['user', 'me', '我的']];
  return A('div', { style: {
    flexShrink: 0, background: 'var(--surface)', borderTop: '1px solid var(--line2)',
    paddingBottom: 6, position: 'relative', zIndex: 6 } },
    A('div', { style: { display: 'flex', alignItems: 'flex-end', padding: '8px 6px 2px' } },
      left.map(([ic, k, l]) => A(NItem, { key: k, icon: ic, label: l, active: active === k, onClick: () => onNav(k) })),
      A('div', { style: { flex: 1, display: 'flex', justifyContent: 'center' } },
        A(CenterBtn, { variant, onClick: () => onNav('home') })),
      right.map(([ic, k, l]) => A(NItem, { key: k, icon: ic, label: l, active: active === k, onClick: () => onNav(k) }))),
    A(HomeBar, {}));
}

function BottomNavPro({ active = 'dash', onNav = () => {} }) {
  const items = [['grid', 'dash', '工作台'], ['calendar', 'cal', '行事曆'], ['message', 'msg', '訊息'], ['user', 'me', '我的']];
  return A('div', { style: {
    flexShrink: 0, background: 'var(--surface)', borderTop: '1px solid var(--line2)',
    paddingBottom: 6, position: 'relative', zIndex: 6 } },
    A('div', { style: { display: 'flex', padding: '8px 10px 2px' } },
      items.map(([ic, k, l]) => A(NItem, { key: k, icon: ic, label: l, active: active === k, onClick: () => onNav(k) }))),
    A(HomeBar, {}));
}

Object.assign(window, { BottomNavOwner, BottomNavPro, CenterBtn, NItem });