src/components/layout-shell.tsx

'use client';

import { usePathname } from 'next/navigation';
import { MobileNav } from '@/components/mobile-nav';

/**
 * LayoutShell — conditionally renders the mobile bottom nav.
 *
 * Rules:
 * - Login page (/login): NO mobile bottom nav (clean auth page)
 * - All other pages: mobile bottom nav visible
 * - The global top Navbar is removed entirely — the homepage has its own
 *   top nav built into its desktop/mobile layouts.
 */
export function LayoutShell({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();

  // Hide mobile nav on login + product detail pages (they have their own bottom bars)
  const hideMobileNav = pathname === '/login' || pathname.startsWith('/product');

  return (
    <>
      <main className={`flex-1 ${hideMobileNav ? '' : 'pb-20 md:pb-0'}`}>
        {children}
      </main>
      {!hideMobileNav && <MobileNav />}
    </>
  );
}