Extract a shared Logo component for the header and footer

The header inlined its own logo/wordmark fallback markup. Pull it into
components/logo.tsx so the footer can show the same mark, and drop the
now-unneeded 'use client' from the root layout.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01VUttSNLkLPvvR6Xf75QA1K

components/shopify/header.tsx

@@ -8,6 +8,7 @@ import SearchDialog from '@/components/shopify/search-dialog';
 import AccountMenu from '@/components/shopify/account-menu';
 import { RiShoppingBagLine, RiCloseLine, RiMenu3Line } from '@remixicon/react';
 import { Button } from '@/components/ui/button';
+import Logo from '@/components/logo';
 
 const CartIcon: React.FC = () => {
   const toggleCart = useCartStore((s) => s.toggleCart);
@@ -83,19 +84,7 @@ const Header: React.FC<HeaderProps> = ({
       <div className="max-w-screen-2xl mx-auto px-8">
         <div className="flex justify-between items-center h-14">
           {/* Logo */}
-          <Link href="/" className="flex items-center">
-            {logoUrl ? (
-              <img
-                src={logoUrl}
-                alt={storeName}
-                className="h-6 w-auto object-contain"
-              />
-            ) : (
-              <span className="text-xl font-medium tracking-tight text-foreground">
-                {storeName}
-              </span>
-            )}
-          </Link>
+          <Logo src={logoUrl} storeName={storeName} />
 
           {/* Desktop Navigation */}
           <div className="hidden md:flex items-center gap-x-8 text-sm">