wip

components/Header.tsx

@@ -1,15 +1,28 @@
+'use client';
+
 import Link from 'next/link';
 import Image from 'next/image';
-import { useTranslations, useLocale } from 'next-intl';
+import { useTranslations } from 'next-intl';
+import { usePathname } from 'next/navigation';
 
 export default function Header() {
   const t = useTranslations('Navigation');
-  const locale = useLocale();
+  const pathname = usePathname();
+  
+  // Extract locale from pathname
+  const currentLocale = pathname.split('/')[1] || 'en';
+  
+  // Function to get path for a different locale
+  const getPathForLocale = (newLocale: string) => {
+    const segments = pathname.split('/');
+    segments[1] = newLocale;
+    return segments.join('/');
+  };
 
   const menuItems = [
     { label: t('home'), href: '/' },
     { label: t('team'), href: '/team' },
-    { label: t('products'), href: '/products' }, // This might need a dropdown
+    { label: t('products'), href: '/products' },
     { label: t('blog'), href: '/blog' },
     { label: t('contact'), href: '/contact' },
   ];
@@ -17,16 +30,22 @@ export default function Header() {
   return (
     <header className="bg-white shadow-sm sticky top-0 z-50">
       <div className="container mx-auto px-4 h-20 flex items-center justify-between">
-        <Link href="/" className="flex-shrink-0">
-          {/* Use local logo if available, or text for now */}
-          <span className="text-2xl font-bold text-primary">KLZ Cables</span>
+        <Link href={`/${currentLocale}`} className="flex-shrink-0">
+          <Image 
+            src="https://klz-cables.com/wp-content/uploads/2023/11/KLZ-Logo-blau.svg" 
+            alt="KLZ Cables" 
+            width={100} 
+            height={48} 
+            className="h-12 w-auto"
+            priority
+          />
         </Link>
 
         <nav className="hidden md:flex items-center space-x-8">
           {menuItems.map((item) => (
             <Link 
               key={item.href} 
-              href={`/${locale}${item.href}`}
+              href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
               className="text-text-primary hover:text-primary font-medium transition-colors"
             >
               {item.label}
@@ -36,9 +55,19 @@ export default function Header() {
 
         <div className="flex items-center space-x-4">
           <div className="flex items-center space-x-2 text-sm font-medium">
-            <Link href="/en" className={`hover:text-primary ${locale === 'en' ? 'text-primary' : 'text-text-secondary'}`}>EN</Link>
+            <Link 
+              href={getPathForLocale('en')} 
+              className={`hover:text-primary transition-colors ${currentLocale === 'en' ? 'text-primary font-bold' : 'text-text-secondary'}`}
+            >
+              EN
+            </Link>
             <span className="text-text-light">|</span>
-            <Link href="/de" className={`hover:text-primary ${locale === 'de' ? 'text-primary' : 'text-text-secondary'}`}>DE</Link>
+            <Link 
+              href={getPathForLocale('de')} 
+              className={`hover:text-primary transition-colors ${currentLocale === 'de' ? 'text-primary font-bold' : 'text-text-secondary'}`}
+            >
+              DE
+            </Link>
           </div>
           
           {/* Mobile Menu Button (Placeholder) */}