// components/store-bottom-nav.jsx — floating mobile bottom nav

function StoreBottomNav() {
  const store = useStore();
  const route = useRoute();
  const cartN = store.cartCount();

  const hideOn = ['phone', 'onboarding', 'checkout'];
  if (hideOn.indexOf(route.name) >= 0) return null;

  const isHome = route.name === 'home';
  const isWish = route.name === 'wishlist';
  const isCart = route.name === 'cart';

  return (
    <nav className="store-bottom-nav" aria-label="Store navigation">
      <a href="#/" className={isHome ? 'on' : ''} aria-current={isHome ? 'page' : undefined}>
        <Icon name="home" size={20} />
        Home
      </a>
      <button type="button" onClick={() => store.openDrawer('search')} aria-label="Search">
        <Icon name="search" size={20} />
        Search
      </button>
      <a href="#/wishlist" className={isWish ? 'on' : ''} aria-current={isWish ? 'page' : undefined}>
        <Icon name="heart" size={20} />
        Wishlist
      </a>
      <a href="#/cart" className={isCart ? 'on' : ''} aria-current={isCart ? 'page' : undefined} style={{ position: 'relative' }}>
        <Icon name="cart" size={20} />
        Cart
        {cartN > 0 && <span className="store-bottom-nav__badge">{cartN}</span>}
      </a>
    </nav>
  );
}

window.StoreBottomNav = StoreBottomNav;