migration wip

components/layout/Header.tsx

@@ -0,0 +1,60 @@
+import Link from 'next/link';
+import { Container } from '@/components/ui/Container';
+import { Button } from '@/components/ui/Button';
+import { Navigation } from './Navigation';
+import { LocaleSwitcher } from '@/components/LocaleSwitcher';
+import { MobileMenu } from './MobileMenu';
+
+interface HeaderProps {
+  locale: string;
+  siteName?: string;
+  logo?: string;
+}
+
+export function Header({ locale, siteName = 'KLZ Cables', logo }: HeaderProps) {
+  return (
+    <header className="sticky top-0 z-50 bg-white border-b border-gray-200 shadow-sm">
+      <Container maxWidth="6xl" padding="md">
+        <div className="flex items-center justify-between h-16">
+          {/* Logo and Branding */}
+          <div className="flex items-center gap-3">
+            <Link 
+              href={`/${locale}`} 
+              className="flex items-center gap-2 hover:opacity-80 transition-opacity"
+            >
+              {logo ? (
+                <img src={logo} alt={siteName} className="h-8 w-auto" />
+              ) : (
+                <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
+                  <span className="text-white font-bold text-sm">KLZ</span>
+                </div>
+              )}
+              <span className="hidden sm:block font-bold text-lg text-gray-900">
+                {siteName}
+              </span>
+            </Link>
+          </div>
+
+          {/* Desktop Navigation */}
+          <div className="hidden md:flex items-center gap-6">
+            <Navigation locale={locale} variant="header" />
+            <LocaleSwitcher />
+            <Link href={`/${locale}/contact`}>
+              <Button
+                variant="primary"
+                size="sm"
+              >
+                Contact Us
+              </Button>
+            </Link>
+          </div>
+
+          {/* Mobile Menu */}
+          <div className="flex items-center gap-2">
+            <MobileMenu locale={locale} siteName={siteName} />
+          </div>
+        </div>
+      </Container>
+    </header>
+  );
+}