klz-cables.com/components/Header.tsx

'use client';

import Link from 'next/link';
import Image from 'next/image';
import { useTranslations } from 'next-intl';
import { usePathname } from 'next/navigation';
import { Button } from './ui';
import { useEffect, useState } from 'react';
import { cn } from './ui';

export default function Header() {
  const t = useTranslations('Navigation');
  const pathname = usePathname();
  const [isScrolled, setIsScrolled] = useState(false);
  
  // Extract locale from pathname
  const currentLocale = pathname.split('/')[1] || 'en';
  
  // Check if homepage
  const isHomePage = pathname === `/${currentLocale}` || pathname === '/';

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 50);
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);
  
  // 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' },
    { label: t('blog'), href: '/blog' },
  ];

  const headerClass = cn(
    "fixed top-0 left-0 right-0 z-50 transition-all duration-300",
    {
      "bg-transparent": isHomePage && !isScrolled,
      "bg-white shadow-md": !isHomePage || isScrolled,
      "py-4": !isScrolled,
      "py-2": isScrolled
    }
  );

  const textColorClass = (isHomePage && !isScrolled) ? "text-white" : "text-text-primary";
  const logoSrc = (isHomePage && !isScrolled) 
    ? "/logo-white.svg"
    : "/logo-blue.svg";

  return (
    <>
      <header className={headerClass}>
        <div className="container mx-auto px-4 flex items-center justify-between">
          <Link href={`/${currentLocale}`} className="flex-shrink-0">
            <Image 
              src={logoSrc} 
              alt="KLZ Cables" 
              width={100} 
              height={100} 
              className="h-12 w-auto transition-all duration-300"
              priority
              unoptimized
            />
          </Link>

          <div className="flex items-center gap-8">
            <nav className="hidden lg:flex items-center space-x-8">
              {menuItems.map((item) => (
                <Link 
                  key={item.href} 
                  href={`/${currentLocale}${item.href === '/' ? '' : item.href}`}
                  className={cn(textColorClass, "hover:text-primary font-medium transition-colors text-lg")}
                >
                  {item.label}
                </Link>
              ))}
            </nav>

            <div className={cn("hidden lg:flex items-center space-x-4", textColorClass)}>
              <div className="flex items-center space-x-2 text-sm font-medium">
                <Link 
                  href={getPathForLocale('en')} 
                  className={`hover:text-primary transition-colors flex items-center gap-1 ${currentLocale === 'en' ? 'text-primary font-bold' : 'opacity-80'}`}
                >
                  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAMAAABBPP0LAAAAmVBMVEViZsViZMJiYrf9gnL8eWrlYkjgYkjZYkj8/PujwPybvPz4+PetraBEgfo+fvo3efkydfkqcvj8Y2T8UlL8Q0P8MzP9k4Hz8/Lu7u4DdPj9/VrKysI9fPoDc/EAZ7z7IiLHYkjp6ekCcOTk5OIASbfY/v21takAJrT5Dg6sYkjc3Nn94t2RkYD+y8KeYkjs/v7l5fz0dF22YkjWvcOLAAAAgElEQVR4AR2KNULFQBgGZ5J13KGGKvc/Cw1uPe62eb9+Jr1EUBFHSgxxjP2Eca6AfUSfVlUfBvm1Ui1bqafctqMndNkXpb01h5TLx4b6TIXgwOCHfjv+/Pz+5vPRw7txGWT2h6yO0/GaYltIp5PT1dEpLNPL/SdWjYjAAZtvRPgHJX4Xio+DSrkAAAAASUVORK5CYII=" alt="English" width="16" height="11" />
                </Link>
                <Link 
                  href={getPathForLocale('de')} 
                  className={`hover:text-primary transition-colors flex items-center gap-1 ${currentLocale === 'de' ? 'text-primary font-bold' : 'opacity-80'}`}
                >
                  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAIAAAD5gJpuAAABLElEQVR4AY2QgUZEQRSGz9ydmzbYkBWABBJYABHEFhJ6m0WP0DMEQNIr9AKrN8ne2Tt3Zs7MOdOZmRBEv+v34Tvub9R6fdNlAzU+snSME/wdjbjbbJ6EiEg6BA8102QbjKNpoMzw8v6qD/sOALbbT2MC1NgaAWOKOgxf5czY+4dbAX2G/THzcozLrvPV85IQyqVz0rvg2p9Pei4HjzSsiFbV4JgyhhxCjpGdZ0RhdikLB9/b8Qig7MkpSovR7Cp59q6CazaNFiTt4J82o6uvdMVwTsztKTXZod4jgOJJuqNAjFyGrBR8gM6XwKfIC4KanBSTZ0rClKh08D9DFh3egW7ebH7NcRDQWrz9rM2Ne+mDOXB2mZJ8agL19nwxR2iZXGm1gDbQKhDjd4yHb2oW/KR8xHicAAAAAElFTkSuQmCC" alt="Deutsch" width="16" height="11" />
                </Link>
              </div>
              
              <Button 
                href={`/${currentLocale}/contact`}
                variant="outline" 
                className={cn(
                  "rounded-full px-6 transition-colors",
                  isHomePage && !isScrolled 
                    ? "border-white text-white hover:bg-white hover:text-black" 
                    : "border-primary text-primary hover:bg-primary hover:text-white"
                )}
              >
                {t('contact')}
              </Button>
            </div>

            {/* Mobile Menu Button */}
            <button className={cn("lg:hidden p-2", textColorClass)}>
              <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
              </svg>
            </button>
          </div>
        </div>
      </header>
      {!isHomePage && <div className="h-24 md:h-32" />}
    </>
  );
}