Require login for consulting booking and add availability banner on products page

- Consulting booking now requires authentication upfront (shows login prompt to non-users)
- Added prominent consultation availability banner on products page when enabled
- Added debug logging to Layout component for branding troubleshooting
- Mobile Layout header shows responsive platform name sizing

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

src/components/Layout.tsx

@@ -1,33 +1,52 @@
-import { ReactNode } from 'react';
+import { ReactNode, useState, useEffect } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { useAuth } from '@/hooks/useAuth';
 import { useCart } from '@/contexts/CartContext';
+import { useBranding } from '@/hooks/useBranding';
 import { Button } from '@/components/ui/button';
-import { ShoppingCart, User, LogOut, Settings } from 'lucide-react';
+import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
+import { ShoppingCart, User, LogOut, Settings, Menu, Package } from 'lucide-react';
 
 export function Layout({ children }: { children: ReactNode }) {
   const { user, isAdmin, signOut } = useAuth();
   const { items } = useCart();
+  const branding = useBranding();
   const navigate = useNavigate();
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
   const handleSignOut = async () => {
     await signOut();
     navigate('/');
+    setMobileMenuOpen(false);
   };
 
+  const brandName = branding.brand_name || 'LearnHub';
+  const logoUrl = branding.brand_logo_url;
+
+  // Debug: log branding data
+  useEffect(() => {
+    console.log('Layout - branding data:', branding);
+    console.log('Layout - brandName:', brandName);
+  }, [branding, brandName]);
+
   return (
     <div className="min-h-screen bg-background">
-      <header className="border-b-2 border-border bg-background">
+      <header className="border-b-2 border-border bg-background sticky top-0 z-50">
         <div className="container mx-auto px-4 py-4 flex items-center justify-between">
-          <Link to="/" className="text-2xl font-bold">
-            LearnHub
+          <Link to="/" className="text-2xl font-bold flex items-center gap-2">
+            {logoUrl && (
+              <img src={logoUrl} alt={brandName} className="h-8 object-contain" />
+            )}
+            <span className="hidden sm:inline">{brandName}</span>
+            <span className="sm:hidden text-lg">{brandName}</span>
           </Link>
-          
-          <nav className="flex items-center gap-4">
+
+          {/* Desktop Navigation */}
+          <nav className="hidden md:flex items-center gap-4">
             <Link to="/products" className="hover:underline font-medium">
               Products
             </Link>
-            
+
             {user ? (
               <>
                 <Link to="/dashboard" className="hover:underline font-medium">
@@ -51,7 +70,7 @@ export function Layout({ children }: { children: ReactNode }) {
                 </Button>
               </Link>
             )}
-            
+
             <Link to="/checkout">
               <Button variant="outline" size="sm" className="relative">
                 <ShoppingCart className="w-4 h-4" />
@@ -63,9 +82,79 @@ export function Layout({ children }: { children: ReactNode }) {
               </Button>
             </Link>
           </nav>
+
+          {/* Mobile Navigation */}
+          <div className="md:hidden flex items-center gap-2">
+            <Link to="/checkout" className="relative p-2">
+              <ShoppingCart className="w-5 h-5" />
+              {items.length > 0 && (
+                <span className="absolute top-0 right-0 bg-primary text-primary-foreground text-xs w-4 h-4 flex items-center justify-center">
+                  {items.length}
+                </span>
+              )}
+            </Link>
+
+            <Sheet open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
+              <SheetTrigger asChild>
+                <Button variant="ghost" size="sm" className="p-2">
+                  <Menu className="w-5 h-5" />
+                </Button>
+              </SheetTrigger>
+              <SheetContent side="right" className="border-l-2 border-border w-80">
+                <nav className="flex flex-col space-y-4 mt-8">
+                  <Link
+                    to="/products"
+                    onClick={() => setMobileMenuOpen(false)}
+                    className="flex items-center gap-3 px-4 py-3 hover:bg-muted rounded-lg text-lg font-medium"
+                  >
+                    <Package className="w-5 h-5" />
+                    Products
+                  </Link>
+
+                  {user ? (
+                    <>
+                      <Link
+                        to="/dashboard"
+                        onClick={() => setMobileMenuOpen(false)}
+                        className="flex items-center gap-3 px-4 py-3 hover:bg-muted rounded-lg text-lg font-medium"
+                      >
+                        Dashboard
+                      </Link>
+                      {isAdmin && (
+                        <Link
+                          to="/admin"
+                          onClick={() => setMobileMenuOpen(false)}
+                          className="flex items-center gap-3 px-4 py-3 hover:bg-muted rounded-lg text-lg font-medium"
+                        >
+                          <Settings className="w-5 h-5" />
+                          Admin
+                        </Link>
+                      )}
+                      <button
+                        onClick={handleSignOut}
+                        className="flex items-center gap-3 px-4 py-3 hover:bg-muted rounded-lg text-lg font-medium w-full text-left text-destructive"
+                      >
+                        <LogOut className="w-5 h-5" />
+                        Logout
+                      </button>
+                    </>
+                  ) : (
+                    <Link
+                      to="/auth"
+                      onClick={() => setMobileMenuOpen(false)}
+                      className="flex items-center gap-3 px-4 py-3 hover:bg-muted rounded-lg text-lg font-medium"
+                    >
+                      <User className="w-5 h-5" />
+                      Login
+                    </Link>
+                  )}
+                </nav>
+              </SheetContent>
+            </Sheet>
+          </div>
         </div>
       </header>
-      
+
       <main>{children}</main>
     </div>
   );